More fun with pixel art–pointing at things (sort of)


Continuing My Awesome Game Build

So, in my continuing quest to build an old-school style video game for Windows 8, I’ve run into another challenge.  Faithful readers will remember the previous post, where we learned how to take wonderful hand-crafted pixel-tastic sprites, and upsize them for modern screen sizes, while maintaining their blocky loveliness.  Today’s challenge is really sort of the next step on our journey.

One of the things that I want my eventual video game to do is to be able to have the weapons on-screen “track” the movement of other things – good guy weapons track the bad guys, bad guy weapons track the good guys, and so on.  It seems like having cannons that can’t do that would be sort of pointless, as they’d be forced to just shoot off randomly in whatever position they were originally placed. 

Now, my game is a top down shooter sort of thing, but it’s not just 2D.  If it were 2D, and we were pointing down from the top, then simply rotating the sprite to whatever orientation was necessary to point it at something would be pretty easy.  Think of the spaceship in the classic “Asteroids” for an example of this sort of thing.

In this case, you can pretty much draw that simple ship in any orientation – at 0 degrees rotated, at 90 degrees rotated, and at 32.689 degrees rotated.  It looks basically correct no matter what – and because of that, you can keep something like it pointed where you want it.  Exactly where you want it.

And then, there was another…

Now, on the other hand, there’s my game.  It’s sort of an overhead perspective from an angle sort of thing.  Technically, it’s known as “3/4 View” and was very popular back in the day of blocky sprite graphics.  Think more like “The Legend of Zelda”.

OK.  So that’s cool, but now, the problem is starting to emerge.  Do you see it yet?  Imagine that I want that pink guy in the picture to keep pointing at Zelda.  I can sort of turn the whole sprite a bit, but I surely can’t spin it all around.  He’ll end up standing on his head at some point, and that’s just wrong.

OK, standing on our head is bad, right?

As it turns out, the way we deal with this in 3/4 View games is to build custom, pseudo-perspective versions of our sprites.  We lovingly hand craft our sprites to look great from various perspectives.  In my case, here’s one of my guns.

It looks great from exactly 8 different angles.  It can track stuff, as long as it’s at an angle of 0, 45, 90, 135, 180, 225, 270, or 315 degrees.  Which happens occasionally.  But not all the time.  What happens when the thing my gun is tracking is 13.5 degrees askew from it?  What then?  Well, I sat down and started to work through it. 

Could I slightly rotate the individual sprites here, and get it the way I want?  No, that’s going to cause problems.  Notice that the base of my tower is square.  If I start rotating one of them just a bit, the base will get wonky.  OK, so what to do.

Well, the answer I came to was essentially doing the best I could with what I have.  Simply use the best sprite that I have available to “more or less” point where I want it to.  And how to figure that out?  Well, let’s evolve the previous drawing, and add some more detail.

Now, it becomes a little easier to see.  For example, I’ll use the gun pointing west (the one on the left) for all angles that are either less than 22.5 degrees, or greater than 337.5 degrees (up to 360 degrees).  Similarly, I’ll use the sprite pointing north for angles between 67.5 and 112.5 degrees.  This more or less approximates pointing in the right direction, while keeping our pixel perfect sprites.

How to build a Windows 8 game

I’m coding up my game using Scirra Construct 2, which is a great game building environment.  It allows you to author games in a graphical environment, while taking care of lots of basic things you want in games (platform behavior, physics, etc.).  Once you’re done you can export the game to Windows 8 and make your millions – I know that I intend to do it with my game!  This post isn’t a full description of building with Scirra, but I’ll show you what it looks like in Construct 2 for completeness.  Note that Construct 2 has a very convenient “angle” function that makes it easy to calculate the angle between 2 points.

Here’s the sprite layout, with the “frames” of my gun sprite:

And here’s my code in Scirra – known as the “event sheet”.

So, what does it look like when we’re all done?  Well, here’s a red spot, being tracked by a whole field of guns.  Take a peek:

If I can do this, so can you! Build some cool games, and get rich!

Ready to get started with building your game on Windows 8?  Sign up for Generation App and get tons of great information on Windows 8 App development.