Search the Community

Hi all, Slowly making progress on my character creation game. I've layered multiple sprites, so that each sprite can be easily "tinted" to the user's preferred colour. The layers so far are added like so: Cat Body Pupil Face/Eye shape Each layer is animated. The pupil and the face are aligned, hence should be playing the same frame as each other to look correct. This works fine up until a point. The issue is, when the user selects the eye shape they desire, the two sprites go out of sync, and the animation looks something like this: This is the relevant code to trigger the event: facekey = 'catfacegoth'; create function; player = this.physics.add.sprite(200, 370, 'whitecat').setInteractive().setDataEnabled(); playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive().setDataEnabled(); playerface = this.physics.add.sprite(260,350,facekey).setInteractive(); normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'catface'; console.log('normal face'); }); gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'catfacegoth'; console.log('goth face selected');}); update function: player.anims.play('default', true); //body animation if(facekey == 'catfacegoth'){ playerface.anims.play('gothblink', true); // face/eye shape playereyes.anims.play('blink', true); //this is the pupil layer } if(facekey == 'catface'){ playerface.anims.play('faceblink', true); // face/eye shape playereyes.anims.play('blink', true); // pupil } My suspicion is that the pupil isn't restarting from frame 0 when the facekey variable is changed, but rather continues playing from the current frame. Is there a way to "reset" the current animation so that they both play from frame 0 when the facekey variable triggers the change?

var game = new Phaser.Game(400, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); //creating score value and onscreen text var score = 0; var scoreText; function preload() { // preload assets game.load.image('sky', 'assets/img/sky.png'); game.load.image('ground', 'assets/img/platform.png'); game.load.image('star','assets/img/star.png'); game.load.spritesheet('baddie', 'assets/img/baddie.png', 32, 48); } function create() { // place your assets //enabling Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); //adding a background game.add.sprite(0, 0, 'sky'); //a group containing the ground and platforms to jump on platforms = game.add.group(); //enabling physics for any object in this group platforms.enableBody = true; //creating the ground var ground = platforms.create(0, game.world.height - 64, 'ground'); //scaling to fit the width of the game ground.scale.setTo(2, 2); //stops ground from falling once player jumps on it ground.body.immovable = true; //create five ledges var ledge = platforms.create(-300, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(200, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(100, 300, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-200, 200, 'ground'); ledge.body.immovable = true; ledge = platforms.create(300, 100, 'ground'); ledge.body.immovable = true; //create the player and its settings player = game.add.sprite(32, game.world.height - 150, 'baddie'); //enabling physics on player game.physics.arcade.enable(player); //giving player a slight bounce player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; //walking left and right animations player.animations.add('left', [0, 1], 10, true); player.animations.add('right', [2, 3], 10, true); //create group for stars stars = game.add.group(); stars.enableBody = true; //creating 12 stars evenly spaced apart for (var i = 0; i < 12; i++) { //create a star inside of the 'stars' group each 33 px apart var star = stars.create(i * 33, 0, 'star'); //giving it gravity star.body.gravity.y = 6; //giving each star a random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } scoreText = game.add.text(16, 16, 'Score: 0', {fontSize: '32px', fill: '#000'}); } function update() { // run game loop //collide player and stars with platforms var hitPlatform = game.physics.arcade.collide(player, platforms); //built in keyboard manager cursors = game.input.keyboard.createCursorKeys(); //reset players velocity (movement) player.body.velocity.x = 0; //moving with arrow keys if (cursors.left.isDown) { //move to left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { //move right player.body.velocity.x = 150; player.animations.play('right'); } else { //stand still player.animations.stop(); player.frame = 2; } //allow player to jump if touching ground if (cursors.up.isDown && player.body.touching.down && hitPlatform) { player.body.velocity.y = -350; } //checking for collision with stars and platforms game.physics.arcade.collide(stars, platforms); //checking if player overlaps with star game.physics.arcade.overlap(player, stars, collectStar, null, this); } function collectStar (player,star) { //removes star from screen star.kill(); //add and update score score += 10; scoreText.text = 'Score: ' + score; } I can't seem to figure out why, but once I changed the sprite (which has fewer animation frames than the original), some strange errors popped up. The two error messages say: Uncaught TypeError: Cannot read property 'getFrameIndexes' of null Uncaught ReferenceError: stars is not defined The animation frame ranges don't seem to go out of bounds and I've already defined my 'stars' variable in the create function. Any ideas on why I'm getting these weird error messages? (the spirtesheet of the player is attached below)

Hi, In my pretty beefy game (lots going on) i get 55-60 frames on my computer with a 60hz monitor. However, when I launch it on another computer (much more power than mine, and with a 144hz monitor) I only get 30-40 frames? Its affecting my game because the update cycle is slower than it should be. When I run a jfiddle on those computers just drawing the fps, they receive their monitors refresh rate as the fps almost perfectly. The chrome is up to date and am using auto/phaser.WEBGL mode. Suggestions?

Hello everybody. I am trying to optimize my game, and would like to know, which of this two Phaser techniques would be more optimal in term of resource usage. On one side I got SpriteSheet - 'atlasJSONHash'. // preload game.load.atlasJSONHash('image', 'assets/image.png'); // create var foo = game.add.sprite(0, 0, 'image'); foo.animation.add('main'); foo.animation.play('main', 30, true); On other side I got just a sprite with a texture, and I'm changing it's texture in the Phaser render function, with another preloaded texture. // preload var textureArray = []; textureArray.push(game.load.image('image0', 'assets/image0.png') ); textureArray.push(game.load.image('image1', 'assets/image1.png') ); textureArray.push(game.load.image('image2', 'assets/image2.png') ); // and so on, 'in the game this is done by a loop'. // create var i = 0; var foo = game.add.sprite(0, 0, 'image0'); // render foo.loadTexture('image' + i); i++; In both cases there are same images [img0, img1, img2, ...], but in first example they are combined into a spritesheet, and in other they are separately loaded as a png images. I would like to know, which would you recommend, again in terms of resource consumption. Thank you in advance.

If I hard code an enemy... var enemyData = { health: 20, attack: 40, animationFrames: [1, 2, 3, 4, 3, 2, 1] } ... it animates fine through the enemy prefab. But if I load an object with the same properties from a Tiled map - IT WONT WORK! I know to convert the strings to numbers with: this.data.attack = +this.data.attack; But when I have an array, it doesn't seem to work

Hello all! I have hit a roadblock and I need help :/ All I want out of this is one thing: I press a cursor key, and an animation plays. Three of my animations work perfectly, and two only play the first frame of the animation when the keys are pressed (down && left) || (down && right). Any insight to what I hope is just a simple typo? Thanks for your time! EDIT: The frames that are not working are not the same size as the frames that do work, they are about twice the width, could that have something to do with it? var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload(){ //loading the background game.load.image('background', 'background.png'); //loading three ball images game.load.image('redBall', 'redBall.png'); game.load.image('blueBall', 'blueBall.png'); game.load.image('greenBall', 'greenBall.png'); //loading the atlas game.load.atlas('player', 'henAnimation/henAnimation.png', 'henAnimation/henAnimation.json'); } var cursors; var player; function create(){ //adding the background game.add.sprite(0, 0, 'background'); //adding player player = game.add.sprite(200, 200, 'player'); //cursor animations-stop, right, and left work perfectly player.animations.add('stop', Phaser.Animation.generateFrameNames('', 1, 3, '.png', 4), 10, true); player.animations.add('right', Phaser.Animation.generateFrameNames('', 4, 5, '.png', 4), 10, true); player.animations.add('left', Phaser.Animation.generateFrameNames('', 6, 7, '.png', 4), 10, true); //only load the first frame of the animation player.animations.add('rightlick', Phaser.Animation.generateFrameNames('', 8, 10, '.png', 4), 10, true); player.animations.add('leftlick', Phaser.Animation.generateFrameNames('', 11, 13, '.png', 4), 10, true); cursors = game.input.keyboard.createCursorKeys(); } function update(){ if (cursors.left.isDown) { player.animations.play('left'); } else if ((cursors.left.isDown) && (cursors.down.isDown)) { player.animations.play('leftlick'); } else if (cursors.right.isDown) { player.animations.play('right'); if ((cursors.right.isDown) && (cursors.down.isDown)) { player.animations.play('rightlick'); } } else { player.animations.play('stop'); } }

Hey, I've got a function call on isDown for the left mouse button. This function checks the direction and then plays an animation of two frames. Like this: if(this.lastDirection === "down"){ this.animations.play("hitDown"); }else if(this.lastDirection === "left"){ this.animations.play("hitLeft"); }else if(this.lastDirection === "right"){ this.animations.play("hitRight"); } For example hitDown looks like this: this.animations.add('hitDown', [16,17], 5, true); The thing is; when I run "this.animations.play" - I expect theboth animation frames to just run but they're not. The whole animation does not run unless I hold the mousebutton pressed. If i just click - only the first frame in the animation shows. Why is that?

Is there a way to position every frame with different positions in MovieClip in case where frames are different sizes. As much as I explored, I couldn't find a way, because frames created with new PIXI.Rectangle have only x,y (which is frame position on spritesheet) and width and height.

function createFrames(data) { var frames = []; for(var k=0; k<20; k++) { frames.push(new PIXI.Texture(PIXI.loader.resources['image1.png'].texture.baseTexture, new PIXI.Rectangle(firstFrames[data + k][2], firstFrames[data + k][3], firstFrames[data + k][0], firstFrames[data + k][1]))); } } This is basic way for creating frames for MovieClip from one texture and one spritesheet json. Is there any way to combine two textures to get one frame in which one texture lays on top of the another.

He guys, I am trying to do following: var frameNames = Phaser.Animation.generateFrameNames(this.getColorById(this.gemId) + '_zap_explode_', 1, 13, '.png', 2); this.gem.animations.add('zapExplode', frameNames, this.fps, false); if the gem is from the same atlas, the other animations are playing correctly, but this one throws Uncaught TypeError: Cannot read property 'index' of undefined. Any ideas?

Is there a way to manually change the sprite frames using the timing from fps / animationSpeed?

Hi there, I have a 4x5(colums x rows) spritesheet. Each of this rows contains different animations applied to the same Sprite object, i.e: this.load.spritesheet('body', 'assets/sprites/body.png', 80, 80);this.character = new Character(this.game, x, y, 'body');//Character classvar Character = function(game, x, y, spriteName) {Phaser.Sprite.call(this, game, x, y, spriteName);...The Character class constructor create the default animations: this.animations.add('walk', [0,1,2,0], 10, false);...What I'm asking is for the best way (or just a way...) to update or change eventually the animation frames of a specific animation. For example to [12, 13, 14, 12]. I tried creating a new animation like: this.animations.add('walk', [12, 13, 14, 12], 10, false);but it doesn't seem to be working properly. I'm also tried to find a method to update the frame data (like animation.updateFrameData) no luck though. What do you think about it? Thanks!

Can someone post a link or paste and example here of what's needed in the JSON file that defines the frames for my button? I have the PNG created with 3 frames. I'm working on the Phaser Project Template "Phaser Fll Screen Mobile". Thanks a lot for any help :-)

I'm trying to create a bitmapdata with a single frame from a spritesheet and I'm getting nothing I'm using this, bmd = game.add.bitmapData(800, 800); bmd.add(new Phaser.Sprite(game, 50, 50, 'blocks', 3)); sprite = game.add.sprite(0,0,bmd);but its showing nothing. Am doing something wrong? I tried copypixels aswell and still got nothing, I tried adding the sprite in advance, nothing. (I'm useing phaser 2.0.6) Thanks for the help in advance.

I have fixed a bug. This is how to repro it: At startup: this.sprite.loadTexture("walk.png"); // Sprite sheet 3x4 frames Some time later: this.sprite.loadTexture("dead.png"); // Single frame My game sets this.sprite.frame each update. If the object is 'dead', the frame number is 0. The BUG is: the old frameData in this.sprite.animations resets the texure to walk.png's first frame. I SOLVED this by executing this.animations.loadFrameData(null); in the "cache.isSpritesheet == false" part of Phaser.Sprite.prototype.loadTexture

So, I've begun fiddling with the tutorial example, but noticed that my fan was running a lot faster than it usually does. I checked the system monitor and noticed a CPU usage of around 50-60% when running the game code. This happens in both Firefox and Chrome. Is this normal? Any workarounds? It even slows down my code editor and other tasks. Sometimes it freezes for about 10 seconds, then continues but leaves the computer in a very sluggish state. - Scrolling vastly slowed down, programs shut down very slow etc. What is even more disconcerting is that nothing in the system monitor indicates any resource hog after I shut the browser down, yet the problems persist until I reboot. PS: I run Ubuntu 12.04 on a a i5 quad-core 2.5 GHz, 4 GB RAM. Bonus question: When upgrading from 1.1.3 to 1.1.5 gravity seems to get botched resolving A LOT slower than it should (and does in 1.1.3). What gives?

Hi, I'm wondering if it's possible to do some sprite animations who change dynamically the sprite body size with Phaser? Like in this video at 3m53 Thank you!