Rockete and libRocket

I continue development of the Rockete: libRocket visual editor. Repository of the editor is available at GitHub here: []() and my modifications to libRocket I use in the editor can be found here: []().

Current changelog:

  1. New project management options: the project can now be created, saved and open. It contains informations about paths and cutting info for every image.
  2. 9-patch creation support.
  3. New texture atlas preview: images and sprites from atlas can be preview now.
  4. New fonts preview: read fonts has a preview panel now.
  5. Testing panel for preview in different resolutions - easily switch between different resolutions.
  6. Texture atlas support: if along with a texture, there is a texture info file (in my own format or cocos2d plist) it is used and you can see all elements of the atlas in the file tree view. Additionally, for every atlas, an rcss file is created with proper decorators, with decorators info, eg: *** /* cutting: 4|4|4|4 */ .scroll1back { background-decorator: tiled-box; background-decorator-id: scroll1back; background-bottom-left-image: help_atlas_0.png 857px 643px 861px 647px; background-bottom-image: help_atlas_0.png 861px 643px 883px 647px; background-bottom-right-image: help_atlas_0.png 883px 643px 887px 647px; background-left-image: help_atlas_0.png 857px 80px 861px 643px; background-center-image: help_atlas_0.png 861px 80px 883px 643px; background-right-image: help_atlas_0.png 883px 80px 887px 643px; background-top-left-image: help_atlas_0.png 857px 76px 861px 80px; background-top-image: help_atlas_0.png 861px 76px 883px 80px; background-top-right-image: help_atlas_0.png 883px 76px 887px 80px; }

During the development of the editor, I added a small extension to libRocket: you may reuse definition of decorator using new type of decorator “alias” and new property background-decorator-id, eg:

background-decorator: alias background-decorator-id: scroll1back;

And image decorator has additional attribute: scaling, defining how the image should be scaled within container:

icon-decorator: image; icon-image-scaling: ignore|fill|fit|center

Ignore: current solution, image is stretch to fill the whole area. Fill: fill the whole container’s area and keep aspect ratio of the image. Fit: fit the whole image inside the container. Center: place the image in the center of the container and crop the image if its bigger.

It is in my libRocket repository: []()

comments powered by Disqus