iDesign, therefor iPad.

by David

Thank you, wife.

I am now the proud new owner of an iPad Mini. So what do I want to do with it? Make games, duh!

Now, I’m not exactly a dinosaur, but I haven’t designed anything on an Apple product since SpaceStation Theta…okay I’m a caveman. So, since the holiday break I’ve been studying up. How the heck do I design for a mobile device? A touch mobile device? What should I do first? It’s been a bit like starting over, switching to a new platform. And one of my guides has been a nifty little program called Game Salad and a video tutorial series on YouTube by a gentleman who calls himself TshirtBooth.

From a level design perspective, where most of our work is program based, Game Salad is just another editor, with a few minor differences. Unlike the Creation Kit, UDK, and all the other major 3D editors based on a complex game engine, the artwork is completely on you to make. This has been both a blessing in disguise and a real pain in the arse.

With iDesign (at least like I have been doing for my iPad Mini) you need assets, and lots of them. A single, very simple game can still rely on thousands of them, depending on the genre. I did a little game research and started playing all the games my iTunes gift card would allow me to buy. I bought and played through a few games that really showed me what was possible (not necessarily in Game Salad, but in an effort to farm the iTunes store for a bit of inspiration).

So far, my favorite games are The Room (sound familiar? honestly no coincidence.), Kingdom Rush, Omos HD, Letterpress, Outwitters, Machinarium, and Corpse Craft. All of these games rely on individual images moving and interacting with background images or actors that must be created prior to assigning properties and conditions to any of them. So there is a multi-step process already forming. I’ll take you through my process, even though it might not have been the most efficient since I made it up.

Step one: Concept

What kind of game should I try to make. I had to think long and hard about this one, but back when I studied Industrial Design I designed a game that I thought would work. A two player grid game called Tic-Tac-Four. Simple, right? It’s just what it sounds like, tic-tac-toe with a board that’s 4×4 instead of 3×3. But the twist is that each player gets three chances to erase one of the other player’s moves and replace it with their own. The trick is that the move is then permanent and cannot be changed back. Watch the video, it’s much easier.

Now then, can I make this happen in Game Salad? I don’t know…I guess I need to study up on the editor, right?

Step two: Read ’til your eyes bleed!

Game Salad is just one option, but it was one of the first (and only free) methods I found to create a game for a mobile device without knowing Xcode or some other programming language. Remember, we’re level designers, not programmers! Game Salad works a lot like PowerPoint (hopefully you’ve used it). You take assets (your pretty pictures) and drop them into slides, or scenes, and make them do nifty things when you click on them. GS is very user-friendly and it only took a few days before I felt like I was making real progress toward something.

Day one should be chalk-full of tutorials. Watch a video, then mimic it in the program, repeat. Unfortunately for some of you, you must have a mac computer to make good use out of dear TshirtBooth’s videos. Game Salad is available for both Mac and Windows, but unfortunately, all his training vids are in the Mac format. I actually started out on the PC version and switched to my MacBook because the layout was so drastically different. Besides, if you want to design for Android or Windows devices, you have to use the PC version of GS. Luckily I made the switch early on, because if you want to design for iDevices like I do, you must use the Mac version of the program. (A tutorial on that would have been helpful in the beginning).

TshirtBooth has his own Youtube channel with about 200 training videos that take you through the very basic uses of all the menus and features and how to make them work very simply. It was really nice because all the videos are under 10min, so it’s easy to find a specific tutorial again and rewatch if you forget. The only bad part is that he introduces himself and ends the video with THE SAME EXACT WORDS every time. “Hey everybody, TshirtBooth here…” + “…and that’s all you need to know about (name of the video) in Game Salad.” x 200 = blow my brains out.

Realization #1: It’s never “all you need to know” about doing a task in Game Salad. Quite often I hit road blocks when trying to figure out how to make an actor respond in a specific way despite TshirtBooth’s reassurance.

Step 3: Oh crap, I don’t know if Game Salad can do that.

So, the tic-tac-four idea didn’t work out. Surprisingly it’s too complex, and I didn’t figure that out until 200 videos later. If we break down the game idea a bit further, for the game to work we need either two players, or one player and an AI. Ain’t no way to do AI in Game Salad. The two player mechanism is quite complex, as well. It’s a bit too much to bite off for my first chew of the Salad.

I went back to my game farming in the App Store and decided to make a “Match-3” format game that is a derivative of Zookeeper. For this game, my concept was to make a match-3 using themes and characters from the original Star Trek series. (My wife and I were on a Captain Kirk kick recently). The game is called “Away Team” and you are a lowly red-shirt (ensign) operating the transporter room controls. You’re racing against time to match enough particles of the heroes molecular structures to beam them safely aboard before an intergalactic disaster happens. Go too slow and Kirk, Spock, Bones, and the rest of the heroic crew will succumb to a horrible fate due to your negligence.

Most match-3 games follow the same rules: Spawn a grid of (6-8) random actors, contiguous actors can be swapped to match 3 like images, the 3 actors disappear and all the ones above them drop, new random actors spawn and drop into the empty spaces at the top. This seemed much more do-able with my knowledge of Game Salad at the time. But to make this practice game come to life, I needed artwork. Lots and lots of artwork.

Step 4: 72dpi, but that’s so tiny!

Here is where you have to pause the game and think about what you’re about to do. I will walk you through designing for the iPad Mini, but keep in mind that everything else is different. You cannot apply the same rules to the iPod touch, Windows tablets, an/or Android phones. The iPad Mini has a very specific set of specs that you have to design for seperately.

Realization #2: Designing for print in photoshop is completely different than designing for the screen. Dumb down the detail, start small and size up, work pixel-by-pixel. Remember that a lot of your images will only be 50x50px at 72dpi or smaller. When in doubt, try 8-bit style.

Unfortunately, Game Salad, Tshirtbooth, and your prior experience in Photoshop cannot help you much here if you’ve never designed art for a mobile or touch device before. I got lucky and there was an online seminar on sale on a site called DesignBoost.com A lovely designer with a wonderful Southern accent has courses geared specifically toward art and design on iDevices. In the course I purchased  she covers the iPhone, iPad, and icon creation in a three-part series. She is the reason for Realization #2.

You can get very absorbed in the artistic process. I learned this the hard way, as I’ve been stuck on it for a while. You don’t want to spend too much time making your art perfect in every way to later find out that you can’t make it work in Game Salad and have to scrap all those hours of work like I did. So start simple, do little sketches and colorize them first. Then size them down to the appropriate pixel size and drop them into the editor. Refine them later, once you have a working prototype.

Think about the layout of the game screens. Start screen, menu, options, levels, and finally game maps or levels. Think of all the little buttons or icons you’ll need. Sketch out a rough storyboard, remembering the importance of format (portrait or landscape), then brainstorm some simple animations (too many of these in the beginning with really slow you down, so remember to K.I.S.S.).

Here are the assets I created in Photoshop for my “Away Team” practice game.

Step 5: Make it work moment.

Now we become the level designer again, bouncing like a pinball between the roles of artist and programmer. Starting with the start screen seems logical. It is a good way to practice, but again might be fruitless if you can’t get the game to work. I’m still on the fence as to which one should come first, but I started with the title screen.

Here is the finished title screen, the emphases of which are stylized artwork, using a marquee with x/y wrapping, and simple animation.

Now for the nuts and bolts, tackling how the game is supposed to function. This step is tough, and requires lots of research, trial and error, and compromise. I can’t walk you through the whole thing here, of course, but it took weeks to get the first fundemental of match-3 to work: Spawn a random grid (8×10 in my case) of actors that fall into position. Getting them to swap was a whole other mess.

Realization #3: A touch swipe is way harder to program than a two-click motion. Just look at the stupid amount of math it took me to  figure out how to formulate the four cardinal directions.

Now I’m stumped, actually. The next step is to make the actors destroy when three in a row or column match, then all the ones above them drop, and new ones spawn up top and fall into position. And I have no idea how to do it. This is the current roadblock my project has been shelved on for the last couple of weeks while I work on a side project. TshirtBooth actually made a free match-3 template, but it doesn’t really work the way I need it to because it doesn’t search for 3 or 4 like images that are contiguous vertically or horizontally. I still don’t understand how to employ tables effectively either, so his design is a bit above my head.

My hope is that this guy EI8HTHSIN finishes his genius Bejeweled-style template that I dug up on a forum. I wish I knew how he did the matching mechanism and got it to run so efficiently. Watch and drool.

Step 6: Don’t forget about “the man.”

This stuff ain’t free. Just because you have an iPad and GameSalad doesn’t mean you’ll be able to make anything you want and play it for free. I found this out the hard way during a testing session after completeing my second match-3 phase.

Realization #4: To even test a project you’ve designed for iPad or iPhone before releasing it into the App Store, you have to pay Apple a yearly fee of $100 for a “developer’s provisioning profile.” There is a very long involved process to go through in order to get Game Salad to port your game to your iDevice, as well. Many users in the forums have complained that they can’t get it to work.

Luckily you can test some of the aspects of your game with a mouse, but experiencing the touch responsiveness and art you designed on its native device costs money. I have not yet made anything I deem worthy of spending that much money to BETA test, but if I do, I’ll report it to you. In the meantime, here is the extent of what I was able to complete for Away Team in Game Salad.

Step 7: Try again?

Now that I’ve shelved Away Team as I ponder a way to make the “match, drop, and respawn” phase function, I have moved on to a heavily art-based concept for a tower defense game. This time I’m focusing more on art and concept, in Photoshop and on paper, than functionality in Game Salad. If I can create something really stunning, perhaps even a simple bit of programming in GS can make it come to life. The functionality of tower defense seems simple enough to execute with the knowledge I’ve gleaned from previous exploits. How hard could it be to make some little dudes walk down a road while towers blast them to smithereens? Well, I’m sure I’ll find out once I get the concept and artwork finished. As always, I’ll try to keep you posted.

[End]