Want to add some attitude and personality into your characters? You can do that by changing their "costumes." Many characters on Elementari have multiple facial expressions or even different poses for you to choose from. Learn how to change the facial expression of your character when he is clicked!

costume layout

Here I have chosen a pirate looking character on a beach

Create Your Layout

First create your layout for the page. Include a character that is part of a "Collection." This mean that there are multiple images of different variations of this character.

Select The Costumes

When you click on the image, the image toolbar should appear. Here you can find the button "Costumes." Click on it to show a popover of all the different alternative images of this character. Select the one you want to show when you click on the character.

costumes

I selected the grumpy expression of the pirate.

Code the Event

Switch to the "Event Graph" to begin coding the event. The function we will is called "Set Object Attribute." An attribute is a property or characteristic of the object. When you connect an image to this function, the attributes you can select from include: flip horizontally, flip vertically, height, width, opacity, shadow, and source image. 

Select the attribute "source image." Double click the drop down for "value." Here you will find the list of costumes you selected on the layout page along with the original image. Since I selected one costume, the dropdown will have 2 choices. Choose the image you want to switch to.

Don't forget to connect the event block "On Click" to the object and the function. Below is an example of how it should look.

costume event

Code Logic: When the character is clicked, change the costume to the grumpy expression. 

Preview!

To check that your code works, always preview the page. Try clicking on the character. Does it switch costumes? If yes, then congratulations! You have just learned a how to change costumes. 

If the costume does not change, then double check that the Set Object Attribute value is correct and that all the blocks are connected properly.

Recap

1) Select your costumes on the layout side first

2) Use the Set Object Attribute Function

3) Check that the value you select is the right one

Pro Tips

You can cascade this function to bring a more natural feeling to the dialogue. For example, when you change the text, you can also change the costume of the character. 

cascading costume

A more complex example. Check out our Youtube videos for more examples like this.