FKL34TI5T5

Members
  • Content Count

    14
  • Joined

  • Last visited

  1. That's an Eli the Computer Guy after a Comic Book Guy clip binge answer. I think it is more productive for everyone to be more detailed. Obviously you must pass in the scene. You can do `var _this = this` outside of the function and `_this.add` in it. Samme said the same thing in a much more positive think for yourself approach. Why is it undefined? Even understanding the quirkiness of JS scope perfectly is not going to help you here if you brainfart. We are very dumb animals as humans, especially when tired.
  2. I am having the same issue with other sounds. I guess the question should be, can two sounds from the same soundsprite play at once?
  3. I have a 30 second loop for ambient background sound in my sound sprite, but if I play it, it stops whenever another sound from the sprite plays. Do I need to load background music separately, or is there a way to get to play simultaneously to other sound sprites? "ambience": { "start": 8.000, "end": 41.500, "loop": true }
  4. I have a table I want to put under all sprites on the canvas and have it show through. Is this possible? The docs describe the fact that they can only be entirely above or below the canvas. I guess below might be for an existing webpage to wrap around.
  5. I'm leaning towards that it is a bug. I will need to look at library. I think what is happening is that if you are not moving the mouse, the listener binds itself to the last sprite. setTimeout(()=>{button.setVisible(false);buttonPressed.setAlpha(1)},2000) When I removed the top sprite after clicking on it and holding down, it worked. I gave myself two seconds for the page to load and to click, and click and hold (waiting for it to disappear). Edit: I just found a workaround through bogosorting the problem that seems to work, but I have no idea why. Adding a timeout on pointerdown seems to regulate some sort of order. button.on('pointerdown', () => {buttonPressed.setAlpha(1);setTimeout(()=>buttonPressed.setAlpha(1), 1)}) buttonPressed.on('pointerup', () => {buttonPressed.setAlpha(0);button.setAlpha(1);}) buttonPressed.on('pointerout', () => {button.setAlpha(1);buttonPressed.setAlpha(0);})
  6. Yes, exactly on top of each other. I tried to mess with the depth, setting a small alpha, and also removing interactivity, but it seems like there is an issue with the mouse remaining in the same exact place. I am now looking for ways to force a cursor move as a workaround, but not sure yet on mobile. Note the pointerdown events in a row. That represents two clicks. So when you keep it in the same place only pointerdown fires until you click again. It should be in order always. If you move your mouse between clicks, even one pixel, then there is no issue.
  7. button.on('pointerdown', () => {buttonPressed.setAlpha(1);button.setAlpha(0);}) buttonPressed.on('pointerup', () => {buttonPressed.setAlpha(0);button.setAlpha(1);}) buttonPressed.on('pointerout', () => {button.setAlpha(1);buttonPressed.setAlpha(0);}) The above code toggles a button with two sprites, one for the button up, and one when it is pressed. The problem is that after the first press, if you do not move your cursor out of the sprite, you have to click twice. If you keep it there, then you have to click twice for each event. It's very weird. The only workaround I have found is to duplicate the buttonPressed.on('pointerup', listener and call it button. This stops you from having to click twice, but alas you only see the buttonPressed sprite once every two clicks. Why doesn't it work unless I take the cursor outside of the sprite? And why would it work only on the second click? Also, if I get rid of the pointerout event it works fine, except if it is released outisde the button, then it is stuck. pointerupoutside doesn't seem to do anything at all. I'm on the current version. Edit: It will work if you have any mouse movement in between clicks, but it fails if you keep it in the same spot. I was mistaken about the boundaries having any effect on the issue. It's only when you don't move your mouse.
  8. Answer is the remove method. game.anims.remove('c1animation') game.anims.remove('c2animation') game.anims.remove('c3animation') game.anims.remove('c4animation') game.anims.remove('c5animation') //If you need to wait for the event, then use this: card1.on('animationcomplete', ()=>{game.anims.remove('c1animation')}, this) card2.on('animationcomplete', ()=>{game.anims.remove('c2animation')}, this) card3.on('animationcomplete', ()=>{game.anims.remove('c3animation')}, this) card4.on('animationcomplete', ()=>{game.anims.remove('c4animation')}, this) card5.on('animationcomplete', ()=>{game.anims.remove('c5animation')}, this)
  9. I have a card game that I want to animate a card flip from a sprite sheet. It works fine except that I don't see that there is a way to destroy a key once it is done. This code shows the same cards over and over. How can I destroy a key or get my animation to be tied to the passed variable in the argument? function dealCards(c1, c2, c3, c4, c5) { let c1frameNames = game.anims.generateFrameNames('cards', {start: 1, end: 7, zeroPad: 0, prefix: c1 + '/', suffix: ''}) gopherswild.anims.create({ key: 'c1animation', frames: c1frameNames, frameRate: 18, repeat: 0 }) let c2frameNames = game.anims.generateFrameNames('cards', {start: 1, end: 7, zeroPad: 0, prefix: c2 + '/', suffix: ''}) gopherswild.anims.create({ key: 'c2animation', frames: c2frameNames, frameRate: 18, repeat: 0 }) let c3frameNames = game.anims.generateFrameNames('cards', {start: 1, end: 7, zeroPad: 0, prefix: c3 + '/', suffix: ''}) gopherswild.anims.create({ key: 'c3animation', frames: c3frameNames, frameRate: 18, repeat: 0 }) let c4frameNames = game.anims.generateFrameNames('cards', {start: 1, end: 7, zeroPad: 0, prefix: c4 + '/', suffix: ''}) gopherswild.anims.create({ key: 'c4animation', frames: c4frameNames, frameRate: 18, repeat: 0 }) let c5frameNames = game.anims.generateFrameNames('cards', {start: 1, end: 7, zeroPad: 0, prefix: c5 + '/', suffix: ''}) gopherswild.anims.create({ key: 'c5animation', frames: c5frameNames, frameRate: 18, repeat: 0 }) card1.anims.play('c1animation') card2.anims.play('c2animation') card3.anims.play('c3animation') card4.anims.play('c4animation') card5.anims.play('c5animation') }
  10. I don't think condescension helps. OP posted a question for Phaser3, you gave a link to convoluted, though decent answer in Phaser2.
  11. I want the canvas to move with the rest of the page on drag events started within the canvas. How do I do this? Everything works normally on the desktop. Thread for Phaser 2:
  12. Awesome, I am familiar with the concept of rail physics. I'm also agnostic to phaser methods. 🙂 Edit: The link has some good content for paths, but not on custom acceleration on tweens.
  13. I want to simulate the trajectory and bounce of a golf ball. I can't use physics because the destination of the path is known. I have two questions; 1) What is the best way to tweak acceleration at various stages of the path? What I found on the Phaser 3 examples for tweens was a timeline and custom easing, but I couldn't get anything close. The attached video (path.mov) shows how bad it looks without acceleration. Default easing won't cut it here. 2) Is there a way to generate a path from a physics simulation within phaser? I tried making a custom path from one externally in JSON, but I couldn't figure out how to import it. The documentation gives no examples, and neither do the online examples. I have the code I used below for the video currently: ``` function create () { this.add.image(0, 0, 'bg').setOrigin(0, 0); graphics = this.add.graphics(); follower = {t: 0, vec: new Phaser.Math.Vector2()}; this.tweens.add({ targets: follower, t: 1, duration: 4000, yoyo: false, repeat: 0 }); function shotPath(finX,finY, curveWidth, curveHeight) { //Starting point of the ball. tracer = new Phaser.Curves.Path(540, 1550); //The coordinates x and y are where the ball finishes. tracer.quadraticBezierTo(finX, finY, curveWidth, curveHeight); tracer.lineTo(finX + 35, finY - 37); tracer.lineTo(finX + 60, finY - 5); tracer.lineTo(finX + 80, finY - 32); tracer.lineTo(finX + 90, finY - 12); } //CurveWidth > 540 is a draw and < 540 is a fade. shotPath(540, 1200, 410, 600); } function update () { graphics.clear(); graphics.lineStyle(2, 0xff0000, 1); tracer.draw(graphics); tracer.getPoint(follower.t, follower.vec); graphics.fillStyle(0xffffff, 1); graphics.fillCircle(follower.vec.x, follower.vec.y, 8); } path.mov