jojomanzo

Members
  • Content Count

    9
  • Joined

  • Last visited

About jojomanzo

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. jojomanzo

    Trouble chaining animations in a sprite

    OK, so it is perfect when I can define a single named player. However, I am using a TILED json file to pull in multiple instances of objects named player. Since the sprite and the tween are only defined during the loop, they can't be referenced from the update to check on movement. OR do they become an array of sprites / tweenNPC and I can do another loop check their movement delta in update. Again your code is perfect - can it be applied to dynamically generated sprites? //create a sprite from an object WITH ANIMATION! createFromTiledObjectMove: function(element, group) { // this.playerA = this.game.add.sprite(result[0].x, result[0].y, 'walking'); // the code below find all objects named NPC and then places them in the map and makes them move in a box var sprite = group.create(element.x, element.y, element.properties.sprite); //var tweenA = this.add.tween(this.playerA); var tweenNPC = this.add.tween(sprite); var randomTime = 1000; var keepRnd = 40; //copy all properties to the sprite Object.keys(element.properties).forEach(function(key){ sprite[key] = element.properties[key]; //alert (sprite); sprite.animations.add('walking'); sprite.animations.add('down', [6, 7, 8], 10, true); sprite.animations.add('right', [3, 4, 5], 10, true); sprite.animations.add('left', [9, 10, 11], 10, true); tweenNPC.to({ x: [(element.x + 50),(element.x + 50),(element.x ),(element.x )], y: [(element.y ),(element.y + 50),(element.y + 50),(element.y )] }, 2000, "Sine.easeInOut", true, 1000, -1, false); //this works fine, all guys start moving. }); }, update: function() { //collision this.game.physics.arcade.collide(this.player, this.blockedLayer); this.game.physics.arcade.overlap(this.player, this.items, this.collect, null, this); this.game.physics.arcade.overlap(this.player, this.doors, this.enterDoor, null, this); //player movement var animations = this.playerA.animations; //var animationsX = this.sprite.animations; //var.animationsXX = sprite.animations; //clearly the two lines above CAN'T work because they can no longer be called "sprite" outside of the creation loop... so how can I find them to check for delta change? var deltaX = this.playerA.deltaX; var deltaY = this.playerA.deltaY; // if (deltaX > 0) alert('right'); if (deltaX > 0) animations.play('right'); else if (deltaX < 0) animations.play('left'); else if (deltaY > 0) animations.play('down'); else if (deltaY < 0) animations.play('down'); else animations.stop();
  2. jojomanzo

    Trouble chaining animations in a sprite

    My code uses "this" so it took a bit of figuring out what that meant, but I finally grasp it. I got the code to work for a single instance of a playerA... now I need to see if I can do it for multiples ! THANKS
  3. jojomanzo

    Trouble chaining animations in a sprite

    Got it
  4. jojomanzo

    Trouble chaining animations in a sprite

    samme! Yes, genius - DeltaX/Y is it and so clean. I am going to plug that into my code!
  5. jojomanzo

    Trouble chaining animations in a sprite

    I changed code to below... so that I would delete the pending flag - but it is still taking extra movement tweens. It should only go 1000 right, 5left, back to start, 5left, repeat. But the guy is flying back and forth and all timing is sped up. I am calling it in this order STOP DELETE PENDING CREATE NEW TWEEN CALL ADDONCE CALL START Should I change that order? tweenNPC.to({ x: (element.x + keepRnd) }, randomTime, "Sine.easeInOut", false, 1000, 0, false); tweenNPC.onComplete.addOnce(StopRightandChat, this); tweenNPC.start(); function StopRightandChat() { console.log('StopRightandChat:', sprite.animations.currentAnim.name); tweenNPC.stop(); tweenNPC.pendingDelete = false; alert (element.x); tweenNPC.to({ x: (element.x + 5 + keepRnd ) }, randomTime, "Sine.easeInOut", false, 1000, 0, false); tweenNPC.onComplete.addOnce(goLeft, this); tweenNPC.start(); console.log('StopRightandChat:', sprite.animations.currentAnim.name); } function goLeft() { console.log('goLeft:', sprite.animations.currentAnim.name); tweenNPC.stop(); tweenNPC.pendingDelete = false; alert (element.x); tweenNPC.to({ x: element.x }, randomTime, "Sine.easeInOut", false, 1000, 0, false); tweenNPC.onComplete.addOnce(StopLeftandChat, this); tweenNPC.start(); console.log('goLeft:', sprite.animations.currentAnim.name); } function StopLeftandChat() { tweenNPC.stop(); tweenNPC.pendingDelete = false; tweenNPC.to({ x: (element.x + 5 ) }, randomTime, "Sine.easeInOut", false, 1000, 0, false); tweenNPC.onComplete.addOnce(goRight, this); tweenNPC.start(); } function goRight() { tweenNPC.stop(); tweenNPC.pendingDelete = false; tweenNPC.to({ x: (element.x + keepRnd ) }, randomTime, "Sine.easeInOut", false, 1000, 0, false); tweenNPC.onComplete.addOnce(StopRightandChat, this); tweenNPC.start(); }
  6. jojomanzo

    Trouble chaining animations in a sprite

    OK wow. Yes it is definitely stacking. I added an alert before you replied and it was firing the alert 3 or 4 times in a single function -- even though I would think it would only alert once (however I am very new to Phaser) So I added your log suggestion. And its a world of unknown. I pasted it below... I assume the fact that it has multiple js+s means it is stacking? Anyway. Perhaps I am doing this wrong. What I want to do seems like it should be common. To simplify:I want my character to walk in a box. Coordinates (0,0; 0,100; 100,100; 100,0) For each direction, I want to play the correct animation he is facing. I saw some phaser examples of the box tween using a single tween.to with an array of points... but it didn't account for changing animation. SO I assumed I needed to break each point into a new tween.Is there a better way? Can phaser tell which way the character is moving and swap animations based on that? This is a basic patrol bad guy patrol but all my search results for patrol style movement only cover movement -- so way to PAUSE and SWAP animation. Phaser.Tween.to cannot be called after Tween.start to @ phaser.min.js:18 (anonymous) @ Game.js:169 createFromTiledObjectMove @ Game.js:151 (anonymous) @ Game.js:90 createDoors @ Game.js:89 create @ Game.js:29 loadComplete @ phaser.min.js:11 preUpdate @ phaser.min.js:11 updateLogic @ phaser.min.js:13 update @ phaser.min.js:13 updateRAF @ phaser.min.js:18 window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18 Game.js:178 StopRightandChat: right Game.js:192 StopRightandChat: down Game.js:178 StopRightandChat: down Game.js:192 StopRightandChat: down Game.js:178 StopRightandChat: down Game.js:192 StopRightandChat: down Game.js:178 StopRightandChat: down Game.js:192 StopRightandChat: down Game.js:178 StopRightandChat: down Game.js:192 StopRightandChat: down Game.js:197 goLeft: down Game.js:209 goLeft: left Game.js:197 goLeft: left phaser.min.js:18 Phaser.Tween.to cannot be called after Tween.start to @ phaser.min.js:18 goLeft @ Game.js:204 execute @ phaser.min.js:11 dispatch @ phaser.min.js:11 update @ phaser.min.js:18 update @ phaser.min.js:18 updateLogic @ phaser.min.js:13 update @ phaser.min.js:13 updateRAF @ phaser.min.js:18 window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18 Game.js:209 goLeft: left Game.js:197 goLeft: left phaser.min.js:18 Phaser.Tween.to cannot be called after Tween.start to @ phaser.min.js:18 goLeft @ Game.js:204 execute @ phaser.min.js:11 dispatch @ phaser.min.js:11 update @ phaser.min.js:18 update @ phaser.min.js:18 updateLogic @ phaser.min.js:13 update @ phaser.min.js:13 updateRAF @ phaser.min.js:18 window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18 Game.js:209 goLeft: left Game.js:197 goLeft: left phaser.min.js:18 Phaser.Tween.to cannot be called after Tween.start to @ phaser.min.js:18 goLeft @ Game.js:204 execute @ phaser.min.js:11 dispatch @ phaser.min.js:11 update @ phaser.min.js:18 update @ phaser.min.js:18 updateLogic @ phaser.min.js:13 update @ phaser.min.js:13 updateRAF @ phaser.min.js:18 window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18 Game.js:209 goLeft: left Game.js:197 goLeft: left phaser.min.js:18 Phaser.Tween.to cannot be called after Tween.start to @ phaser.min.js:18 goLeft @ Game.js:204 execute @ phaser.min.js:11 dispatch @ phaser.min.js:11 update @ phaser.min.js:18 update @ phaser.min.js:18 updateLogic @ phaser.min.js:13 update @ phaser.min.js:13 updateRAF @ phaser.min.js:18 window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18 Game.js:209 goLeft: left
  7. I have a bit of code that cycles through my TILED file to find any object I declared as an NPC. I am not sure if this is important, but I wanted to mention how it found the location of the sprite. (And it is designed to work with multiple sprites, but the code fails with a single sprite and multiple sprites) result.forEach(function(element){ this.createFromTiledObjectMove(element, this.doors); //alert (this.doors); }, this); The code above works correctly again it is just for reference on how the next part of the code is found. The code below was INTENDED to have a character mill around. Starts walking right. Stops. Faces forward (with a tiny movement), Stops, Faces left and walks, Stops, Face right and repeat pattern. Hopefully it is easy to read, and I could probably clean it up. The MOTION is fine. He goes back and forth, stopping at each end point. But the animations do not sync correctly. I even tried stopping ALL animations as seen in the code below but eventually he gets stuck in one animation, even though the tween movement continues. Any ideas? //create a sprite from an object WITH ANIMATION! createFromTiledObjectMove: function(element, group) { var sprite = group.create(element.x, element.y, element.properties.sprite); var tweenNPC = this.add.tween(sprite); //I eliminated the randomness for testing - it did work, but same problem //var randomValue = this.rnd.integerInRange(200, 500); //var randomTime = this.rnd.integerInRange(1000, 3000); //var keepRnd = randomValue; var randomTime = 1000; var keepRnd = 40; //copy all properties to the sprite Object.keys(element.properties).forEach(function(key){ sprite[key] = element.properties[key]; sprite.frame = 6; sprite.animations.add('down', [6, 7, 8], 10, true); sprite.animations.add('right', [3, 4, 5], 10, true); sprite.animations.add('left', [9, 10, 11], 10, true); sprite.animations.play('right'); tweenNPC.to({ x: (element.x + keepRnd) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(StopRightandChat, this); function StopRightandChat() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right'); sprite.animations.play('down'); tweenNPC.to({ x: (element.x + 5 ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(goLeft, this); } function goLeft() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right'); sprite.animations.play('left'); tweenNPC.to({ x: (element.x - keepRnd) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(StopLeftandChat, this); } function StopLeftandChat() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right'); sprite.animations.play('down'); tweenNPC.to({ x: (element.x + 5 ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(goRight, this); } function goRight() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right'); sprite.animations.play('right'); tweenNPC.to({ x: (element.x + keepRnd ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(StopRightandChat, this); } }); },
  8. I have been working with phaser for less than a week, working off of some sample code. I am able to load the sprite. Have the sprite walk/tween 50 pixels back and forth with yoyo. But I can't figure out how to get it to change animation from 'left' to 'right'. You may recognize parts of the code in the sample below, I even left some other attempts commented out so that you can see I did search this site and Google my problem, but I can't find a solution. Basically, I want to have the sprite constantly patrol, and the yoyo works fine. But after each tween, I need to switch the animation so the person faces left or right. Any ideas will be helpful! var spriteX = this.game.add.sprite(600, 1000, 'walking'); var tween = this.add.tween(spriteX); spriteX.frame = 3; spriteX.animations.add('left', [9, 10, 11], 10, true); spriteX.animations.add('right', [3, 4, 5], 10, true); spriteX.animations.play('left'); tween.to({ x: 650 }, 1000, Phaser.Easing.Linear.None, true, 1000, -1, true); tween.onComplete.add(doSomething, this); function doSomething () { spriteX.animations.stop('left'); spriteX.animations.play('right'); } tween.to({ x: 600 }, 1000, Phaser.Easing.Linear.None, true, 1000, -1, true); //spriteX.animations.play('left'); //spriteX.animations.stop('left'); tween.repeatDelay(1000); tween.yoyoDelay(1000); //spriteX.animations.stop('right');