Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Phaser States Player Animation Problem

Indenialgamer

By Indenialgamer,
in Phaser 2

 Share

Recommended Posts

Indenialgamer Newbie

Indenialgamer

Posted
Posted

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

Link to comment
Share on other sites
rhennig Newbie

rhennig

Posted
Posted

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). 

Link to comment
Share on other sites
Indenialgamer Newbie

Indenialgamer

Posted
  • Author
Posted

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;
        }

Link to comment
Share on other sites
rhennig Newbie

rhennig

Posted
Posted

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()
    {      

    }
};

 

Link to comment
Share on other sites
Indenialgamer Newbie

Indenialgamer

Posted
  • Author
Posted

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

 

Link to comment
Share on other sites
Indenialgamer Newbie

Indenialgamer

Posted
  • Author
Posted

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     

 

Link to comment
Share on other sites
rhennig Newbie

rhennig

Posted
Posted 
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.

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...