rapid prototyping of games using flash
Hello there. This is the sixth part of the Making Games in ActionScript 3 using FlashDevelop
By now we’ve got almost all the basic building blocks to make a simple game. All that is missing is how to get some input. Last time we touched on it a little bit using the mouseX and mouseY properties.
Those are the most straightforward to get at, but other inputs aren’t very complicated either. Let’s start with the mouse button.
I really should let this whole 4k game thing go. But as I was sitting on the train today, idly hacking away at a completely different game I remembered a curious thing that I didn’t have time to investigate then. The mysterious bytes.
Welcome to the fifth part of Making Games in ActionScript 3 using FlashDevelop.
Wow, when I got started on this whole tutorial thing I never expected it’d take four parts just to get to the enter-frame part. But here we are.
This post will be about making stuff move. But before that we’ll need a quick primer on Events. They is one of the mainstays of actionscript, especially version 3.
This is the third part of Making Games in ActionScript 3 using FlashDevelop.
Last time we got our first enemy on the stage. Now we’ll take a quick look at embedding other formats into your classes. Grab the gnome here to the right and put him in your assets folder.
This is the third part of Making Games in ActionScript 3 using FlashDevelop.
Okay kids. Lots of boring setup stuff in the first two parts. It’s time to get some graphics in the mix!
As a side note, since we’re using what’s called the mxmlc compiler everything I do in this tutorial can be done using whatever IDE you please as long as it uses that compiler, if you’re really into this whole command line thing you don’t even need the IDE.
So, here it is, the full 4089 bytes of it, a-steroids4k for the gamepoetry 4k flash game compo.
I’ve been wanting to remake an old retro game with new mechanics for some time now but I’ve never had an idea I though worthwhile, there’s way too many half assed remakes out there and it’s hard to beat really innovative ones like 1D tetris or some crazy space invaders version. This is my take on asteroids. I played the original on the proper hardware a few weeks ago and was amazed by two things; The XY-vector screen is *really* bright and it’s hard. Very hard.
So I wanted to juxtapose the underpowered feel and make the player way more powerful, this is a bit tricky without making the game far too easy. The easyness wouldn’t be a problem in itself, but to feel really powerful you need to have a baseline of “weakness” to contrast against.
The basic mechanics came to me on a train ride, luckily I had my trusty laptop near and could churn out some quick proof of concept code then and there. It was only later the 4k competition was announced. I’ve done a game for a 5k compo in the past and enjoyed it immensely, the result of this was lost in a hdd crash and is unfortunately not available anymore. When I started slimming down the game was at about 29k. I ripped out all the sound and got down to 18k (yes, the sounds were tiny). I’d love to post screenshots, but, honestly the game has looked more or less the same ever since it’s conception. Ever since then it’s been a lot of aggressive cutting and small amounts of putting back in.
The full source code is under the MIT License, but a word of warning is in place, this is essentially obfuscated code seeing that I needed to shave of some extra bytes to get the text in there. I also put it up on wonderfl for your fiddling pleasure. I bet there’s a good 20% of savings in there that I just missed, I’ll be thrilled by any modifications to it!
You have arrived at the second part of Making Games in ActionScript 3 using FlashDevelop.
Last time we got stuff setup. Not all that amusing really, just a tiny bit more setting up to go before we can get some stuff on the screen.
Welcome to the first part of Making Games in ActionScript 3 using FlashDevelop (just rolls of the tongue, doesn’t it?)
People keep asking me if I know any good tutorials for making games in Flash, and I keep answering that I don’t. Most of the one’s I’ve seen have only barely been ported from AS2, keeping the “old flash” mindset and not really making use of the new fancy stuff you can do in AS3. I think that’s a pity!
So, here’s my way of doing it.
This tutorial will assume some basic familiarity with Object oriented programming a graphical tool of your choice and general computer literacy. If anything is unclear, feel free to ask in the comments.
First, there’s some stuff we need to download:
I use the Flash CS3 authoring tool to make my graphics, however, you can use any tool that can export swf’s and for the sake of completeness will show you how to use plain old png’s aswell. But the authoring tool is very hard to beat when doing animations, so consider getting it.
If you don’t have the Flash authoring there’s a trial for the CS4 version.
Start with FlashDevelop, that should be a no-brainer.
(Now would be a good time to install Java if you don’t have that)
Then extract the SDK to whatever folder you’re comfortable with, all you will need to do is to point FlashDevelop to it later, then you can forget about it altogether.
Install the debug player for your browser, FlashDevelops internal player (IIRC) will use the version you install for IE.
Finally put the standalone Flash Player in a suitable directory, it will associate itself with the proper file formats when you run it, so just drop it wherever you want it and run it once.
Now, it’s time to start FlashDevelop.
You should be greeted by a nice Start Page. The first thing we will need to do is to setup where we put the Flex SDK.
Go to Tools -> Program Settings… -> AS3Context -> Flex SDK Location (see the picture) and point it to the directory where you unpacked the SDK.
And that’s it. You’re ready to go. Go get yourself something unhealthy to eat as a celebration.
Next time we get started on our first project.
I’ve been toying with an entry into the 4k game competition held at gamepoetry. The game I’m making uses the keyboard for controls which is a bit rare for me.
AS2 had a very useful method called Key.isDown() whose functionality is pretty self explanatory. This isn’t available in the much more event driven AS3, but when doing something as tiny as 4k it’s a pretty useful thing to have. So I wrote my own tiny little version of it. A bare bones swf with nothing but this code weighs in at about 750bytes, but it’s not that big of an addition to your filesize since the swf has some basic stuff that adds to the size. The demo code adds another 200 bytes, but that’s meant to be stripped out.
Note that the trick is to add this into your main class, not to put is as a class of it’s own. That adds too much to your filesize.
I also recently discovered wonderfl which is a crazy cool online actionscript editor thingie. You can try the code live there! or the new even smaller version.
If that’s not your cup of tea, here’s the code in plain old boring text:
(This is an updated version, a whopping 17 bytes smaller)
package { import flash.display.Sprite; public class STKI extends Sprite { // this stores all key states // For some reason this seems to be smaller when typed public var k:Object; private var block:Sprite; public function STKI () { k = { }; // shorthand for initializing a object // the trick is to use the dynamic nature of objects, // if the property exists it's overwritten, // if it doesn't it's created // the function actually gets a KeyboardEvent, but // having it untyped makes it smaller // So does using a regular ("keyDown") string instead // of the static one provided by the event. stage.addEventListener("keyDown", function(e:*):void{ k[e["keyCode"]] = true}); stage.addEventListener("keyUp", function(e:*):void{ k[e["keyCode"]] = false}); // this is just to show that it works block = new Sprite(); block.graphics.beginFill(0xff00ff); block.graphics.drawRect(-4, -4, 8, 8); block.x = 250; block.y = 250; addChild(block); addEventListener("enterFrame", handleEnterFrame); } private function handleEnterFrame(e:*):void{ // this is how you use it, just access the keyCode // in the object, it acts just as good old Key.isDown // from AS2 if (k[37]) { //left block.x -= 1; } else if (k[39]) { // right block.x += 1; } if (k[38]){ // up block.y -= 1; } else if (k[40]) { // down block.y += 1; } } } }
As promised, here is the complete source code for in one piece. This is the code for the refactored version, not the actual code that was entered into the jam. The game itself is the same, the code is just alot prettier.
I used FlashDevelop and the open source Flex SDK to code this, so that’s what would be the most convenient to use to get it running. It should compile just fine using Flex Builder too (it’s the same compiler), but using the plain Flash Authoring tool might be trickier. Although I hear CS4 supports the tag, so it might work.
The code uses Tweener for some quick animations, as3ds for linked lists (the inital plan was to have more stuff in the chain) and some color conversion code I stumbled upon on a japanese site a while back. All of these are included in the package for your convenience.
All the graphics are as .swf, the corresponding .fla files are also in there. You will however need the Flash Authoring tool to edit them.
The whole thing is under the MIT license, which basically means you can do whatever you please with it as long as you keep the license attached.
Any and all questions are welcome!
Recent Comments
2.5:50:0.8:50
2.5:50:0.8:50 A BALL OF YARN. YES I CAPS LOCKED!
These are great, two thumbs up!
How does one exactly "toss" a tree?
When can we download it please mate