Sun Run: Sprite Strategy

For most of these dev blogs, I’ll assume some basic Unity familiarity, like someone who has attended one of my Unity Getting Started talks. But I’ll explain some specific stuff about my progress. If it’s a little too basic, or if I go too fast, let me know by giving me feedback in comments or on Twitter. (Don’t be alarmed if your comment doesn’t appear right away; I moderate.)

Making a game requires design, playtesting, and lots of stuff people are confident they’d be ok at doing. But making a game also requires three things that are intimidating in various degrees: Art, Code, and Sound.

Sound is my weakest link, so I always have to Phone a Friend where it comes to that, and I’m sure this game will be no exception. But for now I’ll talk about Art and Code…

The Unity Asset Store is a good way to get both of those things, if you want to go looking. There’s lots of useful developer tools, plugins, and art there.  I just downloaded Unity-chan for kicks. But… I don’t actually like to use too many pre-built assets in my games because I like to have more control over the art and I don’t like my games to look too stock. So, custom art all the way.

My Unity project is actually set to 3D. You can organize your project folders however you want, but after some trial and error on this project, I find it easier just to group like things in like folders like this:

unityprojectfolder

Sorry it’s small – click to embiggen. Other people like to group things by what they are, so I might put everything to do with the horse in one folder and everything to do with the bird in another. Shown here is my sprites folder. Normally when your Unity project is set to 2D, any texture you import will automatically become a sprite. But my project is actually still set to 3D, so all I have to do when I import something if I want it to be a sprite is change it to a sprite in the inspector:

unitytexturetosprite

Robot Unicorn Attack is probably my favorite endless runner. Of course the importance of the catchy theme song and the design can’t be overlooked, but I think one reason it works so well is the graphics. There’s something about a running horse that’s super graceful. It totally delights 12-year-old-me, still living in my brain clutching her Lisa Frank Trapper Keeper. Fortunately, a childhood full of drawing racing ponies in the margins of my notebook during study hall left me well-prepared to sketch out this sprite:

horserunning8frame-reference2

The background of this is actually transparent – I just dumped black in there to make it more visible on the blog. I also shrunk it down some for the post but you get the idea. Now that I look at it like this, the bottom-left frame is still feeling awkward to me, so I’ll probably fix it, and there’s a liiiittle bit of a ‘shake’ where something isn’t lined up right. But after importing a sprite into Unity, if you change it in the folder in the project, it will update in the game, so I’m not really stuck with it.

This sprite looks really intimidating to draw. Actually it’s pretty easy, though, and if you’re just getting started with frame to frame animations, it’s hard to go wrong with the run cycle on a horse. That’s because a) a horse run is pretty uniform, so you don’t have to worry too much about giving it individual character like you would with a human run cycle, and b) there’s so much useful reference available of this cycle. I really like the famous Muybridge photo series, which you can easily find with a web search, but any web search for “running horse reference” gets pretty good result pictures.

eadweard-muybridge-horse

My sprites aren’t identical to this sequence but sketching it out is pretty easy. I used the pen tool in Photoshop, and simply copied the key frames of a horse run, tweaking them slightly and trying to get the horse shape to match previous frames. I used different reference photos for the tail, which I then adjusted to move up and down with the body. It’s not a hundred percent realistic, but since my horse is flying, I never moved the body at all.  I just drew the head and body on a separate layer and only redrew the legs and tail in every frame. That way the size of the body is consistent and it’s easy for a player’s eye to track. I also choose Photoshop because it’s where I’m most comfortable, but if you like free tools there’s InkScape (which is like Illustrator) or GIMP.

Drawing with the pen tool means I can set my sprite to be any size, but I’m using 1024 sprites for now and I’ll play with the resolution later. (If in doubt I find it best to start with a really high rez and then optimize down, unless I’m going for a pixel art look.) So my sprites are actually pretty huge. I also have to set the sprite tool to Multiple with a sheet like this, and then click on the Sprite Editor button to slice it up into individual sprites.

unitytexturetosprite-2

Here’s what all those sprites look like after using the Sprite Editor to break them down:

unitytexturetosprite-3

They have numbers on them, since they’re set up as frames, so if I select all the sprites (not just one) and drag them into the stage, Unity will create a new animation. I wanted to make an animated gif of it, but it would take longer to do that than it does to make the animation in Unity, so I’ll post some videos later of the whole thing in action. That’s all for now. Good luck if you want to draw cute horses!

 


Posted

in

,

by

Tags:

Comments

2 responses to “Sun Run: Sprite Strategy”

  1. kizi1 Avatar

    Do you have any video of that? I’d love to find out more details.

    1. secondtruth Avatar
      secondtruth

      I do not, sadly! But I am giving a talk at Philly Code Camp (http://phillydotnet.org/camps/2015-1/) about this process, so I will be providing more details there. And maybe we can record something.

Leave a Reply

Your email address will not be published. Required fields are marked *