Welcome to the first Corona SVG Level Builder tutorial! First and foremost I want to simplify your reading: I’ll just write Builder or SLB instead of Corona SVG Level Builder since that’s a big name!
In this tutorial I’ll show you the basic mechanics of the Builder so you can start making any kind of game with it! I’ll show you:
How setup Inkscape.
How to draw a simple level with a few elements and a few layers.
How to add life and gameplay to this level by adding touch and collision events.
The 3 ways of identifying and getting in your Lua code the bodies you draw in Inkscape: by a body ID, by a layer name and by a material name.
The game built will be a single level Save The Totem game where you have to clean the blocks that are holding the totem, and make sure the totem falls safely to the bottom.
Notice: this tutorial can take from 30 to 50 minutes mainly because it teaches you every little aspect to setup everything in order to build levels to be loaded with the Corona SVG Level Builder and the basics on how to get and deal with what you draw. Since you are getting the base, after this you probably will be making any kind of level and level based game very fast.
Almost every time I see someone talking about GIMP is that it has an awful interface or that it is difficult to use, or they just say that GIMP is a bad piece of software. I was one of these complainers. But since I’m doing some pixel art to my game, I decided to give another try to GIMP (and I’m loving it).
I could use Inkscape, but it’s a vector tool. The day before I complained about GIMP on Twitter, Québariumwrote a post about using Inkscape as a effective tool to game graphics (well, that applies to any piece of software, you just need a lot of practice and patience). So I thought, why not giving a SERIOUS try to GIMP this time? The fact is: I have never tried GIMP for more than 5 minutes before giving up, and I think most of the persons that complain about GIMP don’t give it a chance either.
Give it some time, and the fact is: it is fast to get used to its interface, just customize some shortcuts, get used to this and that and you will start loving (or at least being friend of) it.
Getting Inspired
First, let’s watch some casts of Game Producer doing pixel art with GIMP:
This tip applies to users of both Inkscape and GIMP under Mac OS X (if you are a Windows user you can skip this section). They aren’t native applications and depend on X11, so the Command and Option key don’t work. Since we are used to CMD+C and CMD+V to copy/paste, using CTRL+C, etc can be annoying or take some time to get re-used. But there is a solution for this.
Close GIMP and open you preferred text editor and paste this:
clear Mod2
clear control
keycode 63 = Control_L
keycode 66 = Alt_L
keycode 67 = Control_L
add control = Control_L
Save it in your home directory (~/ or /Users/yourname/) and name it .xmodmap (if the editor asks about it starting with a dot “.”, keep it). Now open X11 (Applications, Utilities, X11), open its Preferences and uncheck all checkboxes:
Now let’s finally start into GIMP.
Setting up GIMP shortcuts similar to Photoshop shortcuts
You can skip this step if you are satisfied with GIMP shortcuts. But it’s possible to setup it to have almost the same keys as Photoshop, which I am totally used and I feel it’s easier to work it, even more when working with Pixel Art when we use Pencil and Eraser almost 90% of the time.
Go to Edit – Keyboard Shortcuts. On the Configure Keyboard Shortcuts dialog you can easily find a tool or action within the Search box:
Using the search, find and change the following tools / actions:
GIMP has already some familiar default and useful shortcuts for pixel work:
* I’ll explain these later.
Change some Preferences
The following Preferences changes could add some productivity to your work. Again, change as you wish. Go to Edit – Preferences and:
Under Environment, change the minimal number of undos to 50 and up the maximum undo memory, depending on your computer capacity:
Under Default Grid, change the “Foreground Color” to a bright gray:
Under Toolbox, check “Set layer or path as active“: when you click on a layer with the Move Tool, it will select that layer, and you will be able to move/edit it without the need to go to the layers dialog:
Tips to work with Pixel Art on GIMP
NOTE: None of the “tips” explained is new nor GIMP exclusive, remember that the purpose of the article is to show how to do these stuffs with GIMP and how they can help while working with pixel art.
1) Real size preview
Since to work with pixel art you have to deep zoom in (normally 1000%+), you can’t really see how your final image is, then we need a real time preview for our image. In your image window go to View – New View. In the new window, set the zoom to 100% and go to View and uncheck Show Selection and Show Grid. Resize and position the preview window below your work window.
2) Easy access to palettes
One of the most important things when working with pixel art is the color palette. GIMP has a cool palette control. To always have the palette window at hand, go to the Toolbox window and click the “Configure this Tab” button – Add Tab – Palettes.
The palettes tab probably will be added as a tab with the “Tool options tab”, click and drag it to the line above, so it will stay in its own line:
Now double click any palette. A new window will be opened with the selected palette. Drag this window so it turns in a tab at the right side of the palettes tab:
3) Importing and generating palettes from images
You can create a palette adding color by color: Palette – New and add color by color or you can import a palette: right click in the palettes tab and “Import Palette“. In this dialog you can generate a palette from a gradient, from an Image (note: the image has to be already opened in GIMP) or a palette file.
4) Setup your pencil and eraser
Pencil and eraser are pixel artist’s main tools, so we need to setup them. Select the Pencil (B) and in the tool options select Brush – Circle (01). Select the Eraser (E), the same brush as the pencil, mark hard edge and uncheck Anti erase.
5) Color variation for shading
While you could have setup all your image’s colors in the palette you can also decide the colors while working on the image. Let’s say you are drawing a tree and while shading it you can’t decide which tons of green to choose: then lower the opacity of the pencil tool!
Same green, 3 different opacities:
The other way of doing real time shading is using the Colorify tool. With the layer you want to shade selected, go to Colors – Colorify, click on “Custom Color” color and pick a color. Shading done! Anyway I prefer via pencil opacity.
6) Quickly drawing with the selection tools
Use the rectangle (M) or ellipse selection (Shift+M) tools to quickly draw large areas and then fill them with the Bucket (G).
To add selections to existing selections: let’s assume you selected a rectangle and you want to add another one on the other side of the image but without losing the first selection. Just hold Shift and draw the new selection:
Let’s say you want to remove a small part of a selection: hold Command and drag the selection over the part to remove:
7) Where is the line tool!? How to draw lines? How to draw rectangles?
To draw lines, select the Pencil (B), draw a pixel, then hold the Shift key to the direction you want the line:
To draw rectangles, ellipses or even irregular forms (tip 6), use the desired selection tool and while the selection is active, go to Edit – Stroke Selection, select Stroke Line, line width 1.0, open Line Style and uncheck Antialiasing:
8) I selected a tool but it is not working!
Since GIMP is not native, it doesn’t work like Photoshop when selecting something on one of its windows: all under the same focus. When you click the Toolbox tool, or Palettes tab, etc, all other windows lose focus, so you have to click your image window once and then one more time to regain its focus to make the new tool selection work. Notice that this isn’t necessary when using shortcuts.
This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, Twitter or delicious.
We are Alfred (programming & art) and Débora (ideas) and we are passionate about games. Karnak Games is our indie iPhone and iPad games development studio. See more.
– Add Tab – Palettes.
We are Alfred (programming & art) and Débora (ideas) and we are passionate about games. Karnak Games is our indie iPhone and iPad games development studio. 
