Update Method: Phaser

Update method is responsible for updating and re-drawing the game objects. Phaser by default will aim to run at 60 frames per second – that means, it updates your game 60 times per second, as long as its state is active.

Make sure to watch this video tutorial before continuing:
State Manager: Phaser

Video Tutorial List At One Place:
Phaser Video Tutorial List: Game Framework

In this video you’ll learn:
1. Update Method.
2. Image rotation.

Update Method And Image Rotation: Phaser

HTML File – index.html

< !DOCTYPE html>






     

This code remains same from our previous tutorial – State Manager: Phaser.

Javascript File – Main File

var Technotip = {};

Technotip.Main = function(game){
    
};

Technotip.Main.prototype = {
   preload: function(){
        this.load.image('org', '/images/logo1.png');
        this.load.image('com', '/images/logo2.jpg');
   },
   create: function(){
        this.add.sprite(10, 20, 'org');
        this.logo = this.add.sprite(100, 100, 'com');
        this.logo.anchor.set(0.5);
    },
    update: function(){
       this.logo.rotation += 0.01;
    }
};

In the create method, we reference second image(i.e., image with ‘com’ reference name) with a variable this.logo
We could set the anchor point of rotation using anchor.set() method.
If set to 0, it rotates with images right top corner as it’s rotating point.
If set to 0.5, it rotates with images center as the rotating point.
If set to 1, it rotates with the images left bottom corner as its rotating point.

Update Method
Update method is called 60 times per second – so in our code, the value of rotation property increments 0.01 x 60 times for every second. Update method keeps running until there is any logical termination or with the shutdown of the state.