4. Visual design

Activities

Introduction (15 mins)

1. Tell each team that they will begin creating the visual elements of their game.
2. Explain that visual game elements are called ‘game assets’.
   
   

   Teacher tip: A ‘game asset’ refers to a useful or valuable thing within the game.

3. Tell teams they will have to think about two types of assets: character or object sprites, and backdrops (backgrounds). Ask students what these terms might refer to in a game and write examples on the board for reference.
   
   

   Teacher tip: A ‘sprite’ refers to a two-dimensional image or animation that is integrated into a larger scene or game environment. Sprites are often used to represent characters, objects, or special effects within a game.

4. Tell each team to use the Game Planner as a reference when thinking about their game’s characters, objects and backdrops. These notes will indicate what they need to create.
5. Explain to teams that they will follow a known design-thinking routine (Tim Brown’s 3 phases of design thinking) to create the visual design of their game assets.

Phase 1 – Inspiration

1. Tell teams to have pencils and paper ready for note taking.
2. Tell teams to think of two games they know of that have visual elements that inspire them.
3. Ask teams to write down the titles of these games.
4. Discuss, as a class, what they like about the visual elements of these two games.
   • Are the visuals dark and spooky?
   • Are they cartoon-like?
   • Are they chirpy and brightly coloured?
5. Ask teams to write down one main visual element from each game that they would like to use in their design.

Teacher tip: Encourage teams to use these design ideas to guide their own designs.

Phase 2 – Brainstorming

1. Tell teams to get a new sheet of paper for this activity.
2. Ask teams to talk about ideas for the visual design of each of their game’s assets. Ideas can be articulated with drawings or text.
   • Do they want their backdrops to be bright and colourful? They will need to select which bright colours will be used for the backdrops.
   • Will the characters be all the same colour or different colours? They will need to select which colours will be used for which characters.
3. Remind teams that this brainstorming session doesn’t have to result in completed designs, but they need to generate some ideas that will guide them in the next phase (implementation).

Main Activity(40 mins)

Phase 3 – Implementation

1. Explain that there are many things to think about when designing something visual, but that, today, they will need to think about three central design elements: Scale, Contrast and Balance. Discuss the meaning of each design term and show these on the board for reference.
   • Scale: Make sure all the visual elements are the right size compared to each other. For example, it doesn’t make sense for a character to be five times bigger than the house they live in.
   • Contrast: Think about how the colours will work together. For example, the contrast should be different enough that a character will not disappear into a background.
   • Balance: The best visual designs have a balanced look about them. For example, objects are not just placed all over the screen at random, they are placed carefully so that the overall image on the screen looks good.
2. Tell teams they will now take their design brainstorms to their devices and begin to build their game assets. This will involve making visual design decisions for each game character / important element and backdrop.
3. Show teams several ways to create assets in Scratch.
   

Teacher tip: You may like to show these steps on the board or print them out for future reference.

Sprites

To modify an existing sprite, access the library of sprites that can be modified by clicking on the Sprite button:

Select a sprite and click on the Costumes tab. This is where teams can make changes to the image, including colours and sprite parts.

To create a new sprite, hover over the Sprite button then select the paintbrush icon

This paint tool allows teams to create their own character or object sprites.

To upload a sprite, hover over the Sprite button, then select the upload icon:

Teams can then select their own files stored on the device.

Backdrops

• To modify an existing backdrop, access the library of backdrops that can be modified by clicking on the Backdrop button.
  
  Select the Backdrops tab and choose a backdrop. This is where teams can make changes to the image, including changing colours and adding text.
  

  Teacher tip: If the Backdrops tab does not appear, click on the backdrop image above the Backdrop button.

• To upload a backdrop, hover over the Backdrop button, then select the upload icon . Teams can then select their own files stored on the device.
  

  Teacher tip: The Snipping Tool is an easy way to copy and paste images into the GDD when using a computer. A screenshot is easiest on a tablet.

Reflection/Sharing tasks (5 mins)

1. Ask teams to leave their game assets open on their device.
2. Ask teams to complete a ‘gallery walk’ and admire their classmates’ visual designs.
3. Discuss, as a class, any visual designs that are particularly effective.

Additional resources

• The Tutorials tab in Scratch hosts many instructional videos on the many functions within the Scratch platform.

• A series of tuition programs for students, at different levels of complexity for different levels of experience, is available for Scratch users at this website: Projects | Computer coding for kids and teens | Raspberry Pi

• Students can utilise a drawing assistance tool such as AutoDraw, found here. An introductory video to this free online tool can be found here.

• A TED talk from Tim Brown about his 3 stages of Design Thinking can be found here.