Programming 301 Lesson Plan
Lesson: Parallax Scrolling
Time: 60+ mins
IntroductionLet’s layer up! In this lesson, students will learn how to create a scrolling background using layering techniques! Coding concepts from this lesson include: Layers, Parallax Scrolling, and Change X/Y By..
New Code Blocks
: Set the visual layer/rendering layer to a specific number for the Actor. Note: The higher the value, the further in front the Actor is placed.
- Parallax scrolling: When distant Actors (including backgrounds) move slower than closer Actors, which creates a depth effect.
- Use code blocks to layer Actors and program a scrolling parallax background effect
- Use code blocks to solve a puzzle module
- Create a multi-level game
- Computers, laptops, or mobile devices (1 per student) with student account access to Tynker.com
Warm-Up (15 minutes)
- Tell your students that they are going to use layering techniques today using Tynker.
- Gather three different-colored pieces of paper, layer them, and show them to your students. Explain that they can think of layers in Tynker as these pieces of paper stacked on top of each other.
- While providing a visual with the colored pieces of paper, ask students these questions:
- If an entire piece of paper is completely visible, is there a layer in front of it? (Answer: No.)
- If there is a piece of paper that is not visible, is there a layer in front of it? (Answer: Yes.)
- How can we rearrange the three pieces of paper to make it look like one piece of paper is layered between the other two pieces of paper? Who can describe the layering position for each piece of paper?
- Are there any questions you or someone you know might have about layering?
Activities (45 minutes)Facilitate as students complete all Parallax Scrolling modules on their own:
1. Concepts (Video)
- Dan, the dragon rider, introduces three coding concepts:
- Layers- Layers are used to make objects appear in front of or behind other objects. If an object’s layer is greater than another object’s layer, it will be in front of the other object.
- Parallax Scrolling- Students will watch a short video on how to add a parallax effect.
- Change X/Y By- Students will watch interactive examples of “change X/Y by” code blocks.
- In this DIY (do-it-yourself) project, students will follow step-by-step directions to make the dragon appear to fly forward by programming the background to slowly move to the left.
- Point out to students that parallax scrolling needs two copies of the same background to be used as Actors. Optional: Help your students understand this concept by going into the drawing tools and editing the background images. Draw a large letter “A” on the first background (i.e., “adventure overhead 1”) and a large “B” on the second background (i.e., “adventure overhead 2”). The letters will help clarify that the background is actually two overlapping images.
- In this DIY project, students will use layers to change the background, making sure the dragon stays visible.
- Point out to students that the layer that an Actor is set to determine what is behind, in front of, or underneath it.
- Optional: Demonstrate what happens when your layers are in the wrong order. For example, if you set the dragon Actor’s layer to “1” and the adventure overhead 2 Actor’s layer to “2,” you will not be able to see the dragon.
- To solve this puzzle module, students will need to layer 7 different buildings in the correct order. Students are provided a sample of what their end result should look like.
- Give a hint: Ask students…
- Which building should be in front? (Answer: The yellow building needs to be up front, so it should have the highest layer number.)
- Which building should be furthest back? (Answer: The pink building needs to be the furthest back, so it should have the lowest layer number.)
- In this DIY project, students will create a parallax scrolling background.
- Optional: Explain to students that a parallax effect is like watching the clouds slowly pass by while birds appear to move faster--the farther away something is, the slower it moves across your view.
- If students finish early, ask them to experiment with the value of their “wait” code block to make the Actors scroll faster or slower until the scene has a convincing sense of depth.
- In this DIY project, students will create a game that switches to a different level once a goal is reached. The project starts off blank, so students will need to add their own background, Actors, and code.
- Are students struggling to locate the code blocks? Tell them to select the “Blocks” tab that’s located to the right of the “Tutorial” tab.
- Optional: Remind students to check out the Tynker support videos if they get stuck: https://www.tynker.com/support/videos.
- Students will answer 5 multiple-choice questions to review concepts from this lesson.
Extended Activities (10 minutes)Modified Level Change
- Ask students to work with a partner and brainstorm at least three different ways (e.g., add sound, add more Actors, modify their code) they can improve their Level Change project. Next, ask your students to make at least two improvements to their Level Change project using Tynker.
- CCSS-Math: MP.1, MP.2, MP.4, MP.7
- CCSS-ELA: RI.7.4, RI.8.4, 6-8.RST.3, 6-8.RST.4, 6-8.RST.7
- CSTA: 2-AP-10, 2-AP-13, 2-AP-16, 2-AP-17
- CS CA: 6-8.AP.10, 6-8.AP.13, 6-8.AP.17
- ISTE: 1.c, 1.d, 4.d, 5.c, 5.d, 6.b
U.k. StandardsKey Stage 3 (Years 7-9)
- Understand several key algorithms that reflect computational thinking [for example, ones for sorting and searching]; use logical reasoning to compare the utility of alternative algorithms for the same problem.
- Create, re-use, revise and re-purpose digital artefacts for a given audience, with attention to trustworthiness, design and usability.
- Understand a range of ways to use technology safely, respectfully, responsibly and securely, including protecting their online identity and privacy; recognise inappropriate content, contact and conduct and know how to report concerns.
These student-facing slide presentations help educators seamlessly run Tynker lessons in a virtual or physical classroom setting. Each lesson has its own set of slides that introduce the big ideas, suggest unplugged activities, and include a section for each activity module. While running lesson slides, you can switch back and forth between the activity, the slides, answer keys and other lesson materials.
A sample slide presentation is available for your review. Please log in to view all the class presentations available with your plan..
Motion and Tracking
Show and Hide
Start Screen and Controls
Powerups and Effects