How to resize and/or move UI elements?

[Zyxpsilon]

Kay... just altered the Font-Sizes to 14 (maybe 16 would also work well) for each individual classes and made their Icons bigger at 28x28.

 

This snapshot is taken right after the initial mission, and the whole row fits nicely, although the Rocketeer numbers aren't scaling properly. Bug?

 

http://s4.postimg.org/xz106sip9/Spazmo_Roster_Summary_Line_2.png

 

PS; Found the Rocketeer sizing flaw... it was simply me that had accidentally typed a "/" within its new size field of 14 instead of the default 20.

Edited April 15, 2015 by Zyxpsilon

[SpazmoJones]

Hey Zyx I really like your texture mod idea to colour the icons. I've made a new version that includes a coloured class icon texture pack. Also thanks for pointing out the colour error - it was actually the engineer colour that was wrong.

Edited April 15, 2015 by SpazmoJones

[Zyxpsilon]

Welcome... been thinking about how the Icons are assembled near their numeric formulas and i believe anyone could be able to exploit the HTML instructions vSpace and/or hSpace to re-locate where those show up inside the line.

Haven't tested it yet, but if i'm right -- this is what could possibly happen to the Icons with vSpace=-32 & hSpace=24;

---------

[*]

4/6

---------

 

With the [*] diamond shape being tightly above the #6 approximately.

 

This minor indirect re-calibration would allow a much narrower size for the whole row of eight classes.

It could also make room for more elements such as MECs (with its own Supra-Class icon), SHIVs, PFCs, Psionics (there's a specific Icon for it), Promotable SPECs (this one has an icon too)... if need be.

Edited April 16, 2015 by Zyxpsilon

[SpazmoJones]

Welcome... been thinking about how the Icons are assembled near their numeric formulas and i believe anyone could be able to exploit the HTML instructions vSpace and/or hSpace to re-locate where those show up inside the line.

Haven't tested it yet, but if i'm right -- this is what could possibly happen to the Icons with vSpace=-32 & hSpace=24;

---------

[*]

4/6

---------

 

With the [*] diamond shape being tightly above the #6 approximately.

 

This minor indirect re-calibration would allow a much narrower size for the whole row of eight classes.

It could also make room for more elements such as MECs (with its own Supra-Class icon), SHIVs, PFCs, Psionics (there's a specific Icon for it), Promotable SPECs (this one has an icon too)... if need be.

 

I just tried it and it didn't make any difference. Would the text field have to have certain properties for this to work?

[Zyxpsilon]

Tried it too... but the whole combo (Icon+Numbers) is affected by whatever v or h calibrations are applied in EACH individual sections -- like this, for example;

 

PS; Don't forget such "spacing" is related to the img call_function, IIRC.

 

<%t "LongWar.ClassIcons.sniper' height='28' width='28' vSpace='-32'>">

 

That pushes the Icons below the numbers while their bottom corner is touching the frame separator cyan line. Invert with 32 only and they'd be above the row of numerics -- in relative terms. Any other hSpace(s) would simply slide everything (at once) to the left(-) or right(+).

 

What would really be necessary is to treat each instances as isolated code elements of two different areas (( or "Rows" )) that could just deploy sequences of 1) the Numbers and then... 2) the Icons.

I haven't explored your code logic much deeper and how the whole process gathers its current assets, but i'd have to guess it would still be possible to adapt the configuration as to mimic the example shown in the previous post.

Edited April 16, 2015 by Zyxpsilon

[SpazmoJones]

It builds a string like this for each class:

<font color='#ffd800' size='20'><img src='img://LongWar.ClassIcons.sniper' height='28' width='28'>1<font size='14'>/2</font></font>

Finding a way to move the icon around would be very useful.

[SpazmoJones]

Hey Zyx - I tried again and the valign actually seemed to do something. I'm not sure what I did differently the first time. Anyhow, because of this I've been able to increase the icon size and shift it down so that it aligns nicely with the text. It looks a lot nicer now.

[Zyxpsilon]

Cool... and if it ever comes to "adding" new categories, i'll be sure to keep watch over this thread! :wink:

 

PS; What if the display order is simply switched like -- numbers to the left and Icons to the right within each "groups"?

Edited April 16, 2015 by Zyxpsilon

[SpazmoJones]

 

That's awesome! I don't suppose there's a way to color those icons?

I don't think it's possible using HTML as Flash's support for that is rather limited. You could apply some dynamic tinting via ActionScript, but using the current setup you'd tint the text field as a whole, not individual sections of it.

 

A more involved approach would be to do what I did for the soldier stats in the barracks list, i.e. to basically create a bunch of separate icon sprite-and-text field pairs and place them at the top of the screen. This is quite a bit more work than injecting a bit of HTML markup into an existing text field, mind you :wink:

 

A more straightforward option would be to simply create your own images and put them in a separate UPK, like I mentioned earlier. Technically you could place them in LongWar.upk if you wanted, but re-distribution of that file would be a concern :smile:

 

Hey X - I'd like to find out more about how to add custom graphics to LW. Do you have any info available that explains how to do this?

[XMarksTheSpot]

Hey X - I'd like to find out more about how to add custom graphics to LW. Do you have any info available that explains how to do this?

That depends on what you mean by 'custom graphics'. If you're talking about the game's UI you see various different elements in play there, like vector shapes (mostly borders and the like), raster images (for instance icons), text fields, and so on, all linked together using timelines (i.e. animations) and scripts.

If you're specifically referring to the paragraph about dropping images (i.e. textures) into a UPK so you can reference them using "img://..." paths, you can do that using the Unreal Development Kit. There's a bit of information on the wiki about that.