Introduce Web Navigation and Problem Solving with Design Thinking Activity
Introduce Tilemaps
Setting the Scene
Simulation
Checkpoint
Creative Time
—————————————————————————————————–
Activity 1: Design Thinking Intro
Duration: 15 minutes
Web Navigation refers to moving from website to another, especially when keeping several browser tabs open.
Ask students to recall when they use web navigation in a common task that they do online.
Problem Solving is the process you may go through while searching for the solution to a problem. It can offer an opportunity to collaborate with others and allows you to develop a deeper understanding.
Ask students to recall a time when they used problem solving skills.
Explain to students that we will explore the concept of web navigation and problem solving by participating in an online scavenger hunt.
Have students partner up in pairs
Provide each group with a piece of paper, a pencil, and a laptop/computer
Have students discover the answers to the following questions:
What color are the longest waves of light?
What kind of atmospheric particles make Mars red?
What color is the ocean on a cloudy day?
What colors are in white light?
What kinds of particles are found in Earth’s atmosphere?
If students get stuck on a question, encourage them to collaborate with another group.
Answer Key:
Red light has the longest wavelengths.
Rusted iron dust particles in its atmosphere make Mars red.
On a cloudy day, the ocean appears gray.
White light is made up of all the other colors.
Earth’s atmosphere contains nitrogen, oxygen, pollutants, and water.
Activity 2: Introducing Tilemaps
Duration: 15 minutes
Tilemaps are an easy way to design two-dimensional backgrounds for your game. Tilemaps consist of many small square tiles, which can be duplicated or arranged to create a scene.
Tilemaps help establish a customizable background for your game that the player character or other sprites can interact with.
Let’s get familiar with tilemaps by creating our first tilemap.
Find set tilemap to in Scene. Drag it onto the on start.
Click on the gray box to launch the tilemap editor
Explore the different tools in the tilemap editor
Explore the gallery of preset tiles
Design a forest themed tilemap
By default, our tilemap is set to 16×16, meaning there are 16 tiles horizontally and 16 tiles vertically – 256 tiles in total
Provide students with enough time to experiment and familiarize themselves with the different tiles
Activity 3: Setting the Scene Hands-On Simulation
Duration: 15 minutes
Let students know to follow along closely as you work with them on a new simulation
We are going to create a tilemap with a smiley face pattern, that includes custom tiles and wall tiles that the player cannot travel through
Have them open up a new MakeCode Arcade file and name it ‘Smiley Tilemap’
First we need to create our tilemap.
Find set tilemap to in Scene. Drag it onto the on start. Click on the grey box to launch the tilemap editor.
Next we will start designing our tilemap.
Select the grass tile from the Forest palette in the Gallery. With the paint bucket tool selected, fill in the entire background with grass tiles.
Next we will create a custom tile.
Select My Tiles and click on the plus icon to launch the custom tile editor. Using black and white pixels, design a spiral pattern. Click “Done” to save your work. With the custom spiral tile and the pen tool selected, draw a smiley face design on the tilemap.
Next we want to make the spiral tiles into a barrier that you cannot pass through.
Select the wall tool. Your cursor should now appear on the tilemap with a red overlay. Trace over all of the spiral tiles. Click “Done” to save your work.
We need to create a player sprite that can explore the tilemap.
Find set mySprite to in Sprites. Drag it into the on start. Open the image editor for mySprite, and select a person sprite from the gallery of preset images. Find move mySprite with buttons in Controller. Drag and drop it onto the on start. Find camera follow sprite mySprite in Scene. Drag and drop it onto the on start.
The camera follow sprite block makes the point of view of the game screen follow the sprite, which is most often the player sprite. This allows the player sprite to explore tilemaps that are bigger than the size of the game screen.
Congratulations, your game is complete!
Activity 4: Setting the Scene Checkpoint
Duration: 15 minutes
This is a perfect time for students to test their knowledge of projectile events and create an example on their own!
Student Task:
Create a new file and name it “My Home”
There is 1 player sprite that can move using keys
The camera is set to follow the player sprite
There is a 16×16 tilemap that is designed to look like a custom home, including:
Bedroom
Bathroom
Kitchen
Any bonus rooms
Rooms are separated by wall tiles that cannot be passed through by the player sprite
Students must use both custom and preset tiles
Instructors can watch the video tutorial which demonstrates how to complete the checkpoint activity
This checkpoint is more open ended, so student results may vary.
Activity 5: Creative Time
Duration: Remainder of Class Time
Once students are finished with the checkpoint activity and you review their work, give them time to pick their own themes, Sprites, and game objectives to design their own game. Encourage them to use the topic they learned in today’s class with tilemaps and find ways to incorporate it into their game.
If students are stuck on idea help them brainstorm by asking them the following questions:
What is the theme of your game?
What is the game’s objective?
What’s the main character sprite?
Where is the background set?
Are there any walls or obstacles?
Login
Accessing this course requires a login. Please enter your credentials below!