Kurochan

The Silver Wolf
Member
Joined
Aug 18, 2019
Messages
17
Reaction score
6
First Language
English
Primarily Uses
RMMZ
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

Fantasy dreamer... sometimes.
Veteran
Joined
Jan 5, 2020
Messages
99
Reaction score
105
First Language
French
Primarily Uses
RMMZ
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) ?

EffectOnHover.gif

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

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

Component.jpg

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

BtnImageProperties.jpg

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

WidthScaleProperty.jpg

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

Kurochan

The Silver Wolf
Member
Joined
Aug 18, 2019
Messages
17
Reaction score
6
First Language
English
Primarily Uses
RMMZ
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

The Silver Wolf
Member
Joined
Aug 18, 2019
Messages
17
Reaction score
6
First Language
English
Primarily Uses
RMMZ
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.
 
Last edited:

r66r

Fantasy dreamer... sometimes.
Veteran
Joined
Jan 5, 2020
Messages
99
Reaction score
105
First Language
French
Primarily Uses
RMMZ
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. :eswt:

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).

fkdjRjjtp1.gif

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

HUD_Maker_Ultra_Pro_VgmqNXoms6.png

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

o0gotTyVpT.png

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.
:ewink:
 
Last edited:

Kurochan

The Silver Wolf
Member
Joined
Aug 18, 2019
Messages
17
Reaction score
6
First Language
English
Primarily Uses
RMMZ
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

Fantasy dreamer... sometimes.
Veteran
Joined
Jan 5, 2020
Messages
99
Reaction score
105
First Language
French
Primarily Uses
RMMZ
Of course. Here is a configuration of one of my image buttons on my current project.

Settings.jpg
 

Latest Threads

Latest Posts

Latest Profile Posts

So the Fire alarm went off 3 times in less then a half hour on my building. But my cat is so use to it going off he doesn't even run behind the couch anymore. He is just like, "This again?"
It has been brought to my attention that the name of my main robot protagonist in bio-Synthetica (R3-M1) is a Star Wars character LOL Woops. Always Google search names. The new name of my robot is now K0-R1. :kaophew:
I'm considering making my own battlers from scratch, it seems like a daunting task, but I like the look of it so much...A_Miriam3.png
I picked up running again after a long time and managed to get from 2.25km to 7km in two weeks :3 Time to get rid of those covid kilos!
Have you ever wondered what the lives of the NPC's are like in your hero's story? Come an find out with us as we play, "A Story Beside" by Wayward Prophet :LZSexcite:

Forum statistics

Threads
122,095
Messages
1,146,467
Members
160,385
Latest member
ryuinw123
Top