Indenialgamer

Phaser States Player Animation Problem

Recommended Posts

Hi All

 

i was wondering if someone could help me with a phaser state query. 

I have been learning phaser from phaser.io and its all for a html index file however the code seems to be different then to what i need if i was to build a game with states. For example i have a player walking animation but converting it for js states seems to be very difficult, i cannot find a tutorial anywhere.

Any chance someone could point me in the right direction?

 

happy to share the code

 

Thanks

Share this post


Link to post
Share on other sites

Not sure if I understood your question but if not, try to explain again... :P 

States are used, normally, to change screens/scenes/actions in your game like:

state 1 -> load stuffs 

state 2 -> show menu

state 3 -> run game

state 4 -> show credits

state 5 -> show game over screen...

I made a simple example here (you can inspect the code). 

Share this post


Link to post
Share on other sites

Hi Thanks for the example! 

 

basically i have this code which i wrote to fire bullets but i writ it on the index page before i started using states and it was working fine, as soon as i have tried to implement into js for a state it does not work. 

Code :

 

function fireBullet () {

    if (game.time.now > bulletTime)
    {
        bullet = bullets.getFirstExists(false);
        if (bullet)
        
        {
            bullet.reset(player.x + 20, player.y - 40);
            bullet.body.velocity.y = -700;
            bulletTime = game.time.now + 150;
        }

Share this post


Link to post
Share on other sites

You need to put your entire code in the state not just a function, ok? (If you have a complex game you can split multiple stages in states if you want but for a small game there is no reason to do that...)

Like this is an Index.html file pointing to state Main (Main.js).

<html>
<head>
<title>
States
</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/phaser6.2.min.js"></script>
    <script type="text/javascript" src="js/Game.js"></script>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div align="center">
    <div id="pgame"></div>   
</div>
<script type="text/javascript" src="js/Main.js"></script>
</body>
</html>
    </script>
</body>
</html>

This is the state Main(Main.js) loading state "Game" and running the state Game (Game.js) (there are other states comented just to show that you can load multiple states here if you want and you can call them later if you need through "ProjectName.game.state.start('State');")

var ProjectName = ProjectName || {};

ProjectName.game= new Phaser.Game(800, 600, Phaser.AUTO, "pgame",null,false,false);

/*
ProjectName.game.state.add('Boot', ProjectName.Boot);
ProjectName.game.state.add('Preload', ProjectName.Preload);
ProjectName.game.state.add('MainMenu', ProjectName.MainMenu);
ProjectName.game.state.add('GameOver', ProjectName.GameOver);
ProjectName.game.state.add('Credits', ProjectName.Credits);
*/
ProjectName.game.state.add('Game', ProjectName.Game);

ProjectName.game.state.start('Game');

This is "Game.js", here you can put your game:

var ProjectName = ProjectName || {};

ProjectName.Game = function() {
    
};

ProjectName.Game.prototype = {
    preload:function()
    {
       
    },
    
    create : function()
    {   
        
    },

    update : function()
    {      

    }
};

 

Share this post


Link to post
Share on other sites

Hi 

Thanks for your continuing help on this topic i appreciate it. 

the issue im having is not understanding the structure of the phases but not understanding why when i try to add in my game code to the game state it simply is different then what the tutorials read. 

 

For example 

this was my original code when i was writing the game directly into the index html body as there was one state:

 

function fireBullet () {

    if (game.time.now > bulletTime)
    {
        bullet = bullets.getFirstExists(false);
        if (bullet)
        
        {
            bullet.reset(player.x + 20, player.y - 40);
            bullet.body.velocity.y = -700;
            bulletTime = game.time.now + 150;
        }

 

 

But now when i try to add it along with the rest of the code into the game.js it simply does not work. 

 

Im so confused.

Sorry and thanks

 

Share this post


Link to post
Share on other sites

so i have another example where it does not work 

 

these are snippets from the entire code in my game.js where bullets and enemies overlap, but when they overlap the game crashes?: 

create : function(){

this.enemies = game.add.group();
        this.enemies.enableBody = true;

       for (var i = 0; i < 1; i++)
        {
         var s = this.enemies.create(game.world.randomX, game.world.randomY, 'enemy1');
        s.name = 'enemy1' + s;
        s.body.collideWorldBounds = true;
        s.body.bounce.setTo(0.1, 0.1);
            s.animations.add('walk', [0, 1,]);
        s.play('walk', 6, true);
        s.body.velocity.setTo(5 + Math.random() * 40, 5 + Math.random() * 40);
    }
    {
        var f = this.enemies.create(game.world.randomX, game.world.randomY, 'enemy2');
            f.name= 'enemy2' + f;
            f.body.collideWorldBounds = true;
        f.body.bounce.setTo(0.1, 0.1);
            f.animations.add('walk', [0, 1,]);
        f.play('walk', 6, true);
        f.body.velocity.setTo(5 + Math.random() * 40, 5 + Math.random() * 40);
    }

}

update: function() {
  
        game.physics.arcade.overlap(this.bullet, this.enemies, this.enemyKill, null, this);

 

enemyKill: function(){
  
  this.enemies.kill();
  this.score += 10;
  this.scoreText.text = 'score: ' + score;
  
},
  

 

thanks again     

 

Share this post


Link to post
Share on other sites
var ProjectName = ProjectName || {};

ProjectName.Game = function() {
    
};

ProjectName.Game.prototype = {
    preload:function()
    {
        this.load.image('enemy2', 'assets/star.png');
        this.load.image('enemy1', 'assets/dude.png');
    },
    
    create : function(){
        this.enemies = this.add.group();
        this.enemies.enableBody = true;

       for (var i = 0; i < 1; i++)
        {
            this.s = this.enemies.create(this.world.randomX, this.world.randomY, 'enemy1');
            this.s.name = 'enemy1' + this.s;
            this.s.body.collideWorldBounds = true;
            this.s.body.bounce.setTo(0.1, 0.1);
            this.s.animations.add('walk', [0, 1,]);
            this.s.play('walk', 6, true);
            this.s.body.velocity.setTo(5 + Math.random() * 40, 5 + Math.random() * 40);
        }
        {
            this.f = this.enemies.create(this.world.randomX, this.world.randomY, 'enemy2');
            this.f.name= 'enemy2' + this.f;
            this.f.body.collideWorldBounds = true;
            this.f.body.bounce.setTo(0.5, 0.5);
            this.f.animations.add('walk', [0, 1,]);
            this.f.play('walk', 6, true);
            this.f.body.velocity.setTo(150 + Math.random() * 40, 5 + Math.random() * 40);
        }

    },

    update : function()
    {      
        this.physics.arcade.overlap(this.f, this.s, this.enemyKill, null, this);
    },
    
    enemyKill: function(enemy1,enemy2){
      enemy1.kill();
    }
};

This is your code inside the Game.js state from the example above. With some minor changes to make it run.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.