Search the Community

Showing results for tags 'tween'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 210 results

  1. I've got a world where enemies hurt you (such is life )... When this happens, I'd like to alert the player. I can shake the world a little bit but also like to have a red colour flash over the entire world, quickly and only to about 40% opacity. Like a quick foreground fill. This fill can't interfere with the input on the sprites behind it. Almost like a camera effect. Any ideas how I can accomplish this? Thanks
  2. How should my coinPickup() function get called?I've tried this two ways:1. Set the game.pickingupCoin=true flag during tween.onComplete, but it's too slow waiting on each coin tween to end2. Or set it during tween.onStart it's too fast and allows multiple coin values before a single coin is killed What do you guys recommend?var game = {}; // global for easy variable trackingfunction create() { // create coins for (var i = 0; i < vars.coinTotal; i++) { var coin = game.coins.create(x, y, 'coin'); coin.tween = game.add.tween(coin).to({ alpha: 0, y: 80 }, 1000); coin.tween.onComplete.add(function(coin, tween) { coin.kill(); game.pickingupCoin=false; // long coin pickup animations block other coins from being picked up, is there a better way to handle this? }); }}function update() { // add pickup event game.physics.arcade.overlap(player, coin, coinPickup, null, this);}function coinPickup(player,coin) { if (!game.pickingupCoin) { game.pickingupCoin=true; // prevent function from being called more than once per coin pickup game.coinCount += 1; // update count game.coinText.text = game.coinCount; // update UI coin.tween.start(); // animate }} EDIT: Here's what I ended up with after dropping my global game.pickingupCoin flag: function coinPickup(player,coin) { if (!coin.pickedup) { // check for individual coin flag coin.tween.start(); coin.pickedup = true; // set individual coin flag to true, and prevent this coin from being picked up more than once }}
  3. Hi there, I have a problem here... I´m not being able to change the Y destination of a sprite I´m tweening and with yoyo()... I have an item that I tween to an arbitrary position, then I "yoyo" the item to the original position and then I want to tween it again to another arbitrary position buuuuuuuut I´m not being able to do it. Does anyone how to do this? this.positionY =,-50);var myTween ={y:this.positionY}, 2000, Phaser.Easing.Cubic.InOut, true, 0, -1);myTween.yoyo(true, 200);myTween.onLoop.add(function(){ this.positionY =,0); = this.positionY;},this)Thanks in advance.
  4. Hi I was wondering if I should explicitly destroy all the tweens that I create? I am moving objects on screen every few seconds with one time tweens like so: this.state.add.tween(child).to({ y: prevY + this.blockHeight }, 300, Phaser.Easing.Quadratic.In, true)is it destroyed automatically after the tween is completed or should I destroy it? thanks Lior
  5. Hi guys, I'm wondering if it is possible to have a "slide effect" between states. I know we can use ease in/out effects but I couldn't find a slide (tween?) effect. Any help is appreciated. Thanks
  6. Hi everyone, I'm developing a simple game where objects visually approach the screen and you have to click on them before they visually reach the screen. However, I was getting mad when trying to add tweening to the sprites representing the approaching objects. They should fade out and in when hit to give a visual feedback to the player that they've been hit. I tested tweens in an extra stage and everything worked fine, so I adapted those three lines of code to the hit callback in the gameplay stage of the game. The tween wouldn't start at all. Before the first time the tween's start function was invoked, its startTime attribute was set to null, after that it changed to 0, but visually, nothing happened. So I wondered if I missed something, commented out all the stuff that could interfere like the content of the update function, where the scale of each approaching object is adjusted and so on. In the end, I had an object with a hit function, a click callback and a sprite, still standing. And still - nothing happened. So just before I wrote this post right here, I tried commenting out the whole update function, including its declaration, from the stage and voilà. The tween works like a charm. So to sum up, tweening a sprite doesn't work when an update function is present in the stage to which the sprite belongs. Is this behaviour intended? Is it to fix in a coming release? What is the best practice so far? Greetings, Roberto
  7. Good morning! Quick question: I'm attaching tweens to sprites as a property ala: vSprite.myTween = this.add.tween(vSprite ,,, Do I need to explicitly remove the tweens before killing the sprite or will a sprite kill remove those tween references? Not sure if I need this: this.tweens.remove(vSprite.myTween) Thanks ya'll
  8. Hello everyone! I an relatively new to Phaser. Recently I have tried to use tween animation and found an annoying glitch: my sprite moves up and down for a few seconds and then the animation slows down for a random number of seconds. it is not so smooth anymore, which bothers me a lot. Can you, please, help me to figure out the problem? Thank you in advance! here is the code: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Game</title> <style> body { padding: 0px; margin: 0px; } </style> <script src="js/library/phaser.min.js"></script></head><body> <script> var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update }); function preload() { game.load.spritesheet('player', 'assets/images/spaceship.png', 64, 29, 4); } function create() { this.player = game.add.sprite(0, 200, 'player');{ y: this.player.y - 160 }, 300, Phaser.Easing.Linear.NONE, true, 0, Infinity, true); this.player.animations.add('fly', [0, 1, 2, 3, 2, 1]);'fly', 8, true); } function update() {} </script></body></html>
  9. Can someone help me and tell what I'm doing wrong. I'm trying to create a fadeOut effect using audiosprite (external .json file). this is part of the code, and I'm using Phaser 2.4.4 also, I tried some tests, and seems that the tween function isn't running (onStart and onComplete are not working) // after decode the sound and before start the gamegame.sfx = game.add.audioSprite("sfx");// on the gamevar reelSound ="Freespin");// this version doesn't workreelSound.fadeOut();// neither this onegame.add.tween(reelSound).to({volume: 0}, 1000, Phaser.Easing.Linear.None, true);thanks in advance
  10. I'm building my first Phaser game and stumbled upon a conceptual issue I'm not sure how to solve best. Sometimes I want to wait for a tween to finish before I run the next bit, e.g. in a match 3 game I'd want to remove the matched blocks before dropping the rest and so on. Here's a snippet to illustrate how I've found it done in simple examples. function removeBlocks() { var duration = 1000; game.add.tween(...).to(..., duration, ...).onComplete(...); ...}function dropBlocks() { ...}removeBlocks();, dropBlocks);This works but there's an implicit dependency between the duration of the tween and the timer and any code run in the onComplete callback will race dropBlocks. The former could be fixed by passing the duration around but that's an implementation detail of removeBlocks that nothing else should depend on. The obvious way to make the dependency explicit is to use the onComplete callback. However, that means either passing dropBlocks to removeBlocks or exposing the tween to add the onComplete outside. Alternatively, one could introduce an onBlocksRemoved event that's triggered in the onComplete callback and add removeBlocks as a one-time listener. That hides the tween completely but feels like abusing the event system if this is the only callback and means writing code in the wrong order: game.onBlocksRemoved.add(dropBlocks);removeBlocks();Instead I'm currently returning a promise. function removeBlocks() { var tween = game.add.tween(...).to(...); var promise = new Promise(function (resolve) { tween.onComplete.add(function () { resolve(); }); });}removeBlocks() .then(dropBlocks) .then(...);I do like this solution a lot more than the alternatives because it hides the tween while making chained events readable but promises are usually defined by resolving to a value which is something I don't have or need. That may be a hint at me misusing promises here. I'd love to hear your opinion on my approach and some open questions / thoughts. 1. Is there an obvious solution that I'm missing because I'm still new to the framework? 2. When I'm tweening several things at once I could use Promise.all to continue once all tweens have finished but that might be me overthinking something simple.
  11. Hey guys, I am trying to set the game world bounds everytime I am zooming in/out of a map however, when I apply a tween to the game world bounds, it is not working. Here is my code var t =; function mouseWheel(event) { var tween = myGame.add.tween(; if (event.wheelDelta > 0 && scale <= 1) { scale += 0.1; sprites.scale.setTo(scale, scale); myPlayer.body.setSize(50 * scale, 50 * scale, 20 * scale, 80 * scale); myHouse.body.setSize(150 * scale, 50 * scale, 20 * scale, 240 * scale); myCharacter.body.setSize(110 * scale, 20 * scale, 0, 120 * scale); myHydro.body.setSize(100 * scale, 100 * scale, 100 * scale, 100 * scale);{width:5263*scale,height:2636*scale},50); tween.start(); //, 0, 5263 * scale, 2636 * scale); } else if (event.wheelDelta < 0 && scale >= 0.5) { scale -= 0.1; } else { t.stop(); } sprites.scale.setTo(scale, scale); myPlayer.body.setSize(50 * scale, 50 * scale, 20 * scale, 80 * scale); myHouse.body.setSize(150 * scale, 50 * scale, 20 * scale, 240 * scale); myCharacter.body.setSize(110 * scale, 20 * scale, 0, 120 * scale); myHydro.body.setSize(100 * scale, 100 * scale, 100 * scale, 100 * scale);{width:5263*scale,height:(2636+getHeight())*scale},50); tween.start(); //, 0, 5263 * scale, (2636 + getHeight()) * scale); }The part that is not working is this var tween = myGame.add.tween(;{width:5263*scale,height:(2636+getHeight())*scale},50);tween.start();The code basically scales down/up a group of sprites including the map whenever the wheel is up/down. That works perfectly! Why do you think the tween is not working on the game world bounds?
  12. Hello guys and girls, I am trying to get my head around one problem I am noticing when using Phaser's tweening mechanism. I've create a simple effect to highlight text which I wan't to be clicked on. The thing is, that the tweens (scale up and scale back) run at different speed on different machines. On table PC or laptop, the animation is shorter than on mobile devices meaning the tween takes less time to complete. Am I doing something wrong here? Is it a "feature"? I mean if I tell the framework that a tween should last 1000ms, it should last 1000ms no matter the CPU speed. FYI, I am using Phaser.AUTO for the renderer in the game constructor. BTW, I am experiencing this issue also in standard examples from examples library (like tweens > bounce). Thank you very much. this.Effects = { pulsateText: function(text, pulsDuration) { var self = { scaleUp: _game.add.tween(text), scaleBack: _game.add.tween(text) };{ fontSize: text._baseFontSize + 10 }, pulsDuration, Phaser.Easing.Linear.None, true); self.scaleUp.onStart.add(function() { self.delay = 0; }, this); self.scaleUp.chain(self.scaleBack);{ fontSize: text._baseFontSize }, pulsDuration, Phaser.Easing.Linear.None, true); self.scaleUp.onStart.add(function() { self.delay = 0; }, this); self.scaleBack.chain(self.scaleUp); self.scaleUp.start(); return self; } }
  13. I found the following good explanations about the easing functions for tween method. I know that the easing functions can also be replaced by corresponding strings, for example, 'Linear' for Linear.None and 'Quint' for Quintic. Is there any reference which lists all other corresponding strings? Thanks.
  14. kmilinho

    Tweens Problem

    Hi, I have a game that use a tween for moving a ball using: dropOneBall function: ... var tween = this.state.add.tween(ball).to(ballNumber.path, 250); tween.interpolation(function (v, k) { return Phaser.Math.linearInterpolation(v, k); }); ... Every time you play, several balls drop like a waterfall, one after another following different paths, using tweens. The balls remain on the screen until you play again. Before playing again, all the balls are deleted and the new game start. The problem is that after a couple of rounds played, the tween start acting weird, instead of rolling following the path, from the beginning to the end of it, the tween skip part of it and is like the balls disappear and appear ahead (teletransport). If you reload the game, the problem disappear. I tried to delete the old tweens, delete timers between plays, print the fps and several performance test but I cant find the problem. Anyone have a clue about what may be happening? Thank you.
  15. Hi, Is there a way to tween a rotation between two angles (say -5 to 5 degrees)? I can tween to a single angle and then yoyo; but I'm not sure how to get it to tween between two angles so it rocks back and forth. If possible, I'd prefer to have a single tween rather than two; however if that's the only way, then I'd still be interested to know how to get that to work so that it loops.
  16. Hi, I'm trying to sync audio to the start of a tween. this.myTween = this.add.tween(...) this.myTween.onStart.add(this.playSound, this) Instead, the audio plays first and then a few moments later the tween starts. I read the onStart should wait until the tween starts, but this doesn't seem to be happening. Please help!
  17. Okay i have started phaser a month ago.I am stuck here: Aim: i am creating an a tween like this.. red1 is my sprite function reddown(){ demoTween1 = game.add.tween(red1).to({x:420,y:250},1800); demoTween1.onComplete.add(function(){ if (red1.x=420) { score=score+2; red1.x=0 } else{ red1.x=0; alert("game over"); } });demoTween1.start(); }} Which works perfectly when its called. But i want my sprite to move again with a loop and show me moving like the first one var x=1;while(x<4){ if (x==1) {reddown();};if (x==2) {reddown();}; x++;} this does not work and condition is not satisfied in reddown() it executes game over 3 times.Would be very grateful if someone could help.!
  18. I'm making a game where a function creates a group of "fish" with tweening, and the tween calls another function on completion to create a new tween with new parameters, and so on. When the player's character collides with the fish, I want them to reset, and swim using a new tween. All the code works except that the tween that was in action prior to collision isn't destroyed by .reset function, and most likely is the reason why the fish are jumping around the screen. Here it is: How do I address or stop a tween when I can reference the object it was applied to? I tried creating a tween manager and added all tweens to it (inside a state's declaration) but keep getting errors (in game.js state file) An example on how to solve this would be nice.
  19. I'm making a game where a function creates a group of "fish" with tweening, and the tween calls another function on completion to create a new tween with new parameters. When the player's character collides with the fish, I want them to reset, and swim using a new tween. All the code works except that the tween that was in action prior to collision isn't destroyed by reset function, and makes the fish jump around the screen. How do I address or stop a tween when I can reference the object it was applied to? I tried creating a tween manager and added all tweens to it (inside a state's declaration) but keep getting errors.
  20. I have a question about the tweening system in Phaser. If I perform a complex animation with multiple sprites (or a simple animation involving only 1 sprite but with scale and alpha) I have to write something like this: this.halo.scale = {x:0, y:0}; this.halo.alpha = 1; if (this.halo.scaleTween) { this.halo.scaleTween.stop(); } if (this.halo.alphaTween) { this.halo.alphaTween.stop(); this.halo.alphaTween = null; } this.halo.scaleTween = game.add.tween(this.halo.scale) this.halo.scaleTween .to({x:1, y:1}, 1000, Phaser.Easing.Bounce.Out) .start() .onComplete.addOnce(function() { this.halo.alphaTween = game.add.tween(this.halo).to({alpha:0}, 1000).start(); }, this);When I'd rather write something like this:game.stop.tween("halo bounce"); // No error if not foundgame.add.tween("halo bounce") .then(this.halo.scale, {x:1, y:1}, 1000, Phaser.Easing.Bounce.Out) .then(this.halo, {alpha:0}, 1000) .start();Is this sort of system possible at all? Am I using the existing Phaser API wrong? Additionally, in our C++ engine, we had an 'also' function as well. This would allow you to add new tweens in the dot chain, but they got added at the same point as the previous one:game.add.tween("game over") // The name is optional. Anonymous tweens are the default .then(1000) // Delay before starting .then(, {alpha:1}, 100) .also(, {x:1, y:1}, 100) // This one runs ALONGSIDE the 'alpha' tween .then(function() { this.openScoreScreen(this.stats); }, this); // This one runs at the END of the 'scale' tweenIf this system looks exciting (I think it is, we've shipped a lot of triple-A casual games on all platforms (except HTML5) with it...) I would be happy to work together to add it to Phaser. Luc Bloom
  21. How to disable fixed FPS in version 2.4.3? is it possible? Or, can disable tunneling in early state play? Low FPS at begin of my game (after version 2.2.0). Solution to problem in i could not found. Until I see that the only way out is to use 2.1.3.
  22. Hello, I am making a simple Matching game, that uses phaser tween animation to tween the animation for flipping game tiles. when the tile is flipped I need to set a state to OPEN or CLOSED however its currently using 4 methods to do the flip. I want to make it faster, so the user can not click on a new tile before the last one is completed here are 2 examples: I am writing the app in typescript. // Main.ts NEW click methods public startNewFlip():void { var tileNewTween:Phaser.Tween; tileNewTween ={x: 0}, 300, Phaser.Easing.Quartic.In); tileNewTween.onComplete.add(this.onCompleteNewTileFlip1, this); tileNewTween.start(); } private onCompleteNewTileFlip1():void { if (this.currentState == TileState.OPEN) { this.face.frameName = "closedCard"; } else { this.face.frameName = this._id; } this.continueNewTileFlip(); } public continueNewTileFlip():void { var tileNewTween2 ={x:1},300,Phaser.Easing.Quartic.Out); tileNewTween2.onComplete.add(this.onCompleteNewTileFlip2,this); tileNewTween2.start(); } private onCompleteNewTileFlip2():void { if(this.currentState == TileState.OPEN){ this.currentState = TileState.CLOSED; } else { this.currentState = TileState.OPEN; } }and here is what I tried to do to simplyfiy it public flip():void { if (this.currentState == TileState.OPEN) { var tileNewTween ={x: 0}, 3300, Phaser.Easing.Quartic.In); tileNewTween.start(); tileNewTween.onComplete.add(function(){this.face.frameName = "closedCard"} , this); } else { var tileNewTween ={x: 0}, 3300, Phaser.Easing.Quartic.In); tileNewTween.start(); tileNewTween.onComplete.add(function(){this.face.frameName = this._id;} , this); } console.log(this.currentState); this.contFlip(); } public contFlip():void { if(this.currentState == TileState.OPEN){ var tileNewTween2 ={x:1},3300,Phaser.Easing.Quartic.Out); tileNewTween2.start(); tileNewTween2.onComplete.add(function(){this.currentState = TileState.CLOSED;},this); } else { var tileNewTween2 ={x:1},3300,Phaser.Easing.Quartic.Out); tileNewTween2.start(); tileNewTween2.onComplete.add(function(){this.currentState = TileState.OPEN;},this); } console.log(this.currentState); }the anonymous function does not work correctly as it stops the animation from working, and swithes the tile after the 300 ms elapsed but without showing anything moving. This methods runs on a onFaceClicked() methhod, that lisens for mouse clicks on the tiles. if its tilestate is CLOSED, then runs this. But if click fast, the CLOSED state is not yet confirmed, so the app lets me click it.
  23. icp

    2.4.2 loadTexture

    I'm using a tween that changes the texture of a Sprite when onComplete method gets called. Sometimes it fails to change the texture via this.sprite.loadTexture('myTexture'); . Everything works fine with Phaser 2.3 .
  24. Hi there. I stumbled upon a possible bug in Phaser.Tween.yoyo. It might be a mistake in my approach as well. Here's the simplest possible test case: I'm tweening a sprite along a path of points and if I don't use yoyo, it's fine. If I only use a single value for each tweened property (e.g. {x : 300, y : 300}), it's also fine. But if I pass an array of values and use yoyo, the sprite jumps to an unexpected location after the loop. Note: the sandbox is still using Phaser 2.3.0, but that's fine since I'm still using the same version in the game I'm making. Edit: Added an alert at the end of the tween to show the resulting wrong values of x and y.
  25. I am trying to make a simple tween work but for some reason, its not working. I dont get any errors. Tweens just arent working at all. create: function() {;; = 0.5; = 300; this.playerCollisionGroup =; this.cloudsCollisionGroup =; // Platforms that move this.clouds =; this.clouds.enableBody = true; this.clouds.physicsBodyType = Phaser.Physics.P2JS; var cloudArray = []; for(var i = 0; i < 3; i++){ cloudArray[i] = this.clouds.create(400*i, 350*i, 'cloud-platform'); cloudArray[i].body.kinematic = true; cloudArray[i] = 0; cloudArray[i].body.setCollisionGroup(this.cloudsCollisionGroup); cloudArray[i].body.collides([this.cloudsCollisionGroup, this.playerCollisionGroup]); }// this.liftTween1 = this.add.tween(this.clouds.getAt(0)).to( { x: 1000 }, 2000, "Linear", true, 0, -1, true); // this.liftTween2 = this.add.tween(this.clouds.getAt(1)).to( { x: 1000 }, 2000, "Linear", true, 0, -1, true); this.liftTween1 = this.add.tween(cloudArray[0]).to( { x: 1000 }, 2000, "Linear", true, 0, -1, true); this.liftTween2 = this.add.tween(cloudArray[1]).to( { x: 1000 }, 2000, "Linear", true, 0, -1, true); this.liftTween1.start(); this.liftTween2.start(); }, Project here, you can open in Brackets and run it.