Phaser.js Notes

phaser_notes.txt

Phaser.js Notes
By: Mouseroot


Phaser init
-----------
	var game = new Phaser.Game(width, height, Render_mode, canvas_id, gamestate_object, transparent_canvas, anti-alias, physics);
		render_modes
			Phaser.CANVAS - Force canvas
			Phaser.WEBGL - Force webgl
			Phaser.AUTO - Tries webgl, falls back to canvas

		canvas_id
			the id of the pre-existing div

		gamestate_object
			simple object holding the game functions
				init - called before everything else
				paused - called when game loses focus
				preload - function to run before create
				create - gameobject creation
				update - called every frame (input / logic)
				
		transparent_canvas
			bool on whether the canvas background should be transparent or not
		
		anti-alias
			whether to draw all textures smooth or not (disable with pixel-art)
			
		physics
			preconfigred physics settings to pass to the physics world at initialization
			


Keyboard setup
--------------
	var keyTest = game.input.keyboard.addKey(Phaser.Keyboard.UPCASE_KEY);
		ESC - escape
		ENTER - enter
		A-Z - a-z

		if(keyTest.isDown) {

		}

	var cursors = game.input.keyboard.createCursorKeys();
	
	if(curors.left.isDown) {

	}

Input
-----
	game.input.onUp.add(callback, this);
	game.input.onDown.add(callback, this);

	function callback(pointer) {
		pointer.worldX / Y

	}


Random
----------
	game.rnd.integerInRange(1, 100);
	game.rnd.between(1, 100); //same as above
	
	game.rnd.angle() //Angle between -180 and 180
	game.rnd.pick([1,5,10]); //randomly chooses one
	
	

	var randomArr = ["Phaser.io","HTML5","Javascript","ES6"];
	Phaser.ArrayUtils.getRandomItem(randomArr,0,randomArr.length);


Camera
------
	game.camera.follow(player);
	player.fixedToCamera = true;


Sprites
-------
	game.load.image("static_image","assets/images/bg.png");
	game.load.spritesheet("player","assets/images/player_sheet.png",32,32);

	var player = game.add.sprite(200,200,"player");
	player.anchor.set(0.5);
	player.scale.set(0.7);

	player.frame = 5;


Animations
----------

	player.animations.add("name",[0,1,2,3],framerate,looping_bool);
	player.animations.play("name");
	player.animations.stop();


Text
----
	var text = game.add.text(x, y, text, {font:"",fill:"#FF0000",align:"center"});
	text.anchor.set(0.5);


Sprite/Group Events
-------------------
	
	//Enable mouse interaction
	sprite.inputEnabled = true

	sprite.events.onInput					 .add(callback, this)
						 Over, Out, Down, Up

	function callback(sprite) {

	}


Tilemaps
--------

	var map,layer;

	game.load.tilemap("map","assets/maps/map.json", null, Phaser.Tilemap.TILED_JSON);
	game.load.image("tiles","assets/images/tileimages.png");

	map = game.add.tilemap("map");
	map.addTilesetImage("Original_image_name");

	layer = map.createLayer("original_layer_name","tiles");
	layer.resizeWorld();

	map.setCollision([1,6,9],true);
	map.setCollisionBetween(1,6);

	//Tile id 10
	map.setTileIndexCallback(10,hitPickup,this);


	game.physics.arcade.collide(player, layer);

	/*
	=
	=	When dealing with tilemap collision checks you use
	=		player.body.blocked
	=	not
	=		player.body.touching
	*/



Physics
-------

	ARCADE
	------
		game.physics.startSystem(Phaser.Physics.ARCADE);

		game.physics.arcade.enable(player);
		game.physics.enable(player, Phaser.Physics.ARCADE);
		player.body
					velocity //Movement
					setSize(x,y,offset_x, offset_y); //Collision rect size

		game.physics.arcade.collide(player, other_object_or_group);

		game.physics.arcade.collide(player, tile_layer, collisionCallback, null, this);

		function collisionCallback(player, tile) {
			//Perform logic on tile or player

			//the tile number
			tile.index
		}


Scale
-----

	game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
	game.scale.setMinMax(480,260, 1024, 768);
	game.scale.pageAlignHorizontally = true;
	game.scale.pageAlignVertically = true;
	game.scale.forceOrientation(true, false);


Pause
-----
	if(escapeKey.isDown && escapeKey.duration < 5) {
		if(!paused) {
			paused = true;
		}
		else {
			paused = false;
		}
	}
	
Timers
------
	game.time.events.loop(time, function, this); - infinte loop
	game.time.events.repeat(time, number of repeats, function, this); - loops times then stops
	game.time.events.add(time, function, this); - one time event
	Phaser.Timer.SECOND