Building the Game with Button
In this post, we will teach you how to actually change the variations of your images using buttons! This is the part where we finally start "building" the game.
Adding a Button in the Library
First and foremost, you will need to add all buttons you need into the library.
❏ Uploading the Button
Go to the Library section by clicking this tab.
Next, click 'Button' to open the button page.
Start adding the button by clicking 'Add Button'.
Name your button and choose an image for the button.
Once your button is loaded, please click on it. This will open up a dialogue box.
Underneath the name input box, you'll see different types of sources. This refers to the image used when a player's mouse cursor interacts with the button. In the "design language," we call this a button's state.
❏ Adding the button's state
In the CloudAvatar engine, we mainly used three different states for a button.
- Normal or Idle
This is when the cursor is not interacting with the button.
The image you've added just now is for this state. In the dialogue box, the source for this state is known as Assets Source.
- Hover
This is when the cursor is hovering on top of the button.
The source for this state is known as a Hover Source.
- Clicked or Active or Pressed
This is when the cursor is clicking the button.
The source for this state is known as Clicked Source.
Choose a file to add a new image to the state, or paste a URL. Click Save Changes to upload the button.
If you are using Premium projects and you aren't sure if you've added an image or not, you may click Use a Web link and see if there's a URL on the URL bar of a state. If there's a URL, then it means you've added an image.
Optionally, you can add a Hover sound or Clicked sound that will play automatically when a cursor interacts with the button.
Placing the Button in the Stage
If you're done adding all the buttons you need, let's go back to the Build section.
❏ Making the Button Shows Up in the Stage
Before we do anything, please take a look at this 'Front' or 'Back' toggle placed above the stage. This toggle indicates whether you want an asset to be on top of the model or you want it to be below the model.
For a button, it is recommended to have it on top of the model so let's toggle the 'Front' option.
Then, click on 'Add Assets' to start adding the button into the stage.
Choose 'Buttons' and drag and drop your button into the stage. Doing this will not make the button appear immediately on the stage.
Enter the timeline by clicking the 'Edit Timeline' button.
In the Scene Assets panel, the button you've just added should've already been listed there. Click 'Select'.
This will open up a new set of panels on both sides of your workspace. Please take a look at the Animation and Commands panel on the right-side.
To make your button appear on the stage, you need to add a 'Show Button' animation, so let's add that by clicking on this blue button.
If the animation shows up in the timeline, it means it has been added successfully.
Click on the stage or this 'Play' button to play the animation on the timeline.
Tweaking the Appearance of the Button
You may have noticed that the button needs some tweaking for it to look good so let's fix that.
❏ Changing the Size of a Button
To change the size of the button we can scale up and down the button. To do this, look at the 'Selected Asset' panel on the left-side while still in the timeline.
You'll find there is an input box for 'Size'. This is an input box for the size scaling of an asset.
Enter a number that is bigger than 1 (eg: 1.5, 2, etc) will increase its size. Meanwhile, to decrease the size, all you have to do is enter an input number less than 1 (eg: 0.7, 0.5, etc)
❏ Moving the Position of the Button
Next, let's move the position of the button.
Click the 'Show Button' animation on the timeline to open its settings.
Pay attention to the Value and Vertical Value. This is the setting we need to change the position of an asset.
The 'Value' here refers to the value in X-axis or horizontally. We've five presets ready to use if you have a hard time finding the value yourself. You can also try the slider to move the asset in real-time.
The 'Vertical Value' refers to the value in Y-axis or vertically. Likewise, we've prepared three more presets for the vertical value that is ready to use immediately. Just like above, you can also try the slider.
Change the value of those two settings to where you desired the buttons to be placed.
Click Save Changes and play the timeline to see if it is placed properly.
Changing the Pieces' variation
Now, the button is ready. Let's start changing the pieces' variation!
❏ Assigning an Action to a Button
Before we start this, we recommend you open the Library in a new tab. You can do so by right-clicking the Library and clicking 'Open in New Tab'.
Once you do that, return to the tab with the Build section. While you're still inside a button, click 'Action' from the Animation and Commands panel.
This will open a dialogue box.
There are several action commands that you can add but among all of this please pay attention to the first row of commands. Click 'Select Piece'.
❏ Selecting Relevant Pieces for the Action
You'll see a list of all the pieces in your library. Now you need to select all the pieces related to your button.
In this example, we're planning this button to change the hairstyle so I need to select pieces that change only the hairstyle. How do we do that?
That's when having the Library in another tab can help you. Click on the tab with the Library.
Let's open the Hair pieces and find the piece that VARIES ONLY in hairstyle while in the same color. Let's try the Front Hair first.
Does the FrontHair vary in style? No.
Does the FrontHair only have the same color? No.
Clearly, the FrontHair piece isn't what we're looking for.
So, let's open the branch pieces instead. We'll start with FrontHair1.
Does the hair in FrontHair1 vary in style? Yes.
Does the hair in FrontHair1 have the same color? Yes.
So, the FrontHair1 piece is the relevant piece for the hairstyle button. Let's add this into the action before we forget about it.
Go back to the Build tab and add FrontHair1 into the command.
Do you notice that there is a plus button beside the 'Select Piece'. Does it mean that we have to add more pieces? Absolutely! Remember, we said, "you need to select ALL the pieces related to your button."
However, if you've properly followed the tips on organizing the pieces, you should've known by now that all the branch pieces in the FrontHair piece are probably the same so we can safely add all numbered FrontHair pieces into the action.
Go back to the Library to find out which pieces we should add next. Repeat the analysis by asking those questions to yourself and keep adding all relevant pieces into the Action command.
Once you've done adding all those relevant pieces, click 'Add Action' to finally add the Action animation into the timeline.
Tweaking the Animation
This is a matter of preference but we prefer to have the action animation have a short duration.
❏ Changing the Duration of an Animation
To do this, all we have to do is click the 'Action' in the timeline and change the duration here.
By default, the duration is 500. We want to shorten the animation so we will have to decrease the value. For your information, the value here is in milliseconds.
Click Save Changes to save the changes.
❏ Changing the Animation Position
Other than that, we prefer to play the shortened 'Action' animation first before the 'Show Button'. We can easily do this by dragging the 'Action' animation in front of the 'Show Button' animation in the timeline.
Repeat all of the above for another button
That's all for this post but before we move on to the next step, we're sure you'll have questions about selecting the relevant pieces since it seems to be the hardest step among all of the above.
How do you analyze pieces of another button? That's actually very easy! All you have to do is change the keyword of the question we gave you in the example.
In the example, this is the set of questions to help you choose the relevant pieces for the hairstyles button.
Does the hair in (piece's name) vary in style?
Does the hair in (piece's name) have the same color?
The first question asks for which kind of variation you want. In the example, the button is for hairstyle, thus the keyword for the first question is hair and style.
The second question is actually optional depending on the circumstances. In the example, the hair has two kinds of variation, hairstyle and hair color.
We've already asked about the first variation in the first question which left us to question the second variation, hair color. That's why the keywords for the second question are hair and color.
If you have no other variations for the piece, you only need to ask yourself one question only. For example, the skin color.
The only question you need to ask yourself when analyzing the pieces is:
Does the skin in (piece's name) vary in color?
The more variations you have, the more questions you will need to ask when analyzing. It may sound hard but you'll eventually enjoy the process!
Thus, good luck with your dress-up game! Next, we will learn how to complement your dress-up game with a nice background image and music! Please don't forget to save your changes!