How to generate code for Layout (Level Editor)

[saurabh47g]

Hello Guys,

I have been working on Level editor.I have made a basic one. I have attached a video of it.

please, can you tell me How to generate code for Layout created in the editor? 

Is there any basic guidance tutorials for it

Thanks

[roaminggamer]

Video link is missing.

[saurabh47g]

https://drive.google.com/open?id=12IshG-_IUdjAhX4LAi3Ad_FBDX0uz0mT

[roaminggamer]

So, you’ve got a basic object placer working and you want some input on how to save and restore the objects you just placed, correct?

Assumptions

1. You’re tracking the ‘created objects’ in a table.  In my example below I’ll assume the name of this table is ‘levelObjects’

2. You know how to encode a table to JSON and save it (or you are willing to use someone else’s code to do it.)

3. You understand that there is no one-size fits all solution to saving and restoring ‘level’ data.  It totally depends on how you wrote your game, how many display groups you have, how objects are layered, … the list just goes on and on.

4. You konw that, you cannot save and restore game objects directly.

Basic Approach - Creation

You cannot directly save a display object to a file.  You must instead save information about that object to your file that will allow you to remake it later.  

This means, you need to add fields to the object that identify it’s type, color, <x,y> position, etc.  i.e. Anything you want to be able to restore.

(Note: I am not using Lua proxy objects or classes in this example, but instead using display objects directly;  Using classes is fine too, but I’m not going to discuss that here.)

Here are some basic object builders for this example:

local levelObjects = {} local function newCircle( x, y, radius, color ) local tmp = display.newCircle( x, y, radius ) tmp:setFillColor(unpack( color ) ) tmp.myColor = color tmp.myType = "circle" tmp.mySize = radius levelObjects[#levelObjects+1] = tmp return tmp end local function newSquare( x, y, size, color ) local tmp = display.newCircle( x, y, size, size ) tmp:setFillColor(unpack( color ) ) tmp.myColor = color tmp.myType = "square" tmp.mySize = size levelObjects[#levelObjects+1] = tmp return tmp end 

Basic Approach - Saving

In this example, I’m using SSK   table.* extensions to save any objects tracked in ‘levelObjects’

local function saveLevel( levelTable, fileName ) local toSave = {} for i = 1, #levelTable do local rec = {} rec.x = levelTable[i].x rec.y = levelTable[i].y rec.myType = levelTable[i].myType rec.myColor = levelTable[i].myColor rec.mySize = levelTable[i].mySize toSave[i] = rec end table.save( toSave, fileName ) end

Basic Approach - Restoring

Note: I’m assuming you’re restoring to a clean scene with no prior objects already loaded.

local function restore( fileName ) local toRestore = table.load( fileName ) if( not toRestore ) then return end for i = 1, #toRestore do local rec = toRestore[i] if( rec.myType == "circle" ) then newCircle( rec.x, rec.y, rec.mySize, rec.myColor ) elseif( rec.myType == "square} ) then newCircle( rec.x, rec.y, rec.mySize, rec.myColor ) end end end

[saurabh47g]

Thank you so much.I got it.
In that level editor, I also want to create objects by joining the dots in the grid as shown in the picture.

I have used this function to create a grid.

but due to the small size of dots.its not getting tapped by the fingers.

can we increase its radius of touch?

function createGrid( ) for i=1, lx do for j=1,ly do local noX = i\*25 local noY = j\*25 local temp = display.newCircle( noX, noY, 5) table.insert( dotTable, temp ) temp.name= i+j temp : addEventListener("tap",setCoordinate) end end end

[roaminggamer]

You could make the dots with an image that has a wide transparent area around the dot.

i.e. The visible dot in your image file can be 10x10 while the image file itself can be 50x50 or any other size that works for you.

The whole image will be touchable.

[saurabh47g]

I have solved this problem by using Runtime Touch EventListener

you watch here the video

https://drive.google.com/open?id=1pdndZ3JTvv0MIdyJ5rv7PGpQLsfQKeog

now I want to join these dots like pattern lock on the Android device 

to create new objects of different shapes.

function createGrid( ) for i=1, lx do local yTab ={} for j=1,ly do local noX = i\*25 local noY = j\*25 local temp = display.newCircle( noX, noY, 5) table.insert( yTab, temp ) temp.name= i+j --temp : addEventListener("tap",setCoordinate) end table.insert(dotTable,yTab ) end end local function myTouchListener( event ) if ( event.phase == "began" ) then -- Code executed when the button is touched local xCo = math.ceil(event.x/25) local yCo = math.ceil(event.y/25) if(yCo\>=1 and yCo\<=17 and xCo\>=1 and xCo \<= 15) then --print( "touch location in content coordinates = " ..xCo .. "," .. yCo) dotTable[xCo][yCo]:setFillColor( 0.5 ) myText.text = xCo .. "," .. yCo end print( "object touched = " .. tostring(xBegin) ) -- "event.target" is the touched object elseif ( event.phase == "moved" ) then -- Code executed when the touch is moved over the object local xCo = math.ceil(event.x/25) local yCo = math.ceil(event.y/25) if(yCo\>=1 and yCo\<=17 and xCo\>=1 and xCo \<= 15) then --print( "touch location in content coordinates = " ..xCo .. "," .. yCo) dotTable[xCo][yCo]:setFillColor( 0.5 ) myText.text = xCo .. "," .. yCo end elseif ( event.phase == "ended" ) then -- Code executed when the touch lifts off the object print( "touch ended on object " .. tostring(event.target) ) -- trasition.to(box,{time=1000,x=event.x,y=event.y}) end return true -- Prevents tap/touch propagation to underlying objects end Runtime : addEventListener("touch",myTouchListener)

[anon63346430]

You will need to store the swipe pattern and then compare that to the predefined “unlock” swipe pattern.

You can do this by storing a pattern that is x + (y*12) an doing a compare of the indices.  

[saurabh47g]

@anon63346430

You will need to store the swipe pattern and then compare that to the predefined “unlock” swipe pattern.

I just want the line which extends as shown.

[philipp3]

@saurabh47g

I just want the line which extends as shown.

1. e.phase = “start” >>> Find the closest dot to the start touch

2. e.phase = “moved” >>> Find the closest dot to the current touch. If it is another dot than the start dot, draw a line between the start dot and the current dot (and remove the last line if you drew one)

3. e.phase = “ended” >>> Save the line that was created. If you want to make a polygon, the last dot will be your new start dot for the next touch event.

You can repeat that until you hit the first dot again. Then you can create a polygon out of the values.

[saurabh47g]

I have successfully created a simple editor which creates objects by joining the Dots 

But after adding the Body in Physics engines the Outlines(or Object) is getting outside as you can see.

[saurabh47g]

[sharedmedia=core:attachments:7208]

why is body(Outlines) getting created at a different position when added in the physics engine?

I think default co-ordinate for the body in physics engine is 0,0

can we use anchor while adding body in the physics engine 

local poly = display.newPolygon(dotCollect[1],dotCollect[2], dotCollect) poly:addEventListener("touch",dragObject) local offset\_x, offset\_y = offset\_xy(dotCollect) poly.x = offset\_x poly.y = offset\_y physics.addBody( poly,"static",{shape=dotCollect} )

dotCollect stores vertices of the polygon .

here is code to get the offset_xy of polygon

local function offset\_xy( t ) local table\_sort = table.sort local coordinatesX, coordinatesY = {}, {} local minX, maxX, minY, maxY local function compare( a, b ) return a \> b end for i = 1, #t\*0.5 do coordinatesY[i] = t[i\*2] end for i = 1, #t\*0.5 do coordinatesX[i] = t[i\*2-1] end table\_sort( coordinatesX, compare ) maxX = coordinatesX[1] minX = coordinatesX[#coordinatesX] table\_sort( coordinatesY, compare ) maxY = coordinatesY[1] minY = coordinatesY[#coordinatesY] local offset\_x = (minX+maxX)\*0.5 local offset\_y = (minY+maxY)\*0.5 return offset\_x, offset\_y end

thanks

[roaminggamer]

I don’t think you can use ‘dotCollect’ as the shape of the body.
 
You need to change the offset of those points first.
 
i.e. Something like this:

local poly = display.newPolygon(dotCollect[1],dotCollect[2], dotCollect) poly:addEventListener("touch",dragObject) local offset\_x, offset\_y = offset\_xy(dotCollect) poly.x = offset\_x poly.y = offset\_y local shape = {} for i = 1, #dotCollect, 2 do shape[i] = dotCollect[i] - offset\_x shape[i+1] = dotCollect[i+1] - offset\_y end physics.addBody( poly,"static",{shape=shape} )

PS - The body shape needs to be relative to the object’s <0,0> point.

PPS - Body shape vertices are in object space, not world space. Whereas, the polygon vertices are in world space.

[saurabh47g]

Thanks, man.it’s working now

[roaminggamer]

Video link is missing.

[saurabh47g]

https://drive.google.com/open?id=12IshG-_IUdjAhX4LAi3Ad_FBDX0uz0mT

[roaminggamer]

So, you’ve got a basic object placer working and you want some input on how to save and restore the objects you just placed, correct?

Assumptions

1. You’re tracking the ‘created objects’ in a table.  In my example below I’ll assume the name of this table is ‘levelObjects’

2. You know how to encode a table to JSON and save it (or you are willing to use someone else’s code to do it.)

3. You understand that there is no one-size fits all solution to saving and restoring ‘level’ data.  It totally depends on how you wrote your game, how many display groups you have, how objects are layered, … the list just goes on and on.

4. You konw that, you cannot save and restore game objects directly.

Basic Approach - Creation

You cannot directly save a display object to a file.  You must instead save information about that object to your file that will allow you to remake it later.  

This means, you need to add fields to the object that identify it’s type, color, <x,y> position, etc.  i.e. Anything you want to be able to restore.

(Note: I am not using Lua proxy objects or classes in this example, but instead using display objects directly;  Using classes is fine too, but I’m not going to discuss that here.)

Here are some basic object builders for this example:

local levelObjects = {} local function newCircle( x, y, radius, color ) local tmp = display.newCircle( x, y, radius ) tmp:setFillColor(unpack( color ) ) tmp.myColor = color tmp.myType = "circle" tmp.mySize = radius levelObjects[#levelObjects+1] = tmp return tmp end local function newSquare( x, y, size, color ) local tmp = display.newCircle( x, y, size, size ) tmp:setFillColor(unpack( color ) ) tmp.myColor = color tmp.myType = "square" tmp.mySize = size levelObjects[#levelObjects+1] = tmp return tmp end 

Basic Approach - Saving

In this example, I’m using SSK   table.* extensions to save any objects tracked in ‘levelObjects’

local function saveLevel( levelTable, fileName ) local toSave = {} for i = 1, #levelTable do local rec = {} rec.x = levelTable[i].x rec.y = levelTable[i].y rec.myType = levelTable[i].myType rec.myColor = levelTable[i].myColor rec.mySize = levelTable[i].mySize toSave[i] = rec end table.save( toSave, fileName ) end

Basic Approach - Restoring

Note: I’m assuming you’re restoring to a clean scene with no prior objects already loaded.

local function restore( fileName ) local toRestore = table.load( fileName ) if( not toRestore ) then return end for i = 1, #toRestore do local rec = toRestore[i] if( rec.myType == "circle" ) then newCircle( rec.x, rec.y, rec.mySize, rec.myColor ) elseif( rec.myType == "square} ) then newCircle( rec.x, rec.y, rec.mySize, rec.myColor ) end end end

[saurabh47g]

Thank you so much.I got it.
In that level editor, I also want to create objects by joining the dots in the grid as shown in the picture.

I have used this function to create a grid.

but due to the small size of dots.its not getting tapped by the fingers.

can we increase its radius of touch?

function createGrid( ) for i=1, lx do for j=1,ly do local noX = i\*25 local noY = j\*25 local temp = display.newCircle( noX, noY, 5) table.insert( dotTable, temp ) temp.name= i+j temp : addEventListener("tap",setCoordinate) end end end

[roaminggamer]

You could make the dots with an image that has a wide transparent area around the dot.

i.e. The visible dot in your image file can be 10x10 while the image file itself can be 50x50 or any other size that works for you.

The whole image will be touchable.

[saurabh47g]

I have solved this problem by using Runtime Touch EventListener

you watch here the video

https://drive.google.com/open?id=1pdndZ3JTvv0MIdyJ5rv7PGpQLsfQKeog

now I want to join these dots like pattern lock on the Android device 

to create new objects of different shapes.

function createGrid( ) for i=1, lx do local yTab ={} for j=1,ly do local noX = i\*25 local noY = j\*25 local temp = display.newCircle( noX, noY, 5) table.insert( yTab, temp ) temp.name= i+j --temp : addEventListener("tap",setCoordinate) end table.insert(dotTable,yTab ) end end local function myTouchListener( event ) if ( event.phase == "began" ) then -- Code executed when the button is touched local xCo = math.ceil(event.x/25) local yCo = math.ceil(event.y/25) if(yCo\>=1 and yCo\<=17 and xCo\>=1 and xCo \<= 15) then --print( "touch location in content coordinates = " ..xCo .. "," .. yCo) dotTable[xCo][yCo]:setFillColor( 0.5 ) myText.text = xCo .. "," .. yCo end print( "object touched = " .. tostring(xBegin) ) -- "event.target" is the touched object elseif ( event.phase == "moved" ) then -- Code executed when the touch is moved over the object local xCo = math.ceil(event.x/25) local yCo = math.ceil(event.y/25) if(yCo\>=1 and yCo\<=17 and xCo\>=1 and xCo \<= 15) then --print( "touch location in content coordinates = " ..xCo .. "," .. yCo) dotTable[xCo][yCo]:setFillColor( 0.5 ) myText.text = xCo .. "," .. yCo end elseif ( event.phase == "ended" ) then -- Code executed when the touch lifts off the object print( "touch ended on object " .. tostring(event.target) ) -- trasition.to(box,{time=1000,x=event.x,y=event.y}) end return true -- Prevents tap/touch propagation to underlying objects end Runtime : addEventListener("touch",myTouchListener)