J.D Nicholls
Founding Full-Stack Web3 Engineer at @baxusco | Digital nomad 🎒 | Mentor 👨🏫 | Speaker 🗣️ | Developer 👨💻 | Creator of @proyecto26 #opensource #developer
This is PHASER!
Loading WebGL...
Fork this example in Codepen here
Juan David Nicholls Cardona
What can Phaser do for you?
Drawings
Animations
Mobile Games
Physics |
Amazing Websites
|
2D Games |
HELLO WORLD!
var game = new Phaser.Game(415, 570, Phaser.AUTO, '', {
init: function() {
this.stage.backgroundColor = "#FF0000";
},
create: function() {
this.helloWorld = this.game.add.text(
this.game.world.centerX,
this.game.world.centerY,
"Hello World", {
font: "60px Arial",
fill: "#ffffff"
}
);
this.helloWorld.anchor.set(0.5);
},
update: function() {
this.helloWorld.angle += 1;
}
});
Fork this example in Codepen here
var game = new Phaser.Game(400, 400, Phaser.AUTO, 'game', {
preload: function(){
//By default if the browser tab loses focus the game will pause.
this.stage.disableVisibilityChange = true;
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
this.game.stage.backgroundColor = '#FFF';
this.game.load.image('heart', heartURI);
this.game.load.spritesheet('button', buttonURI, 150, 149);
},
create:function(){
var midX = this.game.world.centerX;
var midY = this.game.world.centerY;
this.lives = this.game.add.group();
this.lives.create(midX - 64, midY - 30, 'heart').anchor.set(0.5);
this.lives.create(midX - 32, midY - 30, 'heart').anchor.set(0.5);
this.lives.create(midX, midY - 30, 'heart').anchor.set(0.5);
this.lives.create(midX + 32, midY - 30, 'heart').anchor.set(0.5);
this.lives.create(midX + 64, midY - 30, 'heart').anchor.set(0.5);
this.btnKill = this.game.add.button(
this.game.world.centerX,
this.game.world.centerY + 50,
'button',
this.kill,
this,
1, 1, 0, 1);
this.btnKill.scale.set(0.5);
this.btnKill.anchor.set(0.5);
},
kill: function(){
this.lives.getTop().destroy();
if(this.lives.length == 0){
setTimeout(function(){
game.state.restart();
}, 1000);
}
}
});
Buttons, Groups and Images(Sprites)!
Fork this example in Codepen here
var RotateSprite = function (game, x, y, key, frame, keyRotate) {
Phaser.Sprite.call(this, game, x, y, key, frame);
var self = this;
//Code Code Code
//self.onDragStart();
return self;
};
RotateSprite.prototype = Object.create(Phaser.Sprite.prototype);
RotateSprite.prototype.constructor = RotateSprite;
RotateSprite.prototype.update = function() {
var self = this;
};
//Other methods
RotateSprite.prototype.onDragStart = function(sprite) {
this.isDragging = true;
};
Fork this example in Codepen here
Plugins
Check the example here!
By J.D Nicholls
A talk about Phaser Framework and 2D Games!
Founding Full-Stack Web3 Engineer at @baxusco | Digital nomad 🎒 | Mentor 👨🏫 | Speaker 🗣️ | Developer 👨💻 | Creator of @proyecto26 #opensource #developer