I need some help. I was wondering if uts possible to have a menus similiar to rpg games (attack, defense, skills, spells, etc), and by tapping one button, a button list appears where if you tap one of the buttons and event occurs.
Additonally, is it possible to make the list have more or less buttons depending on certain variables? (For example, you have a spell scroll in your inventory, the spell button appears on the list, but if you dont have it, its not)
Hello
Okay so let me put it step by step
1: Make a button to open the button list.
2: Now add all the buttons (I mean add every button in your project and give them tween behavior)
3: Now make an event so when your (Main button is clicked) a tween is played and all buttons slide in the direction you want.
Thank you! Ill check it out
Sorry if your busy but im wondering something.
If i make the buttons, how can i do it so the buttons/icons dont leave gaps if they are not there?
Im going to make it so the buttons only appear under certain conditions, so im wondering if i can make it so a button appears when the condition is met and not an exact/set order (think of a spell/spell list. If you dont know the spell, the spell wont appear in the list. If you unlearn it, it will leave, but it wont leave a gap between the list. Also, if you re learn the spell, the button does not appear where it was, instead a new button is added on the list for the spell/skill)
I dont mind if i do have to leave the gaps and make the buttons have a set order or pattern, but i think it would make the list better that way
My 1st idea would be to have some order in which icons are added
Not like all spell icons should have number 1 2 3 4 5…
But if a spell is added it’s icon is 1 another spell is added it’s icon is 2 and so go on
Then depending on number of icons you would do that kind of formula
42*GlobalVariable(GiveHeartID)
Where 42 is number of pixels it will increase and GiveHeartID goes from 1 2 3 4 5…
For you it would be GiveIocnID
And result
Press Z then try X and C
Here’s one way to make the slider. It needs some tweaking and some safeguards.
Add the name of the buttons into an array.
Create the buttons spaced out below the open button like a drawer
stick them to a “mover” object with the sticker behavior and hide them.
The mover object is used to move them in/out together.
tween the mover object up
show the buttons when their bounding box top is <= the button’s bounding box top
Then to close, tween the mover object down, deleting the buttons as they go behind the open button.
try me: The toggle buttons on the right use an id variable to either add or remove the button name from the buttonList array. An alternative would be to leave the buttons in the array and toggle the Boolean variable. As is, the buttons get placed in the order they’re added.
source:
Alternative to showing, hiding or deleting the buttons would be to use a mask but I wanted to keep it simple.
(Not my assets btw, i will give credit when needed)
So, this is what i have planned for the ui. There is the basic attack button (that can change depending on some variables of the selected character), the block button, and the 4 skill(meele, magic, support, and ranged) menu buttons. This isnt the final set up tho.
Each button has a list of specific buttons that can stack (as in, to use the fire spell, you must tap the magic button and scroll the buttons to find said button, or if you wish to heal someone, tap the support button to find the heal spell button)
What im trying to do is that when tapping on of the skill menu buttons, a additional button list will appear on top of the 4 skill category buttons. Basically, so it work on mobile, what im trying to do is the buttons rotate over the others, and using the stacking extension, im gonna try to make it so when rotating, the buttons de stack but at the end they start stacking again, and if done in reverse it will be that they will stack back in the beginning.
the way to do so is to touch a button, as in order to use a skill you must confirm with another button. As in, there will be no need to hold a button as the skill/event wont trigger by a tab
I know im sounding super complicated, i just dont know how to properly explain in words. The best and nearest example i can give is the persona 3 revolver ui, and even then, its not exactly what im going for
ok. I think I understand. It’s tough to have to plan for any device or at least a small device.
Questions:
Do the 4 colored buttons appear where they are or do they rotate out or maybe tween from the large button?
One method might be when the sword or shield is clicked the other colored buttons become visible. Then when one of the colored buttons get clicked, they would replace or appear over the sword icon and the shield would become a back button. The colored buttons would be replaced with the appropriate icons for that category.
Another choice would be the selected colored button would move into the first or last position and the new buttons could replace the other colored buttons.
Here’s what I came up with for the spinning movement. click open and then press or click and drag.
source:
The “mainButtons” are all on the scene. They could be added at runtime. I just wanted to keep it simple.
I am sorry i am replying really late…
And if i can understand this part ( If i make the buttons, how can i do it so the buttons/icons dont leave gaps if they are not there?)
you mean you don’t want to leave empty space/gaps on the main screen area (if that is what you mean)
Then what you can do is put the buttons on a new layer and place those buttons outside the screen border area and tween them so when you press the button it moves the X and Y coordinates you want.
About the certain condition thing what you can do is give the buttons variables and set them so when a certain condition is met (so like if i have collected 20 items or learned a spell the variable for button changes from 0 to 1 and when the button variable is 1 it activates the button behavior)
about the order i am not really sure about that
You have the idea, in fact, that example is exactly what im trying to do! but im gonna execute it a bit differently. Ill put up a few image edits to explain
The red lines will be the new buttons that will apear if you touch one of the 4 skill buttons. These new buttons will be the ones that rotate. That is basically what your example did and i thank you for showing me how! (Btw, there will be a back and confirm button, but the basic attack and guard buttons will change to other things!)
What i meant by the stacking is that since this game will have infinite skill learning (as in, you can learn skills as long as you have the needed requirements. Also, im not a fan of strategy rpgs that limit how many skills you can use at the same time) , so that every button can fit on screen, ill make it so the buttons have a stacking mechanic when rotating:
The yellow dots are where the stacks start and end. The lower one is the start is the starting stack, and the upper one is the ending stack. Between the two dots, the buttons will rotate, but instead so there is no button limit, instead of being a limited amount of buttons, there are infinite buttons. BUT, in order for this to work, the buttons will stack with each other when reaching the area where the two yellow dots are. Moving them upwards will make them stack at the end, and moving them in reverse will make them stack at the beginning. Hence why im trying to also make sure that buttons don’t have a set order. So there are no gaps between the buttons and buttons can appear at random order and not leave gaps between. I can explain this part much better if needed
By gaps i mean i dont wanna leave spaces between the buttons if i dont have the skill/spell learned.
As in, when i make the button list apoear, if you have fire 1 but not fire 2 but you also actually have fire 3, the fire 1 and fire 3 buttons are next to eachother and scroll in that order. Additionally, if you do learn fire 2 later, it will appear next to fire 3
What im trying to avoid is that because i didnt learn fire 2, between the fire 1 and fire 3 buttons, there us an empty space where the fire 2 button “should be”.
I hope this explanation works better.
I think I understand. I had already switched over to using an array. It uses the names in the array with an object group named group which has 3 sprites named red, green and blue. I don’t have any more time at the moment but this should help. There’s an issue with it when it goes beyond a certain angle bc things loop around. I added mod() to try to normalize the numbers but there’s the who 0 to 360 system. Instead of min() max() maybe it needs a simpler less than and greater than to lock it in.
Most of the code is the same. I put color objects into a group then changed the object name to group and for each object to for each child
try me:
defintly need to figuire out how to prevent all of the buttons from stacking. No time. got to go.
Thank you! Ill experiment with this a but and ill write back when i notice something!
Im gonna try to make it so instead of two stacks there is only one stack so it fully spins back to the initial stack, si that there isn’t two stacks instead since i think it would be easier this way
This project is all yours. Design it to your hearts content. I’ll help you if I can. Have fun.
