This is my first #iDevBlogADay post, so before I get into using Photoshop as a level editor for Corona SDK, I’d like to take a moment to thank @mysterycoconut for all his hard work in keeping this group going (thanks, Miguel!) and also to introduce myself. My name is Tim Miller and I’m the design director / jack of all trades here at Rocket 5; an indie game studio currently focused on making games and apps for iOS. I was a professional game designer for about 13 years before going independent in 2009. I got my start as a tester at LucasArts in 1996 and made my way up to Level Designer and then Lead Level Designer in the 8 years that I was there. After LucasArts, I went over to Secret Level (which was eventually bought by Sega) where I worked as a Lead Mission Designer for about 2 years. From there I went to Nihilistic Software where I worked as Level Designer, Lead Level Designer and Lead Designer for about 4 years. If you want to know more about me, check out my portfolio site. For more info on the history of Rocket 5 up to this point, check out this blog post.
Using Photoshop As A Level Editor
This article describes how to make levels for a side-scrolling platformer style game (eg. Mario Bros.) using 16×16 tiles, but really you can make any kind of 2D game using these ideas.
These are the files you’ll need to follow along with this article.
- The Photoshop exporter script on github: Export 2DBlogProject_pt1.jsx. If you’re on a Mac, save this file here: /Applications/Adobe Photoshop CS3/Presets/Scripts. On Windows, save it here: C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Scripts. I’m using Photoshop CS3, but it should work with any other CS version. After you restart Photoshop, the script will appear under File –> Scripts. Oh and I haven’t tested the script on Windows, so if you have any problems, please let me know in the comments.
- The project files on github: Download the project files. This includes tiles.psd, level1.psd (my sample level), a sample main.lua file, level sprites and a few other files you’ll need to run the level in Corona SDK.
- If you want to run the project in the Corona Simulator or run it on a device, you’ll also need to install Corona SDK which is free to use until you’re ready to publish an app to a store.
Photoshop And The Exporter Script
This script looks for 2 Groups in your .PSD which must have specific names: “tiles” and “collision“. The “tiles” group contains .png files that make up the level’s visuals and the “collision” group contains the level’s non-visible collision (the stuff that the player will actually collide with).
Each tile in tiles.psd has a specific name that matches the tile’s .png file that’s located in the project’s “sprites” folder. The exporter script refers to the layer name when exporting out the display.newImageRect() functions.
For example a photoshop layer in the “tiles” group named setA_borderA will be exported as
display.newImageRect(“sprites/setA_borderA.png”, 16, 16).
It’s very important that your layer names match the .png file names in the sprites folder. When duplicating layers, Photoshop always adds “copy” to the end of the duplicated layer which will cause Corona to barf errors when you try to run it. I hear that Photoshop CS5 has an option to disable the automatic renaming of duplicated layers, but if you’re using an older version of PS, checkout the renaming script in this blog post which will clean up all of the layer names in your level.
Making A Level From Scratch
I included level1.psd in the project .zip as an example of how your level should be properly organized to work with the exporter. When starting a new level from scratch, here’s what you do:
- Create a new file in Photoshop at whatever size you want (480×320 for example) and save it as something like “level2.psd” in the same folder as the other project files. The exporter will create a main.lua file in the same folder as your level2.psd file, so if the .psd is outside the project, you’ll need to move the new main.lua file into the project folder after export.
- Change your PS Grid settings to Gridline every: 16 and Subdivisions: 1. And make sure Snap is enabled in the View menu. This will make it easier to move around your tiles so that they’re always aligned on a 16×16 grid. It’s also helpful to have a background layer with a bright color so you can see if there are any gaps between your tiles (you don’t want any gaps!). Be sure to lock your background layer so you don’t accidentally select it while selecting tile layers.
- Open up the tiles.psd file that’s included with the project .zip. This file has each tile on properly named layers that match the .png files that are in the “sprites” folder.
- Switch to the Move Tool (V) and check “Auto Select” and select “Layer” from the drop down menu. This will allow you to select tile layers directly and then move them around without having to mess with the Layers panel.
- Switch over to the tiles.psd file, select one of the tiles using the Move Tool (V) and drag and drop it into your level2.psd file. This will copy that tile layer from one file to the other while keeping the layer name intact (remember I mentioned that the layer name is important). You should do this for all of the layers in tiles.psd that you intend to use in your level.
- In your level2.psd (or whatever you named it), create a new group and name it “tiles” (no quotes) and then make sure all of the layers that you copied over from tiles.psd are in this group and that any time you duplicate a tile layer in your PS file it remains in this group.
- Now you can build out a level by duplicating the tiles. With the Move Tool (V) enabled, click on a tile, hold down the Option key (mac) or Alt key (windows) and then drag to duplicate the tile. You can also select several tiles at a time using the Move Tool and then Option/Alt duplicate them all in the same move.
- After you’ve created your level (or just a few test platforms), you’ll want to add collision to them. Create a new group in your level file called “collision” (no quotes) and select it in the Layers panel so that it’s active. It’s also handy to set the collision group’s opacity to 50% so you can see the art tiles through the collision objects.
- Select the Rectangle Tool (U) and then drag a rectangle around one of your platforms. Again make sure that Grid Snap is turned on so that you can easily create the rectangle to match your platform exactly.
You don’t need to worry about renaming the Rectangles since the exporter script will export them all as “collider” (you can leave them as Shape 1, Shape 2, etc), just make sure they’re in the “collision” group.
Exporting And Running Your Level
Once you’re ready to export your level and run it in the Corona Simulator, just run the script by going to File –> Scripts and click on Export 2DBlogProject_pt1. Photoshop won’t really look like it’s doing anything while the script is running. When the script is done, an alert window will appear telling you where the main.lua file was saved.
Before you export, remember to remove all of the “copy, copy 1, copy2” text that Photoshop adds to the end of layer names when duplicating them. There’s a script in this blog post that you can use to easily clean up your layer names.
The exporter will create a main.lua file (or overwrite the existing one) in the same directory as your level’s .psd file. If the .psd file is in the root of your project directory (same folder as the level1.psd and main.lua that came in the project .zip) then you’re good to go. If not, then you’ll have to manually copy and paste the main.lua file into the project folder (overwriting the one that came with the project).
Now all you have to do is open up the project in the Corona Simulator to see your amazing level! The exporter will overwrite the main.lua file every time you run the exporter from Photoshop. After exporting a new iteration, just Relaunch the Corona Simulator (command + r on Mac) to reload the level and see your changes.
Here’s what the included level1.psd looks like when running Corona Simulator with the physics.setDrawMode( “hybrid” ) line in main.lua uncommented.
You might have noticed by now that this project doesn’t come with a character or functional controls, it’s just the basic bits for building and exporting usable levels. If you follow all the steps, you can load up the level and see it running in the Corona Simulator or even load it up on a device, but if you want a character to run around in it you’ll have to provide your own gameplay code.
If there’s enough interest, I plan to write additional blog posts that will add an animated character and controls so you can turn this into an actual playable game. Let me know in the comments if this is something you’d like to see here.
Show Your Support
If you find our tutorials useful, please considering buying one or more of our games and apps for iPhone and iPad. Your support helps to keep the tutorials flowing!
- Giant Moto: High flying arcade style motocross action!
- Small Space: Fly a spaceship, eat space creatures, score point!
- Holeshot Drag Racing: High speed drag racing action!
- Alien Booth: Transform pictures of your friends into awesome aliens!
- iSpoof Walken: A hilarious look into the world of Christopher Walken!
- Gaga Eyes: Transform pictures of your friends to give them huge anime eyes!
About the author
Tim Miller is a veteran game developer with over 15 years experience in the video game industry working as a Level Designer and Lead Level Designer at LucasArts, Secret Level and Nihilistic Software. He co-founded Rocket 5 Studios with his wife Cathy and their dog Rocket in 2009. Twitter, LinkedIn, Portfolio