Fading drawn lines + turning off Anti-Alias

Hello ladies and gentelmen;

I am rather new to action-scripting though familiar with coding. I have been working for a bit on a flash version of Gravity Wars (a fun game). My hope is to have the end result similar to what I have done in C++ ( http://gravitywars.yboris.com/ )

My goal is to have the lines I draw fade after each shot. I know I can change the alpha on the created movie clip (“grid”) but then ALL the lines seem to fade. Perhaps I should create a new movie clip for every new shot-trail I draw? I do not yet know how to better organize my flash file.
My other goal (for now) is to make the lines drawn (I draw them using "createEmptyMovieClip(“grid”,1) and then “grid.lineTo(x,y)”) is to have this line NOT anti-aliased (just like is done in “space penguin” game)

http://www.bigideafun.com/penguins/arcade/spaced_penguin/

This is my code and the flash file to see what it looks like so far. I know it has other problems - but that I will work on later (though if you wish to help with anything - I’m always happy)

http://gravitywars.yboris.com/flash.html

Thank you very much for your help.

I’ve made a fading line like that but I redrew the whole line every frame and adjusted the alpha of each segment. You could use a bunch of different movie clips like you suggested. I don’t know which is faster - might be worth testing.

You can see an example here (I’ll post code if you think it might be relavent):
http://img143.imageshack.us/my.php?image=swirlappdy3.swf

As for anti-aliasing, you can adjust if for the whole movies by setting the _quality property of any movie clip to “LOW” but I don’t think you can do it for individual lines.

[quote=TheCanadian;2349047]You can see an example here (I’ll post code if you think it might be relavent):
http://img143.imageshack.us/my.php?image=swirlappdy3.swf
[/quote]
:stare: That is absolutely beautiful - I’d love to see the code :angel:

I have attempted _quality = “LOW” - but the result is highly unsatisfactory. Unlike “Spaced Penguin” not just the lines - but the planets become aliased (and the lines themselves are non-continuous); they must use some different trick. Anyone have any ideas of what they could have done?

Well that was created in shockwave which deals with raster graphics rather than vector which is why everything in their movie is pixelated. You could achieve that effect using BitmapData but it might be more trouble than it’s worth.

Anyways, here the class that does the above example (in AS2):

//import Point class
import flash.geom.Point;
//class defintion
class SwirlLine extends MovieClip {
	//colour of the line, default set in class prototype
	public var colour:Number = 0xFFFFFF;
	//spread of the vectors off of the mouse direction
	public var spread:Number = 1;
	//determines how long a vector gets drawn for before it is removed from the queue
	public var lifeSpan:Number = 1000;
	//array to hold all of the points for drawing
	private var points:Array;
	//loaction of the mouse in the previous frame
	private var prevMouse:Point;
	public function SwirlLine() {
		//declare points as a new array with the first value going to hold the location of the mouse, this is important for drawing the lines correctly
		this.points = new Array({x:0, y:0});
		//initialize the prevMouse point
		this.prevMouse = new Point();
	}
	//onEnterFrame
	private function onEnterFrame():Void {
		//set the first value of the points array to the location of the mouse
		this.points[0].x = this._xmouse;
		this.points[0].y = this._ymouse;
		//calculate the difference between the previous location of the mouse and its current position
		var dx:Number = this._xmouse - this.prevMouse.x;
		var dy:Number = this._ymouse - this.prevMouse.y;
		//splice a point into the array directly after the first value, at index 1 - this allows the location of the mouse to always be at index 0 for current drawing of the curve
		//the value we splice in contains the vector's x and y location and velocity as well as the time it was added to the array (for determining when its life ends)
		this.points.splice(1, 0, {x:this._xmouse, y:this._ymouse, vx:(dx + Math.random() * [-this.spread, this.spread][Math.round(Math.random())]) / 5, vy:(dy + Math.random() * [-this.spread, this.spread][Math.round(Math.random())]) / 5, life:getTimer()});
		//clear the entire movie clip of our vector drawings so we can start fresh every frame
		this.clear();
		//start the drawing at the mouse location
		this.moveTo(this._xmouse, this._ymouse);
		//loop through all of the points
		//we start at 1 to skip the first point which, as I said earlier, is the location of the mouse (used for drawing)
		for (var i:Number = 1; i < this.points.length; i++) {
			//if the time the point has been around for (getTimer() - this.points*.life) is more than the time allowed as set by the instance . . .
			if (getTimer() - this.points*.life > this.lifeSpan) {
				//. . . remove the point from the drawing queue
				//when we remove the point from the array all the indexes to the right of its position get shifted down so we must decrement i to avoid skipping one
				this.points.splice(i--, 1);
			} else {
				//set the line style, the alpha is determined by the time the point has been alive for
				this.lineStyle(1, this.colour, Math.abs(1 - ((getTimer() - this.points*.life) / this.lifeSpan)) * 100);
				//add the points velocities to its x and y loacations
				this.points*.x += this.points*.vx;
				this.points*.y += this.points*.vy;
				//use the previous point as the control point for the curve
				var cx:Number = this.points[i - 1].x;
				var cy:Number = this.points[i - 1].y;
				//draw the curve
				this.curveTo(cx, cy, (this.points*.x + cx) / 2, (this.points*.y + cy) / 2);
			}
		}
		//store the current mouse position as a point, next frame this will be the position of the last frame
		this.prevMouse = new Point(this._xmouse, this._ymouse);
	}
}

Looks like I already commented it for someone else; lucky you :party:

[QUOTE=TheCanadian;2349983]Looks like I already commented it for someone else; lucky you :party:[/QUOTE]Thank you for sharing the code! Sadly I wasn’t able to get it to compile (I’m such a beginner at flash) - but I understand what happens (I’m not a beginner in programming). I am not sure I can directly implement what you do, and perhaps I will have to resort to some other trick to do what I want. But until then - I’ve given up for a week or two on my project (reading books is more important now).

I will be glad to hear other peoples’ suggestions concerning getting a pixelated line. As of now I’ve run into another puzzle - my imported .gif files get anti-aliased (even though I’m not resizing it) :sen:

my updated version:
http://gravitywars.yboris.com/flash.html
the .fla is there - you can toy with it if you feel like it

I have a very serious concern - if someone knows a better organization of the file than I have - please let me know. As of now my drawing loop goes between two frames at 90fps … and it seems slow. I don’t know how to have a “while” loop that draws non-instantly … I guess I’ll have to set up a timer and fiddle with milliseconds as others seem to be doing.

When my shot leaves the bounds of the screen - I’d rather have no delay when it draws (perhaps I can just dynamically change the fps to 2000 … or are there limitations?)

THANKS :angel: