Printable version

This version is formatted for printing or saving as a PDF.

Costume designer

A dancing character in a halloween costume.
Level 1
15 mins

Goal 🎯

Design a costume for a character to change into when clicked.

Personalise your world

  • On the sky block click on the colours and choose colours for your sky.
  • On the map block click the ‘Flat’ dropdown and choose a map terrain from the list.
  • On the map block click ‘material’ dropdown and choose a material for your map.
  • On the map block click the colour block and choose a colour for your map.
Arrows point to the relevant code blocks to change that are explained in the text. This world uses purple and a green brick floor.

Design your character

  • Design your character in their everyday clothes. This will be the starting outfit for your character.
  • Choose a character from the ‘add character’ block.
  • Choose colours for your character.
Arrows point to the character choice section of the add character block and the colours. This character has a blue top and pink trouser.

Add the ‘when clicked’ block

  • From Events, drag the ‘when clicked’ block into the code area.
  • Tip: Check that the block has uses the same name as your character. If not, select it from the dropdown.
The when clicked block is in the code area with the character names highlighted to show that you must check these match in your code.

Add the ‘color to’ block

  • From Materials, drag the ‘color to’ block inside the ‘when clicked’ block.
  • Click the little plus + sign on the list of colours until you have six colours.

Choose costume colours

  • Choose costume colours for your character to wear.
  • Press Play ▶️.
  • Click (or tap) the character to see costume change.
  • Keep trying different colours until you are happy with your costume.
  • Tip: The order of the list of colours matches the order on the add character block.
Arrows show that the first colour is hair, the 2nd is skin, the 3rd is eyes, the fourth is t-shirt, the fifth is shorts and the sixth is detail.

Switch animation

  • From Animate, drag the ‘switch animation’ block under the ‘color to’ block inside the ‘when clicked’ event.
  • Choose an animation to switch to when your character is clicked.
  • Perhaps they should dance?
  • Press Play ▶️ and click or tap your character to test.
The switch animation block has been added and set to dance3.

Take it further

  • Give your character a different animation at the start.
  • Try different costumes and animations until you are happy with your design.
  • Try a different sky and map for a different feel.

Idea gallery

This project is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Flock XR® and the Flock XR purple bird are trademarks registered to Flip Computing Ltd.