#GameDev Starter Pack: A Beginner’s First (Almost) Video Game

Aseprite

So, we all have a list. You know the one I’m talking about. It’s not quite a Bucket List, but it’s got all that stuff on it that we’re sure we’ll get around to one day. I’ve got the usual on mine; parachuting, learning a language and an instrument, all those sorts of things. Making a game is also on there. It’s something I’ve been meaning to have a go at for ages, but I always had a suspicion that it’s an idea that would fall by the wayside, much like my old French dictionary and my ukulele that sit somewhere in my closet.

But a little while ago, I ended up on itch.io, where one of their advertised deals was a “GameDev Starter Pack.” Brilliant, I thought. I clicked buy, agreed to some terms and conditions, then promptly forgot about it.

Now, I’ve pulled out that pack and I’m trying this new thing where I actually finish something on my list. To be completely honest with you, I have no idea what I’m doing. My knowledge of game development is on par with a horse’s knowledge of scuba diving. Although I did play a browser game that supposedly taught coding once, so that counts for something, right?

Before I jump into my first soon-to-be award winning game, I probably need to get an idea of what everything in this GameDev Starter Pack actually does. The bundle I bought comes with four items, each of which are in varying stages of development themselves. Three are game asset-related programs: Kenney Studios, Kenney Game Assets (a bunch of premade art), and Aseprite. The last item is Superpowers.

Superpowers! This is what I (hopefully) will make a game in.
Superpowers! This is what I (hopefully) will make a game in.

Superpowers is an HTML5 2D and 3D game maker. It’s still in its early stages; the site even says that, “It is still super rough around the edges.” Now, if you’re like me, you’ll have maybe heard of HTML5 in the same way you’ve heard of quantum mechanics or a well-balanced diet. For all of you out there like me, HTML5 is a programming language for Web pages. It’s a code that tells a website how to appear and what to do. So, what this means for me: using HTML5 allows you to build a game that’ll run on almost anything—PCs, smartphones, tablets. Towards the end stages, it also makes it easier for sharing your game around. You can just send people a link.

Anyway, now that you and I (mostly me) have learned something, it’s time to open up Superpowers and give this a go. Very handily, Superpowers comes with a tutorial. Perfect. It’s even encouragingly called: “Your first (almost) game.” The first thing it tells me to do is to create a new sprite asset. Clicking on ‘new asset’ button in the top left corner brings up a drop down menu of assets, with a few choices ranging from Sprites to Tile Sets to Fonts. I’m sure I’ll have plenty of opportunities to mess around with the other assets later, but for now, let’s stick with the basics.

Creating a sprite seems easy enough; upload an image and then make sure it’s sized correctly using the grid on screen. Superpowers comes with some asset packs that already have characters made, so I grab one from there for now. I’m calling him Leonard.

The next part of the tutorial is an introduction to another asset from the drop down menu: a script. I get the sense that this is something important. To borrow a metaphor from Superpowers’ tutorial, the script of the game is like the script of a movie in the sense that it tells your ‘actors’ or sprites where to go and what to do.

To write this script in Superpowers, I need to use a programming language called Typescript, which is a superset of Javascript. Ok, got it. I create a new asset, this time picking ‘Script’ from the menu, and give programming a go for the first time in my life. The tutorial script places Leonard in the centre of the screen by assigning him a set of vectors and also adds a character called the ‘cameraman.’ This cameraman is basically the camera. What I see on my screen (i.e. Leonard) is from the cameraman’s point of view.

image2

Now that Leonard’s in the game, he needs to be able to move around, which means I need to script his behaviors. Behaviors are exactly what they sound like—some lines of programming that tell a sprite how to behave. Most of this script is giving Leonard the ability to move by mapping certain behaviors (move left or right) to certain keys (D and A, respectively).

I run the game, and there it is! Leonard can move! Granted, he sort of disappears off the side of the screen if you hold the button down and he doesn’t come back, but hopefully I’ll learn how to fix that. I go back to my script and add in two more behaviors: up and down. Now Leonard moves all over the place and he’s a pretty speedy little guy, too.

So now that I’ve clearly mastered Superpowers, it’s time to take a quick look at the other programs I have.

My little alien in Kenney Studio.
My little alien in Kenney Studio.

Kenney Studio has a nice, simple layout, and you work from templates, adding or changing features. I am the queen of working from templates, and I make up a little blue guy I creatively name ‘Alien.’ A quick Save to Desktop and then I jump back into Superpowers. Now to add him to the tutorial game.

I use basically the same script to make Alien move that I used to make Leonard move. I just have to make sure that Alien has a different identifier in his lines of code so the game doesn’t get confused about which behaviors belong to whom. All done, and now to quickly run the game …

Right now I want to say that little Alien popped up onscreen with Leonard. Sadly, that didn’t happen. Alien wouldn’t appear, and after a good few hours of despair and cups of coffee, I had to take back all the horrible things I said to my computer screen. The problem was definitely on my end. It turns out that to run the game, you need to have a saved script, and not draft one that you keep open to desperately try rewriting the same code time after time to get a little alien to appear.

Yes! Look at them all! If only you could actually see them without a magnifying glass.
Yes! Look at them all! If only you could actually see them without a magnifying glass.

Now that those two are happily onscreen together, let’s try Aseprite. Straightaway, I can tell my template skills are of no use to me here—it’s a make-it-yourself type place. It reminds me a bit of Microsoft Paint, actually. You’ve got your pencil, eraser, your line tool, and that click-and-drag shape option. Using my creative skills as best I can, I create a squiggle. I call it Squiggle, too. Yes, I am bad at naming things.

On the bright side, I’ve gotten the hang of scripting a very specific set of behaviors, so jumping back into Superpowers at this point is easy. I even remember to save my script this time! Squiggle appears onscreen, too. I am nailing this. You need a 2D character to move in four directions on a black background? I’m your gal.

Feeling confident, I show a few people what I’ve done, but so far, none of them seem suitably impressed. Development is definitely in order and I’m thinking maybe I should try adding a background for my little characters—maybe even add some sounds. The future awaits!

Advertisements

4 Comments on “#GameDev Starter Pack: A Beginner’s First (Almost) Video Game

  1. Pingback: Sunday Loot: Top Tweets From This Week | FemHype

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: