I make spinning animation for coin and i wanna know how to play spinning animation
when coin is not collected
For animations, I would take a look at the examples here: Phaser - Examples - Animation. This example includes an example for creating a sprite and playing an animation on repeat when the scene is first created: Phaser - Examples - Create Animation From Sprite Sheet.
Can you share the code you have tried so far?
var config = {
type: Phaser.AUTO,
width: 1300,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update,
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.image('back', 'assets/sky.png')
this.load.image('ground', 'assets/grass.png');
this.load.audio('Theme', 'assets/Smash_Brothers_Unite.mp3')
this.load.image('point', 'assets/coin/coin_1.png');
this.load.image('point1', 'assets/coin/coin_2.png');
this.load.image('point2', 'assets/coin/coin_3.png');
this.load.image('point3', 'assets/coin/coin_4.png');
this.load.image('point4', 'assets/coin/coin_5.png');
this.load.image('point5', 'assets/coin/coin_6.png');
this.load.image('point6', 'assets/coin/coin_7.png');
this.load.image('point7', 'assets/coin/coin_8.png');
this.load.image('point8', 'assets/coin/coin_9.png');
this.load.image('bomb', 'assets/cokecan.png');
this.load.spritesheet('player', 'assets/idle/Warrior_Idle_1.png', { frameWidth: 35, frameHeight: 44 });
this.load.spritesheet('player_idle', 'assets/idle/Warrior_Idle_2.png', { frameWidth: 35, frameHeight: 44 });
this.load.spritesheet('player_idle1', 'assets/idle/Warrior_Idle_3.png', { frameWidth: 35, frameHeight: 44 });
this.load.spritesheet('player_idle2', 'assets/idle/Warrior_Idle_4.png', { frameWidth: 35, frameHeight: 44 });
this.load.spritesheet('player_idle3', 'assets/idle/Warrior_Idle_5.png', { frameWidth: 35, frameHeight: 44 });
this.load.spritesheet('player_idle4', 'assets/idle/Warrior_Idle_6.png', { frameWidth: 35, frameHeight: 44 });
this.load.spritesheet('player_run_right', 'assets/Run/Warrior_Run_1.png', { frameWidth: 40, frameHeight: 44 });
this.load.spritesheet('player_run_right1', 'assets/Run/Warrior_Run_2.png', { frameWidth: 40, frameHeight: 44 });
this.load.spritesheet('player_run_right2', 'assets/Run/Warrior_Run_3.png', { frameWidth: 40, frameHeight: 44 });
this.load.spritesheet('player_run_right3', 'assets/Run/Warrior_Run_4.png', { frameWidth: 40, frameHeight: 44 });
this.load.spritesheet('player_run_right4', 'assets/Run/Warrior_Run_5.png', { frameWidth: 40, frameHeight: 44 });
this.load.spritesheet('player_run_right5', 'assets/Run/Warrior_Run_6.png', { frameWidth: 40, frameHeight: 44 });
this.load.spritesheet('player_run_right6', 'assets/Run/Warrior_Run_7.png', { frameWidth: 40, frameHeight: 44 });
this.load.spritesheet('player_run_right7', 'assets/Run/Warrior_Run_8.png', { frameWidth: 40, frameHeight: 44 });
this.load.spritesheet('player_run_left', 'assets/Run_Left/Warrior_Run_1.png', {frameWidth: 42, frameHeight: 40 });
this.load.spritesheet('player_run_left1', 'assets/Run_Left/Warrior_Run_2.png', {frameWidth: 42, frameHeight: 40 });
this.load.spritesheet('player_run_left2', 'assets/Run_Left/Warrior_Run_3.png', {frameWidth: 42, frameHeight: 40 });
this.load.spritesheet('player_run_left3', 'assets/Run_Left/Warrior_Run_4.png', {frameWidth: 42, frameHeight: 40 });
this.load.spritesheet('player_run_left4', 'assets/Run_Left/Warrior_Run_5.png', {frameWidth: 42, frameHeight: 40 });
this.load.spritesheet('player_run_left5', 'assets/Run_Left/Warrior_Run_6.png', {frameWidth: 42, frameHeight: 40 });
this.load.spritesheet('player_run_left6', 'assets/Run_Left/Warrior_Run_7.png', {frameWidth: 42, frameHeight: 40 });
this.load.spritesheet('player_run_ledt7', 'assets/Run_Left/Warrior_Run_8.png', {frameWidth: 42, frameHeight: 40 });
this.load.spritesheet('player_jump', 'assets/Jump/Warrior_Jump_1.png', { frameWidth: 35, frameHeight: 44});
this.load.spritesheet('player_jump1', 'assets/Jump/Warrior_Jump_2.png', { frameWidth: 35, frameHeight: 44});
this.load.spritesheet('player_jump2', 'assets/Jump/Warrior_Jump_3.png', { frameWidth: 35, frameHeight: 44});
this.load.spritesheet('player_jump3', 'assets/UptoFall/Warrior_UptoFall_1.png', { frameWidth: 35, frameHeight: 44});
this.load.spritesheet('player_jump4', 'assets/UptoFall/Warrior_UptoFall_2.png', { frameWidth: 35, frameHeight: 44});
//Loading textures sprites conf
}
var platforms;
var player;
var stars;
var Music;
var s;
function create ()
{
Theme = game.add.audio('Theme')
sounds = [Theme];
game.sound.setDecodedCallback(sounds, start, this);
this.add.image(400, 300, 'back');
platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
platforms.create(700, 400, 'ground');
platforms.create(1050, 568, 'ground');
platforms.create(1050, 536, 'ground');
platforms.create(750, 180, 'ground');
platforms.create(100, 300, 'ground');
player = this.physics.add.sprite(100, 450, 'player');
player.setBounce(0.3);
player.setCollideWorldBounds(true);
this.physics.add.collider(player, platforms);
//↑ world building + music
this.anims.create({
key: 'turn',
frames:
[
{ key: 'player' },
{ key: 'player_idle' },
{ key: 'player_idle1'},
{ key: 'player_idle2'},
{ key: 'player_idle3'},
{ key: 'player_idle4'},
],
frameRate: 6,
repeat: -1,
});
//↑ this is not working
this.anims.create({
key: 'right',
frames:
[
{ key: 'player_run_right' },
{ key: 'player_run_right1' },
{ key: 'player_run_right2' },
{ key: 'player_run_right3' },
{ key: 'player_run_right4' },
{ key: 'player_run_right5' },
{ key: 'player_run_right6' },
{ key: 'player_run_right7' },
],
frameRate: 8,
repeat: -1,
});
this.anims.create({
key: 'jump',
frames:
[
{ key: 'player_jump' },
{ key: 'player_jump1' },
{ key: 'player_jump2' },
{ key: 'player_jump3' },
{ key: 'player_jump4' },
],
frameRate: 3,
});
this.anims.create({
key: 'left',
frames:
[
{ key: 'player_run_left' },
{ key: 'player_run_left1' },
{ key: 'player_run_left2' },
{ key: 'player_run_left3' },
{ key: 'player_run_left4' },
{ key: 'player_run_left5' },
{ key: 'player_run_left6' },
{ key: 'player_run_left7' },
],
frameRate: 8,
repeat: -1,
});
//here supposted to be animations to fall but didn't work
// this.anims,create({
// key: 'fall',
// frames:
// [
// { key: 'player_jump3' },
// { key: 'player_jump4' },
// ],
// frameRate: 2,
// repeat: -1
//});
this.anims.create({
key: 'spining',
frames:
[
{ key: 'point' },
{ key: 'point1' },
{ key: 'point2' },
{ key: 'point3' },
{ key: 'point4' },
{ key: 'point5' },
{ key: 'point6' },
{ key: 'point7' },
{ key: 'point8' },
],
frameRate: 9,
repeat: -1,
});
cursors = this.input.keyboard.createCursorKeys();
stars = this.physics.add.group({
key: 'point',
repeat: 13,
setXY: { x: 35, y: 0, stepX: 95 }
});
//↑ where and how supposted spawn points should
stars.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.2, 0.6));
});
//↑ making a math vidth points
this.physics.add.collider(stars, platforms);
this.physics.add.overlap(player, stars, collectStar, null, this);
function collectStar (player, star)
{
star.disableBody(true, true);
}
//↑ physic of points
var score = 0;
var scoreText;
scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000000' });
//↑ making a point counter
function collectStar (player, star)
{
star.disableBody(true, true);
score += 1;
scoreText.setText('Score: ' + score);
//↑ when and how u collect points
if (stars.countActive(true) === 0)
{
stars.children.iterate(function (child)
{
child.enableBody(true, child.x, 0, true, true);
});
//↑ u can collect points i guess
var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);
var bomb = bombs.create(x, 16, 'bomb');
bomb.setBounce(1);
bomb.setCollideWorldBounds(true);
bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);
//↑ spawning bombs add bouncing quick math
}
}
bombs = this.physics.add.group();
this.physics.add.collider(bombs, platforms);
this.physics.add.collider(player, bombs, hitBomb, null, this);
//↑ add bombs phyics so they can colider with something
function hitBomb (player, bomb)
{
this.physics.pause();
player.setTint(0xff0000);
player.anims.play('turn');
gameOver = true;
}
}
function start ()
{
sounds.shift();
Theme.loopFull(0.6);
bass.onLoop.add(hasLooped, this);
}
function update ()
{
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(160);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
console.log("JD2")
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-330);
player.anims.play('jump');
}
//↓ don't work
if (player.body.velocity.y > 0)
{
player.anims.play('fall')
}
//if( star.body.touching.down )
//{
//star.anims.play('spining');
//console.log("JD");
//}
}
i before use console.log when anims is playing and but animation is not visible
and now i trynna to add theme music
For the animations, you will want to add a check if an animation is already playing and if so, only play the animation if it is different than the one that is currently playing. Currently, in your code you are calling the play method on every frame update, which results in the current animation starting over. This results in the sprite looking like the animation is not playing properly.
You can check this by using player.anims.isPlaying to see if an animation is currently playing and get the name of the animation by using player.anims.currentAnim.key.
There is also a conflict between the current turn and fall animation logic, where if the player is falling and they are not holding the left or right key, the update method will first play the turn animation and then the fall animation right after. You might want to add an additional check here to avoid a conflict, or return early from the function.
1 Like
i can’t get it where i should put that
if (player.anims.currentAnim.key !== 'fall') {
player.anims.play('fall', true);
}
You will want to combine that with this logic here in your update function:
if (player.body.velocity.y > 0) {
player.anims.play('fall')
}