Game Development Reference
In-Depth Information
MOAISim.openWindow("Hello World Window", 320,480)
Then we need to create a viewport. Since Moai uses OpenGL, to create a drawing surface, we need
to set the size of the surface that we want to use for rendering. This rectangular area is called a
viewport
. The viewport needs to be created and set before we can start rendering. Here's how:
viewport = MOAIViewport.new()
viewport:setSize(320,480)
viewport:setScale(320,480)
We can set the size to a specific size or simply use the entire surface by not passing any parameters
to the
setSize
function. All rendering is based on units; these units are not necessarily the same as
pixels. However, you can set these units using the
setScale
function. These units define the size of
the pixels rendered by calculating them based on the size of the viewport and the scale setting. The
size of the pixel is determined with the following two equations:
pixelsizeX = viewportSizeWidth / viewportScaleX
pixelsizeY = viewportSizeHeight / viewportScaleY
A size of 320×480 and a scale of 320, 480 sets the pixel size to 1. Setting a scale of 10, 15 with a size
of 320×480 would give a pixel size of 32×32. The same scale of 10, 15 on a surface of size 640×960
would give a pixel size of 64×64. In this case, you would see the display stretch to fill in the space.
The coordinate system in Moai is organized with the origin (0,0) at the center of the screen. The y-axis
is positive moving up the screen. A point with a value of 100 is higher on the screen than a point
with a lower value like 20. You can invert the axis to have a negative scale by setting the scale with a
negative value:
viewport:setScale(320, -480)
The viewport can also be changed using the
setOffset
function. The offset is set in a projection
space that is set up to be 2×2. Setting the offset as −1, 1 moves the projection system one half to
the left and one half up. This will in effect place the origin at the upper-left corner of the screen.
viewport:setOffset(-1,1)
Moai does not render any sprite, image, or a display object directly; rather, these are rendered onto a
layer
. Several layers can be stacked on top of each other. Each layer needs to be associated with a
viewport.
layer = MOAILayer2D.new()
layer:setViewport(viewport)
The layer then needs to be pushed onto a render stack before it can be rendered.
MOAISim.pushRenderPass(layer)
Once we've set up the layer for rendering, we need a display object to display on this layer. In Moai,
a scene graph object is called a
prop
; this is a combination of the location on the surface and the
