Loading PhysicsEditor and TexturePacker file in Corona SDK

In this post we continue with our previous two tutorials by loading the TexturePacker and PhysicsEditor data into our Corona SDK project. In case you missed the previous two tutorials you can visit them via the links below.

- PhysicsEditor and Corona SDK
- TexturePacker and Corona SDK

You should have the following TexturePacker and PhysicsEditor output files in your project:
- platformshapes.lua (PhysicsEditor, indicating the shapes of each display object).
- platformSheet.lua (a lua file with the definition of your image sheet) (TexturePacker).
- platformsheet.png (an png file with the images of TexturePacker).

Open the level01.lua file of the Rolly Bear Project. First we load the TexturePacker .lua file (platformSheet.lua) by simply calling the Corona SDK require call. Next we great a new variable called myPlatformSheet and retrieve the platformsheet.png through sheetInfo:getSheet(). Note that these instructions are also mentioned in your output file of TexturePacker as comments in the code.

local sheetInfo = require("platformSheet")
local myPlatformSheet = graphics.newImageSheet( "platformsheet.png", sheetInfo:getSheet() )

Next, we need to load the PhysicsEditor lua file in our project by calling:

local physicsData = (require "platformshapes").physicsData(1.0)

For this tutorial it is very convenient when you set the Physics drawmodel to “Hybrid”, so Corona SDK shows you the bounding boxes of the objects in the game. This way we somehow control that the PhysicsEditor output is actually working. Jippie! See the green bounding boxes in the screenshot above.

 physics.setDrawMode( "hybrid" ) 

In principle, we’re done :). We have successfully loaded our PhysicsEditor and TexturePacker output files in our game project. But we still don’t see any objects on the screen? That’s right. For Rolly Bear World we want platforms to be displayed on the screen, which the user eventually can drag and drop to certain areas in the game. For now, we only display some of these platforms on the screen.

First, we create a table of the display objects (platforms) we want to load in our first level of Rolly Bear World. Note, that the final set might differ. In this table, which I called platformNames, we set the names exactly the same as they are listed in our platformSheet.lua. When you open platformSheet.lua you should see a large table (depending on the number of items in your TexturePacker file). This table should look like the snippet below:

local SheetInfo = {}

SheetInfo.sheet =
    frames = {
            -- platform-brown128


Line 8 displays the name which should be the same name as in your table. In the snippet you see platform-brown128, which is also our first item of our platformNames table.

Want we want to achieve is one block of code which displays all table values on the screen without having to code them separately. I used a for-loop for this. #platformNames checks for the total number of values in the platformNames table, this is an easy way to construct your for-loop as deleting or adding more values to your table won’t change your for-loop.

In the next step we need to retrieve the image from the TexturePacker sheet. Use the function display.newSprite instead of display.newImage (which we were used to up till now). Everytime the for-loop is made x is incremented with 1 for as long as the size of the table is, in our case 5. We set this x value in a new variable called platformNum which will be passed in the display.newSprite call. When for example platformNum = 3 the for loop will display “platform-green128″.

In the next step we set x and y of the platform objects. I positioned them on the left so that the user can drag and drop them from one position onto the screen. Note that the drag and drop functionality is for a future post. We add the PhysicsEditor data to the platform object in a similar way as for creating the platform object (platformNum). I also set the bodyType to “static” as I don’t want the platforms to be affected by gravity or the physics engine.

platformNames = {"platform-brown128", "platform-brownbrick128", "platform-green128", "platform-rock128" };

for x =1, #platformNames do
	local platformNum = platformNames[x]
	platform = display.newSprite( myPlatformSheet , {frames={sheetInfo:getFrameIndex(platformNum)}} )
	platform.x = display.screenOriginX + 100
	platform.y = 150 + 75 * x 
	physics.addBody( platform, physicsData:get(platformNum))
	platform.bodyType = "static"  

That’s all folks, we have created an imagesheet with TexturePacker, defined our Physics shapes with PhysicsEditor and finally brought it all together in this tutorial.

You can find the updated Rolly Bear World code in my GitHub Repository.

We are still hopping around the Thai Islands, we decided to take some ferries around the different island in the Andaman sea, this is the sea on the left side of Thailand. Besides Koh Lipe, we decided to visit Koh Lanta, Koh Kradan, Railay Beach and Koh Kong. I’m most excited about Koh Kradan and Koh Kong as these islands have barely any visitors or tourists. By the way, did you know that Koh stands for Island in the Thai language? So in terms of scenery change? Not that much except for different islands with different views. But we just didn’t want to rush through the islands as the Thai islands are famous for their beauty and turquoise waters. After the islands we will head to a Jungle in Khao Sok (well known for leeches and King Cobra snakes!) and afterward a long overnight journey to Bangkok.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>