Page 1 of 2

GUI questions

Posted: Fri Apr 07, 2017 10:48 am
by zimberzimber
1) How do I replicate the damage numbers effect over a champions health/energy bars?

2) How do I define new GUI elements?

Re: GUI questions

Posted: Fri Apr 07, 2017 4:47 pm
by AndakRainor
Hi! Short answer to both questions: with GraphicsContext or with GTK

Have you ever used one of those?

Re: GUI questions

Posted: Fri Apr 07, 2017 7:33 pm
by zimberzimber
I've used GTK, but mostly for the bigger built in windows.
Haven't tried Graphic Context, will do as soon as I have the chance.

Re: GUI questions

Posted: Fri Apr 07, 2017 7:43 pm
by Isaac
Basically you have a hook that runs every frame, and you use the GUI commands to draw the GUI every frame. The context variable and/or the button regions that you define allow you to interactively change the UI from user input. For example, so you can change the button color when the player hovers the mouse over your button.

I have a simple menu example project I can send when I get home; and/or you can look at John Wordsworth's Menu system.

Damage numbers are easy: Champion:showAttackResult(any, string)

Re: GUI questions

Posted: Fri Apr 07, 2017 8:04 pm
by minmay
Isaac wrote:Damage numbers are easy: Champion:showAttackResult(any, string)
That's for showing damage dealt (or misses etc.) by the champions' attacks. zimberzimber was asking about replicating the blood splatter that appears over a champion's health and energy bars when they are damaged. You'll have to do that one from scratch using PartyComponent.onDrawAttackPanel(), I'm afraid.

Re: GUI questions

Posted: Fri Apr 07, 2017 8:28 pm
by zimberzimber
Y'all forgot to mention the most important part where I have to handle GUI stuff by making a function with all the things I want to be displayed in it, and attach it to one of the parties onDraw hooks through a connector :D

Thank you all, and I hope I'll figure out the rest :)

Re: GUI questions

Posted: Fri Apr 07, 2017 9:22 pm
by zimberzimber
Alright, I figured out mostly everything, there's just one thing -
Different screen sizes will require different offsets/sizes for the GUI element placement, correct?
If so, how would I calculate the right values?

Re: GUI questions

Posted: Sat Apr 08, 2017 1:45 am
by AndakRainor
I'm afraid you will need to use MATH ! :o

https://www.youtube.com/watch?v=gENVB6tjq_M

Re: GUI questions

Posted: Sat Apr 08, 2017 2:37 am
by Isaac
minmay wrote:
Isaac wrote:Damage numbers are easy: Champion:showAttackResult(any, string)
That's for showing damage dealt (or misses etc.) by the champions' attacks. zimberzimber was asking about replicating the blood splatter that appears over a champion's health and energy bars when they are damaged. You'll have to do that one from scratch using PartyComponent.onDrawAttackPanel(), I'm afraid.
This is what I was suggesting, and how I would do it...

Code: Select all

function effect()
	party.party:getChampion(math.random(4)):showAttackResult(tostring(math.random(100)),"DamageSplash")
end

Re: GUI questions

Posted: Sat Apr 08, 2017 2:42 am
by minmay
If you use onDrawAttackPanel, the game takes care of scaling for you; you can write your hook pretending that the resolution is always 1920x1080.
If you're using a different hook, then you'll have to do the scaling manually. To match the built-in UI scaling, you'll want to treat a height of 1080 pixels as the 1:1 scale, and scale linearly with height based on that, but never past 1.
Additionally, if the aspect ratio is narrower than 1.3:1, multiply the scale by 0.8. If the aspect ratio is between 1.3:1 and 1.4:1, multiply it by 0.9.
Examples:
For 1440 x 900 the scale should be 900/1080 which is 0.8333...
For 1250 x 900 the scale should be 900/1080*0.9 which is 0.75.
For 1000 x 900 the scale should be 900/1080*0.8 which is 0.6666...
For 4096 x 2160 the scale should be 1.