KCMcG Studios

I managed to add bullets and lasers back into the game recently. Lasers turned out to be a much tougher challenge than I thought it would be. I’m still used to drawing graphics using Flash sprites. FlxSprites offer the same functionality, but use different functions. There’s also one additional catch with FlxSprites.

The Catch: Default Flixel Sprite

Flixel has this weird habit of inserting a default sprite if you don’t add a sprite yourself. This means that if you try and jump straight into drawing a line, the default Flixel sprite jumps in and then gets partially overwritten by your line.

Here’s the code I had been using:

var tempWidth:int = this.x - this.target.x;
var tempHeight:int = this.y - this.target.y;
				
this.drawLine(0, 0, tempWidth, tempHeight, 0xff0000, 2);

Find the width and height of the line. Draw the line from the bullet’s origin to the target’s origin. Seems simple, right? Unfortunately, Flixel only draws graphics within the actual height and width of the sprite. So to fix that, we have to create a sprite big enough to encompass the entire laser beam, move the sprite to the top-left corner of the laser’s length and draw the laser from the tower to the target.

Here’s the new code:

var tempWidth:int = Math.abs(this.x - this.target.x);
var tempHeight:int = Math.abs(this.y - this.target.y);
this.makeGraphic(tempWidth, tempHeight, 0x00000000);
this.x = Math.min(this.x, this.target.x);
this.y = Math.min(this.y, this.target.y);
	
this.drawLine(startPoint.x < this.target.x ? 0 : tempWidth, 
    startPoint.y < this.target.y ? 0 : tempHeight, 
    startPoint.x > this.target.x ? 0 : tempWidth,
    startPoint.y > this.target.y ? 0 : tempHeight, 0xff0000, 2);

The end result

Next I’ll be adding the “Wave” type tower back in and adding some UI so you can actually see the stats on the towers and enemies. Almost back to where I had been. Flixel has made the code for this game a lot simpler and taken some of the weird bugs out of it too.

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.

Here’s the current status on my Weekend Tower Defense game.

So the changes since the last video I posted are 2 new tower types, Wave and Laser. The Wave tower hits all enemy in range simultaneously and deals a lot of damage, but fires very slowly. The laser does very little damage per hit, but fires continuously, so it works well for lots of fast, weak enemies.

There’s also a wave counter showing all the upcoming waves so that the player can actually make plans instead of just reacting to what’s coming right now. I’ve finally balanced the amount of money the player has throughout the level with the strength of the enemies, so that you actually have to make a plan in order to finish the level without taking damage. It’s not too hard yet, but it’s a start.

I’ve been playing around this last week with Flixel. It’s an open source game-making library for flash that will hopefully make it a little bit easier to develop games in the future. I’m hoping it will also teach me the “proper” way to program a game, since it supports game states and automates a lot of collision detection, event detection and clean-up. This should at least eliminate my horrible AS3 event scripting in the future (events are a nightmare in AS3 because they can cause a lot of memory leaks).

The first set of changes I’ve made to the game were to add a tower design section. My current idea is that as you play levels, you will earn pieces of equipment for your towers. Then you’ll go into the tower design to equip each of your towers.

Players will only be able to use the top 4 towers at a time, but they will be able to design up to 8. Each tower will have a basic type, but the equipment will give customization, either to increase the tower’s abilities, or to decrease the cost of the towers. Currently, all you can do is reorder the towers. I think for a temporary fix I’ll implement the ability to manually adjust the tower stats so that I can test new builds.

Initial version completed last night

I’ve updated it slightly since uploading this video. Now the buttons slide into their new order over a 0.25 second animation, making it more clear which towers are moving and what the new order is.

The next things I’ll be working on are:
1. Actually allowing tower stats to be changed.

2. Saving the tower designs to the local machine.

3. Adding a couple different base tower types (such as an instant fire laser and an area of effect tower).

Well, we finished up around 5 and you can play the results for yourself here. Unfortunately, we didn’t get the chance to actually put a win condition in there for our one and only map. We also didn’t get around to making any additional towers, so you’re stuck with the standard tower. It’s currently getting a 1.85/5 rating on Kongregate.

Currently, our plan is for each of us to take the results and add on to it ourselves to see who can make a better game. Perhaps the updated versions will actually rate as games instead of just prototypes of games. We’ll see…

Overall, I’m very happy with the results of this weekend. This kind of tempts me to submit the current prototype of my TBS game, but I don’t think it’s quite ready. Hopefully some time soon.

Now that Ken is more familiar with coding a game in general and with AS3 specifically, I think we’ll try another one of these game jams in the future. It was incredibly productive and I felt like a learned a lot from the experience too.

Ok, so lot’s of coding done over the last 24 hours. The game now acts like an actual game, just without the help interface bits that make it possible to understand the rules. And without the restrictions of needing funds in game to purchase towers. And without any actual strategy because there’s only one tower type and one enemy type. But now it works.

Here’s a video of the results so far.

Next is making a more interesting map, more towers, more enemies and an actual game mechanic where you can win or lose.

My friend Ken and I started a game jam Friday night. I’ve been up working on this game for almost 9 hours now, and while what I have doesn’t look too impressive, there’s a lot of planning that’s already been completed as well as a few technological issues caused by Windows Vista (his computer, not mine). Also, it’s been mostly me on the programming because he’s both more sensitive to alcohol and less sensitive to caffeine.

I figured I’d post the results so far for all to see. It’s not much: a tiled map generator, a “Tower” that fires bullets at (0,0), sound effects, music and a mute button. But I think we’ve laid a good foundation and have a good plan of attack for the next 36-48 hours. Without further ado, here’s the game currently.

Hopefully we’ll have much more come tomorrow afternoon. Stay tuned!

I’ve completed re-coding my game from scratch and the code is much cleaner and much more reusable this time. I managed to add some background music and sound effects during attacks. I’ve also got a stage selection page working (though admittedly it’s not much at this point). I think it’s much more obvious now which units can still be moved, and the flow of each turn is much smoother (though you’ve lost the ability to attack before moving). The music and sound effects are just filler at the moment, I’m going to try and compose my own bg music at some point. As promised, here’s the video:

Please ignore the 2 spots in the video where the music skips forward. I had a couple bugs pop up that required me to review my code midway through the videos and didn’t have the time to figure out what was causing the errors.

I need some feedback on the control scheme. Currently, you choose to not attack anything by clicking on the unit again or by clicking on an empty attack square. I forgot to show it in the video, but if you click outside of the highlighted move/attack area, you cancel the turn (this can’t be done after an attack is completed). Should I change this? I found myself accidently choosing not to attack a couple times during testing. Would a menu that gives you the option to attack, end or cancel be more useful after the movement selection is complete? Your feedback is appreciated!

So it’s another busy weekend, with little time for coding. But I did have time to create a gameplay video from the old code which is currently uploaded to Flash Game License.

Some of the features seen in this video have already been removed from the newest version. The two buttons that appear when you click on a unit have been removed in favor of automatically going to movement. The game no longer scrolls when you go to the edges of the map either, it’s now a click and drag interface.

Also, none of the images in the video are the final versions, they’re just pictures I pulled from Google to have something to work with. Let me know what you think in the comments.

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.