Custom Main Menu in Stingray

By
-
Login to Follow
-
Industry
  • Design Visualization
Subject
  • UI
  • 1.2
Products
  • Stingray
Skill Level
  • Beginner
Duration
25 min

Before changing any visual in your scene, make sure the main menu you have now loads the correct scene. In the Asset Browser, go to script/lua and double-click the project file to open it in the Script Editor. You want to make sure Project.level_names directs to the right scene. Change the path of basic to the scene you want to load and close the Script Editor.


Now that the programming part is out of the way, let’s start by establishing your main menu’s 3D background. Yes, you could simply skip this part and cover the whole viewport with a 2D background, but why not benefit from Stingray since you can use it to create an atmosphere that looks like the rest of your 3D project.This main menu scene is a very simple level, with a basic composition where a camera will be spawned at a position of (0, 0, 0) and a rotation of (0, 0, 0). To help me create my own composition, I took the liberty of creating a camera with those coordinates so I can easily edit my menu’s in-game frame.


Fast forward to when you are done with your scene. When you Run Project, the user interface (UI) will most likely not fit well with your new composition, depending on if you took into account button placement. If you did, you are smarter than me because my project’s title is barely readable!

?

?


It’s time to fit the 2D UI to your new 3D background. Go to contentt/ui/ and open the folder containing your main menu UI. If your project is based on a basic template, this folder is called simple_menu.s2d. Inside, double-click on the S2DPROJ file to launch Scaleform Studio.

In your main_menu scene, you can move elements without fear of breaking any functionnality. While working in Scaleform, the most important thing to remember is that most links between the UI and the rest of the project are made by referencing your layer names. You can add new frames to your timeline or add 2D graphics on top and behind, but don’t change the name of existing elements unless you feel confident enough to change their references in the scripts they are called in.


To showcase a transformation you might want to do, I added a small fade-in to the elements on screen. When adding a fade-in it is important to make sure that all layers have frames (even empty ones) for the animation’s duration.


A crucial part of the UI is its buttons. Scaleform comes with different interaction templates like buttons and sliders called widgets. These can be used to create buttons more easily when starting from nothing. Fortunately, simple_menu already comes with two buttons that, for the sake of this tutorial, we will simply customize to fit our needs.

Double-click main to enter inside the layer. Everything inside the main layer acts like a group and will be animated identically depending on the transformation you’ve applied to the layer. Similarly, the layers start and quit each have their own elements inside enabling them to act as buttons. Double-click on start and let’s customize these elements.

The button is programmed to be in 4 states, with each start indicated by the small green markers above the timeline. You can specify how a button will look while normal, when you mouse over it, as well as when it is pressed or even disabled. I changed the button’s label to PBR Rendering, because the start button will open a scene I created related to that subject. I also added a cyan tint to my button for when it is pressed. Be sure to reposition the start of each state if you add more frames to a transition.


To distance ourselves from the look of the simple_menu, let’s change the font of our title and buttons. In true Autodesk fashion, I’ll be using our company’s proprietary font but I encourage you to use any font you think fitting. All you need to do to import your own font in the project is make sure it is in TTF file format (OTF and other formats won’t show inside Scaleform Studio) and drop it anywhere in your Scaleform Project; I recommend using the Fonts folder though!


Knowing these very simple concepts of changing elements and adding more complex transitions to the already established simple_menu, gives you the ability to create a menu that fits your personal style without any advanced programming knowledge. My parting tip is to remember to test your design along the way by saving the project in Scaleform Studio and clicking Run Project in the Stingray Editor.

Posted By
Tags
  • Stingray
  • UI
  • 1.2
1 Comment
To post a comment please login or register
| 1 year ago
Hi, I would like to know if it is possible to create a Main Menu option (Using VR template, the OculusRift with the xbox control) at the beginning of "running the project", so you can select to which level you want to go, in case this is possible how to do it? Also I want to know if it is possible to include a video inside the project (as a level) I already create the 4 buttons in Scaleform that I like to display (each one to a different level in the project), the tutorials I saw on you tube (https://www.youtube.com/watch?v=9_5WFAyP33o&t=11s&list=PL_6ApchKwjN9mPXtRhL5za_KINjqbWaGV&index=21) gave me some help but I can't make it work. Once I press "Test Level" the screen don't display the MainMenu I already create. Thanks a lot
*Save $66 per month on Autodesk's Suggested Retail Price (SRP) when purchasing 1 year term 3ds Max or Maya subscription.