RMMZ HUD Maker Ultra Pro help - Hover Animation on Custom Components as Buttons

[Kurochan]

Hey there peoples, I kinda smashed into a UI Design wall with SRDude's HUD Maker Ultra Pro tool. I'm trying to trigger a Button Hover Animation effect to make the Custom Button Component I made change its height and width from it's normal 80x80 px size down 10x10 px on mouse enter and then play the reverse of that Animation on mouse exit. Problem is, I keep getting an error message saying something about the component height and component width functions are not part of whatever the object stored in the "this" keyword is referring to... anyone know how to apply the Animations properly? If I had to guess based on after I read over the plugin source code, I'm getting the error because I'm attaching the Animation conditions to the wrong place. I've been attaching them to the button component instances added to another Custom Component that is basically a UI Grid of buttons. I also tried to add the Animation conditions to the button component directly when I open it up from the list of custom HUD/Components but even tho it doesn't throw the error, the Animation just doesn't happen... in that situation is it possible that a difference of only 10x10 px isn't noticeable? Or is there a specific way to trigger the Hover animation for height and width easing? I'm currently experimenting with using a variable to store the 3x3 Grid index of the currently isHovered button ordered 1-9 L-R but the problem seems to be with the Animation conditions not being set in the correct place...

Edit:
I do know Javascript so if you have a solution that requires writing JS Code I can easily do that too (in fact the use of Javascript is actually preferred but any solution that works is fine with me.)

 

[r66r]

Hi! If I understand you correctly, you want to achieve a result like the example below (you can't see the mouse, but the effect occurs when the mouse hovers over the button/image) ?



So here's the setup I did, using a custom component that only contains an picture element. I hope this will help.

Spoiler: Setup

The custom component "CmdStatus" has only one picture element.



The properties of the picture element. Look at the animations properties.



And the detail of the "Width Scale" property. The "Height Scale" property is set in the same way.



Note that in your case, the "End Width/Height Scale" will be 87.5% (80px -> 70px).

 

[Kurochan]

Thanks for that r66r! With that example I think I figured out why it's throwing the error. The root component of my custom button component is actually a Group component which seems to not have any Height or Width properties associated with it like a graphical type of component does so the animation can't be triggered because the Group component is passing the component height and component width functions an undefined value or some value that is not a numeric value. I'm going to try and wrap the root Group component inside of an icon component that uses icon index zero (which is a blank icon) and see if that works. Hold tight until I test this theory out @Mods this might not be solved if this test fails.

 

[Kurochan]

So based on the testing I did with my custom Button Component, the Animation does not seem to effect the child components recursively which makes this kinda a useless thing to try and do if you have a more complex Custom Button Component like what I have. I decided to do my fallback idea of adding an overlay shape component and apply a color to it that changes between 0% opacity and 16% opacity on hover/unhover. If anyone can figure out how to make the children components of a custom component recursively scale too (in my case it had text, an icon, 2 shapes as background layers and I wrapped them inside a Window Component to give it a wrapper with a height and width property) then if you could please post it here that would be really helpful. Unfortunately the button component I'm trying to Animate is not simply an icon alone but more like an inventory slot item component that has a click action attached to it to trigger the slot's linked item's details Window component visibility. I probably should've explained that in my original question... but r66r's reply got me 1 step closer I think but didn't solve my problem....

I'll also be continuing to experiment with this but I definitely need help finding a solution to this since SRDude never actually wrote any documentation for this tool so I would really appreciate it if the Mods would keep this open until a proper solution to applying the height and width scaling animation recursively is actually found and posted here. At this point it's not just info for me but for the entire community until SRDude finally takes the time to give us a proper documentation website for his tool.

 

[r66r]

The group component being for grouping/moving child components on the screen, it does not have any specific animation properties. As far as the child components are concerned, you have to add the animations on each component for it to work.

Nevertheless, I was confronted with the same problem, namely how to make two "linked" components react (e.g. image + label) so that when the mouse hovers over the first one, the second one reacts in the same way. For the moment, I removed the labels to keep only the images. In your case, this will not be useful.

In fact, the animation should be done on the custom component when it is put in the HUD. However, the HUD component does not have a scaling property, so it is not possible to increase/decrease the size on mouseover (anyway, I haven't figured out how to do it yet). For the opacity, it's easier. Here is what it looks like (quick test).

Spoiler: SETUP

The component: a picture and a label, without any animation.



In the HUD Map: the animation is on the HUD component based on your custom component.

And the grouping, in this case, must also be done in the HUD. Thus, each "button/image" custom component is implemented and added individually in the HUD, which allows to manage their animation, and then grouped in the HUD to facilitate their management (movement, alignment).

Note 1: no time to test more for the moment. If you could perhaps show us your list of custom components, it might help to better understand your need and how to better organize/manage these components.

Note 2: I'm still experimenting with SRD HUD... so I haven't found all its features yet.

 

[Kurochan]

my bad for the late reply, I've been like up to my eyeballs in code for a custom plugin I needed for my game....

I actually think I'll go with that Opacity change animation instead of the height/width scaling animation. I like how that looks in your example. That will probly be way easier to do than the scaling animation anyways tbh... Thanks for your help r66r! You've been a huge help! do you think you can show me the settings you used for that opacity animation? I'm pretty sure I know how you did it but I'd like to confirm my thought with a visual to be sure... if you don't mind that is.

 

[r66r]

Of course. Here is a configuration of one of my image buttons on my current project.