Sign in to follow this  
buryo

Making GUI in 2019 with Pixi

Recommended Posts

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

EZi15Lf.png

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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!

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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.