Posts Tagged ‘flixel’

How to create a starfield in 5 lines of code (or less)

Wednesday, June 25th, 2014 by Phillip Napieralski

I recently ported my simple starfield demo over from actionscript/flixel to haxeflixel with create success and ease.

However, there’s an even easier way with the flixel addons!

Overview

Let’s see what the final result will be like – check it out:

Now that I have your attention, let’s take a quick walk through the steps to get this starfield running:

  • Install flixel addons
  • Add flixel addons to your project – one line of code
  • Add imports to your FlxState – one line of code
  • Create your starfield – 1-3 lines of code

Install flixel addons

Type this:

haxelib install flixel-addons

Afterwards, type

haxelib list

…to see what plugins you already have installed and ready for consumption.

Add flixel addson to your project

Add the following to your Project.xml file (which should be in the root directory of your project folder:

<haxelib name="flixel-addons" />

You’ll see this listed, but commented out by default, under the “libraries” section of your xml file.

Add imports

Add the following to the top of the file where your starfield will be created and used:

import flixel.addons.display.FlxStarField.FlxStarField2D;

Create the starfield!

Now that you’re all set-up, let’s create the starfield. Here’s some simple code to create the starfield and adjust it’s speed:

var starField:FlxStarField2D = new FlxStarField2D(0 /*X*/, 0 /*Y*/, FlxG.width, FlxG.height, 300);
starField.setStarSpeed(1, 80);
		
add(starField);

Put this code somewhere in your create method and feel free to modify the star speed anytime. There is also a similarly named FlxStarField3D.

Find it on github

I posted a super small sample that you can download and use with flixel addons version 1.1.0. Have fun!

Hope that helps!

How to make a scrolling star field background with HaxeFlixel

Wednesday, June 18th, 2014 by Phillip Napieralski

A while back, when I was learning Flixel, I created a basic star field for use in my online flash game Starship Destroyer – and also just for fun.

To test out my haxe skills, and generally see how easy porting flixel to haxeflixel would be, I started by porting my basic star field to haxe. My overall conclusion is that porting from flixel to haxeflixel is VERY easy.

Check it out:

Here’s what it does

I won’t keep you waiting, here is the code.

import flixel.FlxG;
import flixel.FlxObject;
import flixel.FlxSprite;
import flixel.FlxState;
import flixel.text.FlxText;
import flixel.ui.FlxButton;
import flixel.util.FlxMath;
import flixel.util.FlxPoint;
import flixel.util.FlxVector;
import flixel.group.FlxTypedGroup;

/**
 * A class for the starfield
 */
class StarField extends FlxObject {
	private static var NUM_STARS:UInt = 75;
	private var _stars:FlxTypedGroup<FlxSprite>;
	
	/**
	 * @param   ang This is the angle that the starField will be rotating (in degrees)
	 * @param   speedMultiplier
	 */
	public function new(ang:Float = 90, speedMultiplier:Float = 4):Void {          
		angle = ang;
		_stars = new FlxTypedGroup<FlxSprite>(NUM_STARS);
		 
		var radang:Float = angle * Math.PI / 180;
		var cosang:Float = Math.cos(radang);
		var sinang:Float = Math.sin(radang);
		 
		for (i in 0...NUM_STARS) {
			var str:FlxSprite = new FlxSprite(Math.random() * FlxG.width, Math.random() * FlxG.height);
			var vel:Float = 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.makeGraphic(2, 2, 0x00ffffff | transp);
			str.velocity.x = cosang * vel;
			str.velocity.y = sinang * vel;
			_stars.add(str);
		}
		
		super();
	}
	
	/**
	 * Rotate the starField
	 * @param   howMuch Input the amount of rotation in degrees
	 */
	public function rotate(howMuch:Float = 1):Void {
		for (i in 0...NUM_STARS) {
			var str:FlxSprite = _stars.members[i];
			var velVector:FlxVector = new FlxVector(str.velocity.x, str.velocity.y);
			
			velVector.rotateByDegrees(howMuch);
		
			str.velocity = velVector;
		}
	}
	 
	override public function update():Void {
		_stars.update();
		 
		for (i in 0..._stars.members.length) {
			var star:FlxSprite = _stars.members[i];
			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 draw():Void {
		_stars.draw();
	}
}

Then here’s an example on how to use it – note that I simply used the default state (MenuState) for this code snippet. You could easily re-used pieces of it in your own, more complex, FlxState:

/**
 * A FlxState which can be used for the game's menu.
 */
class MenuState extends FlxState
{	
	// state
	// 0 = stopped
	// 1 = rotate CW
	// -1 = rotate CCW
	private var state:UInt = 1;
	private var starField:StarField;
	/**
	 * Function that is called up when to state is created to set it up. 
	 */
	override public function create():Void
	{
		starField = new StarField(45);
		add(starField);
		
		var title = new FlxText(0, 0, FlxG.width, "HaxeFlixel");
		title.setFormat(null, 42, 0xeeeeee, "center");

		add(title);
		
		var butStop = new FlxButton(10, 10, "Stop rotation", function() { state = 0; } );
		add(butStop);
		
		var butRotateCCW = new FlxButton(10, 50, "Rotate CCW", function() { state = -1; } );
		add(butRotateCCW);
		
		var butRotateCW = new FlxButton(10, 90, "Rotate CW", function() { state = 1; } );
		add(butRotateCW);
		
		super.create();
	}
	
	/**
	 * Function that is called when this state is destroyed - you might want to 
	 * consider setting all objects this state uses to null to help garbage collection.
	 */
	override public function destroy():Void
	{
		super.destroy();
	}

	/**
	 * Function that is called once every frame.
	 */
	override public function update():Void
	{
		super.update();
		starField.rotate(cast(state,Float));
	}	
}

Or, if you’re really stuck, check it out from my github.

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.