I'm trying to create a grid for a game using the Moai SDK. Each tile in the grid should have the ability to be filled with a color.
So actually I have two questions:
Thanks
What is the best way to build a grid using Moai
Moai has an object for creating grids: MOAIGrid. Using the framework's jargon, you create a grid and give it a deck. Then you attach it to a prop and add the prop to a layer. (That layer also needs a viewport which is attached to a window.)
How can I fill each tile individually with a color
A Moai deck is an image or collection of images. If you wanted your tiles to be different colors then you would create a deck with images of the square in those colors.
This code will create a 4x4 grid in a window:
-- Open the window and create a viewport
MOAISim.openWindow("Example", 512, 512)
viewport = MOAIViewport.new()
viewport:setSize(512, 512)
viewport:setScale(512, 512)
-- Create a layer
layer = MOAILayer2D.new()
layer:setViewport(viewport)
MOAISim.pushRenderPass(layer)
-- Create a 4x4 grid of 64x64px squares
grid = MOAIGrid.new()
grid:initGrid(4, 4, 64)
grid:setRow(1, 1, 1, 1, 1)
grid:setRow(2, 1, 1, 1, 1)
grid:setRow(3, 1, 1, 1, 1)
grid:setRow(4, 1, 1, 1, 1)
-- Load the image file
deck = MOAITileDeck2D.new()
deck:setTexture("squares.png")
deck:setSize(2, 2)
-- Make a prop with that grid and image set
prop = MOAIProp2D.new()
prop:setDeck(deck)
prop:setGrid(grid)
prop:setLoc(-256, -256)
-- Add it to the layer so it will be rendered
layer:insertProp(prop)
After that, if you want to change the color of a specific cell, use the
setTile method to choose which item in the deck that cell uses.
-- Change the color of cell 1,1 to the second item in the deck
grid:setTile(1, 1, 2)
Edited for entire code.
MOAISim.openWindow ( "test", 320, 480 )
viewport = MOAIViewport.new ()
viewport:setSize ( 320, 480 )
viewport:setScale ( 320, -480 )
viewport:setOffset(-1, 1)
layer = MOAILayer2D.new ()
layer:setViewport ( viewport )
MOAISim.pushRenderPass ( layer )
function createRect(x1,y1,x2,y2, R,G,B)
local function onDraw()
MOAIGfxDevice.setPenColor(R,G,B)
MOAIDraw.fillRect(x1,y1,x1+x2,y1+y2) --This is the rect drawing line.
end
local gfxQuad = MOAIScriptDeck.new()
gfxQuad:setRect(x1,y1,x2,y2)
gfxQuad:setDrawCallback(onDraw)
local prop = MOAIProp2D.new()
prop:setDeck(gfxQuad)
layer:insertProp ( prop )
return prop
end
mapmaxx = 10
mapmaxy = 10
map={} --array to store map
for x = 1, mapmaxx do
map[x] ={}
for y = 1, mapmaxy do
map[x][y] = createRect(x*20, y*20, 10, 10, x,y,x/y)
end
end`
You should check out Rapanui, a high level API for Moai (where I paraphrased this code from)
Building a grid is really just drawing a heap of squares in a grid formation. I don't know Moai's api; but I expect you can just drawSquare(x,y,width,height,color)
so you have:
local width = 800
local height = 600
local color = { red=1, blue=1, green=1 }
for x=1 , 100 do
for y=1, 100 do
screen:drawSquare((x-1)*width,(y-1)*height,width,height,color)
end
end
