Search the Community

I created a simple timeline to simulate a card unfold animation, there are 2 tweens inside it, one is changing the card's scaleX from 1 to 0.01 and another one just does oppositely. var timeline = this.scene.tweens.createTimeline(); timeline.add({targets:this.cardFace,scaleX:0.01,duration:500,ease:Phaser.Math.Easing.Cubic.Out,onComplete:function(){this.cardFace.setFrame('heart-2')}}); timeline.add({targets:this.cardFace,scaleX:1,duration:500,ease:Phaser.Math.Easing.Cubic.Out}); timeline.play(); my question is, how to ignore the tween's duration, and immediately jump to the end. in some case, I want to skip the animations but keep the ending process

Hi, I'm using the arcade physics engine. I'm trying to move a cloud left and right via tweens but the problem is the arcade box isn't moving with it. Does anyone know how to fix this? createTweens() { this.scene.tweens.add({ targets: this, x: this.distanceX, duration: this.speed, yoyo: true, loop: - 1 }); }

hi everyone, I was asked by my fiance how hard it would be to program a memory game.. .. challenge accepted So I came up with this, using some test-sketches done by her as the cards: Play now It was fun to code (thanks to phaser!) and a good exercise in using tweens (had only used them briefly before). The game mostly consists of phaser buttons (as the cards) that are moved around using tweens. If you have any comments/questions please let me know.

This is my async.forEachSeries function: async.forEachSeries(parsed.moves,function(move, callback) { that.moveObj(move, callback) }, function() { console.log('done running the entire code') }); Move object is starting the tween and calling the callback onComplete of the tween. moveObject(x, y, obj,callbackToAsync, offsetX = 0, offsetY = 0) { let coordinates = this.convert(obj.i + offsetX,obj.j + offsetY) let tween = this.game.add.tween(obj, this.game, this.game.tweens).to({ x: coordinates.x, y: coordinates.y }, 2000) tween.onComplete.add(callbackToAsync,this) tween.start() } So from my understanding, each move should be called and after the tween for that move is complete it should call the callback and proceed to the next iteration with the next move in the array. What ends up happening is that the first move is executed and then it goes to the function that should be called when all iterations are done without completing all the iterations. I've made sure that the moves array has more than one object. So this has something to do with the tween, since when I simply call the callback in moveOb it processes the moves sequentially.

Hey Folks, I have been playing around with phaser for some time making simple stuff. But for my new project I would like to try to make a Fighter game. I would like to make a character that is capable of attacking and has fairly good hit collision with other entities in game. Since this is more of a theory question. I will try to explain my approach. The character is group. Made with 3 parts. Body(sprite), arm(sprite), sword(sprite, for example 20x80, angle: -90). Now I would like to make the sword angle to go down from 90 to 0, aka simulating an attack. I get that I could just change the angle. But I also would like to smoothen the animation with the arm moving and the sword moving( to make it look like slashing ). This is kinda the setup in my mind. Now I would like to know what physic to use( planing to use arcade for simplicity sake ), Should I do this with tween? Or should I update the rotation and play animation? idk. if this is important, but the attack should also be I guess timed, so that you can't just hold the key and keep on slashing, but it deals damage, per attack (animation that would be like 0.3s long) Is there a better solution, approach that I could check out? p.s. I know this might seem like a mess post, i was trying to brainstorm and get some advice/ theory on how to handle such a thing. Would like to think that someone has already made this sort of game. Cheers, Jaru

When my game in the browser loses focus, everything pauses: animations pause, music stops playing. HOWEVER, when I go back to the browser, the animations continue from where they left off, but the music behaves differently -- the music resumes at a point as if it had been playing in the background and time had elapsed. So then, my animations and music are out of sync. What is the simplest way of making animations and music behave similarly?

Ok so Ill start with a quick example: https://i.gyazo.com/8ff58e047c8938dcf508b63bc18147bb.mp4 I start the example with a stationary swing and then proceed to swing while spinning. The station swing is perfect and smooth with zero jittering. The swing while rotating creates a horrible jitter effect. Right now the character is as follows: Base empty sprite holding everything. This only moves x and y. Bodyholder sprite is holding the characters body and is child of the base LeftArmHolder sprite is holding the left arm and is a child of the base RightArmHolder sprite is holding the right arm and is a child of the base I have tried a tweening the arm holders, which works well for static swings, but creates jittering while the character spins and swings. I have tried grabbing the body holders angle and applying the swing angle on top of that (body.angle + requiredSwingAngle). The result is the same as the tween. I have also tried creating an addition arm holder to act the base for both arms and make it a child of the body holder. The result is the same as the tween. Does anyone have any ideas on how to create a nice smooth sprite orbiting animation (backwards and forwards) whilst the parent sprite is rotating?

So, recently I created my own tweening functionality to overcome some issues I was having with Phaser's ones and make it fit my needs a little better. While doing so I realized Phaser, and apparently many other engines out there, precalculate the tweened values and store them into an array that's later used to update the object's values instead of calculating the value update on every frame. The way I see it, if calculating all the values for a tween that will be played for one second takes, let's say, 1 ms, I would prefer to have those calculations done in 1/60 ms during the whole second, as the impact on performance sounds lower this way than having a CPU intensive frame while the rest are all lower. Is there any good reason to do this that I'm missing? PS: Also, what I was considering is building some sort of tween cache, where I do actually store tween progressions (0-1) for a certain type of tween and time so I can reuse them multiple times, even with different object or values, would be happy to hear if anyone ever used this or if has some interesting thoughts on it.

hi there, got two questions about phaser 1. is there any tool to test a game performance? 2. how can i use two different properties in a sigle tween? thanks in advance!

hi, I'm moving 2 chain tween but when the second tween is executed the position of the sprite is not updated... moveCase.to({x: 328}, 750, Phaser.Easing.Linear.In); moveCase2.to({x: sprites.position.x - 50}, 500, Phaser.Easing.Linear.In, true, 780); moveCase.chain(moveCase2); moveCase.start(); I tried a lot of things ... there is something I don't understand. Any help is greatly appreciate. Thanks

Hi, I'm new to Phaser and I have some questions when using tween and fill color on which I wasn't able to find any information if it is possible. Basically, I have a straight short line (let's say 20px) which travels from the right side of the screen to the left, but when it reaches the middle part of the screen it creates a circular loop forming the letter "O" and then continues moving till it reaches the left side of the screen. What I wanted to do is when the short line loops in the middle part, the track should be filled with color and forming the letter O itself. Is this possible? I appreciate any information or anyone who can direct me to a reference on this.. Thanks

I have a group of 6 elements and want them to do a specific tween separately with a delay between each. However, everything I've tries just seems to start them all together at once. var bulge = game.add.tween(tiles.getAt(i).scale).to({ x: 1.2, y: 1.2 }, 1000, Phaser.Easing.Back.InOut,false, 0, 1, true); Any help is appreciated

Hello everyone, I have this doubt (little introduction before): I think is really helpful to use a sprite property to "store" another sprite. For example, when I have several enemies and I want all of them to have a health bar I can do something like this: var enemies = game.add.group(); for(var i = 0; i < 5; i++){ var enemy = game.add.sprite(0, 0, "enemy", 0); var health = game.add.sprite(enemy.x, enemy.y, "bar", 0); enemy.health = health; enemies.add(enemy); } By doing this, I can easily locate the health bar in the game later. For example if I want to change the bar's frame I only have to: enemies[i].health.frame = 1; I can do this several times, for example if I want to add a magic bar to the enemies, a text with the name, etc. The problem is, when I want to move the enemy sprite. At this moment, I create a tween for the 'main' sprite, and another tween for each of the properties: game.add.tween(enemies[i]).to({...}); game.add.tween(enemies[i].health).to({...}); game.add.tween(enemies[i].magic).to({...}); This is ok when you have just one property for each sprite, but when the numbers go up, it starts to look... problematic. Specially when each enemy have different properties. I was wondering if there's a way to move a sprite and 'all the sprites that belongs to them' at the same time with a single tween. Thank you! Gonzalo.

Is it possible to tween a bitmap text object? I took some code from the Examples website and tried it on a bitmap text, but nothing happened. I tried the same code on a sprite, and it worked.

Hi guys, in my game I have an arrow, which should rotate all the time from 50deg to -50deg starting from 0 deg. It should do that with the given timing. My code looks like: // POINTER TWEEN GH.g_pointerTween = _this.game.add.tween(GH.g_pointer) .to({angle: -_this.pointer_rotation_angle}, 400, Phaser.Easing.Linear.None) .to({angle: 0}, 400, Phaser.Easing.Linear.None) .to({angle: _this.pointer_rotation_angle}, 400, Phaser.Easing.Linear.None) .to({angle: 0}, 400, Phaser.Easing.Linear.None) .loop().start();The question is if that is the correct approach for using the tween for that kind of purpose? I noticed that the tween lags a bit and wondering is it more efficient way to achieve it? And one more, when user hit the target I would like to show animated notification: scorePoint : function() { var pointText = this.add.text(200, 200, "\n +1 \n"); var pointTextTween = this.game.add.tween(pointText) .to({y: 100}, 800, Phaser.Easing.Linear.None) .to({alpha: 0, y: 50}, 400, Phaser.Easing.Linear.None) .start(); pointTextTween.onComplete.add(function() { pointText.destroy(); this.game.tweens.remove(pointTextTween); }, this); },Since I'm creating a local scope variables for the text and tween all for single use, is this the correct approach for solving that issue? Can I reuse the tween without initialized it every time when I call the function and remove it after it finish? Thank you in advanced and sorry for the noobie questions!

Hi all, I was looking at using tweens in a simple application, and something struck me as odd when using `game.add.tween.to`. By looking at examples like this, it looks like you can pass in the easing function without specifying any arguments for it. E.g., game.add.tween(purpleFish).to({ x: -200 }, 7500, Phaser.Easing.Quadratic.InOut, true, 0, 1000, false);Reading from the docs, methods like Phaser.Easing.Quadratic.InOut need arguments to be passed in or they'll return NaN. However, the code above works fine without any arguments getting passed in to Phaser.Easing.Quadratic.InOut. Is something going on here internally that passes in those arguments for you?

I have a group of enemies in a project i'm working on, I want them to move independent from one another, I can do this, but the animations are playing up. There is easing even though I have set it so there shouldnt be, also whatever I do the tween wont yoyo, repeat etc. Chaining is also not working, here is an example of what i'm doing: var enemyOne = this.enemies.children[0]; game.add.tween(enemyOne).to({x: 220}, 50, Phaser.Easing.Linear.None, true, 0, 0, true); What am I doing wrong, shouldnt this line make the enemy return back to its original position? Thanks

I've been trying to extend the functionality of TweenManager, so it can resume and pause everything within a group. I adapted the code from here: http://jsfiddle.net/lewster32/L3u3gp5k/ http://docs.phaser.io/TweenManager.js.html#sunlight-1-line-127 When debugging with console, _tweens and _add are undefined for each object, so the function doesn't work. I think the code is correct? Any ideas why this isn't working? I'm guessing i've missed something crucial about _tweens. Here's the code: (This goes out to Rich and Lewster) Phaser.TweenManager.prototype.pauseAllFrom = function(obj, children) {console.log('pauseAllFrom', obj.type, obj.name, obj._tweens, obj._add); var o, c, t, len; if (Array.isArray(obj) ) { for (o = 0, len = obj.length; o < len; o++) { this.pauseFrom(obj[o]); } } else if ( (obj.type === Phaser.GROUP || obj.type==7) && children){ for (c = 0, len = obj.children.length; c < len; c++){ this.pauseFrom(obj.children[c]); } } else { for (t = 0, len = this._tweens.length; t < len; t++){ if (obj === this._tweens[t]._object){ console.log('pauseFrom _tweens:',this._tweens[t]); this._tweens[t].pause(); } } for (t = 0, len = this._add.length; t < len; t++){ if (obj === this._add[t]._object){ console.log('pauseFrom _add:',this._add[t]); this._add[t].pause(); } } }};Phaser.TweenManager.prototype.resumeAllFrom = function(obj, children) {console.log('resumeAllFrom', obj.type, obj.name, obj._tweens, obj._add); var o, c, t, len; if (Array.isArray(obj) ) { for (o = 0, len = obj.length; o < len; o++) { this.pauseFrom(obj[o]); } } else if ( (obj.type === Phaser.GROUP || obj.type==7) && children){ for (c = 0, len = obj.children.length; c < len; c++){ this.pauseFrom(obj.children[c]); } } else { for (t = 0, len = this._tweens.length; t < len; t++){ if (obj === this._tweens[t]._object){ this._tweens[t].resume(); } } for (t = 0, len = this._add.length; t < len; t++){ if (obj === this._add[t]._object){ this._add[t].resume(); } } }};I also had to add a condition for the object type, as the console wasn't recognising Phaser.GROUP, and spitting out a number for each object type. // from thiselse if (obj.type === Phaser.GROUP && children){// to thiselse if ( (obj.type === Phaser.GROUP || obj.type==7) && children){Any help would be greatly appreciated. Thanks

Hello everyone, I'm actually working on a Phaser Game. I'm already done a pathfinding for getting the path my soldier should take. Now I would like to make tweens for it and create a chained tween with each tile of the path. Every infos I found don't speak about creating a tween object. Like it we could add new steps to it and after assign it to a sprite for example and play it. Sorry for my english... (FrenchStyle ^^) github : GreG28

Hi all and thanks for reading. Me and my team are working with Phaser ,creating Games 9 months now. Recently we have encountered a problem when running our games on slower machines. It seems like that when we are trying for example to run a tween(moving an object from a spot to another) , the slow PC is unable to demostrate the actual tween and the object just jumps to the final position. From what we understand when we say to the tween to complete in 600ms, the slow machine in not reacting accordincly. Maybe it takes like 600ms for the slow PC to proccess the script and thus the actual script when it starts, 600 ms have allready passed , moves to the final position. Is there any way to deal with this with the timers? Any help whould be great. Sorry for my bad english and thanks in advance! Desseas.

Hi, I'm making a simple game with Phaser I have a spritesheet with two frames. I need an animation of sprite disappear, frame change and appear again like .to( {x:0, y:0 }, 600, Phaser.Easing.Bounce.Out); .frame = 1; .to( {x:1, y:1 }, 600, Phaser.Easing.Bounce.Out); How do i connect it into one chain? Thanks,

I've set up a chain of tweens by chaining the 'to' method. e.g. this.tween.to({angle: 180}, 2000, Phaser.Easing.Linear.None). to({x: 300}, 3000, Phaser.Easing.Linear.None);but I need to be able to stop the tweens. If I call stop on the parent (this.tween) that stops it in its tracks but the other one then starts. How do I stop the entire chain. I could write some manager to keep track of them but I'm sure that's not the way to do it. I saw the TweenManager has a removeAll but that looks like it would take out other chains as well.

Hi. I have a sprite with chained tweens. The first twenn move the x position of the sprite. And the second tween change the scale to -1.2. I do this because the sprite must turn. My problem is that the size doesn't follow correctly the sprite. This is my code. this.mummy = this.game.add.sprite(580, 406, 'mummy'); this.mummy.scale.setTo(-1.2, 1.2); this.mummy.body.gravity.y = 8; this.mummy.animations.add('walk'); this.mummy.animations.play('walk', 12, true); this.game.add.tween(this.mummy) .to({ x: 450 }, 2500, Phaser.Easing.Linear.None) .to({ x: 580 }, 2500, Phaser.Easing.Linear.None) .loop() .start(); this.game.add.tween(this.mummy.scale) .to({ x: 1.2 }, 100, Phaser.Easing.Linear.None, null, 2400) .to({ x: -1.2 }, 100, Phaser.Easing.Linear.None, null, 2400) .loop() .start(); Any idea? greetings!

Hi, I'm just starting out with Phaser, really like it so far and have managed to figure most things out from the examples and this forum. I was wondering if there was any way to add a tween to a group? I am guessing you might use the forAll function, but I'm not sure how this works. This is what I would like to do: game.add.tween(titleScreen).to({alpha: 0},2000,Phaser.Easing.Linear.None,true);Where titleScreen is a group of sprites that comprise my title screen. Thanks, Anton