Yesterday, I reviewed and went through a basic example of how to use TexturePacker. I began to wonder if enough information was given to get a new user started with the software, so for today’s review of PhysicsEditor I’ll actually be providing some code I just wrote for an iPhone app.
PhysicsEditor automatically traces images for you and then applies physics properties to each image. If you’re wondering how this is useful for games, I’m going to show you an example with oddly shaped images and apply physics to all of them. PhysicsEditor provides exporting for various platforms, but today I’ll be covering CoronaSDK.
Platforms available
The first step I did was to draw a basic rectangle in Adobe Flash to act as my ground. I then did File > Export Image > .PNG Image. I then drew three more images, a trademarked mouse shape, a trademarked half-eaten pie shape, and an obligatory heart shape. I drew these shapes because they’re not perfect circles or squares, and I thought they’d be a good example to show off PhysicsEditor’s tracing properties. I also made a basic background image of some bricks to serve as a background image since Corona’s default background is black and one of my balloon image is black.
Exporting images as PNGs in Flash
Once I had my drawings exported as PNG files, I opened PhysicsEditor and imported them. I clicked the Shape Tracer button and let the software do it’s magic. Here you can decide how precise you want PE to trace your image. The more precise, the more taxing it will be on the mobile device, so try to pick a fine balance. Also, even if you choose x number of points, you can delete and move the points later on, which I did in a few instances.
Importing PNGs into PhysicsEditor
Shape Tracer tool
PhysicsEditor tracing the shape
Manually altering the shape path
Once you have your shapes traced, you can assign a name to each shape and assign properties such as density, friction, bounce, etc. Once done, save your project and export your files to the location of your choosing.
I then opened up TextMate and saved a new document as “main.lua” (no quotes). You can use NotePad, NotePad++, TextWrangler, etc., I just prefer TextMate. I won’t get into details about the coding, but I have commented it so you’re welcome to alter and play around with it. The one thing you do need to know is that I saved my PhysicsEditor files as “balloons”, which created “balloon.pes” and “balloons.lua”.
So in the line: local physicsData = (require “balloons”).physicsData(1.0) you will swap out “balloons” for the name of you lua file PE generated for you.
Code:
– Hide Status Bar
display.setStatusBar(display.HiddenStatusBar)– Enable physics with 4 gravity to simulate balloon falling
local physics = require(“physics”)
physics.start()
physics.setGravity(0, 4.0)– Import PhysicsEditor Data
local physicsData = (require “balloons”).physicsData(1.0)– Insert a background image
local background = display.newImage(“bkg_bricks.png”);– Insert Ground from Physics Editor
local ground = display.newImage(“ground.png”)
ground.x = display.contentWidth/2
ground.y = display.contentHeight – ground.contentHeight/2;
physics.addBody( ground, “static”, physicsData:get(“ground”) )– Create walls to contain balloons
local leftWall = display.newRect (0, 0, 1, display.contentHeight);
local rightWall = display.newRect (display.contentWidth, 0, 1, display.contentHeight);
local ceiling = display.newRect (0, 0, display.contentWidth, 1);– Add physics to the walls. They will not move so they will be “static”
physics.addBody (leftWall, “static”, { bounce = 0.1 } );
physics.addBody (rightWall, “static”, { bounce = 0.1 } );
physics.addBody (ceiling, “static”, { bounce = 0.1 } );– Create the balloons and apply PhysicsEditor properties
local pacman = display.newImage(“pac.png”)
pacman.x = display.contentWidth/2;
physics.addBody( pacman, physicsData:get(“pac”))local mouseBalloon = display.newImage(“mouseBalloon.png”)
mouseBalloon.x = pacman.x + 180
physics.addBody( mouseBalloon, physicsData:get(“mouseBalloon”))local heart = display.newImage(“heart.png”)
heart.x = pacman.x-180;
physics.addBody( heart, physicsData:get(“heart”))– Apply a touch target the so the balloon moves away from user taps
function moveBalloon (event)
local pacman = event.target;
pacman:applyLinearImpulse (0, -0.4, event.x, event.y);
end– Apply this same action to every balloon
mouseBalloon:addEventListener (“touch”, moveBalloon);
pacman:addEventListener (“touch”, moveBalloon);
heart:addEventListener (“touch”, moveBalloon);
I then saved the main.lua file and opened it in CoronaSDK. Now three balloons appear that you can click/tap on and watch them interact with each other and gravity.
Trademarked Balloon App
The beauty of PhysicsEditor is that fact that it can trace complex shapes for you to save you the hassle of trying to figure out the (x,y) coordinates of each point. Not only is there a free trial, but you can also purchase both PhysicsEditor and TexturePacker as a bundle for a very reasonable price. If you have any interest in making mobile games, you should definitely pick it up.
Source Files (You’re free to alter these as much as you want, I just wouldn’t try to sell an app with the images I created if you don’t want to get sued by big corporations)
