KCMcG Studios

I kept running into errors associated with objects not being deleted properly with my old tower defense engine. Part of it is because I wasn’t putting in proper destroy commands into my classes. Part of it is that I had no idea how to create a proper game framework. One that registers each object and deletes those objects when they’re no longer needed.

In comes Flixel, a flash-based game engine. Flixel breaks a game into “States” that can be created and destroyed without worrying about objects lingering. So a menu state can be opened to start the game, and when you load the game state, everything from the menu is cleared from memory. More importantly, when you exit to menu and then reopen the game, everything from the old game has been cleared out. No more invisible towers that start shooting at invisible enemies as soon as you load the game (this happened more times than I’m willing to admit).

This is your brain on Flixel

Flixel is an open source game-making library that is completely free for personal or commercial use. Written entirely in Actionscript 3, and designed to be used with free development tools, Flixel is easy to learn, extend and customize. -Flixel homepage

Flixel provides a large list of helper classes that takes care of some of the more basic programming needs. FlxGame is the base game class. FlxG controls global variables. FlxState can be extended to create new game states, though you only need one for your game to work. FlxSprite is the basic sprite, but with some animation automation, movement controls and automated cleanup. There’s lots of other classes that I haven’t yet dug in to.

Flixel sprites don’t have an addEventListener() function, which makes it harder to confuse yourself about which object is listening to which other object. From what I’ve read, the proper way to handle event checks is within the update function of each object. Flixel also has a class called FlxGroup which allows you to perform collision checks and tests against every object within the group. I’m currently using the FlxGroup as my enemy manager, tower manager and bullet manager.

I’ve started recoding my Weekend Tower Defense using the Flixel game engine. I’m not sure if recoding this Tower Defense game has just become a way to learn how to make games or if I’m actually planning on releasing this game eventually, but it certainly has been a learning experience. So far I’ve got a basic engine that loads up a map and spawns a series a waves to march across the map’s predefined paths.

“Progress”

Since finding Flixel, I’ve also found DAME a free tool for generating levels from tilemaps. You can create multiple layers in each level each using different tilemaps. It certainly makes creating new maps very easy and provides a nice visual tool for doing so. It supports several different export formats from a basic csv to an AS3 class that makes loading levels a breeze. It’s supposed to allow you to create paths, but I’ve haven’t yet been able to figure that tool out and have instead been defining paths manually.

Deadly Alien Map Editor in action

All in all, I think learning both these tools will help with future games. Flixel especially has been teaching me a better mindset for creating games. It also seems like it’s much easier to prototype a flash game using Flixel than the old way I was doing it, so maybe it will really pay off when I move on to the next game.

So I haven’t done any work at all on my game since last weekend. Mostly because losing a week’s worth of work on it was depressing me. I believe I’ve found a way to fix it, but it’s still a pain in the butt.

Hibernation Fail
Here’s what happened. I loaded up my computer on Tuesday night to start doing some coding. FlashDevelop was open when the computer put itself into hibernation due to a low battery. I pulled it up to see this:

FlashDevelop post hibernation

There might not appear to be anything wrong with that at first. The only problem is that when I shut down my computer on Saturday night, I had about 14 classes and there’s only 6 in that picture. I figured, “Well, that just must be because that’s what I had open.” So I browse to the folder where I had been saving all my files. Which I had been saving regularly. And what did I see? 7 files with the last modified date listed as 1/29/2012. Even though I had been working on my code as recently as 2/4/2012.

Looking For The cause
Now I can’t say for sure that it was the hibernation file that caused the issue. I don’t see how loading the contents of RAM should affect a folder full of files saved on the hard drive. I suppose it’s possible that “Saving” was only occurring in FlashDevelop’s memory, but that seems unlikely.

The odd part about it all, was that the compiled swf file – the one that’s created every time I try to debug the game – was still showing a last modified date of 2/4/2012. I loaded it up and, lo and behold, it was the same file I had pulled screenshots from last Saturday.

I still don’t know for sure what happened. But I’ve turned off all hibernation on the laptop just in case. I really don’t mind shutting it down every night when I’m done working. It forces me to save more often anyways.

Finding a Fix
I did try downloading a trial for a deleted files recovery tool. But it acted as if the files had never existed as well. I knew about the importance of securing your code before releasing it into the public. This is because it’s supposed to be really easy to decompile unencrypted flash files. I figured I would look for a decompiler and see what my finished swf file could give me.

I can tell you to NOT try sothink’s swf decompiler. It will let you see your code, but the local variable names will be changed and you can only copy out the code if you buy the full version.

I knew there had to be a free decompiler out there, so I googled “free actionscript 3 decompiler” and was led to F.L.A.S.W.F.. He had links to several decompilers and the one I decided to try was ASDec. Looking at the output I was surprised to find that every variable name is identical to the original version.

My Code Is Reborn!

The decompiler isn’t perfect though. It still has to leave out all the comments because those aren’t compiled at all. It also has many extra lines added in declaring variables and then initializing them on separate lines. Fortunately, it should recompile fine for now and I can update it as I go. I was really concerned for a couple days, but I’m ready to return to coding my game once again.

I’ve learned to appreciate decompilers, so long as they aren’t used to steal my game and pass it off as someone else’s. Anyone else every have computer nightmares resulting in lost code?

Once again I can move my units as I desire. Next is the reprogramming of the AI. For now, enjoy this screenshot of the movement area, recreated.

3 Steps Forward, 2 Steps Back

Well, time to tuck into bed for the night. While it’s disappointing that I haven’t gotten back to where I was 2 weeks ago, I think I’ll be much happier with the code once it’s done. Just about every variable is private now and the classes are properly encapsulated.

Last night I decided to program in a function to allow easier map scrolling when using mouse controls. Previously I had made it similar to the Wii’s turning functionality in first-person shooters. When you got near the edge of the screen, the game would start to scroll in that direction.

The problems arose when you were just trying to access buttons that were off screen because the game would try to scroll in the direction of the buttons. It was just too easy to accidentally scroll. And if you wanted to scroll to the other side of the screen from where you were, you needed to move your mouse all the way to the other side.

Enter Click and Drag
So last night, I decided I was going to make my game scroll when I clicked and dragged. This was a more intuitive interface, similar to the iPhone’s scrolling functionality.

My first attempt at setting this up had mixed results. The scrolling was jittery and it wasn’t 1:1 for some reason. Check out my code below to see if you can spot the error. For reference, the mouseDown function is called when the user presses the left mouse button while on the map, the mouseUp function is called when the user releases the left mouse button while on the map and the mouseMove function is called when the user moves the mouse around the playField, but only after the mouse button is pressed.

private function mouseDown(e:MouseEvent):void {
	this.startMouseX = this.mouseX;
	this.startMouseY = this.mouseY;
	this.startX = this.x;
	this.startY = this.y;
		
	this.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
	this.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
	Main.stageSprite.addEventListener(Event.DEACTIVATE, mouseUp);		
}

private function mouseUp(e:Event):void {
	this.removeEventListener(MouseEvent.MOUSE_UP, mouseUp);
	this.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
	Main.stageSprite.removeEventListener(Event.DEACTIVATE, mouseUp);	
}

private function mouseMove(e:Event):void {
	this.x = (this.startX - this.startMouseX + this.mouseX);
	this.y = (this.startY - this.startMouseY + this.mouseY);
}

Ignore the fact that the game will keep scrolling if you happen to release the mouse button while your mouse is outside the flash screen. I haven’t yet figured out how to fix that, so anyone that has a solution should let me know. If you can spot the other error in my code, then you’re a better programmer than I was last night.

The Solution
The problem, it turned out, was caused by my use of this.mouseX and this.mouseY. You see, as you move a sprite around, it’s mouseX and mouseY coordinates change to reflect the relative position of the mouse from the sprite’s (0,0) point, usually the upper-left hand corner.

What was happening was the game would update the mouse coordinates at the same time it tried to update the map’s coordinates. Resulting in what some would call hilarity, but what I called annoyance. To fix the problem, all I had to do was update the references to this.mouseX and this.mouseY to Main.stageSprite.mouseX and Main.stageSprite.mouseY.

Main is my initializing class and stageSprite is a static reference to a sprite that never moves. So as the map scrolled around, the stageSprite stays where it is and provides an accurate reference point to calculate how far the mouse has moved. Here are the results:

Starting Position

The ending point after one click and drag

So overall, I’m pretty happy with the results. I’m trying to reintegrate my old classes for moving units around and attacking other units now. The only problem is that I changed many of the variable names for my units and actually implemented private variables instead of public variables, so I have a lot of updates left to make before I can even run the game without compiler errors. Maybe I just need to program those classes from scratch too. As I write this I’m buzzing from my 2nd coffee this week (I only drink coffee 2-3 times per week to avoid developing a tolerance) and I’m probably feeling way too ambitious. Maybe that’s for the best.

My game has been on Flash Game License for a week now and in that time all 3 of my friend’s with fan accounts have logged in and tried it. The first one discovered the error caused by code encryption. The second one told me that they couldn’t figure out how to end turn, but after looking into that I couldn’t find an issue. The third one reported the same issue as the second one. So I dug a little deeper.

Apparently, moving units is causing the “End Turn” button to disappear. The third tester also found that when clicking on an enemy unit, the game completely locked up. I have yet to reproduce either of these things even when playing the game online on a different computer. So I guess it’s back to the drawing board on the buttons.

Additional Game Progress
In the meantime, I’ve been working on adding a level selection screen up front. It’s making me realize how bad a decision it was to treat the “Main” class as though it were the class for my battle screen. I don’t have a “destroy” function to quickly make everything disappear when I want to go back to the stage selection screen.

That’s a lesson for anyone starting on their first game. Make every screen the user might see it’s own class and make the “Main” class (the one that runs every time the game is opened) as minimal as possible. It should contain a static variable referencing the window itself and should create an instance of whatever class will contain your opening screen and then attach it to the window. That way when you switch up which screen your game opens with you only need to change which class is called. Don’t do what I did. You’ll have to rewrite most of it later.

So I’ve learned a valuable lesson when it comes to flash code and code encryption software. Don’t use the default “stage” variable outside of the initialization function.

So for those of you not familiar with flash, the screen that is displayed when you open something in flash is called the “stage”. It is created automatically when code is compiled and everything that shows up on the screen has to be added as a child of the stage. So if you want 3 airplanes to appear on the screen your function call should look something like this:

tempAirplane = new Airplane();
stage.addChild(tempAirplane);

tempAirplane = new Airplane();
stage.addChild(tempAirplane);

tempAirplane = new Airplane();
stage.addChild(tempAirplane);

Encrypting your code is a necessary step when publishing a flash game, otherwise anyone could copy your flash game, decompile it, and change whatever details they wanted to pass the game off as their own. Unfortunately, when the code is encrypted some things may break. In the case of Kindisoft’s secureSWF, almost all references to the stage become broken. The only things that seem to be left intact are those in the initialization function that’s called the first time the stage is created. So keyboard events created during that time will stay intact and any children added to the stage at that time will be added, but from there on out, you will need to rely on adding children to the objects added during the initialization function. So I added a “stageSprite” object and then added everything else to that. My new calls to add objects look like this:

stage.addChild(stageSprite);
stageSprite.addEventListener(Event.ENTER_FRAME, enterFrame);
stageSprite.addEventListener(Event.MOUSE_LEAVE, mouseLeaving);
stageSprite.addEventListener(MouseEvent.MOUSE_MOVE, mouseEntering);
stageSprite.addEventListener(MouseEvent.MOUSE_DOWN, onClick);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
stage.addEventListener(KeyboardEvent.KEY_UP, keyReleased);

tempAirplane = new Airplane();
Main.stageSprite.addChild(tempAirplane);

tempAirplane = new Airplane();
Main.stageSprite.addChild(tempAirplane);

tempAirplane = new Airplane();
Main.stageSprite.addChild(tempAirplane);

Before the changes, my action menu stopped appearing when a unit was clicked and my onClick functions to select a target to move or attack stopped working. Post changes, everything seems to work great. Now that it’s working online with the code encryption I can start working on new things. Next step is creating a navigation menu to actually allow multiple maps to be selected from (right now it only loads one map that can be played endlessly). I also need to design a company logo to appear when the game loads. Any ideas for maps that might be fun?