Continuously checking a condition outside of the update method

[ylluminarious]

I have a thing in my game where I need to continuously check for a condition, and when that condition returns true, I need to run the `animations.play` method, like so:

function update () {    // do some other things in here...    if (condition) {       // do some more things in here...       sprite.animations.play("animation");    }}

However, I heard before that it's a bad idea to run the play method in the update method for Phaser, because it will call play every frame and play should only be called once. How do I go about solving this problem?

[wayfinder]

You're defining conditions with your if clause, so it doesn't run every frame, only while the condition is true. To make sure that the performance doesn't suffer, take care to formulate the condition in such a way as to include "if not already playing the animation", or set the condition to false explicitly within the conditional

[ylluminarious]

The problem is that the condition in the if statement does evaluate to true a lot of the time in the game. Also, I'm not sure how to add in a condition like "if not already playing the animation" in Phaser.

[ZoomBox]

2 ways;

-You add a second condition

var isRunning = false;function update () {// do some other things in here...    if (condition && isRunning) {        // do some more things in here...        sprite.animations.play("run");        isRunning = true;    }}

-Or you simply check which animations is curently playing (way easier, really):

function update () {// do some other things in here...    if (condition && sprite.animations.currentAnim != "run") {        // do some more things in here...        sprite.animations.play("run");    }}

[lewster32]

Zoombox's second method would be the easiest way to do it, however I think you need to check the name property, and probably also check that it's currently playing:

function update () {// do some other things in here...    if (condition && sprite.animations.currentAnim.name !== "run" && sprite.animations.currentAnim.isPlaying) {        // do some more things in here...        sprite.animations.play("run");    }}

[ylluminarious]

Well, shoot. I've tried these various ways of getting this to work, but to no avail. Since I can't seem to figure this out, I'm just going to outright tell you guys what I was trying to do, since I was a bit vague the first time. I did want to play an animation after a certain condition was met in the update method, but I also needed to load a texture and set a new size for this animation. I've made a basic example of it here (which doesn't work yet): http://cl.ly/401K1x3p1K0C

 

(Here's the source)

// Constantsvar GAME_WIDTH = 800;var GAME_HEIGHT = 600; var TEXT_X_POS = 300;var TEXT_Y_POS = 100; var ROBOT_FRAMES = ["run00", "run01", "run02", "run03", "run04", "run05", "run06", "run07", "run08", "run09", "run10"];var JELLYFISH_FRAMES = [ 'blueJellyfish0000', 'blueJellyfish0001', 'blueJellyfish0002', 'blueJellyfish0003', 'blueJellyfish0004', 'blueJellyfish0005', 'blueJellyfish0006', 'blueJellyfish0007', 'blueJellyfish0008', 'blueJellyfish0009', 'blueJellyfish0010', 'blueJellyfish0011', 'blueJellyfish0012', 'blueJellyfish0013', 'blueJellyfish0014', 'blueJellyfish0015', 'blueJellyfish0016', 'blueJellyfish0017', 'blueJellyfish0018', 'blueJellyfish0019', 'blueJellyfish0020', 'blueJellyfish0021', 'blueJellyfish0022', 'blueJellyfish0023', 'blueJellyfish0024', 'blueJellyfish0025', 'blueJellyfish0026', 'blueJellyfish0027', 'blueJellyfish0028', 'blueJellyfish0029', 'blueJellyfish0030', 'blueJellyfish0031', 'blueJellyfish0032' ];var FRAME_RATE = 15;var LOOP = true;var USE_STRINGS = false; var SPRITE_X_POS = 360;var SPRITE_Y_POS = 270;var ROBOT_WIDTH = 55;var ROBOT_HEIGHT = 61;var JELLY_WIDTH = 66;var JELLY_HEIGHT = 66;var GRAVITY = 300;var JUMP_VELOCITY = -300;  // New instance of Phaser.Gamevar game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, "game", { preload: preload, create: create, update: update }); var sprite;var ground; function preload () {    game.load.atlas("robot", "sprites/running_bot.png", "sprites/running_bot.json");    game.load.atlas("sea_creature", "sprites/seacreature.png", "sprites/seacreature.json");} function create () {    game.add.text(TEXT_X_POS, TEXT_Y_POS, "Click to jump", {fontSize: "16px", fill: "white"});        sprite = game.add.sprite(SPRITE_X_POS, SPRITE_Y_POS, "robot");    game.physics.arcade.enable(sprite);    sprite.body.gravity.y = GRAVITY;    sprite.body.collideWorldBounds = true;    sprite.animations.add("robot", ROBOT_FRAMES, FRAME_RATE, LOOP, USE_STRINGS);    sprite.animations.play("robot");} function update () {    game.input.onDown.add(jump, sprite);        if (sprite.body.onFloor()) {        sprite.loadTexture("robot");        sprite.body.setSize(ROBOT_WIDTH, ROBOT_HEIGHT);        sprite.animations.add("robot", ROBOT_FRAMES, FRAME_RATE, LOOP, USE_STRINGS);        sprite.animations.play("robot");    }} function jump () {    sprite.body.velocity.y = JUMP_VELOCITY;    sprite.loadTexture("sea_creature");    sprite.animations.add("sea_creature", JELLYFISH_FRAMES, FRAME_RATE, LOOP, USE_STRINGS);    sprite.body.setSize(JELLY_WIDTH, JELLY_HEIGHT);    sprite.animations.play("sea_creature");}

Basically, I'm trying to get it so that when the sprite hits the ground again after jumping, it will revert back to its robot animation. That's what I was trying to do with the play method in the update method. However, like I said, I've had no success with any of these different conditions to put on the loading and playing of the animation. Can anyone figure out a good way to get this animation to load and play without having it be run a bunch of times, since it's in the update method?

[lewster32]

function update () {    game.input.onDown.add(jump, sprite);        if (sprite.isJumping && sprite.body.onFloor()) {        sprite.isJumping = false;        sprite.loadTexture("robot");        sprite.body.setSize(ROBOT_WIDTH, ROBOT_HEIGHT);        sprite.animations.add("robot", ROBOT_FRAMES, FRAME_RATE, LOOP, USE_STRINGS);        sprite.animations.play("robot");    }} function jump () {    sprite.isJumping = true;    sprite.body.velocity.y = JUMP_VELOCITY;    sprite.loadTexture("sea_creature");    sprite.animations.add("sea_creature", JELLYFISH_FRAMES, FRAME_RATE, LOOP, USE_STRINGS);    sprite.body.setSize(JELLY_WIDTH, JELLY_HEIGHT);    sprite.animations.play("sea_creature");}

Something like that should make it work. We store a flag on the sprite itself called 'isJumping' which is set to true when the sprite jumps. Then on the update loop, it checks to see if the sprite is jumping and on the floor; if both conditions are met, isJumping is set to false so the condition is not met subsequently until the player jumps and lands on the floor again.

 

I've not tested this and there's a possibility the condition may be met the same frame that the player jumps - if so you may need to set a little timer to ensure isJumping is set a frame later, when the sprite has left the floor.

[ylluminarious]

@lewster32 Thanks, this seems to be working fine and it makes sense. I didn't try to test it with that timer and whatnot because it does not seem to be having any problems. Although if I do run into any such problems, I will try to test it and make sure that it's working.