type4101

I'm struggling with UI! What I aim to do is make a horizontal layout of icon buttons that, when clicked, start a building-placement mechanic (like a real-time strategy game). Each icon button represents a different building (e.g. castle, barracks, tower).

I've read the UI sections of ORK3 and Makinom2 guides, but still don't understand how to make a layout of icon buttons that do stuff when clicked. I don't even really know the difference between a UI box and a HUD, and which to use as the starting point for the prefab. They both seem to have some button functionality, but each seems to have something I want. Like, the Control HUD section has options for selecting a layout, but the UI box doesn't. But the UI box "choice button" option comes with the "button" component on it, which has the "On Click ()" function, that the HUD doesn't.

The button's "On Click ()" tool-tip says it fires an event when the mouse button is released while hovering over the UI button, but will not fire if you drag your cursor off of the UI element. That is exactly what I want for those buttons. Also, I wouldn't mind being able to change a variable or fire a schematic when I mouse over the icon button, before pressing the mouse button. There seems to be options in various places for firing schematics when a UI box or HUD is "focused"....is that the same as "highlighted" in the button component, like on mouse-over? What's the difference between highlighted and focused?

I know from my searches that the On Click () button function uses an "animation" machine to work, but I can't find the specific tutorial that covers it in detail, and the short explanation in the guide isn't detailed enough for my non-coder brain to use. Yet I have a specific memory of reading (likely a forum post) the exact details of using a schematic in the On Click () list, but I can't find it. I remember it had a warning not to type spaces in some part of the process. What do I put in the empty object field.....a schematic, an empty game object with the animation machine attached, something else? And where is the "AnimationMachineComponent > UIGameObject (GameObject) function" mentioned in the Guide? I'm lost.

So first, do I pick "HUD Control" or "UI Box Choice Button" from the Makinom/ORK context menu, to start making the icon button prefabs? Then how do I make things happen on mouse-over? Then, how do I make things happen on-click, either with the button "On Click ()" option, or a Makinom-equivalent? If anyone could give me a "for dummies" walkthrough of this, I would be obliged.

The idea would be that when I hover the mouse over an icon-button, a global int variable (lets say "buildingID") would change to reflect the building type represented by the button. If hovering over castle button, buildingID=0 (if tower buildingID = 1, etc.). I could maybe use object variables on each button prefab (can object variables be used on UI elements?) to identify the building. Then, when the button is clicked, another schematic starts which uses the buildingID to determine which building to use and starts the placement process.

Yikes....any help is appreciated!

Night

Wall of text ^^!

type4101 said: I don't even really know the difference between a UI box and a HUD

- UI box used for everything that you interact with and show a Dialog box then use the "Show dialog" node and the "Choice" option to do everything you want.
- HUD on the other hand just show you the information you want it to show on the UI (e.g: Health bar, Any kind of Variable, Navigation bar,....) without clicking anything on the UI.

type4101 said: the Control HUD section has options for selecting a layout, but the UI box doesn't

This is because the UI box is like a whole set of a UI not like individual information like HUD so you can layout it whatever you want.

type4101 said: But the UI box "choice button" option comes with the "button" component on it, which has the "On Click ()" function, that the HUD doesn't.

You, of course, can also use that with AnimationMachineComponent but it is not ideal for Makinom UI. Instead, use the "Show dialog" node and use the "Choice" setting like I said to use that function.

type4101 said: The button's "On Click ()" tool-tip says it fires an event when the mouse button is released while hovering over the UI button, but will not fire if you drag your cursor off of the UI element.

That is how Unity Button works, you just have to accept it and work the other way around.

type4101 said: That is exactly what I want for those buttons

If you want you can use the new drop setting in Makinom editor for that, but it only works with InteractionMachine with "Drop" checked.

type4101 said: Also, I wouldn't mind being able to change a variable or fire a schematic when I mouse over the icon button, before pressing the mouse button

You don't need to do that complicated stuff, when you click on the button just make sure you use the "Change variable" node before you do something then it will happen before that, no need to change the variable when hovering the mouse on the UI first then click and do something.

type4101 said: There seems to be options in various places for firing schematics when a UI box or HUD is "focused"

Where you see that option, I had been using Makinom 1 when is not using Unity UI to Makinom 2 when GIL change to Unity UI, and I still don't even see that "Start schematic when focused" can you screenshot for me?

type4101 said: is that the same as "highlighted" in the button component, like on mouse-over?

Even though I don't see that option but I can be sure you that it isn't.

type4101 said: What's the difference between highlighted and focused?

Highlighted in the Button component will change color or Sprite when your mouse over the button. Focused is like selected when you click on the button and then release.

type4101 said: I know from my searches that the On Click () button function uses an "animation" machine to work, but I can't find the specific tutorial that covers it in detail

http://makinom.com/guide/documentation/machines/animation-machine/
GIL doesn't have time to make a detailed tutorial for Makinom he is focusing on ORK 3 tutorial right now. But I don't blame him this document is detailed enough for me to work with without the example machine.

type4101 said: I remember it had a warning not to type spaces in some part of the process

Hmm, you must remember about not putting a space in a variable. That is the thing in the past.

type4101 said: What do I put in the empty object field.....a schematic, an empty game object with the animation machine attached, something else?

It doesn't matter what you put in but what matters is that it needs to have AnimationMachineComponent on it so you can call it function.
Also, to call an Animation machine you can use any kind of Unity Event (e.g Button OnClick() function, Toggle OnValueChange() or Script with UnityEvent on it,..."
1. Click on the "+"


2. Drag and drop the AnimationMachineComponent into that Event.

3. Check what kind of Start Condition you want to use, I use the "AnimationEvent" condition for the common things.

4. Then click on "No Function" to show this.

5. Then you are done. You can call what kind of Schematic you want to call.

type4101 said: And where is the "AnimationMachineComponent > UIGameObject (GameObject) function" mentioned in the Guide? I'm lost.

Is all in the UnityEvent list of AnimationMachineComponent Function from step 4.

type4101 said: So first, do I pick "HUD Control" or "UI Box Choice Button" from the Makinom/ORK context menu, to start making the icon button prefabs? Then how do I make things happen on mouse-over? Then, how do I make things happen on-click, either with the button "On Click ()" option, or a Makinom-equivalent? If anyone could give me a "for dummies" walkthrough of this, I would be obliged.

If you want a button with Image on it then you need to make a "Choice Button" from UI Box>Input.
To recap from the beginning if you want to do something with your button use UI Box for that, unless you want to control input then use HUD for that.
Then make a schematic that uses the "Show dialog" node with "choice" dialog type then you can use the Choice option to change the text or image of that button then after that Choice you just connect it with whatever you want it to do when you play and click on that choice.

If you are confused somewhere just ask I'm happy to help.

gamingislove

A very easy way to start schematics via clicks on a HUD is the HUD Click component. This can use a wide variety of things, including starting a schematic.
I.e. you can set up HUD, add your icons/buttons each via their own game object and a HUD Click component starting the schematic you want.

Or, if you want to incorporate all of that into ORK's abilities/items - you can use your building stuff as an ability (or item) and use a shortcuts HUD to display and use them.

type4101

You must have a closet full of capes, Night. Because you're a straight-up hero (and you too, GiL, as always). This will certainly help me understand things better. I'm sure I misunderstand the feature, but the focus-over option I was referring to is under the schematics section of the UI Box section (selecting "own schematics"):

https://gyazo.com/72fd8ede3d6dae4e089c15a30bb1eac9

gamingislove

Focus gained/lost schematics for UI boxes are used in case you want to do some animations in those cases.

Only one UI box is focused at a time.
E.g. in an equipment menu, either the equipment slot part or the equipment selection is focused and you can use schematics to do some animations, change color, scale, etc. if you want - just like using schematics to fade/move in/out the UI box.

type4101

To clarify regarding firing a schematic when the mouse is released over the icon button (but canceled if the cursor is dragged away): is the unity Button component the way to do that, or does Makinom allow that kind of mouse selection (vs. launching when the mouse button is clicked down)? Does Makinom use the unity button component itself (like when doing color changes) or does Makinom have its own ways of doing mouse-over effects?

Night

gamingislove said: A very easy way to start schematics via clicks on a HUD is the HUD Click component. This can use a wide variety of things, including starting a schematic.
I.e. you can set up HUD, add your icons/buttons each via their own game object and a HUD Click component starting the schematic you want.

@gamingislove Wow! How many things you're hiding in the Component because you should show it in the Scene Wizzard. :)
Still, I don't know how to use it properly, just quickly try it but it does not toggle the HUD easily just to drag HUD for the handle and choice a HUD to toggle, seen like it needs some more setup.

type4101 said: https://gyazo.com/72fd8ede3d6dae4e089c15a30bb1eac9

Oh! I'm still not using that new option so that's why I'm not seeing it ^^!

gamingislove said: Focus gained/lost schematics for UI boxes are used in case you want to do some animations in those cases.

So I can use this to close the UI Box when I click on somewhere else right?

type4101 said: does Makinom have its own ways of doing mouse-over effects?

Makinom does have it own way to handle mouseover effect for image but you can't do any custom stuff with it.
For mouseover to do custom stuff on UI, there are only on InteractionMachine that I know off but it can't be used on UI, I try using both 3D,2D Collider on UI but it seems the ray-cast doesn't reach it on ScreenSpace.
So I use Lean GUI asset for that mouse over UI to do custom stuff. :)

type4101

Night said: If you are confused somewhere just ask I'm happy to help.

I could use a bit more help. I took your advice to use a choice button, and finally figured out my earlier trouble (I was adding control UI game objects from the menu, assuming they had all the needed components, not realizing I had to add the UI Box object separately). Now I have a button that can fire a machine when clicked. But I have two issues:

1) In my prefab, I have an image icon over the 9-sliced button, like this:

https://gyazo.com/42cfaf7395436efe91767122e18fe44e

But in play mode, the icon disappears, and the source image says "none." Do you know what might cause this?

https://gyazo.com/72894c7e11cdd8329a6d3e9b2cfffc50

2) Edit: A second issue is how to prevent the dialogue from automatically closing when accepted (the close all dialogues option is unchecked, but it still closes)?

gamingislove

1) If it's a fixed image that shouldn't change by the displayed content, make sure the Image component isn't used in any of the UI Content components to display content.
E.g. a button input created via the context menu will automatically have the added image/text set up for that.

2) A dialogue will close when it's accepted.
You could instead set it up as a HUD, where you can also just add a button that fires machines.

type4101

gamingislove said: make sure the Image component isn't used in any of the UI Content

That was it. I had the image assigned to the "sprite" field. I admit, I don't understand most of the new UI system (I miss old ORK2 WYSIWYG!). Getting close to a working button, though!

Another question: Can a UI Box/HUD Button use object variables, for example in the schematic fired from the button (e.g. "accept" for choices, or the HUD click component)?

Specifically, I would have several buttons that place different objects in the world (e.g. buildings). So when clicked, each button would set a global variable (like an index number) to identify which building is actively being built, then activate a game object that handles the rest. I could make a schematic for each button, but it makes sense to just have one schematic handle this for all buttons. So I figured I could have object variables on each UI button gameobject, that contains the building ID number, so when I click on the button, it sets the global variable equal to the button's object ID.

I tried by adding an object variables component to the button, adding a name (string) variable, and ID number (int) variable. I set the initial ID to 1, and the name to "Keep" to test it, and added a "print to console" node to the schematic that is launched when I accept the dialogue. I set the variable origin for the text codes to "object" and added the variables to the text to be printed. I tried selecting both machine object and starting object (I often can't tell what exactly a starting object is vs. a machine object, so I usually try both) as the source of the object variables, but the schematic didn't print the variables in either case.

What might I do to handle this?

gamingislove

Hm, you could instead use an Animation Machine component, the Animation Event start types will pass on their value as a local variable parameter.
They can be used by UI component's event handlers to call the function with a parameter you define.

type4101

gamingislove said: They can be used by UI component's event handlers to call the function with a parameter you define.

I'm not quite sure how to do this. I can fire a machine through the On Click () event using an Animation Machine's regular Animation Event () start type. But I don't understand the parameter version. So if I have two different UI buttons, I put an Animation Machine on each, and set the start type to Animation Event (int). Both machines fire the same schematic. Then in each button's On Click () Event, I chose for the function AnimationEventInt (Int). This opens a field in the Event that allows me to enter an integer. So I enter different integers in each button's event (lets say, 1 and 2). How do I use those integers in the schematic? When I click the button in play mode, I get a null reference error regarding the parameter, and the schematic doesn't fire.

gamingislove

In the schematic you can e.g. use a Check Variables node to check the local int variable parameter for the value.

Which Makinom version is in your project? Last ORK update included Makinom 2.3.0 which fixed an issue that sounds like this.

type4101

My Makinom is the version (2.3.0) that comes with ORK3 (3.2.0). Unity version is 2020.3.31. So I think the setup should be correct. Here is a screenshot of the button during play mode. It is set up as a HUD, but uses the button component's On Click event (rather than the Makinom click HUD option) which can be seen in the upper-right. The integer is set to 33. There is a schematic in the animation machine, which is supposed to just print the local integer variable called parameter to the console. So when clicked, the console should display the variable as 33. But I get an null reference error.



Here is the schematic:


Any idea where I may be going wrong?

gamingislove

Hm, seems to be a bug, will be fixed in the next update.

Ricardo2001zg

Hello, Is there a way to close the shop in the store using a button? In the default closing method, it can only be handled through the buy/sell box or when sold out. I need a button that can close the shop.

I tried to set up a button on the shop page, which would execute a schematic with a 'Close Shop' node. However, after execution, the 'In Shop' status in the game still shows as "True", and I cannot reopen the shop.