Guide complete + Renderers demo

4 years ago

We have finished all chapters of the initial Programming guide. If you want to know how to use LimeJS this is a place to start. Follow it through chapter by chapter and try out the solutions described on your own hello-world project. If you get stuck don’t be shy to ask for help.

The last chapter, added just couple of minutes ago, was about different rendering engines LimeJS supports. If you don’t know what that means go read more about it from here. Basically it means that you can use the same code to draw your elements with CSS or with Canvas. In your game you can change the rendering method with one function call depending on your content and the device you are running on.

This is a simple demo of different Renderers in action. Press Alt-D to switch between Normal and Debug mode to see what’s going on under the hood. In Debug mode all DOM elements have red border. You will see first row consists of many DIV elements while the other is only one Canvas element.

This is the basic code that does the double rendering. It creates two layers, uses same method to add children to the layers. Then moves one layer below the other and sets it renderer to Canvas.

1
2
3
4
5
6
var layer1 = makeLayerOfStuff();
scene.appendChild(layer1);

var layer2 = makeLayerOfStuff().setPosition(0,180).
    setRenderer(lime.Renderer.CANVAS);
scene.appendChild(layer2);

You can view the full source of this demo here.