Cocos Creator Mind Your Step 3D Game Tutorial
Creating the Game Menu
We will now create a simple menu with a background and play button. To do this first we can create a button. Right-Click in the Node hierachy->Create->UI Component->Button. Name the button as "PlayButton".
Dont worry that it creates other things such as a Canvas Node, this is normal for UI Components. One of the nodes it will have is a Label.
So open the Button Node and click on the Label. Then go to the inspector panel and look for the String. Change it from button to Play. This will change the text that appears on the button.
Now right click the empty space in the node hierarchy-> Create->Empty Node. This empty node should be named "StartMenu". Drag the PlayButton from where it is and drop it on top of the StartMenu. This will make the PlayButton a child of the StartMenu and the StartMenu is a child of the Canvas. You shoudld then click on the 3D button to change to 2D view. Check the screenshot below and see that your Canvas, StartMenu and PlayButton are done correctly.
If everything is as expected, right-click on the StartMenu->Create->2D Object->Sprite. Name the Sprite as "BG". This is just a shortcut for Background and we will use the Sprite node to create the background for the menu.
Click on the BG node we have created and go to the inspector. Check for the ContentSize. We want it to be larger than it is so change the size to 300 on both the X and Y axes. I first tried 200 as is shown in the screenshot but this was too small so I increased it to 300. Then go to the Assets section on the left and open the internals folder. This has some default assets that we can use so we will choose a white background image from here. Open "default_ui" and see if you can find "default_sprite_splash" which is simply a white image. While BG is selected, quickly drag the "default_sprite_splash" image to the sprite frame section of the inspector for BG. This will change the image shown on BG. A white background should now show.
Now lets put some text on the menu, to do this first right click the StartMenu->Create->2D Object->Label. Click on the newly created label and adjust the color and String especially but you can change other text properties such as the font size, line height, and others if you wish. Make the string have the value of "Mind Your Step" or whatever you want to name this game :D. You can move this around slightly by dragging them to make them sit well. The Screenshot below shows how mine looks.
Create two more labels using the same process. Name the first one Tips and the second one Tips2. In the first label named Tip, change the value of the String in the inspector to "Mouse Left Click: Jump One Step" and the second label named Tip2 to "Mouse Right Click: Jump Two Steps". You can reduce the font sizes of both to 15 or smaller so that the text is smaller than the title.
For now, our menu will not work, so the next section will look at Game States we can create to switch between the menu and the play.