Category Archives: Corona SDK

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

Development Update And Photoshop Tools For Corona SDK Part 1

Rocket 5 IconIts been a few weeks since my last blog post so I wanted to update you all on what’s been going on and also kick off a new series.  First off, I’m working on a new production plan that should allow for more tech reuse between projects so that Rocket 5 can get more high quality games out on the market in a shorter amount of time. 

Up until this point, each of our games has been very different and so they’ve all been written basically from scratch.  We currently have 2 games in development that will test out this theory of tech reuse including some pretty big changes to XS Force (more on that in a future blog post).

In With The New

The biggest change that has happened is that I’m in the process of switching game development platforms from Unity3D to Corona SDK.  Unity3D has served me well over the last couple of years and I couldn’t have shipped Giant Moto, Holeshot Drag Racing, Small Space and Walken on iOS without it.  But I was starting to get bogged down with “too many features” and all of the overhead that comes with features that I’m not using – I’m at a point where I want to focus on making 2D games but since Unity is a 3D environment, there’s a lot of rule bending that I have to do to make my games.  There’s also the issue of of build size – it’s very difficult to make an iOS game under the magic 20MB app size – even when making a very simple 2D game.  And if I ever want to remove the Unity splash screen from the front of my games, I’ll need to cough up another $1,000+ for the pro license.  I’m not going to turn my back on Unity entirely though, in fact I’ll be using it to build a game at the upcoming Toronto Game Jam since it’s still a great prototyping tool and a super fast way to build games for the web and desktop.

The Missing Link

Corona SDK has so far proven to be a nice lightweight development platform that has all (or most) of the features I need without a lot of extra stuff I don’t need.  However one of the main differences between Corona and Unity is the lack of any kind of graphical editor in Corona – every object that’s displayed on screen has to be written into a .Lua script.  I’m a Level Designer by trade and so I’m used to being able to lay out levels, place triggers, enemies and waypoints, etc in a graphical design tool.  So after some early experimenting in Corona, I quickly realized that I was going to need some kind of tool for laying out my levels.

Maya Based Editor

My friend Mike suggested that I build out tile-based 2D levels in Maya and then export the information to a .Lua file with a Python script.  Mike wrote the script and it worked pretty well, but there were some workflow issues with using Maya (It’s like using a jackhammer when you really just need a butter knife) and since I don’t know Python I’m pretty slow at adding new features to his script.

Photoshop Based Editor

I knew that you could write scripts to automate tasks in Photoshop, but it never occurred to me that it could be used as a level design tool until I ran across Alex Souza’s Fireworks to Corona Exporter which lead me to his Photoshop Corona exporter that actually comes bundled with the Corona SDK.  After looking over his scripts, I realized that I could rewrite Mike’s Maya Python script in JavaScript and use Photoshop for my level editor instead!  After about a day of writing the exporter scripts, I now have a very versatile and usable level editor based on Photoshop.

I’m not going to get into all the details of the export scripts here since I’m still refining them – I’m planning to do another blog post later to show you them in action (notice this post is titled “Part 1”).

Photoshop Layer Renaming Script

My level exporter relies on Photoshop Layer and Group names for stuff like texture names in the exported .Lua file.  But when you duplicate layers and groups in Photoshop it automatically adds ” copy”, “copy 1”, “copy 2” etc… to the end of the new layer name (I hear PS CS5 has an option to turn that off, but I’m using CS3).  Since my levels are based on 16×16 pixel tiles, I’m duplicating a lot of layers and so I have dozens of these layers that need to be stripped of the ” copy 1″ text.

Photoshop Layer Names

Rather than rename these all individually, I turned to the interwebs and found a couple of different solutions to the problem (honestly I thought I would find way more).  The best one I found was RenameLayers.jsx by Mark Walsh.  It works great for removing the extra text that Photoshop adds, but unfortunately his script executes on every .psd that’s currently open in PS and since the script can be a little slow if you have several complex files open it could take a while to complete.  So I modified the script so that it only works on the currently active .psd file.

UPDATE: I found a way to make the renaming script significantly faster and it also works on any layer in the scene unlike my original script (which I have removed from this post). The new method requires stdlib.js which you can download from here.

And you can download the layer renaming script from github: Download Rename Layers.jsx

Save Rename Layers.jsx in /Applications/Adobe Photoshop CS3/Presets/Scripts if you’re on a Mac or C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Scripts if you’re on Windows. And save a copy of stdlib.js in that same folder.

If Photoshop was running when you added the script to the folder, restart PS. To run the script in Photoshop go to File –> Scripts –> Rename Layers. It won’t be obvious that the script is running except you’ll get an hourglass and you won’t be able to do anything in PS. If your file has a lot of layers, the script can take a while so be patient. I suggest testing this on a smaller file first before you try it on a .psd with 100’s of layers just to make sure it’s working properly.

Feel free to modify Rename Layers.jsx to meet your own needs.

Conclusion

I’m planning to post more about my experiences with writing JavaScript tools for Photoshop that are more specific to improving game development workflow with Corona SDK, so stay tuned!

If you like this post, please be sure to follow us on Twitter and Facebook to keep up to date with everything that’s going on here at Rocket 5.

Show Your Support

If you find these 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!