How I created my first game

I have always been interested in gaming and have been mildly curious about how a game fits together, that is from intro screen to credits. I’m not too sure if i’ll follow this project through to the with this but i’ll attempt to anyway but I'll document my experiences anyway and it might help someone else to get started. This tutorial does not include the actual coding of my game; there are many examples on the web and to be honest if you are planning in creating a first game your first game will be a copy/paste from one of those found on the web. You can then add or remove parts to see how it works. I think more importantly is getting your computer game making ready.

Step 1 - Choosing software

After a bit of investigation I thought that the easiest game to start building would be a Flash game however I only want to use open-source/free software. I found that Haxe would suit my needs because can be compiled to all popular programming platforms such as JavaScript, Flash, NekoVM, PHP, C++, C# which means that I can try and make my game work on mobile devices, such as Android and iOS.

Firstly, I’m a Mac user and it was a bit difficult to find the right fit of applications. Mac spec used is iMac 10.6.8 snow leopard.

My first idea was inspired by Canabalt. pixelprospector was a very useful site and found that Canabalt was built using Flixel. Okay, Flixel got it, this is what I will try and use .... now what.. Well Flixel - correct me if I’m wrong is just a library and so you can use it with your favourite text editor, I use Sublime Text 2.

Step 2 - Installing

So, I saw that Adobe has a Flex sdk and I read at flixel.org/download.html that this is pretty much required if you are using a unix operating system such as Mac or linux. It is under the header ‘Flixel Development Environments’ -> The MXMLC commandline tools. Follow the link and there is either a nice big download button or else it will just automatically download. The direct link is here.

I also saw flixel source code at github http:/www.github.com/AdamAtomic/flixel/. I’m not sure if the Adobe Flex sdk covers these but I’m going to download it anyway for good measure, so if I need to import the files well I can. That bring me to my next download - FYI I’m starting from a clean install and so have nothing installed - download git if you want - git-scm.com/download/mac.  

OK, so after a bit of trial and error (trying to find the right software package for me ) I found HaxeNME and this works really well with the haxe plugin for sublime text. Here is a good tutorial on how to set it up on YouTube.

First download haxeNME here.

At the command line

nme -- to check that it has installed

haxe -- to check that it has installed

haxelib install flixel - to install flixel libraries

Next install the sublime package manager if you don't already have it.

Essentially in sublime text 2 press cmd+` for the console and copy the following:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

Then restart the editor.

press cmd+shift p and start typing 'Pack'... a list should appear. Click ‘Package Control: Install Package’

Search for haxe and install.

Step 3 - Hello

Right, then I tried the Hello world example I went to run the final command 'nme test flash' it failed with ‘No application knows how to open hello_world.swf’.

This got me for a while. It turns out that if you have never used flash player to open a .swf file Mac won’t know what to open it with. As an aside, I started this project from a clean os install.

What I did was download the non browser version of flash player for mac. Open it -> File -> open -> and select the hello_world.swf file and it should work. From then on swf files will be associated with flash player.
Yes, I reran 'nme test flash' and  my first ‘hello world’ app works great.

Android 

While I’m here I also wanted to look into installing the Android stuff because at the end of the day, if I do make an app I want to be able to put it on a phone to download etc.

So once you build an app using haxe you can compile it using:

• nme test android -- instead of nme test flash

Now it will complain that it does not have the necessary things so here’s what I did:

• nme setup android

It will ask if you want to install android-sdk, hit yes. After some time a GUI android sdk manager will pop up. Note. In the terminal it will say to install API 8 and so make sure you tick that box or you’ll be scratching your head for a while. Also, you’ll need the build tools. It didn’t show up in my sdk manager and so I manually downloaded it from here. I only copied one folder from waht I downloaded, adt-bundle-mac/sdk/build-tools, and copied it to where nme installed the android-sdk at /opt/android-sdk for me.

I think you also need to install apache-ant, the easiet way to do this was through mac ports.

mac-ports requires xcode - if your on snow leopard you will need xcode 3.2.6 and iOS SDK 4.3 for Snow Leopard at developer.apple.com/downloads/index.action. Install this before you download mac-ports.

Then run the command -> sudo port install apache-ant.

Next instead of using an android emulator I just used my old HTC smart phone. To be able to use the phone for testing, on the phone go to settings -> applications -> development and tick USB debugging and Allow mock locations.

Then when you run -> nme test android in the app folder it will run the app on the phone.

Conclusion

This tutorial was just to explain some of the issues I had trying to get started so I don't think that it's really that relevent to post my code. I ended up not doing the aurorun game and instead made a small platformer which was based on an excellent tutorial by Codey Wodey. 

It’s really simple:

1. I created a number map
2. I added some collectibles
3. The collectibles count down from zero.
4. The time is displayed when the count reaches zero.
5. I used the graphics from the tutorial.

To further my learning of game making I would like to be able to do the following.

1. Click the app and be presented with a title screen with a button to click ‘play’.
2. On play click launch the game.
3. How do I get a continuously visible timer.
4. When count is zero execute ‘level completed’ screen.
5. When ‘level completed’ screen is touched execute ‘game finished’ screen. on touch execute ‘title screen’.

 I have a few things I need to understand though:

1. I want to make my own textures and sprites, and I see png files with multiple images in it. Is there a special way to make them and how to I access the different images in a single file.
2. I want to be able to run it on on a mobile device, say android, how do I use/make touch inputs.
3. how do I make an intro screen that you can press ‘play’.
4. how do you make a finished level screen.
5. how do you make a finished game screen i.e. credits.