Search the Community

Showing results for tags 'tween'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 210 results

  1. Hello, I want to move group of sprites toward the player: var goBack = this.game.add.tween(this.pullGroup); goBack.to({x: this.player.world.x,y: this.player.world.y},2000); goBack.start(); But it seems that the group treats coordinates x, y as starting from group (like it has its own coordinate system) and not from Canvas' (0,0). How to make the tween movement work with world coordinate system and not in group (0,0)? Thanks for help, Edit #1 Ok I have overcome this problem by dividing player.x - child[0].x and the same for y.
  2. I've used updateTweenData to change the duration and delay properties. However if I pass a property like x/y, it doesn't update. Does updateTweenData only have an effect on properties like duration? Stepping through the properties that updateTweenData loops through, it has the x property that I set, however the tween object that is returned from updateTweenData doesn't contain the updated value. I'm changing a tween that isRunning when a powerup is applied, so I'm modifying the tween using updateTweenData. It works great with duration... is it better to stop the tween and create another when I want to override properties like x, y, tint, etc?
  3. Hello, I've recently encountered a very strange behavior on a specific PC. I've been testing about 10 Phaser puzzle games, which use various tweens for visualization. I've played the games on quite a few desktop PCs, including a Mac, and more than 10 different mobile devices, Android and iOS. On only 1 of the PCs all games exhibit an aberrant behavior where tweens seem to be running slower than their duration states. I couldn't find anything in the Internet about what could cause this issue. Even a simple alpha tween with a certain duration, no delay and autostart is acting weird. Phaser 2.4.6 is used. The issue is experienced in Chrome, currently the latest version, but I've noticed this behavior in earlier versions in the past months. On Edge everything runs as intended. If anyone has any idea or solution, please share.
  4. So I have a multiplayer game set up, I had originally coded it so when the player clicks on an X,Y coordinate the server would move the player towards that coordinate on every update. I decided this would be too laggy if the server was under load and opted to use tweening instead. I have one issue though... when I click on a coordinate I have the player sprite tween and play an animation but if I click somewhere far away then it speeds up the animation and the sprite gets there quicker? example: I click 20px away from the player and it plays the whole animation and gets there in the correct amount of time I click 300px away and it speeds through the animation and really quickly moves to the coordinate is there any way to stop this? I tired to use game.tweens.frameBased but that has not worked? I also removed physics but that didn't help either
  5. Hello, I have a tween which looks like this: var tween = game.add.tween(ball).to({ x: g.balls.children[i - direction].x - 64,y:g.balls.children[8 * row].y }, this.game_speed); tween.start(); Now I want it to do a little bounce every time this tween gets ran, I have tried: game.add.tween(ball).to({ y: g.balls.children[8 * row].y}, this.game_speed * 0.5, Phaser.Easing.Sinusoidal.Out).to({ y: g.balls.children[8 * row].y - 128 }, this.game_speed * 0.5, Phaser.Easing.Sinusoidal.In).start(); but it doesn't look right, it somehow feels like its sliding. Any help will be appreciated.
  6. hi, i'm searching to use the delay of a tween and also have the possibility to cancel this tween. But that don't work, the tween is still here and the lock function works... have you an idea ? this.tween=game.add.tween(background.cursor_player.scale).to({x:3},850,Phaser.Easing.Bounce.In,true,0) this.tween.onComplete.add(this.lock,this) this.lock=function(){ } game.time.events.add(100,this.tween(stop),this)
  7. Hey, I'm bulding a Towerdefensgame and my minions are moving very laggy. Im using tweens. Always if a tween is complete the next tween will be added. The Problem is, that the way of the minion always can be changed, so I have to set the new tween always if the minion reached the new field. Also the first wave is more "smooth" than the other waves.. Phaser-Version: v2.6.1 Game-Demo: http://darkfluppi.de/td/ Code for moving the minions: function moveDatMinion(minion) { if (!minion.data.moving) { minion.data.moving = true; var diff = { x: (minion.width / 2), y: (minion.height / 2) }; if (minion.data.fieldsSlowed > 0) { minion.data.fieldsSlowed--; } else { minion.data.minionSpeed = minion.data.minionFixSpeed; minion.data.slowed = false; } var pos = { x: Math.floor(getPosition(minion.position.x - 32)), y: Math.floor(getPosition(minion.position.y - 32)) }; var posCoord = { x: minion.position.x - 32, y: minion.position.y - 32 }; if (!(pos.x === 11 && pos.y === 5) && minion.alive) { var way = { u: 999, d: 999, l: 999, r: 999 }; var goto; if ((pos.x - 1) > -1) { way.l = fieldDistances[pos.x - 1][pos.y]; } if ((pos.x + 1) < 12) { way.r = fieldDistances[pos.x + 1][pos.y]; } if ((pos.y - 1) > -1) { way.u = fieldDistances[pos.x][pos.y - 1]; } if ((pos.y + 1) < 12) { way.d = fieldDistances[pos.x][pos.y + 1]; } if (way.u >= 0 && way.d >= 0 && way.l >= 0 && way.r >= 0) { var min = Math.min(way.u, way.d, way.r, way.l); if (min === way.u) { goto = { x: (posCoord.x) + minionOffset.x, y: (posCoord.y - 64) + minionOffset.y }; } else if (min === way.d) { goto = { x: (posCoord.x) + minionOffset.x, y: (posCoord.y + 64) + minionOffset.y }; } else if (min === way.r) { goto = { x: (posCoord.x + 64) + minionOffset.x, y: (posCoord.y) + minionOffset.y }; } else if (min === way.l) { goto = { x: (posCoord.x - 64) + minionOffset.x, y: (posCoord.y) + minionOffset.y }; } } if (!minion.data.tween) { minion.data.tween = game.add.tween(minion).to(goto, (minion.data.minionSpeed / speedUp), 'Linear', true, 0); } else { var nextTween = game.add.tween(minion).to(goto, (minion.data.minionSpeed / speedUp), 'Linear', true, 0); minion.data.tween.chain(nextTween); minion.data.tween = nextTween; } // minion.animations.play('walk'); minion.data.tween.onComplete.add(function () { // minion.data.tween.stop(); minion.data.moving = false; moveDatMinion(minion); }, this); minionOnField[getPosition(goto.x - 32)][getPosition(goto.y - 32)] = 1; if (minion.data.lastPos) { minionOnField[minion.data.lastPos.x][minion.data.lastPos.y] = 0; } minion.data.lastPos = pos; console.log(pos); console.log(goto); } else { stopTweensFor(minion); } } } Does someone has any ideas for a more smooth "walkanimations"? Greetings
  8. i want to turn a sprite with keyboard hotkey every time i tape SPACEBAR, how is it possible the game is here http://asciimulation.link/codeinmass/mod/ and, this is a continuation of this thread turn90: function(){ var a = Math.floor(this.player.x / gameOptions.tileSize); var b = Math.floor(this.player.y / gameOptions.tileSize); console.log(a, b); game.add.tween(this.tilesArray[b][a]).to( { angle: 90 }, 200, Phaser.Easing.Linear.None, true); }
  9. Hi, i have made a fork of pyramid of ra from the last phaser issue and i want to move the player just one time http://asciimulation.link/codeinmass/mod here is the code var game; // main game options var gameOptions = { gameWidth: 800, gameHeight: 600, tileSize: 64, fieldSize: { rows: 8, cols: 10 } } // game levels var levels = [ { level:[ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 2, 1, 1, 1, 1, 2, 0, 0], [0, 0, 1, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 1, 0, 0], [0, 0, 2, 1, 1, 1, 1, 2, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ], playerPos: new Phaser.Point(5, 2) } ]; // when the window finishes loading... window.onload = function() { game = new Phaser.Game(gameOptions.gameWidth, gameOptions.gameHeight); game.state.add("TheGame", TheGame); game.state.start("TheGame"); } var TheGame = function(){}; TheGame.prototype = { // preloading assets preload: function(){ game.load.spritesheet("tiles", "assets/sprites/connector.png", gameOptions.tileSize, gameOptions.tileSize); game.load.spritesheet("tiles90", "assets/sprites/connector90.png", gameOptions.tileSize, gameOptions.tileSize); game.load.image("player", "assets/sprites/p.png"); }, // when the game starts create: function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; this.levelNumber = 0; this.createLevel(); game.stage.backgroundColor = "#fff"; }, // function to create a level createLevel: function(){ //this.tilesArray = []; this.tileGroup = game.add.group(); this.tileGroup.x = (game.width - gameOptions.tileSize * gameOptions.fieldSize.cols) / 2; this.tileGroup.y = (game.height - gameOptions.tileSize * gameOptions.fieldSize.rows) / 2; for(var i = 0; i < gameOptions.fieldSize.rows; i++){ //this.tilesArray[i] = []; for(var j = 0; j < gameOptions.fieldSize.cols; j++){ if(levels[this.levelNumber].level[i][j]==1){ this.addTile(i, j, levels[this.levelNumber].level[i][j], "tiles"); } if(levels[this.levelNumber].level[i][j]==2){ this.addTile(i, j, levels[this.levelNumber].level[i][j], "tiles90"); } } } this.playerPosition = new Phaser.Point(0, 0); levels[this.levelNumber].playerPos.clone(this.playerPosition); this.player = game.add.sprite(levels[this.levelNumber].playerPos.x * gameOptions.tileSize + gameOptions.tileSize / 2, this.playerPosition.y * gameOptions.tileSize + gameOptions.tileSize / 2, "player"); this.player.anchor.set(0.5); this.tileGroup.add(this.player); }, // function add a tile at "row" row, "col" column with "val" value addTile: function(row, col, val, tile){ var tileXPos = col * gameOptions.tileSize + gameOptions.tileSize / 2; var tileYPos = row * gameOptions.tileSize + gameOptions.tileSize / 2; var theTile = game.add.sprite(tileXPos, tileYPos, tile); theTile.anchor.set(0.5); theTile.tilePosition = new Phaser.Point(col, row); this.tileGroup.add(theTile); }, update: function(){ tileSize = gameOptions.tileSize; if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { this.move(new Phaser.Point(0, -1)); } if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { this.move(new Phaser.Point(0, 1)) } if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { this.move(new Phaser.Point(-1, 0)) } if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { this.move(new Phaser.Point(1, 0)) } if (game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)){ console.log(this.levels[this.player.x][this.player.y]); } }, move: function(p){ this.playerPosition.add(p.x, p.y); var playerTween = game.add.tween(this.player).to({ x: this.playerPosition.x * gameOptions.tileSize + gameOptions.tileSize / 2, y: this.playerPosition.y * gameOptions.tileSize + gameOptions.tileSize / 2 }, 64, Phaser.Easing.Linear.None, true); playerTween.onComplete.add(function(target){ console.log(this.player.x); target.x = this.playerPosition.x * gameOptions.tileSize + gameOptions.tileSize / 2; target.y = this.playerPosition.y * gameOptions.tileSize + gameOptions.tileSize / 2; }, this) } }
  10. Usecase: Why would I stop a tween, right after it is created: So in my game you got many objects which running around and need some tweens. In particular: For climbing a ladder. The game.tweens.pauseAll(); is called when the mainmenu opens. this works pretty well, expect some case. I cannot really tell were it relies on. If it is the timing (right after the tween) or only this sort of tween. It seems only to happen on the "climbing tween". This is the code to pause all tween, which is called every time you hit "space": game.physics.arcade.isPaused = true; game.timer.pause(); game.tweens.pauseAll(); And this is a snippet of the code which is executed on collision with the ladder object, were the tweenings start: let location = this.y + this.body.height / 2; let climbDir = 0; //you can ignore this, it's just to set up the right numbers if ( location > ladderY ) { climbDir = (location - ladderY) * -1 -2; } else if ( location <= ladderY ) { climbDir = ladderY + 120 - location - 2; } //an animation plays this.animations.play('climb', 60, true); // >THIS< is the point were the tween is executed let tween2 = game.add.tween( this ).to({ y: this.y + climbDir }, 10 * Math.abs(climbDir), 'Linear' ); tween2.start(); // >NOW< when you hit space an run game.tweens.pauseAll(); <- this won't work-> The lines afterwards are executed tween2.onComplete.add(()=>{ const turn = this.animations.play('turn_back_' + this.getDirection() + '_reverse', 21, false); turn.onComplete.add(()=>{ //all this is executed even if game.tweens.pauseAll(); is called in the above moment let dir = this.getDirection() === 'right' ? 40 : -40; this.animations.play('walk_' + this.getDirection(), 60, true); let tween3 = game.add.tween(this).to({ x : this.x + dir }, 450, 'Linear'); ... even more code //all this is executed too, even if game.tweens.pauseAll(); is called in the above moment The problem is: That not only the tween does not stop, everything afterwards is executed as well. Even other tweens that are inside the "tween2.onComplete.add". I tested it a few times and it is the same behavior ever and ever again. What's stange is: if you hit "space" => pauseAll(); this would work if the tween is nearly complete. But if you hit it right after it begins, the issue I described appears. Any ideas on this? Maybe I am making something wrong.. but I am a bit stuck since it seems that tween2.onComplete is executed due to not stopable tween2 in some timing function. regards
  11. Hello everyone, is it possible to have to click twice for each tween here are the assets https://github.com/aneurycasado/Dominos-Para-Los-Dominicanos-No-Server/tree/master/images/Dominos var a, b playState = { init: function(){ game.device.desktop, game.scale.pageAlignHorizontally = !0, game.scale.pageAlignVertically = !0, document.body.style.backgroundColor = "#CCCCCC", game.stage.backgroundColor = "#000", game.physics.startSystem(Phaser.Physics.ARCADE) }, preload: function() { game.load.image("46", "assets/[4,6].png") game.load.image("16", "assets/[1,6].png") }, create: function() { this.init() game.world.setBounds(0, 0, 800, 600); a = game.add.image(100, 500, "46"); a.scale.setTo(0.3) a.anchor.set(.5, .5); b = game.add.image(700, 300, "16"); b.scale.setTo(0.3) b.anchor.set(.5, .5); // Mouse click events this.game.input.onDown.add(this.translate, this); this.game.input.onDown.add(this.rotate, this); }, translate: function(pointer){ var c = game.add.tween(a).to({x: 400, y: 300, angle: 0, alpha: 1}, 1000, "Quad.easeInOut", true, 1000); }, rotate: function(pointer){ var c = game.add.tween(b).to({angle: 45}, 2000, Phaser.Easing.Linear.None, true) } }, game = new Phaser.Game(800, 600); game.state.add("play", playState), game.state.start("play");
  12. Hi ! here is my problem : I want to manage two tweens with only one click the images are here https://github.com/aneurycasado/Dominos-Para-Los-Dominicanos-No-Server/tree/master/images/Dominos var a, b playState = { init: function(){ game.device.desktop, game.scale.pageAlignHorizontally = !0, game.scale.pageAlignVertically = !0, document.body.style.backgroundColor = "#CCCCCC", game.stage.backgroundColor = "#CCCCCC", game.physics.startSystem(Phaser.Physics.ARCADE) }, preload: function() { game.load.image("44", "assets/[4,4].png") game.load.image("14", "assets/[1,4].png") }, create: function() { this.init() game.world.setBounds(0, 0, 800, 600); a = game.add.image(200, 100, "44"); a.scale.setTo(0.3) a.anchor.set(.5, .5); b = game.add.image(200, 100, "14"); b.scale.setTo(0.3) b.anchor.set(.5, .5); // Mouse click events this.game.input.onDown.add(this.translate, this); }, translate: function(pointer){ var c = game.add.tween(a).to({x: 400, y: 300, angle: 0, alpha: 1}, 1000, "Quad.easeInOut", true, 1000); }, roatate: function(pointer){ var c = game.add.tween(b).to({angle: 45}, 2000, Phaser.Easing.Linear.None, true) } }, game = new Phaser.Game(800, 600); game.state.add("play", playState), game.state.start("play");
  13. I'm attempting to create a game where an item is launched into the air, bounces a few times on the ground, and then stops. (Points are given for distance covered) What I'm struggling with is how to make the item move in parabolas, so that it looks like it's bouncing? Is using a tween the best solution (and if so, how would I go about that?), or should I just be playing with gravity and velocity? Here's as far as I've gotten with the tweening. It should move in 3 arcs. bounceTween = this.game.add.tween(this.bounceItem).to({ x: distance }, 800, Phaser.Easing.Quadratic.InOut, this).to({ x: distance + distance / 2 }, 800, Phaser.Easing.Quadratic.InOut, this).to({ x: distance + distance / 2 + distance / 4 }, 800, Phaser.Easing.Quadratic.InOut, this);
  14. 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
  15. So I am building a game where I for some parts use tweens that interact with gameplay. Other parts of the gameplay are based on time.physicsElapsed. I believe using time.physicsElapsedfor every frame (call to update) should cause the gameplay to slow down together with the fps, which is what I'd like to have as I have decided that is the most graceful way to deal with weak devices. What I am confused about is how tweens are timed. http://phaser.io/docs/2.6.2/Phaser.TweenManager.html#frameBased makes it look like only frameBased Tweens are using the physics time and that isn't the default setting. http://phaser.io/docs/2.6.2/Phaser.Time.html explains that Physics Time is used for tweens. Which seems to contradict the above finding. So if I combine tweens with other timings that work on counting time.physicsElapsedin each update() call will that work consistently or not? I am worried that fps drops will slow down some parts of the gameplay, but not others. Do I need to switch the tween manager to use frameBased tweens if I want it to stay in sync with the rest of the physics time in low fps situations or not?
  16. Hi, I have a group with different elements and i want to move this group at a position without effect. I use the position.set to hide my group at the top of my screen. Next, i call the e.transition who move my group to bottom> it works After i call the e.transitionback who move the group to the top to hiding this group > don't works The behaviour is that my group seems to be to the position.set (0,-480) so the transitionback seems to not work because it move from -480 to -480. However the previous tween move this group to the position.y=0...idon't understand. Why ? and how do you do to prevent that ? Group.position.set(0,-480) transition=game.add.tween(Group).to({x:0,y:0},700,Phaser.Easing.Elastic.Out,true,2000,false); transitionback=game.add.tween(Group).to({x:0,y:-480},4700,Phaser.Easing.Elastic.Out,true,4000,false);
  17. Hello, I'm trying to reuse a tween to simulate resource gathering and delivery between 2 locations. I was able to successfully accomplish that by chaining tweens but I now want to just reuse 1 tween instead of 4. I modified the tween reuse example and wrapped all the tween function into one 1 (tweenAll) and I call it after everything is setup. Now the problem is that the blockSprite is supposed to drop to the beginning of the platform and then go back and forth on the platform, but instead, it goes back to its initial position ( up in the air) at random moments of the tweening. bellow is what the code looks like applied to body-debug-draw var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render }); function preload() { game.load.image('platform', 'assets/sprites/platform.png'); game.load.image('block', 'assets/sprites/block.png'); } var platformSprite; var blockSprite; var tween; function create() { game.stage.backgroundColor = '#124184'; // Enable Box2D physics game.physics.startSystem(Phaser.Physics.BOX2D); game.physics.box2d.gravity.y = 500; // Static platform platformSprite = game.add.sprite(400, 550, 'platform'); game.physics.box2d.enable(platformSprite); platformSprite.body.static = true; // Dynamic box blockSprite = game.add.sprite(400, 200, 'block'); game.physics.box2d.enable(blockSprite); blockSprite.body.angle = 30; blockSprite.body.kinematic = true tween = game.add.tween(blockSprite.body) tweenAll() } function render() { // Default color is white game.debug.body(platformSprite); // Make falling block more red depending on vertical speed var red = blockSprite.body.velocity.y * 0.5; red = Math.min(Math.max(red, 0), 255); var red = Math.floor(red); var blue = 255 - red; game.debug.body(blockSprite, 'rgb('+red+',0,'+blue+')'); } function tweenAll() { function tween1() { tween.to( { rotation: 0.5 }, 500, Phaser.Easing.Bounce.Out, true); tween.onComplete.addOnce(tween2, this); } function tween2() { tween.to( { x: 200, y: platformSprite.y}, 1000, Phaser.Easing.Bounce.Out, true); tween.onComplete.addOnce(tween3, this); } function tween3() { tween.to( { rotation: -1 }, 500, Phaser.Easing.Bounce.Out, true); tween.onComplete.addOnce(tween4, this); } function tween4() { tween.to( { x: 600, y: platformSprite.y}, 1000, Phaser.Easing.Bounce.Out, true); tween.onComplete.addOnce(tween1, this); } tween1() } can anyone tell me why is this happening ?
  18. Hello, I have been trying to use the build in tweening from phaser with a box2d Sprite but didn't have much luck with it. I used this box2d example , turned off gravity and added the tween line. blockSprite = game.add.sprite(400, 200, 'block'); game.physics.box2d.enable(blockSprite); blockSprite.body.angle = 30; game.add.tween(blockSprite).from( { y: -200 }, 2000, Phaser.Easing.Bounce.Out, true); Can anyone tell me what I'm doing wrong here ? Thanks.
  19. Are these two things not meant to be used together? The animation worked when I was using moveToXY, but using that function I found I couldn't easily stop the movement so after googling and searching this forum I decided to move to tweening. The object won't need physics in the future, so it should be fine. Here's what I have. The function is passed a value 'i', which is a random number. This is meant to determine how far it should move. 'j' is the calculated target destination. Current x + i. The tween should take longer if the distance is further, not some constant amount of time, hence the (npc.x-j)*3000. function wanderRight(i){ j = npc.x + i; npc.animations.play('right'); game.add.tween(npc).to( {x: j},(npc.x - j)*3000, null ,true); } When this function has completed, it moves on to: npc.animations.stop(); npc.frame = 4; 4 being the 'face forward' frame. I feel like this should work. What happens is that the npc does move to the right, like it should. Only it's not animating while it moves. It just stays on the frame it was on before the tween started. Can someone explain why this doesn't work?
  20. hi all, im wondering how can i tween a numeric value lets say. var number1; /// in create function number1 = 100; ///tween from 100 to 10 and show it by a text text1.setText( " from 100 to 10: " + number1+ " "); its possible? im chasing a way to show player his score after complete world. but i wanna show him the time bonus and move the time left to zero on screen. any suggestion?
  21. Hi everyone. I'm stucked at tweens. So, i have yoyo tween. In first, i want to check that yoyo has reached it "middle" (before/on loop back), is there any way to check that? The second question: at the docs we can see But, in my case the both methods will be called. Am i doing something wrong? Here is my code : this.p2AttackAnim = this.game.add.tween(this.p2).to({ x: 300 }, 500, Phaser.Easing.Bounce.Out, false, 0,0, true); this.p2AttackAnim.onStart.addOnce(function(){ this.p2.frame = 2; }, this); this.p2AttackAnim.onComplete.addOnce(function(){ this.p2.frame = 0; this.p1.frame = 1; }, this); this.p2AttackAnim.onLoop.addOnce(function(){ this.p1.frame = 1; }, this);
  22. Hey, I have a tween that should start everytime user clicks on object. When tween didn't finish (it has yoyo=true) yet, I want to set its properties to initial ones and start the tween again. I've tried approach from this topic but it's not working : Take a look at my code: in create: this.obj.tween = game.add.tween(this.obj.scale).to({x: 0.5, y: 0.5}, 200, Phaser.Easing.Quadratic.Out, false, 0, 0, true); this.obj.tween.pendingDelete = false; in onClick event: if(this.obj.tween.isRunning) { this.obj.tween.stop(); this.obj.tween.pendingDelete = false; this.obj.scale.setTo(1); this.obj.tween.start(); } else { this.obj.scale.setTo(1); this.obj.tween.start(); } If I click when isRunning == true, then the scale resets to 1 but tween is not starting again - what am I doing wrong? When I set yoyo to false, then my solution is working. Probably some error occurs when the tween is yoyo'ing and I start to stop it.
  23. Hi guys, In one of the methods of game object class I have following code which executed on object click: var tween1 = game.add.tween(this.sprite.scale).to({x: 0}, 100, Phaser.Easing.Elastic.Linear); var tween2 = game.add.tween(this.sprite.scale).to({x: 1}, 100, Phaser.Easing.Elastic.Linear); var tween3 = game.add.tween(this.shadow.scale).to({x: 0}, 100, Phaser.Easing.Elastic.Linear); var tween4 = game.add.tween(this.shadow.scale).to({x: 1}, 100, Phaser.Easing.Elastic.Linear); tween1.chain(tween2); tween3.chain(tween4); tween1.onComplete.add(function() { me.sprite.loadTexture('fruit-' + me.index); }); tween4.onComplete.add(function() { me.closed = false; me.level.onOpenBoxAnimEnd.dispatch(me); }); tween1.start(); tween3.start(); When having 4 of these object in the scene it performs nice, but 30 objects cause performance to be very low (notice that only one object is animated, not all 4 or 30). So maybe I'm doing smth generally wrong? Tested on 8-cores 1.7 HHz CPU.
  24. Hello, I want to change phaser Rectangle fill color with tween transition, for example from blue to red, but I didn't find any example, is this posible? thanks
  25. Hello, I have a larger project using P2 physics with many tweens and the game sometimes moves randomly, some objects have some delays etc, even when game runs on almost stable 60fps. I've made a simple example in Phaser 2.4.6: var level = 1; intro = function(game) {}; intro.prototype = { create: function() { this.stage.backgroundColor = "#ffffff"; game.time.events.add(2000, this.spawnWater, this, 4); }, spawnWater: function(amount) { for (var i = 0; i < amount; i++) { var topwater = game.add.sprite(683, 150, 'graphics2', 'static/smth/line.png'); topwater.anchor.setTo(0.5); topwater.scale.setTo(0.2); topwater.scaleTween = game.add.tween(topwater.scale).to({x: 1, y: 1}, 2000, Phaser.Easing.Cubic.In, true, (i*500), -1, false); topwater.positionTween = game.add.tween(topwater.position).to({y: 670}, 2000, Phaser.Easing.Cubic.In, true, (i*500), -1, false); } }, }; What should it do : - after 2 seconds it should spawn 4 lines - each line has 2 tweens, for scale and position. - tweens starts after 0, 500, 1000 and 1500 ms and they are looped infinitely (so they start again from starting values. - there should be line moving from y = 150 to y = 670 every 500 ms How does it work: When reloading the game sometimes the lines are moving correctly (that means every 500ms there is a line), but sometimes after first 4 lines there is longer gap (longer than 500ms) and is messing the way the lines are moving.... What is wrong? EDIT: delay times in tweens were wrong, fixed it from (i+1)*500 to (i*500)