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 187 results

  1. Hi, I am currently having an issue where my alpha tween on my game isn't working as I expected. I set the tween to happen over 5 seconds however it seems to only take a fraction of the time and ignores the time. Here is my code: var box = this.game.add.graphics(0,0); box.alpha = 0.1; box.moveTo(0, 0); box.beginFill(0x000000); box.drawRect(borderSide, borderTop, (this.game.world.width - borderSide * 2), this.game.world.height); box.endFill(); var fadeTween = this.game.add.tween(box).to({ alpha: 1 }, 5000, "Linear", true); fadeTween.onComplete.add(this._end_game, this); You can see my video attached below for an example of this in action. Thanks, Jamie alpha.mp4
  2. Tweening particles

    Hey all. I want to apply color tweening to particles, but i don't know how, can anybody help me in this? thanks in advance
  3. Hi, Im having an issue with tweens. Its a bit difficult to explain, so please bare with me.. this.tween = this.game.add.tween(this.itemToTween).to({ y: y+100 }, 100); It is a quick tween over a relatively large distance that is repeated many times. If the itemToTween is moved by say 15 pixels per frame (for example), the last frame is moved only 10 pixels to exactly end at position y+100. This 10 pixel move in the last frame as apposed to the normal 15 pixels per frame is causing hiccups/staggering on the tween repeat and other running tweens on other items are becoming out of sync position wise. The only solution I could think of was maybe doubling the distance and time of the tween and then manually checking on the tween update if the position is greater than y+100. In that case stop the tween and trigger the new tween and subtract the distance the original tween shot over y+100. This seems like such a hack though... Does anyone have a suggestion on a cleaner solution? Thanks.
  4. hi, i'm trying to implement this effect : i have a circle who's animating to incite the player to click on the screen. next the player click and release a pink player who go to an enemy ( the pink rectangle). I would like to let the player the ability to click several times to release multiple players and each time the player is inactive the animation of the circle to prompt him to click. The problem is that this animation launches several times at the same time as soon as the players are dead. How to code this to avoid this behavior? thanks for your help, because me i don't see the solution https://jsfiddle.net/espace3d/zdnk9cem/ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:preload, create: create, update : update }); function preload() { game.load.image('circle', 'https://s3.postimg.org/bb4aql1lf/touch.png'); game.load.image('rect','https://s26.postimg.org/ci44mlog9/dalle.png') game.load.image('player','https://s26.postimg.org/ikbrd3cw9/bullet_color.png') } var player=[] var enemy var circle var tw_name var tap_ready = true var flag=true var delay_circle_timer = 1500 var counter = -1 //effect on the circle : tween start_tw = (obj,tw_action,tw_name,f) => { tap_ready = true f=true tw_action(obj,tw_name) } // declaration of tw_action tw_action= (obj,tw_name) =>{ obj.alpha=.5 obj.scale.setTo(1,1) tw_name= game.add.tween(obj.scale).to({x:1.5,y:1.5},700,Phaser.Easing.Linear.None,true,delay_circle_timer,-1) tw_name = game.add.tween(obj).to({alpha:0},700,Phaser.Easing.Linear.None,true,delay_circle_timer,-1) tw_name.onStart.add(()=> {obj.visible=true}) } //stop tween stop_tw = (tw_name,f,obj) => { if(f){ obj.visible=false game.tweens.remove(tw_name) f=false } } //launch player and start counter launch_player = (obj)=> { counter++ obj[counter].body.velocity.y=-100 } hide_player_and_start_tw = (obj) => { obj.body.enable=false obj.visible=false start_tw(circle,tw_action,tw_name,flag) } tap = () => { game.input.onTap.add(onTap); function onTap(pointer, doubleTap) { if (!doubleTap && tap_ready){ tap_ready=false //stop the tween on the circle stop_tw(tw_name,flag,circle) //launch the player launch_player(player) //delay for reset tap_ready game.time.events.add(500,() => {tap_ready = true}) } } } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); circle=game.add.sprite(400,300,'circle') circle.anchor.setTo(.5) circle.inputEnabled = true enemy = game.add.sprite(400,100,'rect') enemy.anchor.setTo(.5) game.physics.arcade.enable(enemy) enemy.body.enable=true enemy.body.immovable=true for (var i = 0; i < 10; i++){ player[i]=game.add.sprite(400,600,'player') player[i].anchor.setTo(.5) game.physics.arcade.enable(player[i]) player[i].body.enable=true } //initiate first tween start_tw(circle,tw_action,tw_name,flag) } function update() { tap(circle) for (var i = 0; i < 10; i++){ game.physics.arcade.collide(player[i],enemy,hide_player_and_start_tw) } }
  5. Microlags with fast-moving objects

    When trying to move an object with high speed across the scene, I've noticed that the movement is not really smooth - there are some small but really annoying glitches. I've tried both manual moving and moving with TweenLite, the glitches persist in both cases. I'm using Pixi.js 4.5.3 This is how I create the Render, maybe something wrong with it: let canvas = <HTMLCanvasElement>document.getElementById("canvas"); this.renderer = PIXI.autoDetectRenderer(1500, 1200, { // ScenesManager.renderer = new PIXI.CanvasRenderer(800, 600, { view: canvas, antialias: false, roundPixels: false, }); this.renderer.backgroundColor = 0x000000; document.body.appendChild(this.renderer.view); And this is my tween: let wall:PIXI.Sprite = PIXI.Sprite.fromFrame("1.png"); this.addChild(wall); wall.position = new PIXI.Point(4*64, 2*64); TweenLite.to(wall.position, 15, { x: 99*64, y: 2*64, ease: Linear.easeNone}); And I also made the demo (see the attachment) I would really appreciate any help or ideas on what can cause such microlags, cause I've spent many hours trying to sort this out. The number of objects on scene doesn’t really matter, there are lags even on small test scene with just 1 moving object. Any thoughts on what's happening? TestTween.zip
  6. Tween on a circle

    So, I'm trying to create a pinging type effect in my game, basically I want a circle to show up in location, and get bigger. My issue is that as the circle gets bigger, so does the lineWidth of the circle (though, the actual line width value in phaser is remaining the same. circle = this.game.add.graphics(100,100); circle.lineStyle(2, 0xffff00); var ping = circle.drawCircle(0, 0, 10); ping.anchor.set(0.5, 0.5); var circleTween = this.game.add.tween(ping) .to({height: 300, width: 300}, 1000, Phaser.Easing.Linear.None, true, 0, 0); Any thoughts as to how to keep the lineWidth an actual 2 pixels, rather than growing relative to the size of the circle?
  7. Tween problems / onComplete

    Hello guys, I have 2 'simple questions' (I assume) that kinda bugs me for a while now. I wouldn't want to get too in-depth with this mainly because I'm not good at explaining stuff; but I'll try to keep it simple. 1st question: Is 'fig 1' and 'fig 2' supposed to be the same thing? 2nd question: I got a button that is supposed to pause the game. 'mygamepaused' is a variable that goes true/false on a click. 'mytimepass' is a 3 seconds timer that runs the tween from the first question. 'smiley_tw_pass' is a variable that goes true when the timer is finished (aka my way of telling the program that the tween just started) 'smiley_tw' is the name assigned to the tween (see question 1). After the tween is completed (see question 1) - the sprite (this.smiley) goes to 100 on y axis and changes alpha to 0.1. Here's where I run into problems. 1st: "smiley_tw is not defined" console error when trying to press the button before the timer passess (aka it cannot find the tween) fixed it by assigning a variable (smiley_tw_pass) right after the timer runs out. ...is that a good way of checking if the tween just started?... 2nd: "smiley_tw.pause is not a function" console error when using fig 1 (see question 1) fixed it by using fig 2 (see question 1) ...this bugs me because in my mind the two methods should work the same way, right?... So that's how I solved the problem - by using a variable to detect if the tween just started AND using fig 2 instead of the first one - But WHY? Why does the 2 methods doesn't work the same way here - AND - is declaring a variable (smiley_tw_pass) to check if a tween is running - a good thing? I would really appreciate if someone can figure this 'mistery' and can clear my mind a little. Full code: (480x720) var Test = function (game) {}; var mygamepaused = false; var smiley_tw_pass = false; Test.prototype = { create: function () { //create button this.mybutton = game.add.button(this.world.centerX, 600, 'smiley', this.myfunction, this); this.mybutton.anchor.setTo(.5); this.mybutton.scale.setTo(.2); this.mybutton.inputEnabled = true; //create smiley this.smiley = game.add.sprite(this.world.centerX, this.world.centerY, 'smiley'); this.smiley.anchor.setTo(.5); this.smiley.scale.setTo(.5); //create mytimepass mytimepass = game.time.create(false); mytimepass.add(3000, function () { if (!smiley_tw_pass) smiley_tw_pass = true; smiley_tw = game.add.tween(this.smiley).to({ alpha: 0 }, 1200, Phaser.Easing.Quadratic.InOut, true); smiley_tw.onComplete.add(function () { this.smiley.y = 100; this.smiley.alpha = 0.1; }, this); }, this); mytimepass.start(); }, myfunction: function () { switch (mygamepaused) { case false: mygamepaused = true; mytimepass.pause(); if (smiley_tw_pass) smiley_tw.pause(); break; case true: mygamepaused = false; mytimepass.resume(); if (smiley_tw_pass) smiley_tw.resume(); break; } }, render: function () { game.debug.text('mygamepaused: ' + mygamepaused, 20, 20); game.debug.text('smiley_tw_pass: ' + smiley_tw_pass, 20, 40); game.debug.text('mytimepass: ' + mytimepass.duration.toFixed(0), 20, 80); } };
  8. Game loop and Animation question

    Hey everyone, So Im new to game development, although Im a full stack JS dev for general sites and apps. I started getting into canvas animation and now Im here trying to learn some game animation stuff. My question is this: Do you generally do just about all animation in the game loop with requestAnimationFrame()? Or can you simply have renderer.render(stage) called in the game loop while outside of it you use GSAP or some other tweening mechanic to change the positioning props on objects/sprites? Iv tried it and it works, I just would like to know if its dumb or nonperformant. I also tried using my regular js tweening library to call `renderer.render(stage);` in its update callback and it looks the same (im just doing a simple animation generating snow-like particles that float down). I know that the supported game loop in PIXI has stuff for velocity and whatever but I really like my animation library's (http://animejs.com/) easing and elasticity options. Will calling renderer.render(stage) in the game loop while tweening outside the loop still be 60FPS? Or do I need to be updating in the game loop? If I have to do it in the game loop, does anyone have any tips/references for easing and all of that? Because I dont want to have to write my own easing functions to update in the game loop (and I suspect most people arent), and rather use an animation API for that. Im also brand new to PIXI and maybe it has its own easing and whatever that works inside the game loop. Cheers
  9. Collision with group only collides onces

    I'm having an issue which I'm unsure what's happening and can't find anyone else having a similar issue. Basically, I create a group, create them, add a tween to animate them across the page. I create a player sprite and whenever the player collides with the other sprites in the group kill them and render another one. however, this only works on the first item I create. var group = game.add.group(); group.enableBody = true; group.physicsBodyType = Phaser.Physics.ARCADE; So create my group and then do a `for loop` to create all my enemies for (var i = 0; i < 2; i++) { c = group.create(game.width, 20, 'seacreatures', 'octopus0000'); c.name = "enemy" + i; c.body.immovable = true; c.alive = true; c.alignIn(laneArr[Math.floor(Math.random() * laneArr.length)], Phaser.RIGHT_CENTER); game.add.tween(c).to({ x: -200 }, speedArr[Math.floor(Math.random() * speedArr.length)], Phaser.Quadratic, true, 0, 0, false); } group.callAll('animations.add', 'animations', 'swim', Phaser.Animation.generateFrameNames('purpleFish', 0, 32, '', 4), 30, true, false); group.callAll('play', null, 'swim'); game.physics.enable(c, Phaser.Physics.ARCADE); Below this I also render the player currPlayer = game.add.sprite(50, game.height / 4 * 2 + 45, "playerFish"); game.physics.enable(currPlayer, Phaser.Physics.ARCADE); currPlayer.body.immovable = true; currPlayer.physicsBodyType = Phaser.Physics.ARCADE; currPlayer.alignIn(laneRect_three, Phaser.LEFT_CENTER); currPlayer.scale.set(1.5); So in short, the enemy travels across the `x` axis and once it collides with the player it triggers a function which looks like this, my update function: game.physics.arcade.overlap(playerFish, enemyFish, collisionHandler, null, this); then the function it calls, `collisionHandler` looks like function collisionHandler () { killedEnemies += 1; c.destroy(); c.alive = false; text.setText("You have killed " + killedEnemies + " enemies !"); console.log("<<<<<<<<"); } But like I said, it only kills the first item it hits, am I missing anything?
  10. Tween Issue

    Hello, I'm having an issue with the tween. For example a card flip. this.cardChoice = game.add.sprite(213, 255, 'normal_cards', 'back_card'); this.cardChoice.anchor.setTo(0.5, 0.5); this.cardChoice.scale.setTo(0.84, 0.80); this.cardChoice.scale.setTo(0.84, 0.80); public cardFlip() { this.tweenPCard = this.game.add.tween(this.cardChoice.scale).to( { x: 0 }, 200, 'Quart.easeOut'); this.tweenPCard.start(); this.tweenPCard.onComplete.add(this.choiceCardFlip, this); } public choiceCardFlip() { this.tweenChoice = this.game.add.tween(this.choice.scale).to( { x: 0.84 }, 200, 'Quart.easeOut'); this.tweenChoice.start(); } In the first few plays the tween is good but after several plays the card is not flipping and it's like the this.tweenCard = this.game.add.tween(this.cardChoice.scale).to( { x: 0 }, 200, 'Quart.easeOut'); is disappearing. Thanks.
  11. Some function moves the object with the tween with "Linear.None" easing. It also set the custom variable "isMoving" to "true". When the tween is completed ("tween.onComplete" using), a second function is called, set "isMoving" to "false" and if some conditions is true - calls the first motion function. So at the moment there is a slight delay and tween looks not smoothed. The second function not heavy, it doesn't affect to performance.
  12. TypeError with Tween

    i have an "Uncaught TypeError: this.easingFunction is not a function" function ComLink(game, planet) { Phaser.Sprite.call(this, game,game.width - 179 * 1.5, game.height - 116 * 1.5, 'communications_hud'); this.scale.set(1.5); }; ComLink.prototype = Object.create(Phaser.Sprite.prototype); ComLink.prototype.constructor = Planet; ComLink.tween; ComLink.game; ComLink.prototype.init = function (game) { this.game = game; } ComLink.prototype.close = function () { this.game.add.tween(this).to({y: this.game.height}, 200, 'linear', true).start(); console.log(this); } ... PlayState.create = function () { this.game.add.image(0,0,'background'); this._loadLevel(); } PlayState._loadLevel = function () { ... this.ComLink = new ComLink(this.game); this.game.add.existing(this.ComLink); this.ComLink.init(this.game); this.ComLink.close(this.game); } here's most of the relevant data and here's the log of the comlink resolved
  13. Animating a tween with controls

    So I have a character (sprite) that whenever you press a key it'll move it along the y position and once it reaches the top, send it back down to the bottom. So I've been doing this game.input.keyboard.onDownCallback = function() { player.y -= game.height / 4 + 20 if (player.y < 0) { player.alignIn(laneRect_three, Phaser.CENTER); } }; I've been doing this. So basically, every key down move the player up and if it goes beyond the screen send it back down. So I want to add some nice animation to this. So instead of just jumping up, it kind of travels up so I've added a tween, currentPosFish = game.height / 4 + 20; game.add.tween(playerFish).to({ y: currentPosFish }, 1000, Phaser.Easing.Quadratic.InOut, true); But the thing with this is, it just sets it at the y position. How can I set a tween so it increments like what I was doing above?
  14. PHASER : Chained transitions issue

    Hi there, Hi have a sprite moving on the x axis at a given speed. When the user press on the space bar, I want (1) the sprite to stop on y axis, (2) make a move to the right, (3) go back at his initial position, and (4) continue his way on y. I've tried with the following code but the sprite stops while going back to his position and keeps shaking. Is there an easier way to do what I'm trying to achieve? If not, how could I debug this code? Many thanks! PS: my sprite will have to consider collisions. if (this.space.isDown){ let position_man = this.man.body.y; let speed_man = this.man.body.velocity.y; this.man.body.velocity.y = 0; let tween = game.add.tween(this.man); tween.to({x:200},100,"Quart.easeOut"); tween.start(); tween.onComplete.addOnce(retour,this); function retour(){ let tween2 = game.add.tween(this.man); tween2.to({x:100},100,"Quart.easeOut"); tween2.start(); } this.man.body.velocity.y = speed_man;
  15. white edge during tween

    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!)
  16. Pause certain tweens

    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?
  17. 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.
  18. 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.
  19. Button things

    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) } }); }
  20. 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.
  21. 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); } }); },
  22. Tweening Accuracy

    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.)
  23. 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');
  24. Trying to tween tiles

    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
  25. how do you do this effect ?

    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 }