Search the Community

I think I'm missing something very basic about how Phaser Tweens operate but I just can't get this simple thing to work. Imagine a very simple scene: canvas of 800x640 red circle in the center two blue lines in a 9:00 position private create(): void { const circ = this.add.circle( 400, 320, 200, 0xff0000 ); const l1 = this.add.line( 0, 0, 400, 320, 400, 100, 0x0000ff ).setOrigin(0); const l2 = this.add.line( 0, 0, 400, 320, 200, 320, 0x0000ff ).setOrigin(0); } So far so good. Now I want to scale this simple figure, same config 1.5x its current size: private create(): void { const circ = this.add.circle( 400, 320, 200, 0xff0000 ); const l1 = this.add.line( 0, 0, 400, 320, 400, 100, 0x0000ff ).setOrigin(0); const l2 = this.add.line( 0, 0, 400, 320, 200, 320, 0x0000ff ).setOrigin(0); this.tweens.add({ targets: [circ, l1, l2], scale: 1.5, yoyo: false, duration: 2000, ease: 'Sine.easeInOut' }); } Expected behavior: the circle expands from the center the lines expand as well, ideally where they meet Actual behavior: As things stand, only #1 fit my expectations. The lines, however, translate as opposed to merely scaling. And the translation seems affected by the scale parameter passed to tweens.add. What gives? What am I missing here? Given the various configurations for "origin" wrt lines in Phaser 3, the worst I was expecting was that the lines would emanate/grow differently than the circle (which emanates from the center/origin). But I definitely expect the lines to stay still/keep their intersection at the circle's center. Can you explain what exactly Phaser is doing here and what might I do to get my desired effect?

Hello. I need some idea to implement feature in my game. 1. When player gain score, I want the gained score to be added gradually, so the animation will look smoother. I have the idea to use Phaser Tween class for this. However, the tween process results in the score being a floating number when in process. Is there any way to use implement this so it only tween integer value? I know I can manually use timer for this, but it seems costly, and might create many trash object afterwards. 2. Does Phaser have a Shape-object which can act like sprite? For example a rectangle, circle, or triangle which can be rotated, scaled, moved, tweened as easily as sprite does. I need those shape to achieve a circular status bar. Thank you.

Hello! I try to use a tween and I need to set it's end value dynamically, and new value can't be precalculated - it is just a new integer. I try this code in labs.phaser.io: var config = { type: Phaser.WEBGL, width: 800, height: 600, backgroundColor: '#2d2d2d', parent: 'phaser-example', scene: { preload: preload, create: create, update: update } }; var tween; var game = new Phaser.Game(config); function preload () { this.load.image('block', 'assets/sprites/block.png'); } function create () { var image = this.add.image(100, 300, 'block'); tween = this.tweens.add({ targets: image, duration: 100, paused: true }); setTimeout(function() { // NewX can't bet precalculated var NewX = 500; tween.updateTo('x', NewX, true); tween.play(); }, 1000); } function update() {} .. but nothing happens, box is not moving after 1s. How do I make it to move to the NewX position?

Snippet for phaser2: const graphics = game.add.graphics(x, y); graphics.height = 0; graphics.width = 0; alpha = 0.5; const bounce = game.add.tween(graphics); bounce.to({ height: 300, width: 300, alpha: 0 }, 300); bounce.start(); Actually, is it possible for phaser3? This snippet not resize circle: const circle = new Phaser.Geom.Circle(400, 300, 50); const graphics = this.add.graphics(); graphics.fillStyle(0x00ff00); graphics.fillCircleShape(circle); this.tweens.add({ targets: graphics, alpha: {getStart: () => 0, getEnd: () => 1}, height: 500, width: 500, // or radius duration: 1000, });

In Phaser 2 we could tween scale like in the topic linked below. How is this done in Phaser 3? It looks like the sprite Scale property has changed to scaleX and scaleY, which I thought maybe I could tween like this, but this didn't seem to work: this.scene.tweens.add({ targets : [ this.scaleX, this.scaleY ], x: 10, y: 10, ease : 'Linear', duration : duration, yoyo : false, repeat : 0, callbackScope : this });

Hi, I'm very new to game programming and Phaser and been sitting on this problem for days now. Any help or hint (or improvement to what I got so far) is greatly appreciated! What I wanna do: I basically want to create a "2D point and click physic". So far it works as excepted and perfectly fine if I set the tween duration to a fixed value, but that makes my sprite go faster the further you click away from it's current position: function create() { this.input.on('pointerdown', moveSprite, this); } function moveSprite (pointer) { var tween = this.tweens.add({ targets: player, x: pointer.x, onStart: function () { if (point.x < player.x) { player.flipX = true; player.anims.play('right', true); } else if (point.x > player.x) { player.flipX = false; player.anims.play('right', true); } }, duration: 500, onComplete: animStopCallback, onUpdate: tweenOnUpdate }); } I tried adding some math to the function which I found here, to have the movement speed of the character at same rate no matter the position and it works the way I want it: function moveSprite (pointer) { var distance = player.x - point.x; var speed = 200; var duration = (Math.sqrt(distance*distance) / speed) * 1000; var tween = this.tweens.add({ ... duration: duration, ... }); } But now the problem is, when the pointer event happens before the other one is finished it causes all kinds of weird glitches, making the character jump around. For example, I click 300 pixel to the right of the character, and while it's moving I click in between the way it's walking right now but it doesn't stop there where I clicked last, instead goes to the pointer.x position I clicked first. Apologies if my english is rather confusing. I'd be glad to serve more examples of what I mean or post screenshots if needed.

Hi, Is it relevant to apply a pooling system to Phaser's Tweens in optic to reduce the garbage collector invocation ? Because this subject as already been asked but dont find a clear answer : Thanks

So i'm trying to switch scenes when a tween is complete, however i get the titular error 'Cannot read property 'start' of undefined' , and i don't know why this is... Here's the code: class StartScreen extends Phaser.Scene{ constructor(){ super({key: "StartScreen"}); } preload() { this.load.image('Logo', 'assets/Logo.png'); this.load.spritesheet('background', 'assets/backs.png' , { frameWidth: 480, frameHeight: 320 }); } create() { this.anims.create({ key: 'stars', frames: this.anims.generateFrameNames('background', { start: 0, end: 127 }), repeat: -1 }); this.add.sprite(1024/2 , 400, 'background').play('stars', true).setScale(2.5); this.logo = this.add.image(1024/2 , 300, 'Logo').setScale(2); this.text = this.add.text(320, 450, 'Push Enter', { font: '50px NES', fill: '#FFF'}); this.enter = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ENTER); } update(){ if(this.enter.isDown){ this.text.destroy(); this.enter = ''; this.tweens.add({ targets: this.logo, y: 150, duration: 2000, onComplete: this.onCompleteHandler }); } } onCompleteHandler(){ this.scene.start('MainMenu'); } } class MainMenu extends Phaser.Scene{ constructor(){ super({key: "MainMenu"}); } preload() { this.load.image('Logo', 'assets/Logo.png'); this.load.spritesheet('background', 'assets/backs.png' , { frameWidth: 480, frameHeight: 320 }); this.anims.create({ key: 'stars', frames: this.anims.generateFrameNames('background', { start: 0, end: 127 }), repeat: -1 }); this.add.sprite(1024/2 , 400, 'background').play('stars', true).setScale(2.5); this.add.image(150 , 300, 'Logo').setScale(2); } create() { } }

CodePen I feel confusing when i use Tween.from. Using Tween.from without repeat param the animation shows correctly.It move from (100,0) to (0,0).But when i use Tween.from with repeat param. The repeat is from (0,0) to (100,0).Why?I think it would repeat always from (100,0) to (0,0)

Hello, is there any way to complete current tween in the timeline and then remove following tweens? I'm inserting tweens like this: tweens.push({ targets: this.sprite, x: { value: 50, duration: 1000 }, y: { value: 50, duration: 1000 } }); this.tweens.timeline({ tweens }); Then after some event I need to finish current tween and clear all following (if any). This seems to stop tweens: this.tweens.killAll(); but I can't find anything to finish current tween at first. Thanks

for (let i = 1; i < xPoints.length-1; i++){ a= i*2 this.game.add.tween(graphicsend.currentPath.shape._points).to({a: (225-newypoint[i]) }, 500, Phaser.Easing.Linear.None, true); } for (let i = 1; i < yPoints.length-1; i++){ b= i*2 +1 this.game.add.tween(graphicsend.currentPath.shape._points).to({b: (315-newxpoint[i]) }, 500, Phaser.Easing.Linear.None, true); } Hi, I am trying to tween the points of a graphic but I am having trouble looping it. The a and b variable I set is useless but if I set it to for (let i = 1; i < xPoints.length-1; i++){ a= i*2 this.game.add.tween(graphicsend.currentPath.shape._points).to({2: (225-newypoint[i]) }, 500, Phaser.Easing.Linear.None, true); } for (let i = 1; i < yPoints.length-1; i++){ b= i*2 +1 this.game.add.tween(graphicsend.currentPath.shape._points).to({3: (315-newxpoint[i]) }, 500, Phaser.Easing.Linear.None, true); } it works. Is there any way to represent the numbers to be tweened?

Hello, Imagine the scenario when we animate object (scale) during 3 sec. Animation is awesome but if user interacted with game, we need to complete animation right away and start new. Is there any way to force tween to complete? Currently I am doing following this.progress_tween.stop(); for (var key in this.progress_tween.properties) this.progress_tween.target[key] = this.progress_tween.properties[key]; this.progress_tween.onComplete.dispatch(); Thanks in advance

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!

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(game.world.centerX, game.world.centerY - 5, 'crystal'); crystal.anchor.set(0.5); crystal.inputEnabled = true; crystal.input.pixelPerfectOver = true; crystal.input.useHandCursor = true; //on click event firing crystal.events.onInputDown.add(actionOnclick, this); //this tween is just it moving up and down to 'float' game.add.tween(crystal.position).to( {y: game.world.centerY + 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.

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!

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

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!

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 ?

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);

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.world', '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?

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?

I could probably mess with currentTransform from update(), but is there a better way to tween a sprite rotation?

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.

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]); } }); }

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