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 want to loop a work a number of times and between each loop will be an interval (like setInterval in Javascript). I have used tween to make loops but don't know how to make intervals between them. You could use the example here to try: Hope you could help me. Thank you very much!
  2. I'm making a top down game where the player moves smoothly around the plane but is confined to a 64x64 grid, I have achieved this by allowing them to move if they are exactly positioned on one of the 64x64 tiles and if they are, the game tweens them to the appropriate tile. The problem is that despite my best efforts it is still possible to move diagonally which would cause a lot of bugs in my collision code. This is the code I am using update: function () { if (player.x%64 === 0 && player.y%64 === 0) { if (game.input.keyboard.isDown(Phaser.KeyCode.W)) { game.add.tween(player).to({y: player.y-64}, 250, Phaser.Easing.Linear.None, true); } else if (game.input.keyboard.isDown(Phaser.KeyCode.S)) { game.add.tween(player).to({y: player.y+64}, 250, Phaser.Easing.Linear.None, true); } else if (game.input.keyboard.isDown(Phaser.KeyCode.A)) { game.add.tween(player).to({x: player.x-64}, 250, Phaser.Easing.Linear.None, true); } else if (game.input.keyboard.isDown(Phaser.KeyCode.D)) { game.add.tween(player).to({x: player.x+64}, 250, Phaser.Easing.Linear.None, true); } } }, Any help would be great! Thanks in advance
  3. I have this code: init: function () { screenObjects =; guidesGroup =; }, create: function () { guide1 = gameObject.add.sprite(0, 0, si.ImageAssetKeys.GUIDE_1_IMG); = 'guide1'; screenObjects.add(guide1); guidesGroup.add(guide1); guide2 = gameObject.add.sprite(0, 0, si.ImageAssetKeys.GUIDE_2_IMG); = 'guide2'; screenObjects.add(guide2); guidesGroup.add(guide2); guide3 = gameObject.add.sprite(0, 0, si.ImageAssetKeys.GUIDE_3_IMG); = 'guide3'; screenObjects.add(guide3); guidesGroup.add(guide3); nextButton = si.SIButton.SIButton(360, 670, si.ImageAssetKeys.GUIDE_BUTTONS_SHEET, thisObject, click, 3, 2, 2, 3); screenObjects.add(nextButton); prevButton = si.SIButton.SIButton(10, 670, si.ImageAssetKeys.GUIDE_BUTTONS_SHEET, thisObject, click, 1, 0, 0, 1); screenObjects.add(prevButton); } As you can see guides belong to screenObjects and guidesGroup groups, but previousButton and nextButton belong to only screenObjects. I am using this code to fade in/out guides in guidesGroup but the problem is the next and previous buttons are faded out as well. guidesGroup.forEach(function (item) { var siObject = this; item.alpha = 0; if ( === 'guide1') { siObject.gameObject.add.tween(item).to({alpha: 1}, si.Const.FADE_DURATION, siObject.Const.TWEEN_LINEAR, true); } }, si); Is there some mixing between game groups, are they distinct if same object belong to two groups?
  4. I'm pretty mew to phaser and am creating a little zombie shooter. The game is all linear on the X axis. Zombies march towards you and you have to shoot them before they get to you. I am using an array of objects to create the zombies and they all spawn at different locations. The issue I am having is that they seem to be moving at different speeds and catch up with each other. I want to have them move in a consistent speed so they don't overlap but stay in a uniformed movement. I can't figure out for the life of me why that might be. Any help would be greatly appreciated. Thank you in advance! You can see the specific code under //Zombie Animation Shamble !!!!!!!!!! var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', { preload: preload, create: create, update: update }); var Phaser; function preload() { game.load.image('ground', 'assets/images/background.png'); game.load.spritesheet('soldier', 'assets/sprites/Soldier.gif', 64, 64, 7) game.load.spritesheet('zombie', 'assets/sprites/zombiecombo.png', 66, 64, 25)'machinegun', 'assets/sounds/machinegun.mp3'); //'background', 'assets/sounds/electrictiger.mp3') } //Globals var button; var button1; var buttonLabel1; var pDamage; //Begin Create function create() { //Background Image and Audio game.add.sprite(-600,0, 'ground') // var back ='background'); //; // back.volume = .015 //Objects function Player(name, animate, health, bullets, sprite, dmg){ = name, this.animate = animate, = health, this.bullets = bullets, this.sprite = sprite, this.dmg = dmg } var Soldier = new Player( "", "", 100, 5, game.add.sprite(500, 440, 'soldier'), pDamage ) function Npc(health, sprite){ = health, this.sprite = sprite } //Start Horde/Create new NPC var horde = [] for(var x = 0; x<=4; x++){ var z = [-215, -186, -146, -87, -45] var Zombie = new Npc( 25, game.add.sprite(z[x], 440, 'zombie') ) //Zombie Animation Shamble !!!!!!!!!! var shamble = Zombie.sprite.animations.add('shamble', [0,1,2,3,4,5,6,7,8]);'shamble', 10, true); game.add.tween(Zombie.sprite).to({ x: game.width }, 15000, Phaser.Easing.Linear.None, true); //Horde array horde.push(Zombie) }; //GUI/HUD var drawActionMenuBorder; var bmd = game.add.bitmapData(352, 152); bmd.ctx.beginPath(); bmd.ctx.rect(0, 0, 352, 152); bmd.ctx.fillStyle = '#8e8e8e'; bmd.ctx.fill(); drawnActionMenu = game.add.sprite(650, 50, bmd); drawnActionMenu.anchor.setTo(0.5, 0.5); var drawnActionMenu; var bmd = game.add.bitmapData(350, 150); bmd.ctx.beginPath(); bmd.ctx.rect(0, 0, 350, 150); bmd.ctx.fillStyle = '#1B303D'; bmd.ctx.fill(); drawnActionMenu = game.add.sprite(650, 50, bmd); drawnActionMenu.anchor.setTo(0.5, 0.5); //HealthCount var style = { font: "40px Arial", fill: "#fff", align: "center" }; var healthText = game.add.text(520, 35,, style); //Buttons var buttonStyle = { font: "32px Arial", fill: "#ffffff" }; button1 = game.add.button( 650, 10, null, playerShoot); buttonLabel1 = game.make.text( 0, 0, "Shoot", buttonStyle) button1.addChild( buttonLabel1 ); // var button2 = game.add.button( 650, 60, null, reload); // var buttonLabel2 = game.make.text( 0, 0, "Reload", buttonStyle) // button2.addChild( buttonLabel2 ); //Methods //Fire Weapon w/ Damage function playerShoot(){ //animation var shoot = Soldier.sprite.animations.add('shoot');'shoot', 25, false); //Sound var bang ='machinegun');; //Health-Damage change var newZombieHealth; var lastZ = horde.length -1 pDamage = game.rnd.integerInRange(12, 30); newZombieHealth = horde[lastZ].health - pDamage horde[lastZ].health = newZombieHealth //Zed animation death if(horde[lastZ].health <= 0){ var pointX = Zombie.sprite.x -13 var pointY = Zombie.sprite.y console.log(pointX, pointY) var zDie =, pointY, 'zombie') zDie.animations.add('zDie', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,14,15,16,17,18,19,20,21,22,23,24], false);'zDie'); horde[lastZ].sprite.kill() horde.splice(lastZ, 1) console.log(horde) } } //Dump Bin // function reload(){ // if(Soldier.bullets>0){ // var magazine = Soldier.bullets - 1 // Soldier.bullets = magazine // } else { // button1.visible = false // } // } } //End create function update(){ }
  5. Is there a way to tween some text's font size?
  6. Hello, I am relatively new to both JS and Phaser so bare with me. I have run into a problem with animating an object from one point to another and then wait for a mouse click and then move back to the original position. So I am trying to create a chain of tweens and also adding an eventlistener in the middle to wait for a mouseclick before continuing the tween chain. And through this chain I need to pass the object (card) that I am doing animations on. The problem at the moment is that I want to send a parameter with the eventlistener from clickCallback to clickWait. function clickCallback(currentCard) { this.addEventListener("click", clickWait(currentCard), false); } function clickWait(cur) {//Here is the problem, I can get the eventlistener or the argument, not both.. removeEventListener("click", clickWait); //... } function clickCallback(currentCard) { this.addEventListener("click", clickWait, false); } function clickWait(e) {//Same as above but I get the event removeEventListener("click", clickWait); //... } I did a ugly solution earlier which worked, but it was not practical. I also recently found out how functions that you add with onComplete/onStart send arguments which made me think I could solve it in another fashion. Is there anyway to solve this, or do I have to stick with my ugly solution? Full code below (at least the relevant stuff): function moveCard(card, tutoBox) { var tempGroup = card.parent; var tempPositions = [{x:card.position.x,y:card.position.y},{x:card.paired.position.x,y:card.paired.position.y}]; var cards = []; cards.push(card); cards.push(card.paired); var tweenList = createCardTweens(card,tutoBox.position,30,90); for(var i = 0; i < tweenList.length; i++) { tweenList[i].onStart.add(scaleCard, this); tweenList[i].start(); objGroup.addChild(cards[i]);//Moves the selected card infront of tutoBox tweenList[i].onComplete.add(clickCallback, this); } function scaleCard(currentCard){ var scaleCard = game.add.tween(currentCard.scale); if (currentCard.scale.x === 1.125 || currentCard.scale.y === 1.125){x: 0.7, y: 0.7}, 450, Phaser.Easing.Linear.None); else{x: 1.125, y: 1.125}, 450, Phaser.Easing.Linear.None); scaleCard.start(); } function clickCallback() { addEventListener("click", clickWait, false); } function clickWait(e) { removeEventListener("click", clickWait); for (var i = 0; i < cards.length; i++) { var cardMoveBack = game.add.tween(cards[i]);[i], 500, Phaser.Easing.Linear.None); cardMoveBack.start(); } cardMoveBack.onStart.add(scaleCard,this); cardMoveBack.onComplete.add(function(currentCard){ tempGroup.addChild(currentCard); cardsManager.enableClickAll(); tutoBox.destroy(); },this); } }
  7. Hello! I have a tween animation: var speed = (playerInfoObject.engine.speed != null) ? playerInfoObject.engine.speed * 15 : 0;var tween1 = game.add.tween(myShip).to({ x: galaxyGate.x, y: galaxyGate.y}, speed, Phaser.Easing.Linear.None, true);This is an animation for a ship movement For example: I have a big tileSprite (space). When the tween starts in different points of this tileSprite the ship's speed is different too. I need to make it the same from all it's starts points. I have already tried smth. but that didn't help me =( var position = {x: myShip.x, y: myShip.y}; var target = {x: galaxyGate.x, y: galaxyGate.y}; var speed = 5000; var counter = 0; var timePrev =; var tween = game.add.tween(myShip) .to(target , speed) .onUpdateCallback(function(){ myShip.x = myShip.x; myShip.y = myShip.y; counter++; if(counter === 100){ tween.stop(); var timeNow =; var timeDiff = timeNow - timePrev; speed = speed - timeDiff; target, speed) tween.start(); } }) .start();Thank you in advance!!!
  8. Hello, I am making a multiplayer card game in phaser, the game is targeted for web as well as packaged for iOS and android using Now my problem is suppose a player minimizes/tabs the game on browser or minimizes the app then it doesnt affects others, since he is just same as not taking actions so he will either fold or check when timed out, but the problem is when he maximizes again, all the animations (tweens) that were pending, like some1 betting or players drawing cards, or chips going to winner, all of them play at once. I am not sure how to procede from here. Is there a way to let the app execute the tweens to sprites even when minimized. Also I want to know how to find out when the exported app minimizes, i tried adding listener to onPause and onResume, it works fine on browsers but doesnt on exported cocoonjs app. Thanks
  9. Hey guys, I'm stuck with this one.. I've just started getting into Physics now and I need to 'tween' an object from position 1, to position 2. When not using physics, I could simply do..{x: 150, y: 250}, 250, Phaser.Easing.Quadratic.InOut, true); Now I know I can't move the x and y of an object when physics is applied as you're only moving the topographical view, and the body itself isn't moving.. so I'd guess I need to accelerate the body to a mid point, then decelerate to stop on the correct posX and posY. Are there features in Phaser to achieve this, or do will I have to write these myself? Thanks, Nick
  10. Hello again I'm trying to animate between two rotations (from 0 to 45 degrees). If I use euler angles, it works fine. If I use quaternions however, it doesn't (it goes to about 20 degrees). See PG below, comment/uncomment lines 44/45. Any thoughts? EDIT: Just found out about .rotationQuaternion, seems to work now Thanks!
  11. When tweening the Phaser.World, and adding an onComplete event, the listenerContext does not return itself. What happens instead, is that the world container gets returned.
  12. Hello, I'm wondering how to running tween one by on, a sort of queue of tweens. I kown that i can use callBack or onComplete but i want to knon if there is a way already implemented in Phaser. Thx
  13. Hi guys! I just want to share with you some plugins i made for my games (pixi.js >= 3.0.8). May be useful for someone. pixi-animationloop: To manage the requestAnimationFrame, doing the basic time operations, like delta time, total times, stop the loop when the browser's tab lost the focus, etc... pixi-keyboard: To manage keyboard events easily. pixi-timer: To create time events, clocks, etc... pixi-audio: To add audio support using the pixi resource-loader. The plugin use webaudio by default, and fallbacks to HTMLAudio when is needed. pixi-tween: To create tween animations, tween alongs paths, etc... Extra: obj-pool this plugin is not for pixi.js per se, but it's useful when we develop games for the memory management. Extra2: ES6-Webpack-Pixi-bolierplate, a start point to use pixi with ES6. I have other things in a old engine i made with pixi v2-3, and i will be move it to pixi v3-4 like plugins, for example, scene transitions, particle sys and tools, etc... -> Particle sys tool1, particle sys2 Regards!
  14. I have an immovable sprite. I'm scaling this sprite up with tween but I don't know how to make it push other sprites (with physics) on it's way. Any help would be appreciated.
  15. Is it possible to tween the bounding box of a sprite? We have a character that jumps, and when in the jump sequence, there's transparent pixels under the character that we don't want to count as hit area. I know that through `asset.body.setSize()` I can change the size of the bounding box, but where are these properties on the sprite such that I can tween them to and from? Any exmples of this? Thanks!
  16. Hi guys, At first, I want to apologize for my bad english. I'll try to do my best. I'm creating a phaser multiplayers game based on the tower defense concept. There is a wave of monsters who walks along a specific path during an undertermined time (until every monsters of the wave died). Each monster of the wave is a sprite which has his own tween. Here I encountered 2 problems : 1) If I open a new tab in the browser running phaser, do some stuff, and come back to the tab with phaser, some tweens are crashing and the path of some of the monsters (not all) is not respected anymore. Do you know what could happened ? 2) As a multiplayer games, Im using sockets to establish a communication between clients and server. When all clients are ready, the server give them the order to start the wave of monsters, the tween.start() is launched at the same time on every clients phaser instance. But I noticed that, for some reasons I ignore, there is a small delay between clients, and the monsters are not at the exact same position in all browsers players. How could I fix that ? Thank you all for taking your time to help me.
  17. Hey guys I found a bug in the official tween example that is a 5 tweens, and chain by onComplete event handle, open chrome inspector,add a break point in one tween handle,and you will found that the tween is accumulation more and more.(the time cost to arrive the break point is longer as the loop times accumulation ) and also you can found that the timeline in the tween in more and more that is to bad
  18. Hey guys I found a bug in the official tween example that is a 5 tweens, and chain by onComplete event handle, open chrome inspector,add a break point in one tween handle,and you will found that the tween is accumulation more and more.(the time cost to arrive the break point is longer as the loop times accumulation ) and also you can found that the timeline in the tween in more and more that is to bad
  19. Lets say I have this code: var mySprite=this.add.sprite('mySprite'); mySprite.alpha=0; var mySpriteTween=this.add.tween(mySprite);{alpha:1},1000,'Linear',false,0,0,true); mySpriteTween.start(); mySpriteTween.start(); When I call start() the second time the tween does not run even though I have yoyo set to true and thus the alpha of mySprite has been tweened back to zero. Does the Tween Manager clear the TweenData object owned by mySpriteTween after it has completed?
  20. I have been trying to set up a chain of tweens for hours, without results. This is what I want to accomplish: Target is a group, located above the world Tween 1 Arrive: group comes down into x:48, y:96, then Tween 2 Swing: group starts moving back and forth (yoyo) between initial x value and given x value. Tween 3 Creep: In Tween2's onLoop.add a tween is called to move the group in y axis When stage ends, the group must go back its initial position, and its children sprites recreated, so in a restart function I stop Swing tween and to its onComplete add: Tween 4 Go back: group goes back to y, a large negative number which hides it again, on its onComplete I add a call to the function which will create Arrive, Swing and Creep tweens. The problem I'm facing is that in restart, the Swing tween doesn't seem to be stopping even though I call .stop() upon it and everything seems to be executing out of order. Here's the code: Tweens for aliens arriving, swinging and inching downward: //Aliens arrive! this.aliens.x = 96; this.movDat.ay = -(; this.aliens.y = this.movDat.ay; this.movDat.aliensSwing = new Phaser.Tween(this.aliens,this,this.tweens);{x:256},2000,Phaser.Easing.Linear.None,false,0,-1,true); this.movDat.aliensSwing.onLoop.add(function(){ this.movDat.ay+=10; this.add.tween(this.aliens).to({y:this.movDat.ay},2000,Phaser.Easing.Linear.None,true,0); console.log('swung!! moving to y:'+this.movDat.ay); }, this); this.movDat.aliensArrive = new Phaser.Tween(this.aliens,this,this.tweens);{x:96, y:48},1000,Phaser.Easing.Cubic.Out,false); this.movDat.aliensArrive.onComplete.addOnce(function(){ console.log('arrived!! swinging from x:'+this.aliens.x+' y:'+this.aliens.y); this.movDat.ay=48; this.movDat.aliensSwing.start(); },this); this.movDat.aliensArrive.start(); Code in level restart function to tween aliens offscreen, and call the fn with code above: console.log('aliens going back...'); this.movDat.aliensSwing.stop(true); this.movDat.aliensSwing.onComplete.addOnce(function(){ this.movDat.aliensGoBack = new Phaser.Tween(this.aliens,this,this.tweens);{y:-400},1000,Phaser.Easing.Linear.None,false);console.log('no more swinging...'+this.movDat.aliensSwing.isRunning); this.movDat.aliensGoBack.onComplete.addOnce(function(){console.log('aliens gone back'); this.aliens.removeAll(); this.createAliens();},this); this.movDat.aliensGoBack.start(); },this); I've had to already shelve another game because I haven't been able to understand the tween system. Any help is appreciated.
  21. Is it possible that when we call tween.stop() that we can have the tween jump to the end/complete the tween? Further more can we be able to jump to the end of the following chained tween(s)? In this case I have a tween to scale up chained with a tween to scale back to normal. Wish we had a Tween.fromTo(obj, param.from, param to, ...). However I need to be able to handle the edge case that if the tween needs to be stopped that the object being tweened can be left in a state it should have been if the tween played out to the end. forceCompletion. I understand that I could write an onComplete and fire it with a tween.stop(true) and then force the object to the set params I wanted but this gets redundant and slow to write this into every possible tween created for edge cases. However in this case if TweenA (scaling up) has an onComplete just encase to reset params. Then that onComplete will fire prier to the chained TweenB (scale down) which then will cause the Tween to skip the effects of scaling down because on onComplete I have already reset the params. Suppose this has already been requested as well but how about the tweenManager having a getTweens(obj) which can check the list of tweens for any tweens effecting the object in question and return it in an array? Update: I've updated my phaser library from 2.4.4 to 2.4.6 and tween.stop(true); does fire the next chained tween in this case TweenB the scale down tween. Which then needs it's own tween.stop(); it is possible to tweenA.stop(true); tweenB.stop(true); and have an onComplete of tweenB to reset the values if I once again submit to having to record and set the desired params of the final desired state.
  22. Hallo, I need to move and rotate a player by a predefined path. Like: [stepForward, turnLeft, stepForward, turnLeft, stepForward, stepForward, stepForward, ...] The problem is, the path is dynamic and depends on user input. I tried to put the coordinates and agles in arrays and do something like{x:[...], y:[...], angle:[...], 5000, Phaser.Easing.Linear.None, true); But in this case I got problems with rotation. I don't know how to chain dynamicly or use several .to call. Any ideas?
  23. I've created some buttons for the main menu of my game and I wanted to add a nice animation of the buttons moving off screen with a short delay after each other. So I made a bunch of buttons and gave each of them their own tween and then combined the tweening process like this: tempTweens[0].onStart.add(function () { console.log('onStart fired');, function () { tempTweens[1].start(); }, this); * 2, function () { tempTweens[2].start(); }, this); * 3, function () { tempTweens[3].start(); }, this); }, this);But when I do tempTweens[0].start(); it does what I want it to.... 1 time. The second time I do tempTweens[0].start(); it only moves the first button and not the other ones. I even made a small loop after this code to check. for (var i = 0; i < 10; i++) { tempTweens[0].start(); }and it only writes 'onStart fired' to console 1 time. I'm thinking I haven't fully understood how .onStart works but my guess was that stuff like this should only happen if I had used .addOnce not .add.
  24. In the code below I create a graphics object with an alpha of 0. I then create a tween object using the graphics object as the target. In the update function I change the alpha value of the graphics object from 0 to 1 using the tween. This does not work. However, when I create the graphics object using an alpha value of 1 and change the value from 1 to 0, using the tween, it does work. Can someone explain this to me? var MyGame={}; MyGame.Test=function(){ this.rectangle; this.tweenRectangle; this.switch=true; }; MyGame.Test.prototype={ create:function(){; this.rectangle.lineStyle(0); this.rectangle.beginFill(0x992d2d,0); this.rectangle.drawRect(0,0,600,600); this.rectangle.endFill(); this.tweenRectangle=this.add.tween(this.rectangle); }, update:function(){ if(this.switch){{alpha:1},5000,"Linear",true); this.switch=false; } } };
  25. I'm trying to bounce a sprite so that its y coordinate follows a path like this; The animation should accelerate as it is closer to the origin, and decelerate at the apex. This function is in fact; abs(sin(x) * 2) I'm trying to do this in phaser using Easing.Quadratic.In with yoyo=true, however the animation slows at both the origin and the apex. Any ideas on how I can achieve this? I guess I could set the position inside an update using the function above instead of tweening, is there any performance difference between doing that or using Phaser.Tween?