Home > Flash Games, Flixel, Weekend Tower Defense > Drawing Lines in Flixel

Drawing Lines in Flixel

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

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

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.

  1. June 8, 2013 at 9:53 pm

    It’s interesting that you made the sprite box the size of the laser. I’ve been considering building a div with three bullets in it visually, and then checking for a hit on the larger div rather then on each individual bullet in order to improve game performance.

    I see your blog post, and raise you one blog post and one feature. 🙂 Also, need some testing when you get around to it.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: