Archive for the ‘Flixel’ Category

How to make a scrolling star field background with Flixel

Saturday, July 24th, 2010 by Phillip Napieralski

Here is what it does:

The Code

I won’t waste your time, here’s the source code.

package {
	import org.flixel.*;

	public class StarField extends FlxObject {
		public static const NUM_STARS:Number = 75;
		private var _stars:FlxGroup;

		/**
		 * @param	ang This is the angle that the starField will be rotating (in degrees)
		 * @param	speedMultiplier
		 */
		override public function StarField(ang:Number = 90, speedMultiplier:Number = 4):void {
			angle = ang;
			_stars = new FlxGroup();

			var radang:Number = angle * Math.PI / 180;
			var cosang:Number = Math.cos(radang);
			var sinang:Number = Math.sin(radang);

			for ( var i:int = 0; i < StarField.NUM_STARS; i++ ) {
				var str:FlxSprite = new FlxSprite(Math.random() * FlxG.width, Math.random() * FlxG.height);
				var vel:Number = Math.random() * -16 * speedMultiplier;

				// change the transparency of the star based on it's velocity
				var transp:uint = (Math.round(16 * (-vel / speedMultiplier) - 1) << 24);

				str.createGraphic(2, 2, 0x00ffffff | transp);
				str.velocity.x = cosang * vel;
				str.velocity.y = sinang * vel;
				_stars.add(str);
			}
		}

		/**
		 * Rotate the starField
		 * @param	howMuch Input the amount of rotation in degrees
		 */
		public function rotate(howMuch:Number = 1):void {
			angle += howMuch;

			var radang:Number = angle * Math.PI / 180;
			var cosang:Number = Math.cos(radang);
			var sinang:Number = Math.sin(radang);

			for ( var i:int = 0; i < StarField.NUM_STARS; i++ ) {
				var str:FlxSprite = _stars.members[i] as FlxSprite;

				FlxU.rotatePoint(str.velocity.x, str.velocity.y, 0, 0, howMuch, str.velocity);
			}
		}

		override public function update():void {
			_stars.update();

			for (var i:int = 0; i < _stars.members.length; i++) {
				var star:FlxSprite = _stars.members[i] as FlxSprite;
				if (star.x > FlxG.width) {
					star.x = 0;
				} else if (star.x < 0) {
					star.x = FlxG.width;
				}
				if (star.y > FlxG.height) {
					star.y = 0;
				} else if (star.y < 0) {
					star.y = FlxG.height;
				}

			}
		}

		override public function render():void {
			_stars.render();
		}
	}

}

Now to use it, simply add the following in one of your states:

private var sf:StarField = new StarField();

// state constructor
override public function StarState():void {
     this.add(sf);
}

Get the star field demo source code

I also used this star field class in my FIRST ever flash game. Face Defender.

Flixel 2.0 Project Template for FlashDevelop

Sunday, June 6th, 2010 by Phillip Napieralski

I’ve been doing a bit of Flixel (flash game library) programming lately, and to speed up the creation of games I created a Project Template for FlashDevelop that includes a MenuState, PlayState and Preloader. Download the template

How to use it

I will assume that you already have the Flex 4 SDK already setup for FlashDevelop.

To use the template, simply copy it into the “projects” folder in your FlashDevelop installation directory. For me, it was “C:\Program Files (x86)\FlashDevelop\Projects.” Then, in FlashDevelop, simply go to Project -> in the toolbar.

Project, New Project

Then, there should be an option to create a new Flixel 2.0 project.

New Flixel 2.0 Project

That’s it! The new project will include 4 basic files on top of the flixel library (the current stable release as of today).

Update Flixel version in the template

To update the version of flixel in the template, go to where you extracted the template originally (mine was in C:\Program Files (x86)\FlashDevelop\Projects\410 Flixel 2.0 Project\). Then, in the “src” folder, you will see another folder called “org.” Simply overwrite the org folder with the org folder from the latest Flixel distribution. That’s it!