Limejs Guide 2

# Layout and nodes

# # resizing and azimuth changes

In Limejs, it is easy to support varying screen sizes and viewport sizes, all automatically tuned. In the director's construct (or in the *setsize* method), but this does not need to fit into the actual screen size. The actual size of your game is obtained from the DOM elements of the container where you play the game. If the size of the container object changes, your game resizes to fill the container. Note that while your game's proportions change, the coordinates of your game will still reflect the size of the stage you make so you can completely ignore it.

# # Full Screen game

The default project template initializes the director directly inside the BODY element, which makes it easier to make a game that is always in full-screen mode-which is great for mobile Web applications, but not necessary. You can add a fixed-size div element and use it as a parent container, just like a flash game in an HTML page.

# # Nodes

Node is the most important element in Limejs because it is the basic object that displays all objects in the object tree structure. In fact, even the Director,scene and layer classes inherit the node class.

The node class defines many common features for display objects. Note that all set-valued functions return objects themselves, so they can be grouped together, and all the set values have better peers. Everything is very similar to the DOM element tree or the Flash display object tree.

#! Javascript
var parent = new Lime. Node ();
var child = new Lime. Node ();
Parent.appendchild (child);

# # # Size

#! Javascript
var node = new Lime. Node (). SetSize (50,50);

var size = Node.getsize (); Returns object
size.width+=100;
Node.setsize (size);

Node.setsize (New Goog.math.Size (100,50));

# # Position

#! Javascript
var node = new Lime. Node (). SetPosition (200,100);

var pos = node.getposition (); Return object
Pos.y = 150;
Node.setposition (POS);

Node.setposition (New Goog.math.Coordinate (50,50));

# # # Scale

Scale changes the size of the object by a factor. Notice that the position of the element has not changed.

#! Javascript
var node = new Lime. Node (). Setscale ();
Node.setscale (. 7); Scale in both axis
Node.setscale (new GOOG.MATH.VEC2);

# # Rotation

The rotation of the object is defined as an angle.

#! Javascript
var node = new Lime. Node (). Setrotation (90);

# # Quality

Setting the object's mass value causes the object to shrink to a smaller size, and then scales to the initial size of the entire element. In some cases this allows for lower quality to facilitate performance. Be careful not to make the quality value more than 1, it can not become better.

#! Javascript
Node.setquality (. 5);

# # AutoResize

AutoResize defines how the size of an object changes when the parent object changes. Although there is no percentage unit size in Limejs, this allows you to get the same results in a powerful way. Field Lime. AutoResize defines properties that are different and rich in variability. You get the combination you need by combining the bit masking properties of these ' setautoresize () ' methods. The same approach is also used in the iOS Uikit development framework.

#! Javascript
Box.setautoresize (lime. Autoresize.width | Lime. Autoresize.height);

Footer.setautoresize (lime. Autoresize.top);

# # Anchor Point

By default, all object locations in HTML are relative to the upper-left corner of it, which is inappropriate in the game. There are many objects that have very important points in other places. Node's method ' Setanchorpoint (VEC2) ' allows you to set any point as a relative datum point. The value of the vector is between 0-1 and (0,0) refers to the upper-left corner, which refers to the lower-right corner. By default, all objects are positioned in the middle. Anchor point is used to locate the element and his child elements and rotate.

#! Javascript
Box.setanchorpoint (0,0);

Circle.setanchorpoint (. 5,.5); Also default value

# # Coordinate transformations

In some cases, you might want to set the relative position between elements, which is not as easy as setting a location property from a different parent when the objects are not on the same layer. To solve this problem, lime provides a function to transform the coordinate space from one node to another

Box.localtoscreen (coord)-converts local coordinate to screen coordinate.
Box.screentolocal (coord)-converts screen coordinate to local nodes space.
Box.localtonode (Coord,node)-converts local coordinate to any other nodes coordinate space.

Limejs Guide 2