Lime JS DOM Rendering

WIth Lime JS, you can choose whether you want HTML or Canvas rendering; this means that the game can be built as elements in the DOM, or using the canvas instead.  It’s very simple to make this change, which can be done at the director or even layer level, using the code: setRenderer(lime.Renderer.CANVAS).  Lime JS has also recently added WebGL support, and you can find more information about it on their site.

When rendering to the DOM, internally LimeJS renders some HTML elements.  I’ve attached a snapshot of the DOM structure to give you an idea of what’s going on; however, first, let’s revisit the hierarchy of objects within LimeJS in order to make this discussion more meaningful.

At the root is the lime.Director.  A director uses a scene to draw to the screen, which a screen is made up of zero to many layers, and other objects.  Most, if not all, objects inherit from lime.Node, but certain objects provide more meaning.  The lime.GlossyButton utility renders a nice rounded corner button, whereas lime.Sprite represents a sprite object that contains rendered elements within.  If we were to draw a hieararchy of objects, it may look like:

lime.Director
    lime.Scene
        lime.Layer
            lime.Sprite

The DOM renderer renders the following hierarchy to the client as DIV elements with given CSS classes, such as the following.

<div class=”lime-director” style=”width: 800px; height: 600px; -moz-transform-origin: 0% 0%; -moz-transform: scale(0.1, 0.1) translate(3560px, 0px) scale(0.71, 0.71) scale(10, 10); opacity: 1; display: block;”>

<div class=”lime-scene” style=”display: block; width: 800px; height: 600px; -moz-transform-origin: 0% 0%; -moz-transform: scale(0.1, 0.1) translate(0px, 0px) scale(1, 1) scale(10, 10); opacity: 1;”>

<div class=”lime-layer” style=”width: 0px; height: 0px; -moz-transform-origin: 50% 50%; -moz-transform: scale(0.1, 0.1) translate(1000px, 1000px) scale(1, 1) scale(10, 10); opacity: 1; display: block;”>

Notice each class has a CSS class, but also applies certain styles inline.  The sprite objects rendered to to the UI also render similarly.  The following HTML below is used to render one letter in view.

<div style=”width: 0px; height: 0px; -moz-transform-origin: 50% 50%; -moz-transform: scale(0.1, 0.1) translate(1000px, 0px) scale(1, 1) scale(10, 10); opacity: 1; display: block; border-width: 0px;”>

<div style=”width: 40px; height: 40px; -moz-transform-origin: 50% 50%; -moz-transform: scale(0.1, 0.1) translate(-200px, -200px) scale(1, 1) scale(10, 10); opacity: 1; display: block; background: none repeat scroll 0% 0% rgba(255, 255, 255, 0); border-width: 0px; line-height: 1.15; padding: 0px; color: black; font-family: Arial; font-size: 30px; font-weight: normal; text-align: center;”>G</div>

</div>

That is quite an amount of HTML to use for one letter, but it’s needed for applying certain styles that are needed to make some of the transitional capabilities (animations, etc.) work.  Additionally, LimeJS renders attributes specific to the browser it’s being rendered for.  For instance, notice in the first example the reference to -moz-transform; the browser being used was FireFox 14.0.1.  When I switch to chrome, we see some references to -webkit-transform and other related properties, as in this partial snippet below

<div style=”. . .  -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.1, 0.1) translate(500px, 0px) scale(1, 1) scale(10, 10); . . .

Note that it’s not important to know how the internals work to build your game, but it’s always a good idea to know what’s going on inside any program so that you have an idea of what to do when you run into errors, glitches, or performance problems.  I hope this gave a slight glimpse into the DOM rendering capability.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s