Thank you! Of course, I’m happy to help. Just let me know what part you are struggling with or that doesn’t look correct and which engine you are using. It should work out of the box pretty much and can be nine-sliced.
Of course! Thank you. I am running Unity 2022.3.4, and for example I have the image files like in the main menu picture that I'll redesign for my game but not sure how to set up the menu buttons to display like in the picture. I think if I can get this working then I should be able to use the other image graphics :)
Cool. Ok, I am assuming you are referring to the buttons in the first preview (the “Main Menu” one), right?
For this, you can use the following two files:
- Buttons/Blue/ButtonDigital_Highlighted.png
- Buttons/Blue/ButtonDigital_Press.png
The second one is an animation and you can slice it into 4 multiple sprites and create three animations for your single button:
- Unpressed - In this case, it is just an empty animation with no sprite.
- Press - This animation will be all 4 frames, at a relatively fast frame rate that plays once and doesn’t loop
- Pressed - This is the state that it goes to after you play the “Press” animation, and it is basically the 4th frame or the Highlighted.png file mentioned in the previous step.
You can then create a button component that uses the sprites as the background and the text over it. Note that in the example, by default the text is blue, but during the Press animation, because the button background changes to blue, the text changes to black. This can also be done in the animator as a separate keyframe.
Then, in Unity, you play the animation based on whether a mouse is over or pressed and play the Press animation into the Pressed animation.
I hope this is detailed enough to be useful. Let me know if this makes sense or if I can help in any other way.