Photoshop As A Level Editor For Corona SDK

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

I wrote in a previous blog post that I had recently switched from developing games with Unity3D to Corona SDK. Corona is working out pretty well so far, but one of the major differences between Corona and Unity is that Corona doesn’t come with any kind of level editor. After poking around the internet looking for a solution, I discovered that it’s possible to export out information from Photoshop in a format that’s readable by Corona (or any other game engine for that matter). I’m using Corona in this example, but there’s no reason why you can’t export out level data for virtually any other game engine using Photoshop’s built in JavaScript support.

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.

Photoshop level editor example

Project Files

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:

Tiles:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.

Collision:

  1. 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.
  2. 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.

The amount of time the exporter takes will depend on the size of your level and the speed of your computer – the level1.psd sample level takes 1 minute and 20 seconds to export on my 3+ year old Macbook. I recommend running it on a small level with only a few objects the first time just to make sure everything is working properly. There is probably room for optimization in the exporter scripts so if there are any Photoshop/JavaScript pros out there with suggestions, please let me know.

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.

Exported level on the Corona Simulator

Conclusion

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.

This post is part of iDevBlogADay, a group of indie iPhone development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.

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 MillerTim 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

18 thoughts on “Photoshop As A Level Editor For Corona SDK

  1. CC

    Wow.  I had no idea Photoshop had Javascript capability.  This could be useful in a lot of contexts.  Thanks for the article.

  2. Satheesh

    WOW!!! Thats neat!! Would love to see a fully functioning character inside the levels. Hats Off man!!

  3. Pingback: Cool Indie Level Editors | Rocket 5 Studios

  4. Tim Miller

    It is compatible, but not as is. You will need to edit the exporter script to add in the code bits that the Director class needs.  

    And here’s the correct link to the Director class: http://developer.anscamobile.com/code/director-class-10

  5. Tartar Sauce Media

    This does not work on Adobe CS6 . I get an error saying the javascript is missing.

  6. Tim Miller

    I’ve only tried it with CS3. Make sure the files are in the right folders, they may have changed where you put the scripts since CS3.

Comments are closed.