I recommend Kenney's art. He's pretty well known in the open game art community, and he has already uploaded different UI versions (sci-fi, regular mobile-esque, rpg, pixel-arty).

Here's the most basic one to get you started, click on his profile to take a look at other ones.

Cheers!

Found a secret: if you use the "alpha" (0~1) attribute for any widget, the opacity works as intended. It's not in the GitHub documentation, and couldn't find it anywhere.

No prob. Glad that works now!

Hey there!

Since HaxeFlixel 4.0.0, that import should be:

import flixel.addons.editors.ogmo.FlxOgmoLoader;

The tutorial may be outdated then... If you have more inconsistencies, the full updated code is in the demos section of the site.
Hope this works!

So, now I am doing simple tests on an FlxUISubstate. This is what my ui xml looks like:

<?xml version="1.0" encoding="utf-8" ?>
<data>
	<chrome src="ui/chrome" x="0" y="444" width="192" height="180" slice9="6,6,12,12" color="0x4400FFFF" />
</data>

If the color fields works as an ARGB, then the problem is my PNG gets correctly tinted but its transparency is not affected at all. I tried it with other widgets, and it's the same thing. Then tried importing an already semi-transparent PNG , and it obviously works.

So, is there something in particular I should be doing or is this a weird bug?

Thanks a lot!

Yeah, it seems to work that way, even if you bind a key to it and press it. Bummer.

(I may be wrong, but I think I remember it working as intended in other targets before the 4.0 upgrade)

I think I fixed it.

The UI gets created and added when you call super.create(). Everything you add to that state after that line gets rendered on top of the UI so, if you have something like a background, it will block its visibility.

That, and I was trying to use the constructor to set everything up, not realizing that I needed that super.create function.

@galoyo As I wrote in my first comment, I had already read that demo and the RPG Interface one, but found later that the repo for the class was way more clear.

Today I figured out the problem but not the solution:

• If I set a FlxUIState as the main state in my game, everything gets displayed correctly.
• If I set a FlxUISubState as the main state in my game, everything still gets displayed correctly.
• But, if I set a FlxUISubState as a substate for another main state in my game, whether it's a FlxState or a FlxUIState, nothing gets displayed at all.

So, is this a bug or am I missing something?

Apparently, I missed all the info that the repo had to offer on this matter. So now I'm trying to implement the simplest of the FlxUISubStates like this:

class TestUIState extends FlxUISubState 
{

	override public function create()
	{
		_xml_id = "uiTest";
		super.create();	
	}
}

And the xml is looking like this:

<?xml version="1.0" encoding="utf-8" ?>
<data>	
	<sprite src="ui/reference" x="0" y="0"/>
</data>

Both assets/gfx/ui/reference.png and assets/xml/uiTest.xml exist, but nothing's being shown in the screen. There's also a FlxState that adds that FlxUISubstate like this:

override public function create():Void
	{
		super.create();
		
		add(new TestUIState());
	}

And that's it. If I get it to show the image, I feel that I would get on track to proper UI making.

Thanks a lot!

Argentino también por acá!

Hace 3 años que enseño HaxeFlixel en una carrera terciaria de videojuegos, y le tengo mucho cariño. Me gustaría creer que sumé algunos adeptos gracias a eso!