Teleporter, treadmill and cannon

July 13, 2011AS3, Box2D, Citrus Engine, Flash, Games, Physicsas3, box2D, citrusengine, flash, gamesAymeric

After my game school project (Kinessia), I’m still doing some experiments with the Citrus Engine.

On its latest update, there was some new objects :
– a powerful particle system.
– new objects : missile, reward and reward box.

In this tutorial, I wil explain how to create new specific object which extends a Citrus Engine object.
At the end, we will have : a teleporter, a treadmill and a cannon that fires missile !
An ugly example.

Now let’s start coding ! I start with my new classes and the state at the end.

A teleporter is simply a Sensor which can move PhysicsObject, it has a destination, and a waiting time :

package {
 
	import com.citrusengine.objects.PhysicsObject;
	import com.citrusengine.objects.platformer.Sensor;
 
	import flash.utils.clearTimeout;
	import flash.utils.setTimeout;
 
	/**
	 * @author Aymeric
	 */
	public class Teleporter extends Sensor {
 
		public var endX:Number;
		public var endY:Number;
		public var object:PhysicsObject;
 
		public var time:Number = 0;
		public var needToTeleport:Boolean = false;
 
		protected var _teleporting:Boolean = false;
 
		private var _teleportTimeoutID:uint;
 
		public function Teleporter(name:String, params:Object = null) {
			super(name, params);
		}
 
		override public function destroy():void {
 
			clearTimeout(_teleportTimeoutID);
 
			super.destroy();
		}
 
		override public function update(timeDelta:Number):void {
 
			super.update(timeDelta);
 
			if (needToTeleport) {
 
				_teleporting = true;
 
				_teleportTimeoutID = setTimeout(_teleport,time);
 
				needToTeleport = false;
			}
 
			_updateAnimation();
		}
 
		protected function _teleport():void {
 
			_teleporting = false;
 
			object.x = endX;
			object.y = endY;
 
			clearTimeout(_teleportTimeoutID);
		}
 
		protected function _updateAnimation():void {
 
			if (_teleporting) {
				_animation = "teleport";
			} else {
				_animation = "normal";
			}
		}
	}
}

A treadmill is a Platform with contacts. Instead of using a simple Platform, I use a MovingPlatform. So we can have a treadmill moving platform, that’s crazy 😀 A treadmill increase velocity of its passengers.

package {
 
	import Box2DAS.Dynamics.b2Body;
 
	import com.citrusengine.objects.platformer.MovingPlatform;
 
	/**
	 * @author Aymeric
	 */
	public class Treadmill extends MovingPlatform {
 
		public var speedTread:Number = 3;
		public var startingDirection:String = "right";
 
		public var enableTreadmill:Boolean = true;
 
		public function Treadmill(name:String, params:Object = null) {
			super(name, params);
 
			if (startingDirection == "left") {
				_inverted = true;
			}
		}
 
		override public function destroy():void {
 
			super.destroy();
		}
 
		override public function update(timeDelta:Number):void {
 
			super.update(timeDelta);
 
			if (enableTreadmill) {
 
				for each (var passengers:b2Body in _passengers) {
 
					if (startingDirection == "right") {
						passengers.GetUserData().x += speedTread;
					} else {
						passengers.GetUserData().x -= speedTread;
					}
 
				}
			}
 
			_updateAnimation();
		}
 
		protected function _updateAnimation():void {
 
			if (enableTreadmill) {
				_animation = "move";
			} else {
				_animation = "normal";
			}
		}
	}
}

And the last object, the cannon, a bit more complex. It extends Platform, in most of the games you can’t move it, so it doesn’t need to be a box2d dynamic body, static is ok. A cannon has a fire rate, a direction, and it fires missiles.

package {
 
	import com.citrusengine.objects.PhysicsObject;
	import com.citrusengine.objects.platformer.Missile;
	import com.citrusengine.objects.platformer.Platform;
 
	import org.osflash.signals.Signal;
 
	import flash.events.TimerEvent;
	import flash.utils.Timer;
 
	/**
	 * @author Aymeric
	 */
	public class Cannon extends Platform {
 
		public var onGiveDamage:Signal;
 
		public var fireRate:Number;
		public var startingDirection:String = "right";
 
		public var missileWidth:uint = 20;
		public var missileHeight:uint = 20;
		public var missileSpeed:Number = 2;
		public var missileAngle:Number = 0;
		public var missileExplodeDuration:Number = 1000;
		public var missileFuseDuration:Number = 10000;
		public var missileView:String = "";
 
		protected var _firing:Boolean = false;
 
		private var _timer:Timer;
 
		public function Cannon(name:String, params:Object = null) {
			super(name, params);
 
			onGiveDamage = new Signal(PhysicsObject);
		}
 
		override public function destroy():void {
 
			onGiveDamage.removeAll();
 
			_timer.stop();
			_timer.removeEventListener(TimerEvent.TIMER, _fire);
 
			super.destroy();
		}
 
		override public function update(timeDelta:Number):void {
 
			super.update(timeDelta);
 
			_updateAnimation();
		}
 
		protected function _damage(missile:Missile, contact:PhysicsObject):void {
 
			if (contact != null) {
				onGiveDamage.dispatch(contact);
			}
		}
 
		public function startFire():void {
 
			_firing = true;
 
			_timer = new Timer(fireRate);
			_timer.addEventListener(TimerEvent.TIMER, _fire);
			_timer.start();
		}
 
		public function stopFire():void {
 
			_firing = false;
 
			_timer.stop();
			_timer.removeEventListener(TimerEvent.TIMER, _fire);
		}
 
		protected function _fire(tEvt:TimerEvent):void {
 
			var missile:Missile;
 
			if (startingDirection == "right") {
				missile = new Missile("Missile", {x:x + width, y:y, width:missileWidth, height:missileHeight, speed:missileSpeed, angle:missileAngle, explodeDuration:missileExplodeDuration, fuseDuration:missileFuseDuration, view:missileView});
			} else {
				missile = new Missile("Missile", {x:x - width, y:y, width:missileWidth, height:missileHeight, speed:-missileSpeed, angle:missileAngle, explodeDuration:missileExplodeDuration, fuseDuration:missileFuseDuration, view:missileView});
			}
 
			_ce.state.add(missile);
			missile.onExplode.addOnce(_damage);
		}
 
		protected function _updateAnimation():void {
 
			if (_firing) {
				_animation = "fire";
			} else {
				_animation = "normal";
			}
		}
	}
}

package { import com.citrusengine.objects.PhysicsObject; import com.citrusengine.objects.platformer.Missile; import com.citrusengine.objects.platformer.Platform; import org.osflash.signals.Signal; import flash.events.TimerEvent; import flash.utils.Timer; /** * @author Aymeric */ public class Cannon extends Platform { public var onGiveDamage:Signal; public var fireRate:Number; public var startingDirection:String = "right"; public var missileWidth:uint = 20; public var missileHeight:uint = 20; public var missileSpeed:Number = 2; public var missileAngle:Number = 0; public var missileExplodeDuration:Number = 1000; public var missileFuseDuration:Number = 10000; public var missileView:String = ""; protected var _firing:Boolean = false; private var _timer:Timer; public function Cannon(name:String, params:Object = null) { super(name, params); onGiveDamage = new Signal(PhysicsObject); } override public function destroy():void { onGiveDamage.removeAll(); _timer.stop(); _timer.removeEventListener(TimerEvent.TIMER, _fire); super.destroy(); } override public function update(timeDelta:Number):void { super.update(timeDelta); _updateAnimation(); } protected function _damage(missile:Missile, contact:PhysicsObject):void { if (contact != null) { onGiveDamage.dispatch(contact); } } public function startFire():void { _firing = true; _timer = new Timer(fireRate); _timer.addEventListener(TimerEvent.TIMER, _fire); _timer.start(); } public function stopFire():void { _firing = false; _timer.stop(); _timer.removeEventListener(TimerEvent.TIMER, _fire); } protected function _fire(tEvt:TimerEvent):void { var missile:Missile; if (startingDirection == "right") { missile = new Missile("Missile", {x:x + width, y:y, width:missileWidth, height:missileHeight, speed:missileSpeed, angle:missileAngle, explodeDuration:missileExplodeDuration, fuseDuration:missileFuseDuration, view:missileView}); } else { missile = new Missile("Missile", {x:x - width, y:y, width:missileWidth, height:missileHeight, speed:-missileSpeed, angle:missileAngle, explodeDuration:missileExplodeDuration, fuseDuration:missileFuseDuration, view:missileView}); } _ce.state.add(missile); missile.onExplode.addOnce(_damage); } protected function _updateAnimation():void { if (_firing) { _animation = "fire"; } else { _animation = "normal"; } } } }

I use a Signal to dispatch event onGiveDamage. It happens if a missile hits PhysicsObject.

And finally my game state :

package {
 
	import Box2DAS.Dynamics.ContactEvent;
 
	import com.citrusengine.core.State;
	import com.citrusengine.objects.PhysicsObject;
	import com.citrusengine.objects.platformer.Hero;
	import com.citrusengine.objects.platformer.Platform;
	import com.citrusengine.physics.Box2D;
 
	/**
	 * @author Aymeric
	 */
	public class MyState extends State {
 
		public function MyState() {
			super();
		}
 
		override public function initialize():void {
 
			var box2d:Box2D = new Box2D("Box2d");
			//box2d.visible = true;
			add(box2d);
 
			var hero:Hero = new Hero("Hero", {x:50, width:30, height:60, view:"hero.swf"});
			add(hero);
 
			var treadmill:Treadmill = new Treadmill("Treadmill", {x:200, y:300, width:400, height:20, view:"treadmill.swf"});
			add(treadmill);
 
			treadmill.enabled = false; //remove moving platform
 
			var teleporter:Teleporter = new Teleporter("Teleporter", {x:300, y:250, width:20, height:20, view:"teleporter.swf"});
			add(teleporter);
 
			teleporter.endX = 50;
			teleporter.endY = 0;
			teleporter.time = 200;
 
			teleporter.onBeginContact.add(_teleport);
 
			Platform.Make("Platform", -5, 150, 5, 300);
 
			var cannon:Cannon = new Cannon("Cannon", {x:450, y:170, width:40, height:40, view:"cannon.swf"});
			add(cannon);
 
			cannon.fireRate = 2500;
			cannon.startingDirection = "left";
			cannon.missileFuseDuration = 4000;
			cannon.missileView = "missile.swf";
			cannon.startFire();
 
			cannon.onGiveDamage.add(_cannonHurt);
		}
 
		private function _teleport(cEvt:ContactEvent):void {
 
			if (cEvt.other.GetBody().GetUserData() is Hero) {
				cEvt.fixture.GetBody().GetUserData().object = cEvt.other.GetBody().GetUserData();
				cEvt.fixture.GetBody().GetUserData().needToTeleport = true;
			}
		}
 
		private function _cannonHurt(contact:PhysicsObject):void {
 
			if (contact is Hero) {
				Hero(contact).hurt();
			}
		}
	}
}

I handle the teleported object in the state because if I only want to teleport my Hero (so it doesn’t affect Bad Guy) it is easier. The same for cannon hurting : it affects only my Hero, missile will just explode on a Bady Guy without killing it !

As usual you can download my zip.

Flas of my new objects are not included because I didn’t save it… But you can make it really fast using my flash panels for the Citrus Engine 😉 If you haven’t tested it yet, gives it a try !!

34 thoughts on “Teleporter, treadmill and cannon”

martin.kolda says:

July 16, 2011 at 12:31 pm

Hello,
I installated flash panels in my adobe extension manger, but i cannot see it in window: other panels

i am using flash pro cs5
Aymeric says:

July 17, 2011 at 9:23 pm

Hey,

Did you restart Flash after you installed the extension with Adobe Extension Manager ?
martin.kolda says:

July 18, 2011 at 4:00 pm

I did. I have other addons instalated. Just cannot see yours. Thats make me sad 🙁
Aymeric says:

July 18, 2011 at 4:37 pm

Could you tell me if you see the files : CitrusEnginePanels.swf and CitrusEnginePanels.jsfl into :

X:\Users\\AppData\Local\Adobe\Flash CS5\lang\
folders : WindowSWF and Commands.

on mac : /Users//Library/Application Support/Adobe/Flash CS5/lang/Configuration/

And what is your lang ?
martin.kolda says:

July 20, 2011 at 9:27 am

Oh i can see the problem now. It was the “lang” folder. Manual installation fixed that. Nice addon, great job!
Aymeric says:

July 20, 2011 at 10:21 am

Glad you succeed to install it !
It is really annoying if there is problem on installing it with no french version.
I copied/pasted the extension descriptor file (.mxi) from an english version.

I will try to figure it out.
Aymeric says:

July 20, 2011 at 3:54 pm

I would like to test something :
could you try to create the .zxp file thanks to the src folder ? You just need to open the .mxi in Adobe Extension Manager, it will exports a .zxp

Uninstall the extension and reinstall it with your .zxp. Restart flash and tell me if it works 😉
Charlie says:

August 1, 2011 at 3:09 pm

Great article, just what I needed. Thank you!
Paul Wright says:

November 7, 2011 at 1:54 pm

Hi, all these are really helpfull. Thanks Aymeric. Just need to find one which adds a background as I am stumped as to how to do that. what kind of object would that be – based on the camera I guess is would need some physics t create paralax…Just dont get it yet

Thanks best Paul
Aymeric says:

November 7, 2011 at 4:06 pm

Hi Paul, I’m not sure that I’ve understood what you said. If you are looking to create a parallax background, juste use a CitrusSprite and the parallax property 😉
Paul Wright says:

November 19, 2011 at 8:07 pm

Hello,
please would you explain how the “anonymous” array works in making game objects available?

public function CitrusEngineDemo()
{
super();
var objects:Array = [Hero,Platform,Windmill,etc];
…
}

But this array never gets called or directly referenced anywhere!
yet it is essential.

Thanks Paul
Aymeric says:

November 19, 2011 at 10:25 pm

Hi Paul,

In fact it is due to the Level Editor (Flash). If you add your platforms in it, and never import Platform in your State class there will be an error (can’t find property com.citrusengine.objects.platformer.Platform).
I use FDT to develop, and import are automatic, so if I don’t make code with a platform it is removed. So I have created an array with all my objects and most of them are dynamic!

I hope I was clear.
Paul Wright says:

November 23, 2011 at 5:02 pm

Thanks yep got that!

Please could I ask one more question:

Using RewardBox and I don’t understand signals enough to know what the type of event is passed by the listener:

Gem:RewardBox etc (
Gem.onUse.add(callWhenBumped)

private function callWhenBumped(evt:NOT SURE WHAT THIS IS!):void
{
do stuff
}
Thanks for your expertise!
Best Paul
Aymeric says:

November 23, 2011 at 8:20 pm

Hi Paul,

You define Signal’s params when you create it, for example :
onCollect = new Signal(Reward);
Here the signal params is an Rewad class object.

If you create your signal like that :
onCollect = new Signal();
There isn’t params 😉

Hope that was clear!
Paul Wright says:

November 24, 2011 at 7:56 pm

Nope, sorry gap in my brain!
The engine comes with a RewardBox.as and this has two signals declared
onUse = new Signal(RewardBox).
This gets dispatched when hero bumps the reward “platform”

So my question should perhaps have been – How do I “listen” for that
signal and do something with it?

Best

Paul
Aymeric says:

November 24, 2011 at 8:33 pm

Oh ok.
I have never use this classes (Reward & RewardBox), but it shouldn’t be too complex :

var gem:RewardBox…
gem.onUse.add(callWhenBumped);

function callWhenBumped(rewardBox:RewardBox):void {
// make something with my Reward Box, but don’t know what…
}

If you want to have access to the Reward, you shoud listen onRewardCollect’s Signal. However it seems that you can’t easily custom your reward object. Maybe you should modify the original class to have what you want.
Paul Wright says:

November 24, 2011 at 9:21 pm

Ok now I got it going. Thanks Aymeric. Spent a moment on robert Penner signals and then realised that as you have done, this returns a RewardBox.
put a trace in handleBeginContact and discovered that it need to be hit at 90degs (from below)! so I was not getting anywhere with the box on the reward platform on the floor!

This Citrus Engine has really pushed my as3 skills to new levels, thanks to folks like you. Sometimes miss not having had any formal training in programming. Things change so rapidly, it is hard to keep at the edge. Spent many years with director and lingo, now this is a bit wasted, and as you comment, seem like flash is also a finite object too!

Hope you are enjoying your current projects and thank you for your help

Best
Paul
Aymeric says:

November 24, 2011 at 9:51 pm

I’m happy that you have fixed your issue Paul. The Citrus Engine has also helped me to increase my AS3 skills, and also my programming skills : C# used events like Signal libs 😉

I’m sure that what you’ve learned with Director & Lingo aren’t lost, and help you today with Flash.

In 5 years maybe Flash will not be used anymore, but our skills will not be lost! It is not too hard to learn new language when you have strong programming basis skills. At this moment it isn’t too hard for me to learn Objective-C which is not the easiest language thanks to my skills with AS3 and some with C++.

Don’t hesitate to ask me if you have new questions, I will be happy to help you! You can also use the CE’s forum.
Wilson Silva says:

August 23, 2012 at 12:17 pm

The PhysicsObject class is gone. What can we use now?
Aymeric says:

August 23, 2012 at 12:18 pm

Hi Wilson, you just need to use the Box2DPhysicsObject class!
Wilson Silva says:

August 23, 2012 at 12:21 pm

Nevermind, I just found it (: (Box2DPhysicsObject)
Scott Mason says:

February 17, 2015 at 11:36 am

Hey there, I am trying to add the cannon code into my project but I keep getting the error: Main Thread (Suspended: Error: Missile doesn’t have the exploded animation set up in its animations’ array) .

I’m new to flash so I’m not sure what I’m doing wrong. I created a new cannon.as and everything seems to be reading ok. Any hints on what I can try to solve this? Thanks!
Scott Mason says:

February 24, 2015 at 9:59 am

Any suggestions would really be greatly appreciated.
Aymeric says:

February 24, 2015 at 10:06 am

Hey Scott, have a look on the Missile class it needs to have two frames at least.
Scott Mason says:

March 1, 2015 at 10:57 am

Aymeric, thank you for your reply. I am using the missile.swf contained the zip file linked above. Looking at the file, the missile has 20 frames. Is there something different I need to be doing? Sorry if this is such a noob question, I really appreciate your help.
Aymeric says:

March 2, 2015 at 8:54 am

Scott, does it work if you used the missile from the zip file? It has 20 frames, with two labels for the two animations. Hope that help.
Scott Mason says:

March 2, 2015 at 10:10 am

Using the missile in the zip file you provided is what is causing the error. I’m going to be running some more tests to see if I can solve it. So far, I’m still getting the same error.
Aymeric says:

March 2, 2015 at 10:12 am

Sounds weird because compiling the zip project works exactly as expected.
Scott Mason says:

March 2, 2015 at 10:36 am

Do you have an email address I can send the zipped project to? I’d like you to take a look at the source if possible to see why it might be happening.
Aymeric says:

March 2, 2015 at 10:39 am

You’ll find it in the about section, on top.
Scott Mason says:

March 2, 2015 at 10:49 am

Ok, email has been sent. I really appreciate you taking your time to look into man. I’m sure it’s something incredibly simple that’s been causing me days of headache. Great blog and engine btw!
Leo says:

July 27, 2015 at 5:00 pm

Hi, please help !

I can’t find Box2DAS.Dynamics.ContactEvent in Citrus-Engine-master pack, where can i find it ?

Any easier way to set object to those type i wanna teleport?

Thanks!
Aymeric says:

July 28, 2015 at 7:33 am

Hey, Citrus Engine uses a new version of Box2D, so there are some differences!
Leo says:

July 28, 2015 at 1:02 pm

Thanks a lot, i found out a new way to solve it according to your example!

var hero:Hero = new Hero(“hero”, { x:100, y:.100, height:120, width:65 } );
add(hero);

var enemy:Enemy = new Enemy(“enemy”, { x:600, y:100, height:65, width: 100, leftBound:100, rightBound:700 } );
add(enemy);

var teleporter:Teleporter = new Teleporter(“teleporter”, { x:600, y:450, endX:500, endY:150} );
teleporter.onBeginContact.add(teleport)
add(teleporter);

private function teleport(c:b2Contact):void
{

var bodyA:b2Body = c.GetFixtureA().GetBody();
var bodyB:b2Body = c.GetFixtureB().GetBody();

if (bodyA.GetUserData().name == “hero” || bodyA.GetUserData().name == “enemy”)
{
c.GetFixtureB().GetBody().GetUserData().object = c.GetFixtureA().GetBody().GetUserData();
}
else
{
c.GetFixtureA().GetBody().GetUserData().object = c.GetFixtureB().GetBody().GetUserData();
}

}

Aymeric Lamboley

Freelance Interactive & Game Developer

Teleporter, treadmill and cannon

34 thoughts on “Teleporter, treadmill and cannon”

Leave a Reply