Search the Community

Showing results for tags 'tweens'.

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

Found 21 results

  1. Why doesn't music pause properly?

    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?
  2. Fixing child sprite rotation gitter

    Ok so Ill start with a quick example: 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?
  3. 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.
  4. 2 questions about phaser

    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!
  5. hi, I'm moving 2 chain tween but when the second tween is executed the position of the sprite is not updated...{x: 328}, 750, Phaser.Easing.Linear.In);{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
  6. 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
  7. 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
  8. Move all connected sprites

    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 =; 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); = 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.
  9. Tweening a BitmapText

    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.
  10. How and Where to use Phaser Tweens?

    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 = .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 = .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); },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!
  11. Hi all, I was looking at using tweens in a simple application, and something struck me as odd when using ``. 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?
  12. group tween animations

    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
  13. _tweens undefined on object

    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: 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._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._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
  14. 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
  15. 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.
  16. small phaser game: memory

    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.
  17. 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,
  18. Stopping chained tweens

    I've set up a chain of tweens by chaining the 'to' method. e.g.{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.
  19. How can I change setSize with tweens

    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 =, 406, 'mummy'); this.mummy.scale.setTo(-1.2, 1.2); this.mummy.body.gravity.y = 8; this.mummy.animations.add('walk');'walk', 12, true); .to({ x: 450 }, 2500, Phaser.Easing.Linear.None) .to({ x: 580 }, 2500, Phaser.Easing.Linear.None) .loop() .start(); .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!
  20. Adding tweens to groups

    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