Tutorial updated for Phaser 2

Author: photonstorm

README.md

@@ -327,6 +327,7 @@ Beyond version 2.2
 * DragonBones support.
 * Cache to localStorage using If-Modified-Since. [See github request](https://github.com/photonstorm/phaser/issues/495)
 * Allow for complex assets like Bitmap Fonts to be stored within a texture atlas.
+* Look at XDomainRequest for IE9 CORs issues.
 
 
 Nadion

tutorials/02 Making your first game/js/phaser.min.js

@@ -29,12 +29,18 @@
 
 function create() {
 
+    //  We're going to be using physics, so enable the Arcade Physics system
+    game.physics.startSystem(Phaser.Physics.ARCADE);
+
     //  A simple background for our game
     game.add.sprite(0, 0, 'sky');
 
     //  The platforms group contains the ground and the 2 ledges we can jump on
     platforms = game.add.group();
 
+    //  We will enable physics for any object that is created in this group
+    platforms.enableBody = true;
+
     // Here we create the ground.
     var ground = platforms.create(0, game.world.height - 64, 'ground');
 
@@ -46,9 +52,11 @@
 
     //  Now let's create two ledges
     var ledge = platforms.create(400, 400, 'ground');
+
     ledge.body.immovable = true;
 
     ledge = platforms.create(-150, 250, 'ground');
+
     ledge.body.immovable = true;
 
 }

tutorials/02 Making your first game/part4.html

@@ -29,12 +29,18 @@
 
 function create() {
 
+    //  We're going to be using physics, so enable the Arcade Physics system
+    game.physics.startSystem(Phaser.Physics.ARCADE);
+
     //  A simple background for our game
     game.add.sprite(0, 0, 'sky');
 
     //  The platforms group contains the ground and the 2 ledges we can jump on
     platforms = game.add.group();
 
+    //  We will enable physics for any object that is created in this group
+    platforms.enableBody = true;
+
     // Here we create the ground.
     var ground = platforms.create(0, game.world.height - 64, 'ground');
 
@@ -54,9 +60,12 @@
     // The player and its settings
     player = game.add.sprite(32, game.world.height - 150, 'dude');
 
+    //  We need to enable physics on the player
+    game.physics.arcade.enable(player);
+
     //  Player physics properties. Give the little guy a slight bounce.
     player.body.bounce.y = 0.2;
-    player.body.gravity.y = 6;
+    player.body.gravity.y = 300;
     player.body.collideWorldBounds = true;
 
     //  Our two animations, walking left and right.

tutorials/02 Making your first game/part5.html

@@ -30,12 +30,18 @@
 
 function create() {
 
+    //  We're going to be using physics, so enable the Arcade Physics system
+    game.physics.startSystem(Phaser.Physics.ARCADE);
+
     //  A simple background for our game
     game.add.sprite(0, 0, 'sky');
 
     //  The platforms group contains the ground and the 2 ledges we can jump on
     platforms = game.add.group();
 
+    //  We will enable physics for any object that is created in this group
+    platforms.enableBody = true;
+
     // Here we create the ground.
     var ground = platforms.create(0, game.world.height - 64, 'ground');
 
@@ -55,9 +61,12 @@
     // The player and its settings
     player = game.add.sprite(32, game.world.height - 150, 'dude');
 
+    //  We need to enable physics on the player
+    game.physics.arcade.enable(player);
+
     //  Player physics properties. Give the little guy a slight bounce.
     player.body.bounce.y = 0.2;
-    player.body.gravity.y = 6;
+    player.body.gravity.y = 300;
     player.body.collideWorldBounds = true;
 
     //  Our two animations, walking left and right.
@@ -69,7 +78,7 @@
 function update() {
 
     //  Collide the player and the stars with the platforms
-    game.physics.collide(player, platforms);
+    game.physics.arcade.collide(player, platforms);
 
 }
 

tutorials/02 Making your first game/part6.html

@@ -31,12 +31,18 @@
 
 function create() {
 
+    //  We're going to be using physics, so enable the Arcade Physics system
+    game.physics.startSystem(Phaser.Physics.ARCADE);
+
     //  A simple background for our game
     game.add.sprite(0, 0, 'sky');
 
     //  The platforms group contains the ground and the 2 ledges we can jump on
     platforms = game.add.group();
 
+    //  We will enable physics for any object that is created in this group
+    platforms.enableBody = true;
+
     // Here we create the ground.
     var ground = platforms.create(0, game.world.height - 64, 'ground');
 
@@ -56,9 +62,12 @@
     // The player and its settings
     player = game.add.sprite(32, game.world.height - 150, 'dude');
 
+    //  We need to enable physics on the player
+    game.physics.arcade.enable(player);
+
     //  Player physics properties. Give the little guy a slight bounce.
     player.body.bounce.y = 0.2;
-    player.body.gravity.y = 6;
+    player.body.gravity.y = 300;
     player.body.collideWorldBounds = true;
 
     //  Our two animations, walking left and right.
@@ -73,7 +82,7 @@
 function update() {
 
     //  Collide the player and the stars with the platforms
-    game.physics.collide(player, platforms);
+    game.physics.arcade.collide(player, platforms);
 
     //  Reset the players velocity (movement)
     player.body.velocity.x = 0;

tutorials/02 Making your first game/part7.html

@@ -33,12 +33,18 @@
 
 function create() {
 
+    //  We're going to be using physics, so enable the Arcade Physics system
+    game.physics.startSystem(Phaser.Physics.ARCADE);
+
     //  A simple background for our game
     game.add.sprite(0, 0, 'sky');
 
     //  The platforms group contains the ground and the 2 ledges we can jump on
     platforms = game.add.group();
 
+    //  We will enable physics for any object that is created in this group
+    platforms.enableBody = true;
+
     // Here we create the ground.
     var ground = platforms.create(0, game.world.height - 64, 'ground');
 
@@ -58,9 +64,12 @@
     // The player and its settings
     player = game.add.sprite(32, game.world.height - 150, 'dude');
 
+    //  We need to enable physics on the player
+    game.physics.arcade.enable(player);
+
     //  Player physics properties. Give the little guy a slight bounce.
     player.body.bounce.y = 0.2;
-    player.body.gravity.y = 6;
+    player.body.gravity.y = 300;
     player.body.collideWorldBounds = true;
 
     //  Our two animations, walking left and right.
@@ -70,14 +79,17 @@
     //  Finally some stars to collect
     stars = game.add.group();
 
+    //  We will enable physics for any star that is created in this group
+    stars.enableBody = true;
+
     //  Here we'll create 12 of them evenly spaced apart
     for (var i = 0; i < 12; i++)
     {
         //  Create a star inside of the 'stars' group
         var star = stars.create(i * 70, 0, 'star');
 
         //  Let gravity do its thing
-        star.body.gravity.y = 6;
+        star.body.gravity.y = 300;
 
         //  This just gives each star a slightly random bounce value
         star.body.bounce.y = 0.7 + Math.random() * 0.2;
@@ -91,11 +103,11 @@
 function update() {
 
     //  Collide the player and the stars with the platforms
-    game.physics.collide(player, platforms);
-    game.physics.collide(stars, platforms);
+    game.physics.arcade.collide(player, platforms);
+    game.physics.arcade.collide(stars, platforms);
 
     //  Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
-    game.physics.overlap(player, stars, collectStar, null, this);
+    game.physics.arcade.overlap(player, stars, collectStar, null, this);
 
     //  Reset the players velocity (movement)
     player.body.velocity.x = 0;

tutorials/02 Making your first game/part8.html

@@ -35,12 +35,18 @@
 
 function create() {
 
+    //  We're going to be using physics, so enable the Arcade Physics system
+    game.physics.startSystem(Phaser.Physics.ARCADE);
+
     //  A simple background for our game
     game.add.sprite(0, 0, 'sky');
 
     //  The platforms group contains the ground and the 2 ledges we can jump on
     platforms = game.add.group();
 
+    //  We will enable physics for any object that is created in this group
+    platforms.enableBody = true;
+
     // Here we create the ground.
     var ground = platforms.create(0, game.world.height - 64, 'ground');
 
@@ -60,9 +66,12 @@
     // The player and its settings
     player = game.add.sprite(32, game.world.height - 150, 'dude');
 
+    //  We need to enable physics on the player
+    game.physics.arcade.enable(player);
+
     //  Player physics properties. Give the little guy a slight bounce.
     player.body.bounce.y = 0.2;
-    player.body.gravity.y = 6;
+    player.body.gravity.y = 300;
     player.body.collideWorldBounds = true;
 
     //  Our two animations, walking left and right.
@@ -72,14 +81,17 @@
     //  Finally some stars to collect
     stars = game.add.group();
 
+    //  We will enable physics for any star that is created in this group
+    stars.enableBody = true;
+
     //  Here we'll create 12 of them evenly spaced apart
     for (var i = 0; i < 12; i++)
     {
         //  Create a star inside of the 'stars' group
         var star = stars.create(i * 70, 0, 'star');
 
         //  Let gravity do its thing
-        star.body.gravity.y = 6;
+        star.body.gravity.y = 300;
 
         //  This just gives each star a slightly random bounce value
         star.body.bounce.y = 0.7 + Math.random() * 0.2;
@@ -96,11 +108,11 @@
 function update() {
 
     //  Collide the player and the stars with the platforms
-    game.physics.collide(player, platforms);
-    game.physics.collide(stars, platforms);
+    game.physics.arcade.collide(player, platforms);
+    game.physics.arcade.collide(stars, platforms);
 
     //  Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
-    game.physics.overlap(player, stars, collectStar, null, this);
+    game.physics.arcade.overlap(player, stars, collectStar, null, this);
 
     //  Reset the players velocity (movement)
     player.body.velocity.x = 0;
@@ -142,7 +154,7 @@
 
     //  Add and update the score
     score += 10;
-    scoreText.content = 'Score: ' + score;
+    scoreText.text = 'Score: ' + score;
 
 }