Custom Interfaces: Inventory, Skill Trees and such

[Ardenian]

Hello,

Some maps, especially RPGs use custom interfaces, like TKOK RPG or APproject's new map if I recall it right.

Basically, there is a background and 'icons' you can select, all on playable ground, somewhere where you cannot enter with units.
But, how are these interfaces built ?

I thought about this:
1. Create a very simple square model
2. Add an icon as skin for this model
3. Place the models on the map and make them look like an interface

Is this the best way to create skill trees and custom inventories ? I would like to limit my question to a skill tree, as a custom inventory is much more complicated.

Is the above descripted way the best to create a custom skill tree ?
What way would be the most efficient regarding image quality ( especially for background) and.map / import file size ?

 

[PurgeandFire]

Yes, you have the right idea. Usually you'll have a destructible with a replaceable texture, and make one destructible object with each icon you want to support. You can see Anachron's CustomInventory as an example of this.

But there is another way to do it with units:
http://www.hiveworkshop.com/forums/lab-715/could-something-like-useful-267922/
You can make a model like that with alternate animations to support each icon you want to use. Then you can use this native to set their animation (by index):

native          SetUnitAnimationByIndex     takes unit whichUnit, integer whichAnimation returns nothing

A lot of full-screen systems will use trackables to detect clicking and hovering, but if you're more comfortable with GUI, then it might be easier to just use units directly and detect when they are selected or right-clicked (smart order).

For borders, you can just use the models in Anachron's CustomInventory. For backgrounds, you'll want to use images--which might be a bit difficult to use since they require JASS:
http://world-editor-tutorials.thehelper.net/cat_usersubmit.php?view=66955

Try working on it and see if you can get things working the way you like. I recommend working in a separate map until you're satisfied and then transferring it to your actual map. Interfaces tend to require a lot of testing, especially when you're trying to position things.

 

[Ardenian]

Thank you very much for the detailed and informative answer! There is a lot I have to experiment with now!

To be honest, although I understand the concept of the animation solution ( I recall reading a tutorial about it) I don't understand Jass at all.
I think it is possible to create an interface fully with the default triggers, not using Jass at all, am I right ? ( Beside the background image issue)

In case I need to learn Jass, as your post makes it sound like, could you recommend a tutorial exactly being informative about this special case, allowing me to learn the knowledge I need to know, so I can use the little Jass script you posted ?

 

[PurgeandFire]

I'll just give you some quick info.

Problem: We want to display any icon on the screen.

Solutions:

• Destructable with a replaceable texture
• Unit with custom animations for each texture
• Images (JASS)

-> The destructable solution is perfectly GUI friendly. You would make one destructable per icon texture you want to use (see Anachron's CustomInventory), and you can set its "replaceable texture" field to the path to your icon. The main issue: we can't detect when destructables are selected. Solution? In JASS, you would use trackables. In GUI, you might need to make an invisible plane unit, and place it directly above each destructable. This can make your coding logic a bit difficult, but works just fine.

* You can also use units with war club to do something similar, but I haven't tried it out so I can't give much feedback on that solution.

-> The unit animation option is pretty great, and Uberplayer has made it quite convenient to add whichever icons you want. Each animation/sequence has its own separate icon texture. The sequences aren't given names that work with wc3's "Animation - Set Animation" function though. You have to set the unit's animation by its index instead. Each animation in a model is given a particular animation index. The first animation is given an index of 0, the second animation is given an index of 1, etc..

So if you wanted to set the animation to the one at index 4, you would do something like this:

• Set TempUnit = (Triggering unit)
• Custom script: call SetUnitAnimationByIndex(udg_TempUnit, 4)

TempUnit can point to anything you want. And as you can see in the custom script, we assign the animation at index '4' to TempUnit.

-> Images are a viable solution, but if the image is not 256x256 (or 512x512, I don't remember), then it will grab the bordering pixels and stretch them to fill that area. It looks really ugly, but it can be fixed by importing all your icons with a 1 px transparent border. This method takes up a lot of file size and tends to be a hassle. But images are great for background images, borders, etc.

An alternative solution to images is to place black images over the parts that are stretched. But that requires more JASS knowledge.

 

[Ardenian]

Thank you very much, I appreciate you take the item to give me a detailed answer!

I think I go with solution 1, using replaceable textures, as Infernal Tater offers a tutorial to this topic with links to even more.

To create a working skill tree now, I have to create a unit flying above the destructible but having no model ( none.mdl), right ? So if I click on the icon/destructible, then the model is selected instead ?

What would you recommend regarding a background picture ? As you say, it requires a lot of file size, what is the best solution to add backgrounds for the interfaces keeping in mind it is a multi player map ? Is there any way without using advanced methods like using a MPQ or map size bypass ?
I wonder, what if I create the interface very small, let's say around 128x128 and the destructible units even smaller, would this be a solution ?

 

[Arad MNK]

The system itself is a Pain Unfortunately. Making it took +10 hours from me and the result didn't work.

Now I download the system and hope to work.

 

[PurgeandFire]

To create a working skill tree now, I have to create a unit flying above the destructible but having no model ( none.mdl), right ? So if I click on the icon/destructible, then the model is selected instead ?

Sort of. I'm not sure if inputting an invalid model will work. The unit might not be selectable. You can probably just use whichever icon model you use for your destructables (the model you use for your icons). You can set the alpha/transparency to 0 so that it doesn't show up visually (Animation - Set Unit Vertex Color).

What would you recommend regarding a background picture ? As you say, it requires a lot of file size, what is the best solution to add backgrounds for the interfaces keeping in mind it is a multi player map ? Is there any way without using advanced methods like using a MPQ or map size bypass ?
I wonder, what if I create the interface very small, let's say around 128x128 and the destructible units even smaller, would this be a solution ?

Larger backgrounds take up more file size. Smaller backgrounds may appear to be more blurry. It honestly depends on how much available space you have, and how much detail you need to be in your background images. When you design your background images, start off with a big size (e.g. 1024x1024) and save copies of those versions. When you actually convert it and import it into your map, play around with different sizes and dimensions to see what works best for your situation.

Maps like TKoK have very blurry background images for their skill trees. It isn't too important for it to be high quality. I personally think that the backgrounds used in TKoK are pretty distracting. It may be helpful to look at WoW talent trees for inspiration:
https://fauxpaws.files.wordpress.com/2008/05/feralbuildiii1.png
You'll definitely want the users to look at the icons more than the background. The background should just be... well, it should just be a background. Nothing more. In WoW, they used special borders (shown in the img above) to separate the icons from the background, and they highlighted available talents.

The modern WoW talent trees do it even better, IMO. The background is hardly visible, but it is still there to give the tree a particular vibe:
http://i.imgur.com/Q9N6Z2r.png
Ultimately, you'll want your eyes to go directly to the icons first.

Using a custom MPQ or the map-size bypass dll is not a good choice unless the features are optional or if you have a very big mod where it is absolutely necessary.

 

[Ardenian]

Thank you very much!
I think all my questions are solved now!

You could think about putting this information into a tutorial, it is very helpful and offer great knowledge one can learn about the topic!