plugin Phaser Web Components UI Plugin

[phreaknation]

tl;dr:

An HTML based UI component system for phaser. MIT License, and links to pretty pictures and videos at the bottom.

 

So I have spent the last week or so working on a new way to handle ui components with Phaser. Most of the UI plugins out there are created with Phaser which means Phaser not only has to handle the game but the UI as well. Meaning that Canvas/WebGL has to handle both the game and ui. With other games platforms versus web games this is not an issue because performance is expected so the systems typically are beefier. With web games the games can be played on anything from an older tablet to an Lenovo Thinkpad to a raspberry pi. So the systems that these games can be played on can be lacking in power.

 

As a developer you want your game to utilize as much of the accelerated GPU as possible. Chrome and other web browsers tend to offload Canvas and WebGL rendering to the GPU. While some aspect of html nodes, most of which are minimally impactful as opposed to the Phaser created ui components. This is where this plugin comes into play.

 

Introducing Phaser Web Components. A growing library of HTML based elements to handle all of your UI needs. You can use your standard HTML elements to create your UI as well as use the custom components that are packaged as well. One of the great features is that you can attach these components to Phaser game objects and they will move with the objects on screen and the disappear when the object no longer is on screen.

 

Already there is a lot of power with this library and it is barely a week old. First off, its free. Not just free to use but you can customize the library how you see fit with the MIT license. You can create your own custom components and if you wish to give back you may even create a pull request and share your work with everyone else. Also, each component has minimal dependencies and some only depend on the base web component which means you can build the library for your game and cut out any fat with ease.

 

Documentation is a thing that it is currently lacking. However, with each control I release I update the wiki page for that control with the base code to get that component up and running. At the moment it is light but expect the documentation to grow over time.

 

I am also at the constant keeping things up to date with the release chart so that way people can see what to expect with things coming down the pipeline. Also if you wish to see work done on a component that doesnt have a release date yet, to see if it can be focused on, or if you have a new idea for a component then you can request that through the issues tab in github.

 

With all that, if you wish to see it in action, below are some links to screen captures of **some** of the components that are already working.

 

GitHub link

Damage Indicator

Name Plate and Stat Bars

Marker

Window

Volume bar

Video Player

Avatar

Icon

Screen Splatter

Component improperly loaded

[samid737]

The second github link refers to this topic. Looks interesting!

[phreaknation]

Whoops. This is what I get for writing the post at two am. Added to the post as well as here

 

https://github.com/phreaknation/phaserwebcomponents

[phreaknation]

This is the current structure to create the Splatter effect as shown. If anyone has any ideas or recommendations on making this simpler, I will take that into consideration before it is released soon.

https://github.com/phreaknation/phaserwebcomponents/wiki/Game-ScreenSplatter-[WIP]

[phreaknation]

Today I have removed one component as it did not make sense to make a component with it which is the Showcase component. If anyone has any ideas for it that make sense, by all means, shoot them over to me.

With that I wanted to show some progress with the tag controls. I have finished up the screen splatter and line components. At least to the point of being releasable. I am currently working on the Tag component which will have a few nifty features around it. Below is the current progress on what is currently done with the Tags. You can customize the tags how you wish quite easily. Stay tuned for more

[samid737]

@phreaknation , Maybe allow the tags to be draggable/ float inside a container/window ?

features/ideas for plugin:

-Buttons. 
-Easily adjustible styling via the plugin ( --> tag1.innerColor..., tag1.borderColor=... , tag1.cornerRadius , same for myWindow.innercolor, etc... almost any other UI components that can be styled.

 

[phreaknation]

9 hours ago, samid737 said:

@phreaknation , Maybe allow the tags to be draggable/ float inside a container/window ?

features/ideas for plugin:

-Buttons. 
-Easily adjustible styling via the plugin ( --> tag1.innerColor..., tag1.borderColor=... , tag1.cornerRadius , same for myWindow.innercolor, etc... almost any other UI components that can be styled.

 

I will be working on it being draggable at a later on, I will be adding this feature to a lot of the components. Windows already are. What kid of buttons? All styling can be done through CSS. I am providing basic support for the "label" color. I also have an options isClosable which does provide a close button. Might allow a way for adding some any kind of button that can be added. Let me work on that and see if I can do that.

[phreaknation]

@samid737

So I have added in the ability to add buttons to the tag component. Currently supports one single click callback but I might roll in the events system with the buttons later on. Below is the current code that is used for the tags as a full example.

 

let tags = [];
for (let index = 0; index < 2; index++) {
  let tag = this.game.add.existing(
    new this.game.PhaserWebComponents.components.UI.Tag({
      game: this.game,
      options: {
        backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`,
        // This is the type of tag. 'color' or 'arrow'. Arrow tags adds an arrow to the side.
        type: 'color',
        /// Direction of the arrow. Only for type 'arrow
        // arrowDirection: 'left',
        text: 'Tag ' + index,
        // The 'html' option is to allow for more control over the tag. Will replace the inner text content.
        // html: ``,
        isCloseable: index % 2? true : false,
        buttons: [
          {
            // align the control to the left or the right of the label content.
            align: index % 2? 'right' : 'left',
            // Text of the button
            text: 'Click me',
            // String of space separated classes to pass into the class attribute
            clssses: 'asdf',
            // The 'html' option is to allow for more control over the tag. Will replace the inner text content.
            // html: '',
            // Callback for the click action
            callback: (ev) => {
              // ev is the event
              // do something when clicked
              console.log('Clicked')
            },
          }
        ]
      }
    }),
  );
  secondWindow.getContainerNode().querySelector('.body').appendChild(tag.getContainerNode());
  tags.push(tag);
}

 

[phreaknation]

Another screen of the tags with a the type set to arrow. code example below.

 

new this.game.PhaserWebComponents.components.UI.Tag({
  game: this.game,
  options: {
    backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`,
    // This is the type of tag. 'color' or 'arrow'. Arrow tags adds an arrow to the side.
    type: 'arrow',
    /// Direction of the arrow. Only for type 'arrow`. Default: left
    arrowDirection: index % 2? 'right' : 'left',
    text: 'Tag ' + index,
    isCloseable: index % 2? true : false,
  }
})

 

[phreaknation]

UI Badge progress

[phreaknation]

Sadly this past week I was unable to get much work done. With the hurricane that hot Houston, I'm in the DFW area, I've been helping out over the weekend with my wife's animal rescue and transport 501c. I was also sick earlier in the week which put me down. With that, over the next couple weeks I'll be playing catch-up to try and get things back on schedule.

 

Fingers crossed.