In this tutorial I show you how you can use TexturePacker to create a sheet and use the PhysicsEditor to use the same sheet to create an animated sprite.
This post assumes that you know how to work with TexturePacker and the PhysicsEditor as I won’t explain how to create the output files of these two very useful programs. In case you are not familiar with TexturePacker click here and in case you are not familiar with the PhysicsEditor click here.
See the video above. An Notice the Hybrid mode run as well with Corona’s Physics Engine.
What will we do in this tutorial:
1) We create an imagesheet with our individual images using TexturePacker
2) We can reference in our Corona Development to these individual images of the imagesheet
3) We use the PhysicsEditor to create precise shapes of our images, so when you use them in your game they don’t look like square boxes (important for Physics games)
4) We create our sprite Animation based on the TexturePacker sheet and PhysicsEditor shape definitions.
You can download the complete source code here.
Load your images in TexturePacker, select the data format Corona SDK (Imagesheet). TexturePacker should have created 2 output files which are important.
- sheet in PNG format. In my case personSheet.png
- personsheet.lua
personSheet.png
Make sure both of them are in your project files. The first one is your actual sheet (see image above). The second file called personsheet.lua. In this lua file the data of each image is recorded. The most important piece is the SheetInfo.frameIndex which has the name, which you can use in your code to make the reference.
Now open the PhysicsEditor and load all individual images. Click on the Shape tracer, a window will pop-up and click ok. On the right use Corona as exporter. Make any additional settings if you like. Click publish and save the file as shapedefs.lua and make sure it is within your project files. This lua files describes the exact shape of your images.
If you followed thus far you should have beside your standard lua files the following files in your project:
- personsheet.lua
- shapedefs.lua
- personSheet.png
Open your main.lua file
Add the following two lines for housekeeping, which we will use later to position stuff more easily.
local xCenter = display.contentWidth * .5 local yCenter = display.contentHeight * .5
Now we will load the physics. In case you have worked with physics before then you will notice that only the last line is different. In this line we refer to the shapedefs.lua (which we have created with the PhysicsEditor).
local physics = require ("physics")
physics.start()
physics.setGravity( 0, 9.8 )
physics.setDrawMode( "hybrid" ) -- comment out in case you dont want to see the physics shapes
local physicsData = (require "shapedefs").physicsData(1.0)
Next set a background. This will make it easier to see the animation.
local background = display.newRect( 0, 0, display.contentWidth, display.contentHeight ) background:setFillColor(227, 238, 255)
Now the interesting stuff comes.
First load your personSheet.png (line 1). Second we define a spriteanimation order. The animation will start with frame 1 and ends at frame 4 and will loop in total 2 times within 1000 milliseconds for each run.
We have to create our sprite which I called personSprite and pass the sheet and animationorder called spriteOrderData. Next we add a physics body and get the first frame called person1. The total of 4 frames are defined in personsheet.lua as should be called person1 – person4. Your images could be called differently if you loaded different images in your texturepacker. But person1 – person4 refer to the 4 person images I have imported into TexturePacker.
local mySheet = graphics.newImageSheet( "personSheet.png", sheetInfo:getSheet() )
local spriteOrderData =
{
{name = "animate", frames={1,2,3,4}, count=4, time=1000, loopCount = 2}
}
local personSprite = display.newSprite( mySheet, spriteOrderData)
personSprite.x = xCenter
personSprite.y = yCenter
personSprite:setSequence("animate")
personSprite:play()
physics.addBody(personSprite, "static", physicsData:get("person1"))
As you can see in the video we used the same ImageSheet generated with TexturePacker and if you set the physics engine to the hybrid mode you can see that the PhysicsEditor shape definitions are used.
Feel free to leave a comment below.
