Hey @gamingislove -

As I go through my UI build, I’m starting to make some progress but have a question:

I have my own Choice Input Button for use in the Battle menu of the 3D Turn Based RPG template, and using a simple gradient tween script with the goal of animating the gradient of the button - but I only want this to happen when the button is selected. So say player highlights “Magic” - the button would then tween the gradient.

I can achieve this with a Sprite Swap on the button component, but as that is, it’ll only swap the image of the button to my selected PNG - so what I really need to do is have two separate buttons, one with the tween script and own without.

So in the ORK editor, under Battle Menu, you can select to add a Custom Input Prefab for different options - but when I do this, it chops 95% of the button away. Is this the right path to achieve what I’m looking for and there is just something wrong with my button? Or should I be using Animation under the button component and have to achieve this a different way then using a tween script?

I hope this makes sense.

Thanks!
  • The custom input prefab is just replacing the default button prefab used to create your buttons.

    To use animations, the Unity UI's Button component already has options for that, change the Transition to Animation, I think this uses Mecanim animations.
    Please consider rating/reviewing my products on the Asset Store (hopefully positively), as that helps tremendously with getting found.
    If you're enjoying my products, updates and support, please consider supporting me on patreon.com!
  • @gamingislove - I think where I’m running into an issue is the script affects the button and works - but it causes all of my buttons to tween the gradient, so they all mirror what I only want to happen with the selected button. I use the Sprite Swap which helps, but you can still see the others faintly tweening as seen below. Any idea if I use the animation transition if I can even use my tween script or will I have to just animate a gradient? I read that using animator for UI is a bad practice, but not sure if it’s gospel. Video of my issue below, sure it’s fundamentals beating me up again:

    https://youtu.be/5pDzCt8d7og

    Thanks!
  • That'd depend on your script - if the script just tweens the stuff without checking if the button is actually selected, yeah, that'll cause this to happen for all buttons.

    You could e.g. make your custom button component based on Makinom's UIButtonInput component and implement your tweening there. That gives you access to checking if the button is selected or not.
    Simply use your custom version of it for your button prefab instead of the default one.
    Please consider rating/reviewing my products on the Asset Store (hopefully positively), as that helps tremendously with getting found.
    If you're enjoying my products, updates and support, please consider supporting me on patreon.com!
  • Ok cool - that’s where I was running into an issue and found stuff in the Unity manual. OnSelected is a protected class and my script wasn’t playing well with how I was deriving it. I did try using UIButton I think, but I ran into it losing its text somehow.. abilities were still working, just lost the text. Sure it’s a prefab setup issue but I was on baby duty with my newest daughter - that’s the fun of indie dev I guess. Thanks friend!
  • The UIButton component is for the ok/cancel buttons, the UIButtonInput is for choice buttons :)
    Please consider rating/reviewing my products on the Asset Store (hopefully positively), as that helps tremendously with getting found.
    If you're enjoying my products, updates and support, please consider supporting me on patreon.com!
  • @gamingislove - found my issue. I need the EventSystem to launch for my Tween setup, but I noticed under the hierarchy during gameplay, under the dontdestroy that Makinom disables mine it place of its own, causing an error as my tween system needs its EventSystem to launch. Could I tie mine into Makinom somehow?
  • Check out the settings in UI > UI System. Using the Unity UI system has options for handling the event system, either creating a default one, creating one from a prefab or not creating one at all.

    If you have an event system setup that you need, it's probably best to make a prefab out of that and use it to let ORK/Makinom create it for you.
    Please consider rating/reviewing my products on the Asset Store (hopefully positively), as that helps tremendously with getting found.
    If you're enjoying my products, updates and support, please consider supporting me on patreon.com!
  • edited June 2022
    @gamingislove — I submit, and begging for guidance here, so bare with me while I explain. Use 3D RPG Playground as the full setup here as they are identical.

    My goal is to simply make the Choice Input Button tween a gradient On Selection. So if you select Fight, Magic, Items etc in the Battle Menu, the button tweens a gradient to show its selected. I can do this with sprite swap transition for selected, highlighted etc on the button component with a gradient overlay, but it’s lifeless, just want that pulsing effect for UX.

    I downloaded a UI asset called Super UI, it’s basically a tween library that replaces the Button component with a script called UIButton that is exactly the same, but allows for a tween. It works fine in my UI Prefab scene (UI environment edit scene) - but I can’t get it to work in the Battle Menu or anywhere else. It’s like it plays ONE FRAME and pauses - so you’ll see the start color of the gradient, select Magic, and cancel back to main command and the color shifted once. I also get an error that it’s trying to destroy the tween systems event system, which is what I said before. The tween library has a script called UIMaster that needs to reference the main canvas, and I think that’s where it gets stuck as I can’t assign the Canvas Makinom creates at runtime maybe?

    Here is an example of my UI Editing Environment scene where it works, in play mode - and what the hierarchy looks like. No errors, button tweens as expected.

    image

    So the Canvas selection for Rect Transform here is the issue, im almost sure of it. The skin, ignore that, its to setup a default skin for things but has no bearing. Super UI dev is crazy helpful as well.

    image

    image

    This is how it affects my actual Battle Menu - you see it is stuck on the green beginning of the gradient tween, however if I select something, it continues 1 frame into the gradient... weird. The blue gradient is the UIButton Transition set to Sprite Swap and for now I use that instead of the gradient tween, both examples in one picture. I just want to make that blue gradient tween through itself. Maybe a material or something instead, but I can't think of a way to do that ONLY when selected. Hope this is something simple.

    image

    If that all sounds like a mess, do you have a different idea of how I can achieve this effect without going a ui tween? Just simply want the button to animate a gradient only when selected. Is this simply using the animate transition and I’m struggling to figure that out? I’ve been stuck for days on end for hours just going crazy trying to make this work. Anyone else who can guide me here to - @Scyra - maybe you?

    Thanks all!!
    Post edited by theProject on
  • I'm not the best person to ask for things script-related but I can tell you what I'd try, and maybe GiL can say whether or not it would work:

    First set things back the way they were in the video where every button was tweening. Then disable the script component on the game object. Make an Enable Component schematic that can toggle the script back on. Go to UI Boxes > General Settings > enable Cursor Over Selection. Then select your battle menu UI Box, scroll down to Schematics > Own Schematics > Input Selected Schematic (enable component).
  • edited June 2022
    ORK/Makinom allow you to use prefabs for creating a canvas, i.e. you could set up a canvas prefab with the event system referencing it as part of the prefab.
    UI > UI Layers allow you to use a prefab to create a canvas for a layer.

    So, set up a canvas prefab that's working with that special setup, use it for a layer and set the Event System in UI > UI System to None.

    Though, since I don't really know how your 3rd party UI solution here works, this might only work for one UI layer (canvas).
    Post edited by gamingislove on
    Please consider rating/reviewing my products on the Asset Store (hopefully positively), as that helps tremendously with getting found.
    If you're enjoying my products, updates and support, please consider supporting me on patreon.com!
  • Thanks @Scyra and @gamingislove - seems the issue is with Update(). As when the script calls to Play() the tween when a button is Selected (OnSelect eventdata) - it’s getting hammered through update so many times (999+ debug logs on it in seconds) that it causes it to get stuck. When the button becomes unfocused, the tween plays (when I remove any I focus functionality) - I’m going to try your workaround Scyra as it makes sense to play well with ORK, as I’m sure it’s a matter of me not bridging the two frameworks together, but maybe that will work for now.

    It’s weird - it’s like it does the complete opposite of what I’m trying to make it do. Tween on deselect and stop on select hahaha. Can’t wait to iron this one out.
  • If it works like I think, it should be the equivalent of selecting one of the cloned buttons in the hierarchy during play mode and toggling the script component checkbox. In that case the button won't stop tweening when you change selection. We can probably fix that in the schematic though.
  • edited June 2022
    @Scyra So after a lifetime of mehhh, I fixed it. Well kinda, definitely need @gamingislove to fill me on what I did hahaha - And im just baffled by how I can overthink things. So when you create a button (Makinom - UIBox - Input Button - Choice… it puts a script on as a component called UI Button Input. For some reason, with this enabled, it causes my other component which is UIButton, which is derived from the stock Button, but allows for my tweening, and to stop tween when losing focus. For some reason, the Makinom UI Button Input script caused my own tween script to update every frame (I debug.logged it and it was basically in Update()) which caused my tween to stop as it was going heywire. When I disabled the Makinom UI Button Input, like magic it took my script out of the loop and works as expected - and I still retain all the info from ORK for abilities etc. if I remove UI Button Input as a component however, I lose all the ORK status info.

    GiL - I’m sure I’m missing something elementary here with that script, and why it still works disabled. Will this hurt me running like that down the road?

    Lastly - please see it in action (sorry, too lazy for a screen grab video, iPhone will do lol) — for some reason though the very first selected button will not start to tween until I manually make the first selection with gamepad - I believe I have the auto select on in UI - UI Boxes - General. Any way to ensure it is indeed selecting it?

    I got here thinking my issue was using a gamepad as I noticed the mouse would work on hover. Man. The basics.

    *Edit - scratch the issue with first selection. Added a couple lines of code and fixed that. Good good, just need to figure out what’s up with UI Button Input

    Post edited by theProject on
  • If UIButton is derived from Unity's regular Button, you just need to replace the Button component in the ORK UI setup with it.
    I.e. remove the Button component and use your UIButton component in ORK's UI Button Input component as Button.
    Please consider rating/reviewing my products on the Asset Store (hopefully positively), as that helps tremendously with getting found.
    If you're enjoying my products, updates and support, please consider supporting me on patreon.com!
  • edited June 2022
    Hey @gamingislove - oh for sure, you can’t have both, only one or the other as Unity wouldn’t allow it (in regards to the Unity button component vs derived) as my script is indeed a derived class of it now called UI Button.

    What I’m asking about is the UI Button Input component ORK adds when you use the context menu to create a choice button. It adds several necessary components like the canvas, and the Content stuff that you can enter text codes into. I’ll snap a screenshot in a bit and post it. Just looking to see what that particular ORK component does as when enabled, it causes my script to run every frame. But if I keep it attached and simply disable it, everything works as expected. If I remove it entirely, all my button content is gone. Thanks!
    Post edited by theProject on
Sign In or Register to comment.