How to create Container Buttons with RxJS and TypeScript.

Posted on 26th May 2021. Follow @phaser_ and get the Phaser World newsletter.


Tommy Leung from Ourcade writes: "It is common for buttons to have text in them. But like most GameObjects in Phaser, the basic button cannot have children. This means you have to manipulate buttons and text separately. In this article, we will show you how to use a Container to group them.

Phaser doesn't come with buttons but making a basic one is easy.

One issue with the basic button is that text can't be added to the button as a child. Phaser is designed to have a flat hierarchy so you can't add children like you might be used to in Flash, cocos2d, or other game frameworks.

Instead, Phaser has a Container type that is designed to group multiple GameObjects.

Those coming from Flash or Unity have probably created nodes called “container” to group things for simpler to manage animations."

Read More

Learn to code and lead your intrepid crew on a mission to save The Cloud in TwilioQuest, a PC role-playing game inspired by classics of the 16-bit era. Free forever, and available now for Windows, Mac, and Linux.

The first book on the creation of HTML5 cross platform games using Phaser 3 and other free software.
  • By Emanuele Feronato
  • 155 Pages
  • 28 Source Code Examples
  • Build a complete game from start to finish
  • Cross Platform
  • Scaling for devices
Buy Now