Today let us learn how to write custom methods/functions in Phaser game application/code.
Make sure to watch this video tutorial before continuing:
Update Method: Phaser
Video Tutorial List At One Place:
Phaser Video Tutorial List: Game Framework
In this video tutorial you’ll learn:
1. Writing Custom method / function.
2. Writing and using local variables – local to that state.
3. Enabling click recognition(event) on image or any game object.
4. Passing parameter to custom method.
5. Creating text on phaser game world.
6. Placing game object to the exact center of game world / game stage.
Enable/Add Click Event On Image/Game Object: Phaser
HTML File – index.html
< !DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascripts/library/phaser.js">
</script>
<script type="text/javascript" src="javascripts/Main.js">
</script>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(400, 400, Phaser.AUTO);
game.state.add('Main', Technotip.Main);
game.state.start('Main');
</script>
</body>
</html> |
This code remains same from our previous tutorial – State Manager: Phaser.
Javascript File – Main State
var Technotip = {};
Technotip.Main = function(game){
var logo;
var text;
};
Technotip.Main.prototype = {
preload: function(){
this.load.image('com', '/images/logo2.jpg');
},
create: function(){
logo = this.add.sprite(this.world.centerX,
this.world.centerY, 'com');
logo.anchor.set(0.5);
text = this.add.text(100, 10, 'My score is 0', {fill: '#ffffff'});
logo.inputEnabled = true;
logo.events.onInputDown.add(this.score, {'points': 1}, this);
},
score: function(){
text.text = 'My score is '+this.points++;
},
update: function(){
logo.rotation += 0.01;
}
}; |
Inside create method, we are using this.world.centerX and this.world.centerY to position the game object(in above code, the logo image) to the exact center of the game world. We create and add a text placeholder by using this.add.text method. The first and second parameter are x and y axis values respectively. The third parameter is the actual text and the fourth parameter is the styling information of the text that is being rendered.
Next we enable input on the image by setting inputEnabled property to true and then add onInputDown event and call this.score custom method whenever user clicks on the image.
Note: Whenever we’re passing argument to our custom method/function, we need to pass it as an object. We can pass multiple key value pairs inside an object. And while accessing these arguments use this keyword followed by dot operator and the key present inside the argument object.
Since I’ve used increment operator on this.points inside this.score method, the value keeps incrementing whenever user clicks on the image.
Why do you need to pass this as 3rd arg? As I see it the second arg is already context.
logo.events.onInputDown.add(this.score, {‘points’: 1}, this);
@cx, Third parameter is a reference to the global game object.