Making GUI in 2019 with Pixi

[buryo]

Hi guys,

I need some advice, I'm quite new to Pixi (also game making) 

What I'm using is: NodeJS, React, Pixi

What I need is a GUI, I don't want to use old libraries which were made in 2015-2016. Do you have tips/example repo's for me?

This picture is from my game, right side UI is just a picture (texture) I want to make it real

[ivan.popelyshev]

Do the right side with react, field with pixi. problem solved.

The biggest collection of pixi ui elements is https://github.com/pixijs/pixi-ui/ but its not documented nor is it moved to v5 and typescript yet.

Text input: https://github.com/Mwni/PIXI.TextInput 

SDF fonts: https://github.com/PixelsCommander/pixi-sdf-text , https://github.com/avgjs/pixi-richtext

We are working on moving all plugins to v5 and we are making new tutorials. I hope in half of year we'll have complete set of stuff for games, but right now its not the case, so go for React to save time.

 

[buryo]

Hey Ivan thank you! making the right side in react is a very very good idea.

However I'm also going to need some little UI items inside my view (e.g the option to attack someone's town) how should I do that? I was thinking about this https://pixijs.io/examples/#/interaction/interactivity.js

[ivan.popelyshev]

If you need some basic things - buttons, stuff - yes, use pixijs vanilla. If you need some extra features, look in pixi-ui code, maybe you can use it as a reference. It also works through pixijs interaction.

What it cant do: detect transparent parts of sprite. You have to specify hitArea shape if you need non-rectangle sprite shapes.

Grand reveal: I'm working on a plugin that automatically detects transparent parts of sprites and meshes!