I have the following code in phaser, and I want to use a sprite animation instead of a static image, how can I pull that off? Using group to create new bullets. I am creating a new object and with that creating new bullets to get fired by the player. And I want the bullet to rotate with an animated spritshit. How can I do that?
this.bullets = this.physics.add.group({
classType: Bullet,
maxSize: 10,
runChildUpdate: true,
});
The class i am using to create new bullets
var Bullet = new Phaser.Class({
Extends: Phaser.GameObjects.Image,
initialize:
function Bullet (scene)
{
Phaser.GameObjects.Sprite.call(this, scene, 0, 0, "bullet");
this.speed = Phaser.Math.GetSpeed(250, 1);
},
fire: function (x, y, direcao)
{
this.direcao = direcao;
if(direcao == 1){
//Cima
// console.log("Tiro Acima");
this.setPosition(x, y - 10);
this.setActive(true);
this.setVisible(true);
}else if(direcao == 2){
// Baixo
// console.log("Tiro Abaixo");
this.setPosition(x, y 10);
this.setActive(true);
this.setVisible(true);
}else if(direcao == 3){
//Direita
//console.log("Tiro a direita");
this.setPosition(x 10, y);
this.setActive(true);
this.setVisible(true);
}else if(direcao == 4){
//Esquerda
//console.log("Tiro a esquerda");
this.setPosition(x - 10, y );
this.setActive(true);
this.setVisible(true);
} else {
//Debug
console.log("Não disparou");
}
},
update: function (time, delta)
{
if(this.direcao == 1){
//Cima
// console.log("Tiro Acima");
this.y -= this.speed * delta;
}else if(this.direcao == 2){
//Baixo
// console.log("Tiro Abaixo");
this.y = this.speed * delta;
}else if(this.direcao == 3){
//Direita
// console.log("Tiro a direita");
this.x = this.speed * delta;
}else if(this.direcao == 4){
//Esquerda
// console.log("Tiro a esquerda");
this.x -= this.speed * delta;
}else{
//Debug
// console.log("Não disparou");
}
if (this.y < 0)
{
this.setActive(false);
this.setVisible(false);
}
if (this.y > 480)
{
this.setActive(false);
this.setVisible(false);
}
if (this.x < 0)
{
this.setActive(false);
this.setVisible(false);
}
if (this.x > 960)
{
this.setActive(false);
this.setVisible(false);
}
}
});
CodePudding user response：
First you could extend from Phaser.GameObjects.Sprite rather than from Phaser.GameObjects.Image. Then create an animation, with this.anims.create (link to documentation), and start the animation in the fire method , with the method play and stop the animation, when the bullet leaves the display, in the update method.
Here a small working Demo (with pulsating bullet):
document.body.style = 'margin:0;';
var Bullet = new Phaser.Class({
Extends: Phaser.GameObjects.Sprite,
initialize: function Bullet (scene, x, y) {
Phaser.GameObjects.Sprite.call(this, scene, x, y, 'dynamicFrames');
},
fire: function (x, y) {
this.x = x;
this.y = y;
this.play('pulse');
this.setActive(true);
this.setVisible(true);
},
update: function (time, delta) {
let speed = .15;
this.x = speed * delta;
if (this.x > config.width) {
this.setActive(false);
this.setVisible(false);
this.stop();
}
}
});
class Example extends Phaser.Scene
{
constructor () {
super();
}
preload () {
/** CREATE SPRITE FRAME FOR ONLY DEMO --- START */
const canvasFrame = this.textures
.createCanvas('dynamicFrames', 32, 16);
let ctx = canvasFrame.context;
ctx.fillStyle = '#ffff00';
ctx.beginPath();
ctx.arc(8, 8, 8, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(16 8, 8, 6, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
canvasFrame.add(1, 0, 0, 0, 16, 16);
canvasFrame.add(2, 0, 16, 0, 16, 16);
canvasFrame.refresh();
/** CREATE SPRITE FRAME FOR ONLY DEMO --- END*/
this.anims.create({
key: 'pulse',
frames: this.anims.generateFrameNumbers('dynamicFrames', { start: 1, end: 2 }),
frameRate: 8,
repeat: -1
});
}
create(){
this.add.circle(60, 100, 20, 0xffffff);
this.add.rectangle(55, 100, 45, 10, 0xffffff)
.setOrigin(0, .5);
let bullets = this.physics.add.group({
classType: Bullet,
maxSize: 10,
runChildUpdate: true,
});
this.time.addEvent({
delay: 1000,
startAt: 0,
loop: true,
callback: _ => {
bullets
.get(100, 100)
.fire(110, 100);
}
});
}
}
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
physics: { default: 'arcade' },
scene: [ Example ],
banner: false
};
new Phaser.Game(config);<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>CodePudding user response：
For future references, here is the solution using @winner solution.
var Bullet = new Phaser.Class({
Extends: Phaser.GameObjects.Sprite,
initialize:
function Bullet (scene)
{
Phaser.GameObjects.Sprite.call(this, scene, 0, 0, "bullet");
this.speed = Phaser.Math.GetSpeed(250, 1);
},
fire: function (x, y, direcao)
{
//Animação Bala
this.anims.create({
key: 'bulletAnimation',
frames: this.anims.generateFrameNumbers('bullet', {frames: [0, 1, 3, 4, 6, 7, 9, 10]}),
frameRate: 10,
repeat: -1,
});
this.anims.play('bulletAnimation', true);
this.direcao = direcao;
if(direcao == 1){
//Cima
// console.log("Tiro Acima");
this.setPosition(x, y - 10);
this.setActive(true);
this.setVisible(true);
}else if(direcao == 2){
//Baixo
// console.log("Tiro Abaixo");
this.setPosition(x, y 10);
this.setActive(true);
this.setVisible(true);
}else if(direcao == 3){
//Direita
// console.log("Tiro a direita");
this.setPosition(x 10, y);
this.setActive(true);
this.setVisible(true);
}else if(direcao == 4){
//Esquerda
// console.log("Tiro a esquerda");
this.setPosition(x - 10, y );
this.setActive(true);
this.setVisible(true);
}else{
//Debug
console.log("Não disparou");
}
},
update: function (time, delta)
{
if(this.direcao == 1){
//Cima
// console.log("Tiro Acima");
this.y -= this.speed * delta;
}else if(this.direcao == 2){
//Baixo
// console.log("Tiro Abaixo");
this.y = this.speed * delta;
}else if(this.direcao == 3){
//Direita
// console.log("Tiro a direita");
this.x = this.speed * delta;
}else if(this.direcao == 4){
//Esquerda
// console.log("Tiro a esquerda");
this.x -= this.speed * delta;
}else{
//Debug
// console.log("Não disparou");
}
if (this.y < 0)
{
this.setActive(false);
this.setVisible(false);
}
if (this.y > 480)
{
this.setActive(false);
this.setVisible(false);
}
if (this.x < 0)
{
this.setActive(false);
this.setVisible(false);
}
if (this.x > 960)
{
this.setActive(false);
this.setVisible(false);
}
}
});