After working with Pixelocity on Disc Drivin’, I was excited to work with them again on their follow-up game, Danger Boat.

I did all the UI for the game, as well as a vector version of their logo, derived from a pixel-based concept of it.

Download it for free on the App Store. Here’s a trailer for the game:

The post Danger Boat UI appeared first on We Heart Games.

Cute content and short dev cycle.
Easily the most fun I’ve had making art for a game.

After doing the art for Ballooned! along with regular updates since its launch last summer, I was excited to hear from @naveen_pcs that he had a couple prototypes ready to go, and he wanted me to do all the art for them.

“I basically just need three donuts and a background…”

Naveen said the project was really simple, mentioning that he’s been inspired by One Game a Month — particularly @retrodreamer‘s first three months, successfully knocking out several small-scale games in a very short time period. It really is amazing what that kind of time crunch can do for your dev cycle. It forces a few important things on you:

• laser focus
• an attainable feature set
• core gameplay that is both simple and fun

These are all things that can make game dev even more enjoyable.

UPDATE: Gavin wrote an excellent post on #1GAM, what it is, and most importantly, what it isn’t.

The Prototype

This is the first thing I saw when Naveen (PixelCUBE Studios) sent me the art request for Donut Blast.

The functionality of the game was pretty much complete; it was just waiting for some art. I had a hard time seeing how fun the game would be, based solely on this video. But I hadn’t played it yet…

The Donuts

Naveen asked for three different types of donuts; one regular, one special and one bad. Getting the look for the first one took a few small iterations, but came together very quickly.

I wanted to keep the short dev cycle in mind, so for the special donut I kept the same “base”; I recoloured it a bit to make it lighter, and rotated it some so that it wouldn’t look like a copy, but it’s essentially the same. It’s almost completely covered by the icing, so you’d never know. This is another one of those things that you might not do if you weren’t trying to go as fast as you can, but you quickly learn which kinds of things matter, and where you can take some shortcuts.

The only change we made from the first version of the pink donut was to add a different mouth.

The bad donut is the only one I actually did any kind of pencil sketching for, ahead of time. I wanted to give him some Oscar-the-Grouch-style eyebrows and some kind of mouldy grossness on him without it looking *actually* gross.

The Logo

The logo was quite fun, with several iterations based on feedback from many kind friends on Twitter. It definitely came out a lot better in the end, so thanks for all your help, everyone!

The Background

The background went through a few iterations. The original request was to have a shot of a donut shop, with a counter and display case, etc. I proposed the top-down view to more align with the view of the donuts themselves, as though the donuts might actually be sliding across a table. I didn’t want the background to be distracting, but also wanted it to be very obvious that it was a tabletop. We added and removed a few common items before settling on the background as it is in game:

Background template

During this project, I made a template in Illustrator for making backgrounds for Universal games. It accommodates the goal of making a single background image for the iPhone 4, 5 and iPad. Download it here.

Making games is fun (…remember?)

The game ended up needing a bit more than 4 graphics (3 donuts and a background), but the final count was just 29 PNGs for everything in the whole game. This barely takes a bite out of the number of PNGs required to just do UI for most games.

The bright, fun content of the game definitely made it a fun game to make, but it was also very exciting to make a game so darn *quickly*. All the art was done in less than a week, with Naveen integrating everything I made almost instantly. We spent some more time after that, tweaking the scoring mechanism and particles — and I’m sure Naveen spent more time than I know, tweaking many other things! Be sure to give Donut Blast a try (App Store link), it’s free, and the whole “fastest fingers” thing is super fun.

Making a game this quickly was so… refreshing.

You should try it. This #1GAM thing is such a great experiment for so many reasons, and I’m so glad to be able to participate in it.

The post A mini-postmortem on the game art for Donut Blast, by PixelCUBE Studios appeared first on We Heart Games.

Download as PDF

Download Illustrator file

The post Illustrator template for universal iPhone and iPad game backgrounds appeared first on We Heart Games.

It’s official. The Sticker Trade is a thing.

In spite of the fact that I’m not going to GDC this year, there’s been so much talk about collecting app stickers that I decided to make a collector’s list. Hit up the list for info on how to save some money on your own order, and add your sticker(s) to it. Because who doesn’t love stickers.

The ones you see above are the stickers confirmed so far. Let’s get some more on the list.

The post GDC 2013 – The Sticker Trade appeared first on We Heart Games.

Making that search field was my favourite little part of the site, and it’s so simple. 100% CSS, no JavaScript at all, and it works like a charm. Here’s the CSS for it, if you feel like making something similar yourself. The html is pretty WordPress-specific, but you get the idea.

HTML:

CSS:

#header .search {
 position: absolute;
 right: 86px;
 top: -32px;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;
 z-index: 999;
 }
 #header .search form#searchform{
 padding: 3px 10px;
 background-color: #eff0f4;
 -webkit-border-radius: 0px 0px 3px 3px;
 border-radius: 0px 0px 3px 3px;
 margin: 0;
 }
 #header .search input#s{
 background-color: #888;
 border: none;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 color: #fff;
 }
 #header .search img {
 float: right;
 background-color: #eff0f4;
 -webkit-border-radius: 0px 0px 3px 3px;
 border-radius: 0px 0px 3px 3px;
 padding: 5px;
 margin: 0 10px 0 0;
 }
 #header .search:hover{
 top: 0px;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;
 }

The post Acceleroto – new website appeared first on We Heart Games.

The post Paranorman: 2-Bit Bub appeared first on We Heart Games.

The post Ballooned! appeared first on We Heart Games.

Then I found swf2pngs. It looked like it did exactly what I needed. When I first downloaded it a few days ago it didn’t quite have the features I needed. But the developer has been extremely supportive, and even added some new features to accommodate my requests.

The big reasons I now love and fully recommend this app are:

• Export from the SWF, not from within Flash. Exporting via Flash at different sizes means doubling (and quadrupling for retina iPad) the pixel values in your head *every time* you export. It’s tedious and error-prone.
• It’s fast and accurate:
  - load up a single SWF
  - export at the default settings for normal-res
  - switch the scale popup to 2 and add the @2x suffix and export again. (I particularly like that I don’t have to rename all the files after)
  - switch the scale popup to 4 and export again.
• You can target a specific movie clip inside your SWF, though I haven’t ever needed to do that.
• If you have a bunch of animations that are the same size, stick them in the same FLA and rename each sequence right in the timeline (see their homepage for a much clearer explanation)

After using it for a few days, I can’t imagine doing any kind of frame animation for a game without it. And it’s only $10.

The post How to export Flash SWF animations to PNG sequences appeared first on We Heart Games.

The post Photoshop for devs: Required reading appeared first on We Heart Games.

The post New t-shirt: Boost Greed appeared first on We Heart Games.