a-steroids4k

Get Adobe Flash player

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!

MGAS3FD 2: The Beginning

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.

Continue reading ‘MGAS3FD 2: The Beginning’

MGAS3FD 1: The Setup

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.

Downloading.

First, there’s some stuff we need to download:

  • The latest version of FlashDevelop (at the time of writing this was Beta9)
  • The Flex SDK (I use version 3.1.0, build 2710 but that shouldn’t matter too much)
  • A debug Flash player (I like the standalone one for development, but get the ones for the browsers too!)
  • Also, get Java 1.6+ if you don’t have it, the Flex compiler needs that

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.

Installing.

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.

Starting it up.

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.

new server, new domain

I had a bit of a falling out with my old hosting provider, they essentially asked me to leave. So I took the opportunity to make the move to a new domain at the same time. All old links should redirect here and will continue doing so for the foreseeable future, but do update your bookmarks just to make sure.

If you’re reading my blog through rss you don’t need to do anything, the feedburner-feed stays at the same url.

I also updated the design a bit, it still looks absolutely horrible in ie6 though, but that’s a work in progress.

And when I’m at it, I’ve been twittering for a while and I’d like some more fun people to follow, send me a message or even follow me and I might follow you back.

4k – Tiny Keyboard Handler

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;
            }
        }
 
    }
}

in one piece, source code

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!

in one piece

I present to you, In one piece, winner of the Audience award of Nordic Game Jam 2009. Read more about the game below.

Get Adobe Flash player

As you’ve likely noticed I attended the Nordic Game Jam this past weekend.
I ended up in a group together with Jonas and Joel.
The theme for the whole global event was As long as we have each other we will never run out of problems. We also had a few additional constraints:

  • A complete play session must always last 5 min or less
  • The game must be language independent
  • Choose one of the following adjectives:
    • Developing
    • Falsifying
    • Trapped

All three of us came up with a couple of ideas each, mine naturally involved ropes. Jonas had an idea about escaping from a shrinking chamber (pictured below). Joels idea was about a guy walking around the Roskilde festival (we were in Denmark, mind you) playing bongos. Attracting a ever increasing line of followers behind him.

iop-sketch2

iop-sketch3This is the idea we went with. It morphed and changed around quite a bit. Early on we decided to change the setting of it, a festival didn’t feel artsy enough. We also realized that a long line would be pretty hard to control regardless of input method, so we wanted to tweak the gameplay towards a different main mechanic.

That’s when we came up with the whole fitting into shapes idea (pictured right).

As you’ve likely noticed this blogpost has about a gazillion more images than usual. This is because of Jonas. He’s one of those pen and paper guys. It’s been a while since we worked together. And I had almost forgot how awesome it is to have a whole person dedicated to the art when making a game.

We called it a night pretty early on friday, just to get an early start on saturday. It was all downhill from there.

Joel got to work on the sounds. Also, most excellent to have someone being able to do that properly for once.

I took some screenshots during the saturday:

iop-progress1

iop-progress2

iop-progress3

iop-progress4


Most of the sunday was spent in a complete frenzy. The deadline was set at 1500, and that is also the exact time we started our upload to the server.

The game posted here has seen some additional improvements compared to the one we presented at the jam. All the changes made are cosmetical and the gameplay is 100% intact from the original. The code has also had a major refactoring, there’s not very much time to make things pretty when you find new bugs minutes before the deadline.

Speaking of code, I will post the complete sources with all you need to build the game yourself in a few days. It’s gonna be under the MIT license so you can do almost whatever you please with it.

Comments, questions and profanities are very much appreciated!

Nordic Game Jam in Pictures

This weekend I attended the Nordic Game Jam, the flagship event of the Global Game Jam. A whole load of games were made, I’m not sure how many since I’m still waiting for the NGJ-site to get updated with the numbers.

The game we made will be up here shortly, we just need to fix some very minor stuff and get the size down a bit. It will also come with the complete source, although it was written in no-time-at-all so it might not be readable or even understandable.

The event was tons and tons of fun. Got to meet a whole bunch of new people and enjoy the wonderfully incomprehensible language of danish for a whole weekend!

All my pictures are available in my Nordic Game Jam 2009 set on flickr.

DSC_3323
From the left: Jonas, Kian, Joel, Bernie (behind), Cactus, Erik and Petri

DSC_3327
From the left: Petri, Joel, Cactus and Jonas.

DSC_3356
Heather did the keynote.

DSC_3387
Kian and Bernie

DSC_3388
Erik pretending to work

DSC_3426
Heather and Cactus making their game

DSC_3348
Cactus again.

DSC_3436
It’s me!

DSC_3398
Jonas and Joel hard at work, while I’m messing about taking pictures.

DSC_3417
LOLPETRI

DSC_3386
The IT-university was a pretty fancy place

DSC_3448
66.7% of us won a prize!

That’s the whole weekend summed up in pictures. Sadly none from the presentations or award ceremony but I’m hoping someone else got pictures of that.

More about the game we made in my next post.

World of Goo in hands, various bodily fluids in pants

I got my dirty hands on my copy of World of Goo just over two hours ago. Two hours well spent in aforementioned land of thick, viscous matter. It’s a great game, every level so lovingly crafted. Go Preorder it Buy it Give them money this instant or I will kick your ass!
Now I need to get some sleep, damn this worldly body of mine, it’s all about eating and sleeping and way too little about gaming (and possibly even less about getting a occasional game up on this here blog)

The need for stupid amounts of objects.

The other day I got an email from someone who wanted to know how the “infinite” drawing in isotope3 worked. I figured this would be a excellent time both to share some code and get a post done around here.

The source code for this is available under the MIT license

I’m using a technique I first started to use in my game Eater of Worlds, it has since appeared in a few other things I’ve made.
Just piling hundreds of objects in a single DisplayObject causes Flash to redraw all of them each frame. Drawing vectors in Flash is pretty fast, but having to redraw them each frame is a bit unnecessary if they aren’t really changing. Enter cacheAsBitmap, this does exactly what you would expect it to. And it’s great. Until the content changes, then you have to redraw everything again. Taking both the hit of the redraw with the added punishment of creating the cache (not sure how big that is though).
In isotope3 I redraw each and every frame, negating any boost cacheAsBitmap would give.

So what I do is i create a “cache” bitmap, basically the same as flash would do automatically, but this bitmap I’m controlling.
This makes stuff a tiny bit more complicated, since you will need to explicitly tell flash what to draw to the bitmap each frame (or whenever you feel like it really). Another drawback is that if you’re using it to pile in large amounts of objects and want to remove something it gets tricky. A good way to solve this would be to keep the DisplayObjects, but not attached to any visible clip, and updating them as needed.

Enough with the talking for now, here’s a demo (Click it to make it go!)

This is how you set it up:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// initializing the canvas at 500x500, not using the 
// autoclear and with a full size back buffer.
// if you're going to use blurring or some other "destructive" 
// effect, you can use a smaller back buffer that means 
// setting a bigger buffer divisor as the fourth argument
var _canvas:Canvas = new Canvas(500, 500, false, 1);
addChild(_canvas);
 
// this color transform is applied each update(), 
// here i set the alpha multiplier to .5 making 
// whatever was in the buffer the last time around 
// gets faded by that amount
var colorTransform:ColorTransform = new ColorTransform(1, 1, 1, .5, 0, 0, 0, 0);
_canvas.colorTransform = colorTransform;
 
// a simple blur filter 
// (it's faster with multiples of two for the blur-setting btw)
var blurfilter:BlurFilter = new BlurFilter(4, 4, 1);
// feed it in like this, this is too run on each update()
_canvas.addFilter(blurfilter);

This is what you do each frame to apply fades, blurs or whatever effects you put in there:

1
2
// if you don't apply any effects this isn't even needed.
_canvas.update();

To draw something on the canvas you do this:

1
2
3
4
5
// draws a white box
var box:Shape = new Shape();
box.graphics.beginFill(0xffffff);
box.graphics.drawRect(0, 0, 50, 50);
_canvas.draw(box);


Get the source, example and flashdevelop project here and try it yourself!

Big thanks to my friend Richard who gave me some feedback on the code making it possible to read for people that are not me.

Comments are very much appreciated!