HeroEngine Forums
Welcome, Guest. Please login or Register for HeroCloud Account.

Author Topic: GUI Tips and Tricks  (Read 3306 times)


  • General Accounts
  • *
  • Posts: 465
    • View Profile
    • Pirates' Nest
GUI Tips and Tricks
« on: Jan 23, 19, 03:21:06 AM »

My Tips and Tricks with GUI:

When first having a look at the GUI elements, I decided to go with Thazager's tutorial on how to create a basic button and how to create a basic window.
This was a great start to have a bit of practise how the editor works (it's really just drag and drop, and changing a few parameters mostly). From here onwards, I went solo (on purpose) and made sure to run into as many problems as I possibly could.

Here's my Tips and Tricks with GUI:
Tip #1:
Spend an incredible amount of time on PLANNING AHEAD and don't start rushing in without having an entire Photoshop file with all the elements. Inspect the .dds files that come with the clean engine and work from there. Make a list of all the possible elements that you need and continue from there.
Tip #2:
In Photoshop, there's a handy tool that shows the exact pixels when an element begins and ends, which makes it easier in the GUI Editor (so no dragging squares around elements, but carefully choosing which pixel).
Tip #3:
When exporting, please do not do so in DDS Format. Use PNG's (PNG24). Even better: your entire user interface can be put into a single 1024x1024 PNG file if you planned ahead well enough (excluding icons).
Every single element counts as a drawcall, and when the texture is already loaded into memory, you're going to have a better time.
Tip #4:
Start by following Thazager's GUI tutorials to get the hang of including new GUI elements on the screen and be CONSISTENT throughout how you add them. A 10 minute video should take about 40 minutes if done correctly.
Tip #5:
Don't freak out if your HeroBlade crashes. It happened to me, and I sat in a corner for about 7 hours figuring out why my GUI Editor was crashing and deffinitely not talking to a rubber duck explaining my way with the Editor. Henceforth, my tricks:

Trick #1:
When a Node (CreateNodeFromPrototype) is not found, check the following (example: win as NodeRef from Class My_Window = CreateNodeFromPrototype("PN_Window"):
- Does it appear in my GUI Editor?
- Open the GUI XML through the HeroScript Editor (CTRL + H), and check that the GUI has class='My_Window' added to it

Trick #2:
Always back up your GUI and GUIXML folders
- This has literally saved my life on 2 occasions. After a version mismatch, which caused the GUI Editor to crash HeroBlade, I simply reverted back to an original file.

Trick #3:
Please download P4Merge and install it. Find a quick tutorial on how to use it.

Trick #4:
Even if you didn't include a parent class, you can always add them later. Start reading about the Command Line Interface (CLI) and its commands.

Trick #5:
Always check the XML files. Always! If your GUI Editor crashes, revert as much as you can, start over, and keep checking for crashes and errors.

More tips and tricks will follow as soon as my rubber duck should come to the rescue again.


  • General Accounts
  • *
  • Posts: 664
    • View Profile
    • Exile-Online
Re: GUI Tips and Tricks
« Reply #1 on: Jan 24, 19, 09:48:16 AM »

Nice info. Keep up the good work.