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

Author Topic: [Resolved] About gui animation interpolate  (Read 2755 times)

Arlohian

  • General Accounts
  • *
  • Posts: 43
    • View Profile
[Resolved] About gui animation interpolate
« on: Jun 09, 12, 03:49:32 AM »

Hi,

Is it possible to make the Interpolate (as implemented in clean engine) function "fill" the bar from right to left and bottom to top? or does it need heavy modifying?

It does left to right (animate size.x) and top to bottom (animate size.y) very well, but need the other ways for my nice ability bar :D

Thanks for any answer!
« Last Edit: Nov 01, 12, 08:49:34 AM by HE-Cooper »
Logged
Fledgling programmer

FI-ScottZ

  • General Accounts
  • *
  • Posts: 1407
    • View Profile
    • Forever Interactive, Inc.
Re: About gui animation interpolate
« Reply #1 on: Jun 09, 12, 07:50:41 AM »

Sure does, but for that you need two interpolations going on: one for growing the size and another that moves the position (x for horizontal and y for vertical).  Move it to the left or top as is grows and the opposite as it shrinks.
Logged
Scott Zarnke
Lead Programmer, Visions of Zosimos
CTO, Forever Interactive, Inc.

Arlohian

  • General Accounts
  • *
  • Posts: 43
    • View Profile
Re: About gui animation interpolate
« Reply #2 on: Jun 09, 12, 08:33:36 AM »

I think moving the bar will be enough as it does stop at once end, it is not allowed to render outside its parent panel. Just need to work some clever math's to get the right position.

Thanks :)
Logged
Fledgling programmer

Arlohian

  • General Accounts
  • *
  • Posts: 43
    • View Profile
Re: About gui animation interpolate
« Reply #3 on: Jun 09, 12, 09:42:33 AM »

Finaly got the math working in my head! sliding beautiful now :D
thought train:
This assumes the bar is between pos 0 and x, and that the bar cannot display outside its area

we animate position.x (on the gui element rageslider)

Code: [Select]
current as Float = currentrage
max as Float = maxrage
percentalong as Float = (current / max)
animate_using_this as Float = rageslider.size.x - rageslider.size.x * percentalong

This fills the bar beautifuly from the left to the right when u put it into the interpolate, swap .x for .y and u got a bar filling from bottom to top :D.
« Last Edit: Jun 09, 12, 09:49:24 AM by Arlohian »
Logged
Fledgling programmer

GFG_Ulfrpsion

  • General Accounts
  • *
  • Posts: 40
    • View Profile
Re: About gui animation interpolate
« Reply #4 on: Jun 18, 12, 09:54:29 AM »

Greetings,

There is actually a built-in interpolation animation for GUIs. It's hard to wrap around at first, so I'll add my code to show you.

Code: [Select]

//method to set the animation for a bar.
method UpdateBar(value as Integer, max as Integer, panelname as String) as Boolean
  var mx = max * 1.00
  var val = value * 1.00
  var ratio = val/max
  var size = (ratio * -100.00)
  println("Size of bar: "+size)
  Slider as NodeRef of Class GUIControl = FindGUIControlByName(me, panelname)
  println(Slider.name)
  Slider.removeAnimations()
  //alert our information for debug purposes.
  println("Size: "+size)
  //Begin our animation information.
  animationString as String = "size.x,"
  animationString = animationString +  Slider.size.x + ","//should be 0.
  animationString = animationString + size +","//should be our bar's size.
  animationString = animationString + .1 + ","
  animationString = animationString + 1 + ","
  animationString = animationString + "false,"
  animationString = animationString + "LINEAR," 
  animationString = animationString + "false,"
  animationString = animationString + "0,"
  animationString = animationString + "slide"
 
  GUIAnimation:addAnimation(Slider, "Interpolate", animationString)
  return true
  .

Basically, by setting up your panels and getting a handle for the panel objects, you can attach an interpolate animation to the bar/panel. Passing in a string with the interpolation type, you can change the interpolated bar. There's really not alot out there for it, so you'll need to play with it a bit. Check this wiki link for some added help:
http://wiki.heroengine.com/wiki/GUI_Animations

Logged

Arlohian

  • General Accounts
  • *
  • Posts: 43
    • View Profile
Re: About gui animation interpolate
« Reply #5 on: Jun 18, 12, 03:34:00 PM »

Yes, i was using the built-in interpolation animation for GUI's (didnt post it because its big and doesnt really say anything about it). Got it all sorted now though.

In the end i decited to animate the position because animating size squishes objects, where position just moves them(things keep their shape). Currently i now animate my round red health blob to move down, as my alphamap moves up = red blob with a nice straight line at top when it drains (good old diablo style!).


Heres my working solution for a red circle emptying itself down as hp decreases, if anyone interested:
(Both alphamap and bar position must be 0,0 for it to work, else needs tweaking)
Code: [Select]
method SetHP(hp copies Integer, max copies Integer)
  if hp < 0
    hp = 0
  .
 
  hplabel as NodeRef of Class GUILabel = FindGUIControlByName(me,"healthPanel.healthLabel")
  //Some reason it doesnt work proper when all in one line of code
  hplabel.text = hp
  hplabel.text = hplabel.text + " / "
  hplabel.text = hplabel.text + max
 
  healthSlider as NodeRef of Class GUIControl = FindGUIControlByName(me, "healthPanel.healthSlider")
  healthSlider.removeAnimations()
 
  c as Float = hp
  m as Float = max
  percentalong as Float = (c / m)
  pmax as Float = healthSlider.size.y - healthSlider.size.y * percentalong
  amax as Float = healthSlider.alphamask.size.y - healthSlider.alphamask.size.y * percentalong
 
  //1 field(string), the field on the GUIControl to such as size.x or defaultStatePresentation.color.a
  //2 min(float) (this is NOT the start value for the animation. That is the current value of the field to which you are applying the min/max values)
  //3 max(float)
  //4 duration in seconds(float)
  //5 repeat count(integer) (0=repeat infinitely, 1-n do animation that number of times)
  //6 reverse(boolean), forward and backward(true), or just forward(false)
  //7 curve(Enum of type interpolation curve), LINEAR, HOLD, EASE_IN, EASE_OUT, SMOOTH
  //8 restore(boolean), restores the orignal value after the animation is finished
  //9 delay in seconds(float), the amount of time to wait before actually starting the animation
  //10 id(string), the ID of the animation
  animationString as String = "position.y,"
  animationString = animationString + healthSlider.position.y + ","
  animationString = animationString + pmax + ","
  animationString = animationString + 0.1 + ","
  animationString = animationString + 1 + ","
  animationString = animationString + "false,"
  animationString = animationString + "LINEAR," 
  animationString = animationString + "false,"
  animationString = animationString + "0,"
  animationString = animationString + "slide"
 
  GUIAnimation:addAnimation(healthSlider, "Interpolate", animationString)
 
  animationString2 as String = "alphamask.position.y,"
  animationString2 = animationString2 + healthSlider.alphamask.position.y + ","
  animationString2 = animationString2 + amax + ","
  animationString2 = animationString2 + 0.1 + ","
  animationString2 = animationString2 + 1 + ","
  animationString2 = animationString2 + "false,"
  animationString2 = animationString2 + "LINEAR," 
  animationString2 = animationString2 + "false,"
  animationString2 = animationString2 + "0,"
  animationString2 = animationString2 + "slide"
 
  GUIAnimation:addAnimation(healthSlider, "Interpolate", animationString2)
.


Gonna go make my function take the name as arguments, currently i have 6 interpolate animations on my bar and takes lotta space and makes the code less reader-friendly. Thanks :D
« Last Edit: Jun 18, 12, 03:45:36 PM by Arlohian »
Logged
Fledgling programmer