Migrating from AS3 to Phaser

[RonanTheAccel]

Hello Phaser friends!,

 

So i'm studying game dev and we only program in AS3 with Flash Develop, so i'm used to an IDE that auto completes everything and helps a lot.

Now i downloaded Phaser, Sublime Text 2 and i'm ready to code.

 

I need to know the main differences, for example. how do you extend a class, i'm used to make something like 

(sorry, it's long)

 

So, i would really appreciate if you can stand out the main points!, i know it's an entire language and  framework so i will try to follow more tutorials, but if you can explain the main differences i would really love it.


Thanks!

package game {	import api.CAnim;	import api.CBulletManager;	import api.CEnemyManager;	import api.CGame;	import api.CGameObject;	import api.CGenericEnemy;	import api.CHelper;	import api.CKeyPoll;	import api.CMath;	import api.CMouse;	import flash.automation.MouseAutomationAction;	import flash.display.MovieClip;	import flash.events.KeyboardEvent;	import flash.ui.Keyboard;	import game.states.CLevelState;	import game.states.CLoseState;		public class CPlayer extends CGameObject 	{				private var mMC:MovieClip;				private var mState:int;				private const STATE_STAND:int = 0;		private const STATE_FREEZE:int = 2;		private const STATE_JUMP_DYING:int = 3;				// Lleva el tiempo del estado. En frames.		private var mTimeState:int;				private var mYFloor:int;				private var mAnim:CAnim;				private const WALK_SPEED:int = 10;				private var mAngle:int = 0;		private const ANG_SPEED:int = 5;				private const SPEED_BULLET:int = 15;				private const MAX_SPEED_SHIP:int = 5;		private const INC_SPEED_SHIP:Number = 0.1;		private var mSpeed:Number = 0.0;				private const FRICTION:Number = 0.95;				private const ACCELERATION:Number = 0.03;		private var mAccel:Number = 0.0;		private const MAX_ACCELERATION:Number = 0.5;				public function CPlayer(aRadius:int) 		{			setRadius(aRadius);			mMC = new CAssets.SHIP as MovieClip;			CGame.inst().getStage().addChild(mMC);						mYFloor = 600 - aRadius;						mAnim = new CAnim();						setX(400);			setY(600 - 40);						setFriction(FRICTION);						setState(STATE_STAND);		}				override public function update():void		{			var enemy:CGenericEnemy;						super.update();						mTimeState++;						mAnim.update();						if (mState == STATE_STAND)			{				if (CKeyPoll.firstPress(CKeyPoll.SPACE) || CMouse.firstPress())				{					fire();				}								// MOUSE				//lookAt(CMouse.getMouseX(), CMouse.getMouseY());								// TECLADO				if (CKeyPoll.pressed(CKeyPoll.LEFT))				{					setAngle(mAngle - ANG_SPEED);				}				else if (CKeyPoll.pressed(CKeyPoll.RIGHT))				{					setAngle(mAngle + ANG_SPEED);				}								if (CKeyPoll.pressed(CKeyPoll.UP))				{					mAccel += ACCELERATION;					if (mAccel > MAX_ACCELERATION)					{						mAccel = MAX_ACCELERATION;					}				}				else				{					mAccel = 0;				}								setAccelX(mAccel * Math.cos(CMath.degToRad(mAngle)));				setAccelY(mAccel * Math.sin(CMath.degToRad(mAngle)));								if (getY() < getRadius())				{					setY(getRadius());					setVelY(0);				}								// Control de borde abajo.				if (getY() > mYFloor)				{					setY(mYFloor);					setVelY(0);				}								enemy = CEnemyManager.inst().collides(this) as CGenericEnemy;				if (enemy != null)				{					hitByEnemy();					// TODO: Matar el enemigo.				}			}			else if (mState == STATE_FREEZE)			{				if (mTimeState > 30)				{					setState(STATE_JUMP_DYING);				}			}			else if (mState == STATE_JUMP_DYING)			{				setAngle(mAngle + 20);				if (mTimeState > 60)				{					setState(STATE_STAND);					//setDead(true);					}			}		}				override public function render():void		{			super.render();						mMC.gotoAndStop(mAnim.getCurrentFrame());								mMC.rotation = mAngle;							mMC.x = getX();			mMC.y = getY();		}				// Funcion invocada cuando un enemigo nos toca.		public function hitByEnemy():void		{			if (mState == STATE_STAND /*|| mState == STATE_WALKING*/)			{				setState(STATE_FREEZE);			}		}				private function setState(aState:int):void		{			mState = aState;			mTimeState = 0;						if (mState == STATE_STAND)			{				mAnim.init(1, 1, 0);				setAngle(0);								setX(400);				setY(300);								setVelX(0);				setVelY(0);				setAccelX(0);				setAccelY(0);			}			else if (mState == STATE_FREEZE)			{				mAnim.init(14, 14, 0);				setAngle(0);								setVelX(0);				setVelY(0);				setAccelX(0);				setAccelY(0);			}			else if (mState == STATE_JUMP_DYING)			{				mAnim.init(14, 14, 0);				setAngle(0);								setVelX(0);				setVelY(-10);				setAccelX(0);				setAccelY(1);			}		}						 		public function fire():void		{			var b:CPlayerBullet = new CPlayerBullet(0x000000, 10);			b.setX( getX() +  getRadius() * Math.cos(CMath.degToRad(mAngle)));			b.setY( getY() +  getRadius() * Math.sin(CMath.degToRad(mAngle)));					b.setVelX( SPEED_BULLET * Math.cos(CMath.degToRad(mAngle)));			b.setVelY( SPEED_BULLET * Math.sin(CMath.degToRad(mAngle)));			b.setAccelX(0);			b.setAccelY(0);			b.render();			CBulletManager.inst().add(;		}				override public function destroy():void		{			super.destroy();						CHelper.removeDisplayObject(mMC);			mMC = null;						mAnim.destroy();			mAnim = null;		}				private function setAngle(aAngle:Number):void		{			mAngle = CMath.clampDeg(aAngle);		}				private function getAngle():Number		{			return mAngle;		}				private function lookAt(aX:Number, aY:Number):void		{			var y:Number = CMouse.getMouseY() - getY(); // cat. op.			var x:Number = CMouse.getMouseX() - getX(); // cat. ady.			setAngle(CMath.radToDeg(Math.atan2(y, x)));				}	}}

[d13]

 

So i'm studying game dev and we only program in AS3 with Flash Develop, 

Are you aware that you can still continue to work in AS3.0 and Flash Develop, and still output HTML5 code?

There are few options:

 

OpenFL:

http://www.openfl.org

 

Flambe:

http://getflambe.com

 

They'll both fit in neatly with your existing workflow.

 

Phaser and low-level HTML5 game coding is a whole other universe.

It's fun, but be prepared for many completely new paradigms and to re-think and re-build many of your skills from scratch.

[clark]

Hi mate, 

 

Check out TypeScript if you are coming from a AS3 background (as am I).

Here is your class in TypeScript.   This same class in JavaScript is a nightmare which will requre you to read a few books on JavaScript.   There is no need to learn all that garbage when Microsoft have done it for you. You will learn JavaScript when you debug your stuff in Chrome.... You learn via TypeScript how JavaScript does classes or you can just ignore it entirely with source maps. 

Also, you get full Intellisense.  Meaning that pressing "this." will bring up a list of properties/methods exactly like ActionScript.

It is so similar to AS3  (with more advanced features such as overloading, generics, etc) that you will go from rookie Javascripter to the Boss in a few days or a week or a month depending on how much you play with it.

module game {     export class CPlayer extends CGameObject{         constructor(aRadius: number){         }     }}

And here is the JavaScript version of that code (not really but that is how I see it)

{}{}{}{]][][][][]][{}{{*(*(*(*(*(*)_)_)_)_) prototpye....object.extends(someshit about a constructor here) self executing anonymous function...((())){}{}....this that _this {}{}{}{}{}{}{}{][][][[[]((()) this this {}{{[]

I just mean you know what a Class is, an interface, and so on right?  JavaScript does not have these constructs. So without TypeScript (or Actionscript) you are going to have to google stuff like "How do you emulate an interface in JavaScript" or even worse, try to fit into a new functional paradigm which just does not make sense what so ever to any project you ever made previously.

 

[d13]

This same class in JavaScript is a nightmare which will requre you to read a few books on JavaScript.   

 

Typescript implements JavaScript's own class paradigm:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes