Dynamic centered text button can only be dragged on the left half

Phaser 3
1

Hi,

I am starting my first little game with Phaser and it’s not going entirely smooth :D. I need to display a button with a word (dynamic text and size), center it, and make it draggable. What I liked about Phaser is that there were tons of shortcuts and lab examples to do things quickly. So I tried to keep my code so concise as possible.

These three problems took most of my time.

  • Center the text in a button ( which is a graphic )
  • Putting these in a container and centering the container.
  • Dragging the container.

I would love to solve the first two simply by using setOrigin, or Phaser.Display.Align. But that wasn’t so simple, it didn’t work or I did not understand it enough. So I manually calculated those now.

I was hoping someone could explain why the those attempts didn’t work.

But the remaining problem is now that only the left side of the button is draggable. Is this a phaser bug, or have I implemented this wrong.

I made a fiddle with all my attempts. I commented the failed attempts.

https://jsfiddle.net/mrklein/5verkbfg/52/

I hope the rest of the game will take less time, hopefully can someone point me what I did wrong so I can learn from this.

kind regards.

2

Hello @mrKlein, I’m not sure if this is solution for you but just give it a try :wink:

3

Thanks! Nice solution,
I didn’t know about the generateTexture method, still learning

1 Like