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
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 200 results

  1. Hi All I'm writing a basic platformer which has prizes that I'd like to be undulating in scale. The prizes are generated dynamically as the game progresses. I am using the following tween for this, newly assigning the tween to each new prize as it is created: this.tweens.add({ targets: [scObjCreated], scaleX: '-=.2', scaleY: '-=.2', duration: 700, ease: 'Sine.easeInOut', repeat: -1, yoyo: true }); However, this seems inefficient as I know that you can have one tween with multiple targets, so having loads of tweens that all do the same thing seems like poor practice. I tried assigning the tween to a variable as follows: this.MyTween = this.tweens.add({ targets: [scObjCreated], scaleX: '-=.2', scaleY: '-=.2', duration: 700, ease: 'Sine.easeInOut', repeat: -1, yoyo: true }); ...and then pushing the newly created prize objects to the "targets" array as follows: this.MyTween.targets.push(myNewObject); However, this doesn't seem to do anything. Is there a way to do this please? Thank you!
  2. Tween on Click stops after rapid clicks

    Hey there! I'm pretty new to Phaser, but I've been making an idle clicker in it to learn the ropes. I've run into some issues with tweens that I'm not to sure how to fix. I have a sprite, and when you click it, it increments a counter and plays a 'bouncy' tween, to display you clicked on it. This is cookie clicker style, so the user will inevitably rapid fire click it at some point. The issue seems to be that after several rapid fire clicks, the tween just sort of gives up and stops working. My first assumption is that because we're creating a tween each time we get some kind of overload of them because we're not properly destroying them? I'm unsure how to effectively do this in this situation. The ways I attempted to fix it: use game.tween.remove(tweenName) at the end of the function (expecting the next click to create a new one) store tween in variable and if variable != null, clear variable before creating new tween in it. Neither of these had results which makes me think I'm not understanding this correctly. Code: crystal = game.add.sprite(, - 5, 'crystal'); crystal.anchor.set(0.5); crystal.inputEnabled = true; crystal.input.pixelPerfectOver = true; crystal.input.useHandCursor = true; //on click event firing, this); //this tween is just it moving up and down to 'float' game.add.tween(crystal.position).to( {y: + 5}, 2200, Phaser.Easing.Linear.InOut, true, 500, 20, true).loop(true); //on click event function function actionOnclick(){ game.add.tween(crystal.scale).to({x: 0.95, y: 0.95}, 300, Phaser.Easing.Bounce.None, true, 300, 0, true); counter++; text.setText('Glamour: ' + counter); } Note: the tween doesn't need to complete if the user clicks again, just start over. It does this, but after so many rapid clicks it stops doing anything.
  3. Dot move with trail

    Good morning! I've a question about trails. I've an image of a point who's moving from left to right (not always with the shortest track) and I would like to let him have a trail. Is there in Phaser a better (and surely smart) way to do that instead of create multiple tweens for multiple identical image object with identical track who have different alpha? Thanks!
  4. Hello, I'm making a racing game (at least I'm trying to!) I'm using a setTimeout function to delay the start of the scrolling of the background by 3 seconds which works perfectly! But, what I really need now is to display an image of "3" *pause & fade out*, switch to image of "2" *pause & fade out*, switch to "1" *pause & fade out* then show "Go!" * fade out* I saw something where I set the alpha to 0 and then tween the alpha to 1 like so: game.add.tween(this.countDown).to({alpha: 1}, 1000, Phaser.Easing.Linear.None, true, 0, 1000, false); But this isn't exactly what I'm looking for. I'm not sure what all of these parameters are or how I would switch between the images (using different images or a spritesheet, I'm not sure what's best) to give the desired effect. Can someone please help me? Many thanks, and let me know if you need me to explain this better! Update: I kept hunting around (I apologize for not searching more thoroughly) but, I did come across chaining tweens. I'm trying it out but having some difficulty
  5. Hey all! I'm trying to make UI elements that are essentially sprites that act like progress bars in that they fill up or empty out as different things happen. I would like the empty and fill to be smooth and have a bit of animation to it and tweens would be perfect, but the shapes are varied instead of just a rectangle that I can change the height of. Something like the attached image is what I'm talking about but that isn't the sprite that I'm using: I did find this solution here using bitmapdata but it only seems to look right when you're increasing or decreasing it by 1 and any other increments make it jump around. It's also not tweenable so I have concerns about making the animation look smooth and nice. While it doesn't seem to be the right solution in this case, the images in that first post in the link are pretty close to what I'm going for, I think I may just have different requirements I've also looked into stacking two of the same sprite on top of each other and cropping one down to give the illusion of an actual health bar-type thing, but I couldn't get it to work as I'm imagining it. There's every chance that that is the right solution and I just don't know how to write it though. The final game will have several of these in a row to make a visual status bar type thing, so being able to control how full each one is individually is important, which hopefully doesn't make things even more complicated. Thanks for any help at all!
  6. As title. I'm finding a tween library which can use shared ticker with PIXI. But haven't find a proper one yet... I checked TweenLite, TweenJS, but it seems cannot use PIXI ticker. Anyone have good recommendation ?
  7. I have 2 sprite groups each representing a hand of cards. Each group has its own scale, rotation and position; same for each sprite (card) in each group. I'm trying to create a smooth animation of the card moving from one hand to the other. I can calculate the local parameters (scale, rotation and position) of where the card should be in the new group, but I can't seem to find an easy way to create a tween between 2 sets of local parameters. The only route I could think of at the moment is something along the lines of: store '', 'sprite.worldScale' and 'sprite.worldRotation' => remove sprite from group => add sprite to temporary group => set temporary group's parameters to the stored world parameters => calculate the world parameters in the new group => tween to new world parameters => add sprite to new group and set it to its local parameters. The becomes even more difficult if the destination could potentially change during the tween. Is there an easier or a more robust way of achieving that?
  8. Enqueue tweens?

    I have sprite that is animated on a board, let's say a 4x4 grid. If the user presses a button, it will move either one one square up/down or left/right. If the user presses the button multiple times, I want for it to step through the movements but as it is right now the sprite will just move diagonally to the final state. Is there a way to enqueue tweens so that each step runs asynchronously? Here's what the transition from one state to another looks like now, where state is the current state number and the location arrays hold the points at every state: game.add.tween(sprite).to({ x: locationX[state], y: locationY[state]}, 500, Phaser.Easing.Linear.None, true);
  9. Hey guys. I am moving a group of sprites down using a tween. They move w/o any problem. But their y coordinates don't change after the tween is complete. let moveToY = "+" + String(300); game.add.tween(blocks).to({y: moveToY}, 500, 'Linear', true); After the tween their y coordinates stay the same. I am checking after the tween is complete of course. What am I doing wrong?
  10. How do I tween the rotation

    I could probably mess with currentTransform from update(), but is there a better way to tween a sprite rotation?
  11. Hi, I'm a new user and I do not know the rules of this forum. However, let you understand, I first define the context. I'm developing a peer-to-peer game, using the "simple-peer" API, all based on the opponent's position (x, y). My only issue concerns updating the remote sprite video so that I can update it using only using the moveToXY () function and if the tween do not work. Positions are captured with the peer's "data" listener, saving them to an array position: peer.on ('data', function (data) { positions = data.split("-"); console.log (positions[0] + "-" + positions[1]); } In the update function I would instead use this feature: this.tween = this.add.tween (opp) .to ({x: positions[0], y: positions[1]}, 1,Phaser.Easing.Linear.None, true); but unfortunately it does not work. I tried to test the tween replacing positions at player.x and player.y, but it works. How can I do? I am desperate.
  12. I modified the tween loop examples in v3. I'd like to change the texture when every tween loop finished. But the texture flickers after setTexture(). Am I doing anything wrong? var config = { type: Phaser.WEBGL, width: 800, height: 600, backgroundColor: '#2d2d2d', parent: 'phaser-example', scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); function preload () { this.load.image('block', 'assets/sprites/block.png'); this.load.image('arrow', 'assets/sprites/arrow.png'); } var name = ['block', 'arrow']; var i=0; function create () { var marker = this.add.image(100, 300, 'block').setAlpha(0.3); var image = this.add.image(100, 300, 'block'); this.tweens.add({ targets: image, x: 300, duration: 1000, repeat: -1, onRepeat: function(tween, target){ target.setTexture(name[++i%2]); } }); }
  13. Hey guys, I've run into yet another case of "don't know how to do this best" and I'm looking for help Here's my Scenario: I've got a sprite with a certain tween. The tween is supposed to be skippable, which means it stops and all properties of the sprite will be set to the target values of the tween and the onComplete function will be fired. After that, it can be played again and so on. Here's the Tweens setup: this.portrait.inFocus = false; this.portrait.focusTween = this.add.tween(this.portrait).to({alpha: 1}, 1, Phaser.Easing.Linear.None, false, 0).to({alpha: 0}, 1000, Phaser.Easing.Quintic.Out, false, 0); this.portrait.inTween.onComplete.add(function(){this.inFocus = true}, this.portrait); Problem: Using stop() also marks the tween for deletion and it won't play again. My ideas: - Using stop() and adding a new tween each time. As I see it, the downside would be that I need to add the onComplete function every time, too. Also, I'm not so sure about the memory usage for this one. - Overriding the stop() function to not remove the tween. I tried it bycommenting out this.manager.remove(this), but it's already causing some weird behaviour with the tween jumping to it's start randomly after completing, and I'm a little bit afraid that could cause other damage elsewhere anyways.. So... I'm very open to suggestions and/or clarification
  14. Hi, I am currently having an issue where my alpha tween on my game isn't working as I expected. I set the tween to happen over 5 seconds however it seems to only take a fraction of the time and ignores the time. Here is my code: var box =,0); box.alpha = 0.1; box.moveTo(0, 0); box.beginFill(0x000000); box.drawRect(borderSide, borderTop, ( - borderSide * 2),; box.endFill(); var fadeTween ={ alpha: 1 }, 5000, "Linear", true); fadeTween.onComplete.add(this._end_game, this); You can see my video attached below for an example of this in action. Thanks, Jamie alpha.mp4
  15. Tweening particles

    Hey all. I want to apply color tweening to particles, but i don't know how, can anybody help me in this? thanks in advance
  16. hi, i'm trying to implement this effect : i have a circle who's animating to incite the player to click on the screen. next the player click and release a pink player who go to an enemy ( the pink rectangle). I would like to let the player the ability to click several times to release multiple players and each time the player is inactive the animation of the circle to prompt him to click. The problem is that this animation launches several times at the same time as soon as the players are dead. How to code this to avoid this behavior? thanks for your help, because me i don't see the solution var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:preload, create: create, update : update }); function preload() { game.load.image('circle', ''); game.load.image('rect','') game.load.image('player','') } var player=[] var enemy var circle var tw_name var tap_ready = true var flag=true var delay_circle_timer = 1500 var counter = -1 //effect on the circle : tween start_tw = (obj,tw_action,tw_name,f) => { tap_ready = true f=true tw_action(obj,tw_name) } // declaration of tw_action tw_action= (obj,tw_name) =>{ obj.alpha=.5 obj.scale.setTo(1,1) tw_name= game.add.tween(obj.scale).to({x:1.5,y:1.5},700,Phaser.Easing.Linear.None,true,delay_circle_timer,-1) tw_name = game.add.tween(obj).to({alpha:0},700,Phaser.Easing.Linear.None,true,delay_circle_timer,-1) tw_name.onStart.add(()=> {obj.visible=true}) } //stop tween stop_tw = (tw_name,f,obj) => { if(f){ obj.visible=false game.tweens.remove(tw_name) f=false } } //launch player and start counter launch_player = (obj)=> { counter++ obj[counter].body.velocity.y=-100 } hide_player_and_start_tw = (obj) => { obj.body.enable=false obj.visible=false start_tw(circle,tw_action,tw_name,flag) } tap = () => { game.input.onTap.add(onTap); function onTap(pointer, doubleTap) { if (!doubleTap && tap_ready){ tap_ready=false //stop the tween on the circle stop_tw(tw_name,flag,circle) //launch the player launch_player(player) //delay for reset tap_ready,() => {tap_ready = true}) } } } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); circle=game.add.sprite(400,300,'circle') circle.anchor.setTo(.5) circle.inputEnabled = true enemy = game.add.sprite(400,100,'rect') enemy.anchor.setTo(.5) game.physics.arcade.enable(enemy) enemy.body.enable=true enemy.body.immovable=true for (var i = 0; i < 10; i++){ player[i]=game.add.sprite(400,600,'player') player[i].anchor.setTo(.5) game.physics.arcade.enable(player[i]) player[i].body.enable=true } //initiate first tween start_tw(circle,tw_action,tw_name,flag) } function update() { tap(circle) for (var i = 0; i < 10; i++){ game.physics.arcade.collide(player[i],enemy,hide_player_and_start_tw) } }
  17. Hi, Im having an issue with tweens. Its a bit difficult to explain, so please bare with me.. this.tween ={ y: y+100 }, 100); It is a quick tween over a relatively large distance that is repeated many times. If the itemToTween is moved by say 15 pixels per frame (for example), the last frame is moved only 10 pixels to exactly end at position y+100. This 10 pixel move in the last frame as apposed to the normal 15 pixels per frame is causing hiccups/staggering on the tween repeat and other running tweens on other items are becoming out of sync position wise. The only solution I could think of was maybe doubling the distance and time of the tween and then manually checking on the tween update if the position is greater than y+100. In that case stop the tween and trigger the new tween and subtract the distance the original tween shot over y+100. This seems like such a hack though... Does anyone have a suggestion on a cleaner solution? Thanks.
  18. Tween on a circle

    So, I'm trying to create a pinging type effect in my game, basically I want a circle to show up in location, and get bigger. My issue is that as the circle gets bigger, so does the lineWidth of the circle (though, the actual line width value in phaser is remaining the same. circle =,100); circle.lineStyle(2, 0xffff00); var ping = circle.drawCircle(0, 0, 10); ping.anchor.set(0.5, 0.5); var circleTween = .to({height: 300, width: 300}, 1000, Phaser.Easing.Linear.None, true, 0, 0); Any thoughts as to how to keep the lineWidth an actual 2 pixels, rather than growing relative to the size of the circle?
  19. Tween problems / onComplete

    Hello guys, I have 2 'simple questions' (I assume) that kinda bugs me for a while now. I wouldn't want to get too in-depth with this mainly because I'm not good at explaining stuff; but I'll try to keep it simple. 1st question: Is 'fig 1' and 'fig 2' supposed to be the same thing? 2nd question: I got a button that is supposed to pause the game. 'mygamepaused' is a variable that goes true/false on a click. 'mytimepass' is a 3 seconds timer that runs the tween from the first question. 'smiley_tw_pass' is a variable that goes true when the timer is finished (aka my way of telling the program that the tween just started) 'smiley_tw' is the name assigned to the tween (see question 1). After the tween is completed (see question 1) - the sprite (this.smiley) goes to 100 on y axis and changes alpha to 0.1. Here's where I run into problems. 1st: "smiley_tw is not defined" console error when trying to press the button before the timer passess (aka it cannot find the tween) fixed it by assigning a variable (smiley_tw_pass) right after the timer runs out. that a good way of checking if the tween just started?... 2nd: "smiley_tw.pause is not a function" console error when using fig 1 (see question 1) fixed it by using fig 2 (see question 1) ...this bugs me because in my mind the two methods should work the same way, right?... So that's how I solved the problem - by using a variable to detect if the tween just started AND using fig 2 instead of the first one - But WHY? Why does the 2 methods doesn't work the same way here - AND - is declaring a variable (smiley_tw_pass) to check if a tween is running - a good thing? I would really appreciate if someone can figure this 'mistery' and can clear my mind a little. Full code: (480x720) var Test = function (game) {}; var mygamepaused = false; var smiley_tw_pass = false; Test.prototype = { create: function () { //create button this.mybutton = game.add.button(, 600, 'smiley', this.myfunction, this); this.mybutton.anchor.setTo(.5); this.mybutton.scale.setTo(.2); this.mybutton.inputEnabled = true; //create smiley this.smiley = game.add.sprite(,, 'smiley'); this.smiley.anchor.setTo(.5); this.smiley.scale.setTo(.5); //create mytimepass mytimepass = game.time.create(false); mytimepass.add(3000, function () { if (!smiley_tw_pass) smiley_tw_pass = true; smiley_tw = game.add.tween(this.smiley).to({ alpha: 0 }, 1200, Phaser.Easing.Quadratic.InOut, true); smiley_tw.onComplete.add(function () { this.smiley.y = 100; this.smiley.alpha = 0.1; }, this); }, this); mytimepass.start(); }, myfunction: function () { switch (mygamepaused) { case false: mygamepaused = true; mytimepass.pause(); if (smiley_tw_pass) smiley_tw.pause(); break; case true: mygamepaused = false; mytimepass.resume(); if (smiley_tw_pass) smiley_tw.resume(); break; } }, render: function () { game.debug.text('mygamepaused: ' + mygamepaused, 20, 20); game.debug.text('smiley_tw_pass: ' + smiley_tw_pass, 20, 40); game.debug.text('mytimepass: ' + mytimepass.duration.toFixed(0), 20, 80); } };
  20. Microlags with fast-moving objects

    When trying to move an object with high speed across the scene, I've noticed that the movement is not really smooth - there are some small but really annoying glitches. I've tried both manual moving and moving with TweenLite, the glitches persist in both cases. I'm using Pixi.js 4.5.3 This is how I create the Render, maybe something wrong with it: let canvas = <HTMLCanvasElement>document.getElementById("canvas"); this.renderer = PIXI.autoDetectRenderer(1500, 1200, { // ScenesManager.renderer = new PIXI.CanvasRenderer(800, 600, { view: canvas, antialias: false, roundPixels: false, }); this.renderer.backgroundColor = 0x000000; document.body.appendChild(this.renderer.view); And this is my tween: let wall:PIXI.Sprite = PIXI.Sprite.fromFrame("1.png"); this.addChild(wall); wall.position = new PIXI.Point(4*64, 2*64);, 15, { x: 99*64, y: 2*64, ease: Linear.easeNone}); And I also made the demo (see the attachment) I would really appreciate any help or ideas on what can cause such microlags, cause I've spent many hours trying to sort this out. The number of objects on scene doesn’t really matter, there are lags even on small test scene with just 1 moving object. Any thoughts on what's happening?
  21. Game loop and Animation question

    Hey everyone, So Im new to game development, although Im a full stack JS dev for general sites and apps. I started getting into canvas animation and now Im here trying to learn some game animation stuff. My question is this: Do you generally do just about all animation in the game loop with requestAnimationFrame()? Or can you simply have renderer.render(stage) called in the game loop while outside of it you use GSAP or some other tweening mechanic to change the positioning props on objects/sprites? Iv tried it and it works, I just would like to know if its dumb or nonperformant. I also tried using my regular js tweening library to call `renderer.render(stage);` in its update callback and it looks the same (im just doing a simple animation generating snow-like particles that float down). I know that the supported game loop in PIXI has stuff for velocity and whatever but I really like my animation library's ( easing and elasticity options. Will calling renderer.render(stage) in the game loop while tweening outside the loop still be 60FPS? Or do I need to be updating in the game loop? If I have to do it in the game loop, does anyone have any tips/references for easing and all of that? Because I dont want to have to write my own easing functions to update in the game loop (and I suspect most people arent), and rather use an animation API for that. Im also brand new to PIXI and maybe it has its own easing and whatever that works inside the game loop. Cheers
  22. Tween Issue

    Hello, I'm having an issue with the tween. For example a card flip. this.cardChoice = game.add.sprite(213, 255, 'normal_cards', 'back_card'); this.cardChoice.anchor.setTo(0.5, 0.5); this.cardChoice.scale.setTo(0.84, 0.80); this.cardChoice.scale.setTo(0.84, 0.80); public cardFlip() { this.tweenPCard = { x: 0 }, 200, 'Quart.easeOut'); this.tweenPCard.start(); this.tweenPCard.onComplete.add(this.choiceCardFlip, this); } public choiceCardFlip() { this.tweenChoice = { x: 0.84 }, 200, 'Quart.easeOut'); this.tweenChoice.start(); } In the first few plays the tween is good but after several plays the card is not flipping and it's like the this.tweenCard = { x: 0 }, 200, 'Quart.easeOut'); is disappearing. Thanks.
  23. Some function moves the object with the tween with "Linear.None" easing. It also set the custom variable "isMoving" to "true". When the tween is completed ("tween.onComplete" using), a second function is called, set "isMoving" to "false" and if some conditions is true - calls the first motion function. So at the moment there is a slight delay and tween looks not smoothed. The second function not heavy, it doesn't affect to performance.
  24. TypeError with Tween

    i have an "Uncaught TypeError: this.easingFunction is not a function" function ComLink(game, planet) {, game,game.width - 179 * 1.5, game.height - 116 * 1.5, 'communications_hud'); this.scale.set(1.5); }; ComLink.prototype = Object.create(Phaser.Sprite.prototype); ComLink.prototype.constructor = Planet; ComLink.tween;; ComLink.prototype.init = function (game) { = game; } ComLink.prototype.close = function () {{y:}, 200, 'linear', true).start(); console.log(this); } ... PlayState.create = function () {,0,'background'); this._loadLevel(); } PlayState._loadLevel = function () { ... this.ComLink = new ComLink(;; this.ComLink.init(; this.ComLink.close(; } here's most of the relevant data and here's the log of the comlink resolved
  25. PHASER : Chained transitions issue

    Hi there, Hi have a sprite moving on the x axis at a given speed. When the user press on the space bar, I want (1) the sprite to stop on y axis, (2) make a move to the right, (3) go back at his initial position, and (4) continue his way on y. I've tried with the following code but the sprite stops while going back to his position and keeps shaking. Is there an easier way to do what I'm trying to achieve? If not, how could I debug this code? Many thanks! PS: my sprite will have to consider collisions. if ({ let position_man =; let speed_man =; = 0; let tween = game.add.tween(;{x:200},100,"Quart.easeOut"); tween.start(); tween.onComplete.addOnce(retour,this); function retour(){ let tween2 = game.add.tween(;{x:100},100,"Quart.easeOut"); tween2.start(); } = speed_man;