I’ve just pushed out a new build of Leonardo Sketch 1.1. The big feature in this build is dynamic bitmap text. It might be a bit confusing, so allow me to explain.
When you draw something in Leo you have a choice of export formats. If you export to plain HTML then all graphics (except text) will be turned into images and positioned on the html page with css. If you export to HTML Amino Canvas then it will generate Javascript scene graph using Amino. This will create an object for each shape in your scene. The objects are drawn to the webpage using Canvas, the HTML 5 2d drawing API. From here you can customize the graphics in code, such as adding animation and event handlers.
Most importantly, if you give your shape a name in Leo, then that name will become a JavaScript variable in the generated code. If you change your graphics and export again then Leo will overwrite the generated code, but not the index.html so you can safely put your customizations there. Because the variable name won’t change, any behavior you add in code will still work after a graphics update. The upshot is that you can easily mix graphics and code. Do the graphics in Leo, write your code in your favorite editor. Update your graphics whenever you want, your code will still work.
But wait, there’s more.
Sometimes it would be nice to cache the graphics. Suppose you draw a very complicated group composed of 20 shapes in Leo. If you only want to move them as a group then you don’t really need all of those shapes represented as code. You could just have a single bitmap that the shapes were drawn in. You can do this sort of thing in Photoshop but it’s a pain to manage. Leo makes it super easy. Just check the cache as image setting in the Properties sidebar for any group you want cached. When Leo generates the JavaScript code it will pre-render those graphics as an image, then load that into the JS as an ImageView.
But wait, there’s even more!
Text effects like shadows and gradients can be slow in some canvas implementations. Some don’t support drop shadows at all. This is another case where you might want to render into an image. This will preserve your cool effects. But what if you want to change words in the text object at runtime? A static bitmap won’t help with that. Or will it?!
I’ve just updated Leo and Amino to support the BitmapText object. If you select use bitmap text for your text in the Properties sidebar then Leo will export it to this new type of text. It will generate a single bitmap containing every character of the alphabet, rendered using your custom text effects. It will load this image, along with font metrics, into the BitmapText JavaScript object. At runtime Amino will draw text using tiny slices out of the source bitmap, letting you draw any words you want and still have them rendered with your cool effects.
You can download the latest beta build of Leonardo Sketch here.
More info on Amino is here.
Here’s a few examples to whet your appetite.
