Creating a clickable grid ?

craynerd

Hello, I`m a school teacher (Chemistry not computing) and have recently purchased a number of raspberry pi`s. The 6th form (older students) have got really into it and we have been working together in python to actually make a grid game they created. It works great and is a really lovely game but in python, looks terrible and is difficult to improve and make better and way too hard to move to android or other platforms. A friend recommended gideros and I`ve been playing with it all day but struggling.
I feel we can start coding the main game ideas but we can not create a clickable grid in which to base the game! The game will use a variable size grid and I just want to be able to click a square and it goes blue then next player clicks on a square and it goes red.
In Pygame we setup the grid defining pixel sizes but I`ve been told that using gideros I should be using "box shape" sprites.
I`m/we`re really stuck and would really appreciate any help just getting this off the ground. I`m sure when the "board" is created we will be able to code the rest of the game structure.

Any help much appreciated.

Chris

aditya

drawRect was posted by @hgvyas123

function drawRect(left,top,width,height) local shape = Shape.new() shape:setFillStyle(Shape.SOLID, 0xff0000, 0.8) shape:beginPath() shape:moveTo(left,top) shape:lineTo(left + width, top) shape:lineTo(left + width, top+height) shape:lineTo(left, top+height)   shape:closePath() shape:endPath() return shape end   function changeColor(event) local t = event:getTarget() if(t:hitTestPoint(event.x, event.y)) then t:setColorTransform(0, 1, 0) end end   local tx = 0 local ty = 0 local s = 50 local temp   local gap = 5 --Change the gap between the nodes   local cols = 5 --Number of columns in the grid local totalNodes = 50 --Total number of nodes in the grid   for i=1,totalNodes do temp = drawRect(tx,ty,s,s) stage:addChild(temp) tx = tx + s + gap temp:addEventListener(Event.MOUSE_DOWN, changeColor)   if(i%cols == 0) then ty = ty + s + gap tx = 0 end end

hgvyas123

function drawRect(left,top,width,height) local shape = Shape.new() shape:setFillStyle(Shape.SOLID, 0xffffff, 0.5) shape:beginPath() shape:moveTo(0,0) shape:lineTo(width, 0) shape:lineTo(width, height) shape:lineTo(0, height)   shape:closePath() shape:endPath() shape:setPosition(left,top) return shape end

this one should be the right one

OZApps

@craynerd,
Interesting name, does it come from the CRAY computers?

Anyways on your question, you will get plenty of different ways to do this, here's mine

You can use a bitmap, and color it white.
Now set that up on the screen in the grid you want

tileName = "tile.png" -- use whatever you saved your tile as rows = 10 -- use whatever height you want cols = 10 -- use whatever width you want tileWd = 50 -- the width in pixels of your tileName file tileHt = 50 -- the height in pixels of your tileName file squares = {} -- this will hold all the tiles in this grid   local xP, yP = 0, 0   for i = 1, rows do for j = 1, cols do local square = Bitmap.new(Texture.new(tileName)) stage:addChild(square) squares["r_" .. i .. "_c_" .. j] = square square:setPosition(xP, yP)   square.tapped = 0 -- used to handle the tap 1=blue, 2=red square.row = i -- you can use this for easy identification square.col = j -- you can use this for easy identification   xP = xP + tileWd end yP = yP + tileHt xP = 0 end

You can then setup the touch handler on each of the squares, and when you detect a touch on that particular square, you can set it as clicked once

function setAsClicked(row, col) local cellIndex = "r_" .. row .. "_c_" .. col local theSquare = squares[cellIndex] local nTap = theSquare.tapped + 1 theSquare.tapped = nTap   if nTap == 1 then theSquare:setColorTransform(0, 0, 1) -- Tint to Blue elseif nTap == 2 then theSquare:setColorTransform(1, 0, 0) -- Tint to Red end end

You can also use Shapes and draw the rectangles if you so want. Here's a sample of using shapes to create a 3D tile set.



Theory about Grids
You can also look at an alternative way or some theory about working with grids and lua in my book Learn Lua for iOS Game Development on Page 52 under the section "Using a Grid in a Game"