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
    • 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 173 results

  1. Hullo ! So here is my problem : I am looping over a group of sprites to add a tween (scale back and forth, just once) with a delay for each. If my group contains two or three sprites, everything is ok, but starting to four comes a white edge around my sprite (during the scaling)... If it can help : the sprites are light grey, and they all have a child which is black but with some opacity If anybody has an idea I would really be greatfull ! (I'm a newb in all that, my predominant field being software development!)
  2. I'm trying to create different groups of tweens that I may want to pause and resume based on the group they belong to. For other stuff such as timers, I'm creating my own Phaser.Timer objects, so I can just add Phaser.TimerEvent objects to them, then by just pausing the timers that I want, I can control all the different events easily. However I don't see an easy way to do the same in Phaser. Right now I'm thinking of creating arrays of the tweens myself that I will later loop trough to stop or resume them, but I was wondering if there is any built in functionality that would allow me to do the same?
  3. I have a function for my enemies (which in this game are bees) Bees = function(index, game, x, y){ this.bee = game.add.sprite(x,y,'bee'); this.bee.anchor.setTo(0.5,0.5); this.bee.name = index.toString(); game.physics.enable(this.bee,Phaser.Physics.ARCADE); this.bee.body.allowGravity = 0; this.bee.body.immovable = true; this.bee.body.collideWorldBounds = true; this.beeTween = game.add.tween(this.bee).to({ y: this.bee.y + 1 },500,'Linear',true,0,-1,true); and to add them into the game I have Game.World1.prototype = { create:function(game){ //other code..... enemy1 = new Bees(0,game,240,40); enemy2 = new Bees(0,game,312,140); }, However, once I place these enemies into the game, I have no idea how to make them move independently. For example: enemy1 = new Bees(0,game,240,40); this.enemy1Tween = game.add.tween(this.enemy1).to({ x: this.enemy1.x - 40 },4000,'Linear',true,0,-1,true); Gives the error "Cannot read property 'x' of undefined" x: this.enemy1.x - 40 How can I make each enemy move independently? Or even better, how can I go about making each enemy move along different length platforms without falling off? Thank you.
  4. Hello. I want to start multiple tweens at the same time (multiple objects need to change position at the same time). What is the proper way to handle such situation? Is something like this enough or there are some better methods to do this? let tween1= this.game.add.tween(...) let tween2= this.game.add.tween(...) tween1.start(); tween2.start(); I thought I can use "chain" for it, but according to the docs it is used to run tweens sequentailly. I would be grateful for your input. Best regards.
  5. button

    Lets say that i want to scale button if i over and scale back if out. And i want to set callback when click. It is my realisation, but she is ugly. Any idea to make it pretty? (put it into phaser sandbox https://phaser.io/sandbox/edit/2) function create() { var button1 = game.add.button(0, 0, 'phaser', function(){console.log(1)}, this); var button2 = game.add.button(0, 50, 'phaser',function(){console.log(2)}, this); var button3 = game.add.button(0, 100, 'phaser',function(){console.log(3)}, this); var menu = game.add.group(); menu.addMultiple([button1, button2, button3]) menu.callAll('events.onInputOver.add', 'events.onInputOver', function(btn){ if (btn.isTweening !== true) { btn.isTweening = true; let coord = { x: btn.scale.x * 1.1, y: btn.scale.y * 1.1 } let tween = game.add.tween(btn.scale).to(coord, 100, Phaser.Easing.Linear.In, true).onComplete.add(function(){btn.isTweening = false}); coord = { x: btn.scale.x * 1, y: btn.scale.y * 1 } btn.events.onInputOut.addOnce(function(){ game.add.tween(btn.scale).to(coord, 100, Phaser.Easing.Linear.In, true) }) } else{ console.log(4) } }); }
  6. Hi, currently I am doing an animation for the appearence of an sprite. That requires to modify the scale of the sprite and its coordinates at the same time. But with the current tween API it seems like only one field can be modified at once. I've researched a bit and I came up with this: var tween = this.game.add.tween(sprite.scale). to( { x: prevWidth * 1.5, y : prevHeigth * 1.5 }, 200, "Linear", false ). to( { x: prevWidth, y : prevHeigth }, 200, "Linear", false ); var tween2 = this.game.add.tween(sprite). to( { x : scX , y : scY }, 200, "Linear", false ). to( { x : orX, y : orY }, 200, "Linear", false ); tween.start(); tween2.start(); It works reasonable, but both tweens run concurrently, which I think it maybe a problem with more complex animations. Is there a better way to do this and avoid concurrency issues? Thanks.
  7. I have a bit of code that cycles through my TILED file to find any object I declared as an NPC. I am not sure if this is important, but I wanted to mention how it found the location of the sprite. (And it is designed to work with multiple sprites, but the code fails with a single sprite and multiple sprites) result.forEach(function(element){ this.createFromTiledObjectMove(element, this.doors); //alert (this.doors); }, this); The code above works correctly again it is just for reference on how the next part of the code is found. The code below was INTENDED to have a character mill around. Starts walking right. Stops. Faces forward (with a tiny movement), Stops, Faces left and walks, Stops, Face right and repeat pattern. Hopefully it is easy to read, and I could probably clean it up. The MOTION is fine. He goes back and forth, stopping at each end point. But the animations do not sync correctly. I even tried stopping ALL animations as seen in the code below but eventually he gets stuck in one animation, even though the tween movement continues. Any ideas? //create a sprite from an object WITH ANIMATION! createFromTiledObjectMove: function(element, group) { var sprite = group.create(element.x, element.y, element.properties.sprite); var tweenNPC = this.add.tween(sprite); //I eliminated the randomness for testing - it did work, but same problem //var randomValue = this.rnd.integerInRange(200, 500); //var randomTime = this.rnd.integerInRange(1000, 3000); //var keepRnd = randomValue; var randomTime = 1000; var keepRnd = 40; //copy all properties to the sprite Object.keys(element.properties).forEach(function(key){ sprite[key] = element.properties[key]; sprite.frame = 6; sprite.animations.add('down', [6, 7, 8], 10, true); sprite.animations.add('right', [3, 4, 5], 10, true); sprite.animations.add('left', [9, 10, 11], 10, true); sprite.animations.play('right'); tweenNPC.to({ x: (element.x + keepRnd) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(StopRightandChat, this); function StopRightandChat() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right'); sprite.animations.play('down'); tweenNPC.to({ x: (element.x + 5 ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(goLeft, this); } function goLeft() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right'); sprite.animations.play('left'); tweenNPC.to({ x: (element.x - keepRnd) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(StopLeftandChat, this); } function StopLeftandChat() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right'); sprite.animations.play('down'); tweenNPC.to({ x: (element.x + 5 ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(goRight, this); } function goRight() { sprite.animations.stop('down'); sprite.animations.stop('left'); sprite.animations.stop('right'); sprite.animations.play('right'); tweenNPC.to({ x: (element.x + keepRnd ) }, randomTime, Phaser.Easing.Linear.None, true, 1000, 0, false); tweenNPC.onComplete.add(StopRightandChat, this); } }); },
  8. I've got an issue with tweening, where I can see that the tween doesn't quite get to the target positions. This is undoubtedly caused by the tweens being very fast (say 250ms) and that they are Linear - testing shows that changing either, or both, of those resolves the issue, but that's not a solution I can use. (The speed is necessary, and they have to have no ease as they are chained.) I've tried changing the tween.interpolation, but this doesn't resolve the issue. Anybody got an ideas how I can fix this? (I have tried repositioning using onComplete, but this is a bit flickery.) </edit> I forgot to add, I tried replacing the phaser tweening with Greensock - the issue was instantly resolved - but GSAP isn't all that simple to use with Phaser (I'm using some delays, and TweenMax.delayedCall got very confused about the scope.)
  9. I have been working with phaser for less than a week, working off of some sample code. I am able to load the sprite. Have the sprite walk/tween 50 pixels back and forth with yoyo. But I can't figure out how to get it to change animation from 'left' to 'right'. You may recognize parts of the code in the sample below, I even left some other attempts commented out so that you can see I did search this site and Google my problem, but I can't find a solution. Basically, I want to have the sprite constantly patrol, and the yoyo works fine. But after each tween, I need to switch the animation so the person faces left or right. Any ideas will be helpful! var spriteX = this.game.add.sprite(600, 1000, 'walking'); var tween = this.add.tween(spriteX); spriteX.frame = 3; spriteX.animations.add('left', [9, 10, 11], 10, true); spriteX.animations.add('right', [3, 4, 5], 10, true); spriteX.animations.play('left'); tween.to({ x: 650 }, 1000, Phaser.Easing.Linear.None, true, 1000, -1, true); tween.onComplete.add(doSomething, this); function doSomething () { spriteX.animations.stop('left'); spriteX.animations.play('right'); } tween.to({ x: 600 }, 1000, Phaser.Easing.Linear.None, true, 1000, -1, true); //spriteX.animations.play('left'); //spriteX.animations.stop('left'); tween.repeatDelay(1000); tween.yoyoDelay(1000); //spriteX.animations.stop('right');
  10. Hey. So I'm trying to fade an array of tiles in and out by tweening their alpha's: var tween = game.add.tween(tiles).to(properties, duration, easing, autoStart, delay, repeat, yoyo); tiles.layer.dirty = true; But this doesn't work. I think because layer.dirty is being set to false right after I set it to true. I've tried using map.createFromObjects (http://phaser.io/docs/2.4.4/Phaser.Tilemap.html#createFromObjects) and map.createFromTiles in an attempt to temporarily turn tiles into sprites as I guessed that maybe tweens only work with sprites but I'm not sure those methods were intended to be used for my purposes... Could someone point me in the right direction? Cheers
  11. hi, i would have this effect like my capture screen. the square when it move have two ghost squares with different opacity. But when it is stopped, the ghost squares are just beneath the square. I have try this with a particle emitter + update but after trying a lot of parameters, I can not seem to have the desired effect. have you a soluce for me ? this.ghost_player = game.add.emitter(this.x, this.y-50, 200) this.ghost_player.makeParticles("rect") this.ghost_player.minParticleSpeed.setTo(-0,-0) this.ghost_player.maxParticleSpeed.setTo(0,0) this.ghost_player.setAlpha(.1, .2) this.ghost_player.minParticleScale = 1 this.ghost_player.maxParticleScale = 1 this.ghost_player.minRotation = 0 this.ghost_player.maxRotation = 0 this.ghost_player.on=true this.ghost_player.start(true,8000, 200) first.prototype.update = function() { this.ghost_player.y=this.y this.ghost_player.x=this.x }
  12. I have a function (fire_event()) outside update(). Inside this function, I do these things: function fire_event(){ my_flag = false; do_stuff_1(); game.add.tween(sprite).to( { alpha: 1.0 }, Phaser.Timer.HALF, Phaser.Easing.Linear.None, true).onComplete.addOnce(function(){ game.time.events.add(Phaser.Timer.HALF, function(){ do_stuff_2(); game.add.tween(sprite).to( { alpha: 0.0 }, Phaser.Timer.HALF, Phaser.Easing.Linear.None, true).onComplete.addOnce(function(){ my_flag = true; }, this); }, this); }, this); } function update(){ if(my_flag){ do_update_stuff(); } else { //do nothing } } Everything that need to be rendered on function do_stuff_2(), is not rendering... only when the most inner tween finishes things got rendered. Everything go rendered, till the code reaches do_stuff_2(). ------------------------------ Detailed info about do_stuff_2(): underlayer_group.removeAll(); //clear group overlayer_group.removeAll(); //clear group map_name = current_event.target; //thats just a string maps[map_name].setLayers(underlayer_group, overlayer_group); //I'll provide a more details on it, but it basically add new layers to these groups hero.body.x = current_event.x_target * maps[map_name].sprite.tileWidth; //hero is a sprite. Changing it x position hero.body.y = current_event.y_target * maps[map_name].sprite.tileHeight; //hero is a sprite. Changing it y position shadow.x = hero.x; //shadow is a sprite. Changing it x position shadow.y = hero.y; //shadow is a sprite. Changing it y position //reconfig world physics game.physics.p2.resume(); map_collider.body.clearShapes(); map_collider.body.loadPolygon(maps[map_name].key_name, maps[map_name].key_name); mapCollisionGroup = game.physics.p2.createCollisionGroup(); map_collider.body.setCollisionGroup(mapCollisionGroup); map_collider.body.setZeroDamping(); map_collider.body.setZeroRotation(); hero.body.collides(mapCollisionGroup); map_collider.body.collides(heroCollisionGroup); game.physics.p2.updateBoundsCollisionGroup(); Detailed info about setLayers(): setLayers(underlayer_group, overlayer_group){ this.map_sprite = game.add.tilemap(this.key_name); //set map sprite this.map_sprite.addTilesetImage(this.tileset_name, this.key_name); //set tilemap image for(var i = 0; i < layers.length; i++){ var layer = this.map_sprite.createLayer(layers[i].name); //create a layer layer.resizeWorld(); if(layers[i].properties.over != 0) //just test a property to determine which group this layer is going to make part overlayer_group.add(layer); else underlayer_group.add(layer); } } --------------------------------- In short words: do_stuff_2() removes sprites from groups, then add new layers to them, and change some sprites position. The thing is, everything inside do_stuff_2() only happens when the tween under do_stuff_2() finishes. The inner tween makes alpha channel goes from 1 to 0 immediately. Here is a working example: https://jjppof.github.io/goldensun_html5/index The problem happens always in the fade out. Fade in works. To see the problem, just get inside the "inn" house. This part of the code is inside the index.js file at root folder. Line 227, inside teleport() function. QUESTION: Does a time event inside a tween, like the example above, make things do not render excepting when everything is finished? Don`t things get rendered when I nest callbacks?
  13. 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.
  14. 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?
  15. 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.
  16. 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
  17. 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.
  18. 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)
  19. 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
  20. 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); }
  21. 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) } }
  22. 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
  23. 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");
  24. 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");
  25. 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);