phreaknation

Phaser Web Components UI Plugin

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

0b51477d8e9a25a5995ec5447795519e.png

Share this post


Link to post
Share on other sites

@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.

 

Share this post


Link to post
Share on other sites
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.

e3de576e15ef3466ec5fe4a3bc48b7c9.gif

Share this post


Link to post
Share on other sites

@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.

b306f2279c0c604f5437c3892f48bab2.gif

 

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);
}

 

Share this post


Link to post
Share on other sites

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

a3351de81cb1acd19ee8a2f2b0b89c80.png

 

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,
  }
})

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.