Limejs Guide 6

# Drawing Engine


One of the most important features of Limejs is the support for different rendering engines. Maybe it shouldn't be called Limejs a canvas game frame, because canvas is just one of the lower technologies it supports. Lower methods with drawing capabilities are concentrated in the namespace *lime. renderer*. Different renderings can switch between any node at any time by means of the method *setrenderer (renderer) *. The rendering supported in Limejs now has *lime. Renderer.dom* and *lime. renderer.canvas*.


# # Why do you need a lot of rendering


Perhaps your first idea is that canvas is so cool and that it can be done with everything. Maybe one day we'll think so, but we're not at least now. Canvas is good, and it allows you to do almost anything, but because it is based on bitmaps, it is inherently unsuitable for everything. You may have seen a more appropriate comparison between SVG and canvas, and it is possible for Dom and canvas. Now there is no stable browser with hardware-accelerated canvas tools. In mobile devices, this is important because the CPU on the mobile device is not as fast as the PC.


There are many innovative technologies in HTML5, and canvas is just one of them. Rounding, morphing, moving, and gradients are some of the cool things that HTML5 add to the DOM. Each device/browser has a little different tool (performance wise, and sometimes API Wise). This is really a good thing because it helps the Web page move faster and keeps us from being limited to some fixed stutter. But when you want to develop your game for many devices and the time limit is coming up, you need to worry about something. For example, the current iOS4.2 version has a very slow tool for canvas elements, and it has GPU-accelerated CSS morphing. On the other hand, now the non-beta version of the PC browser does not have hardware-accelerated CSS distortion, but because they have a fast CPU, they can use canvas to quickly paint. Because CSS morphing and canvas are very different techniques, if you want to support two of them, you may have to do two games specifically. Fortunately you have limejs to do it with a line.


# # Lime. Renderer.dom


The DOM renderer renders node, which paints like a DIV element, and changes their CSS properties through a script to make them look like they want the effect. The DOM renderer is the default renderer for all elements that support it.


You should often use the DOM renderer when:


-On iOS
-node tree is relatively simple and not deep
-Your elements often change/animate
-Your elements occupy most of the screen


Instances of director and scene always use the DOM renderer and cannot be switched to canvas.


# # Lime. Renderer.canvas


The canvas renderer makes a single canvas element and uses the canvas painting method to draw its 2D content. If the elements have child elements, they will be drawn into the same canvas. If any element changes in the next frame, the entire canvas will be redrawn again. If node is rendered in the canvas renderer, you cannot join the pure DOM element as a child element in this node.


You should always use the canvas renderer when:


-You have a relatively stable tree
-The result of Dom renderer is unsatisfactory
-You can see multiple groups of elements changing together often
-Your device has a fast CPU or browser with hardware-accelerated canvas tools
-If you use IE9 beta (this does not have CSS variants)


Polygons are always drawn with the canvas renderer, and the behavior cannot be made with CSS.




# # Future Compatibility


There is a point about why this method is important. The Web page is moving fast, and there is no way to see what will happen in recent years. There may be better technology than it is now. Without looking at this level, we can implement them when they arrive. The game developer does not need to change anything, and users who still use the old version of the browser/device can continue to use the old version.


We have decided that there will be a WebGL renderer in the future. It will be particularly similar to the canvas tool, but things will be drawn as WebGL painting content. All the difficult coloring materials will be abandoned by you. You only need to call the *setrenderer () * method for your current element. Because development is open to everyone, if necessary, some people can make an SVG renderer or even VML.

Limejs Guide 6