intro cs – screens and variables lesson plan 9. goals using sprites as full screens (start...

25
Intro CS – Screens and Variables Lesson Plan 9

Upload: hubert-hubbard

Post on 18-Jan-2016

219 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Intro CS – Screens and Variables

Lesson Plan 9

Page 2: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Goals

Using sprites as full screens (Start screen, Game over)

Using layering to control ordering of screens Using full screen sprites to create moving

backgrounds Using global and sprite level variables – when

and why for each

Page 3: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Objectives

Students are introduced to the topic and given examples of full screen sprites for start/end screens, and for animated backgrounds; also examples of global and sprite level variables

Students are given real problems to code and solve for practice

Results are demonstrated through demos of running code and displayed results

Page 4: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Pre Requisites

Basic Understanding of Scratch, Sprites, Animation, Costumes, and Variables

Page 5: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Materials

Slides with examples (or present on whiteboard)

PCs with development environments installed (this includes moving backgrounds that are pre-installed)

Page 6: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Lesson Description Introduce full screen sprites, positioning, animating them Review variables – used to track information that may

change due to user input, hit detection, time, etc. Discusses when to use variables, how to use them, and what are their benefits and drawbacks (variables at sprite and global level)

Examples/demos – get scrolling background working in class

Students practice and extend problem to their own wishes

Students present their solutions, typically F2F with the instructor(s) at their desk

Students analyze their and others’ solutions for bugs

Page 7: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Lesson Procedure

Review previous lessons: Repeat loops, Animation, Costumes, Hit Detection

In class examples: Full screen sprite with layered button (click button

to start) Full screen sprites to animate background

horizontally/vertically Examples of global and local variables

Give exercises for in class practice Walk the room answering questions, looking over

the shoulder, asking questions, etc.

Page 8: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Closure/Conclusion

Discussion How do you add Start and Game over screens to your

Galaga game? What kind of scrolling background will you use? How would you use global and local variables in your

Galaga game? Summary

Using variables to track app state and animation of backgrounds

Sprite vs. global variables Ask questions on what is confusing or needs more

time/practice

Page 9: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Animated Backgrounds and Scoped Variables

Lesson Plan 9

Page 10: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

3 Concepts Today

0Needed for your Galaga projects0Moving Backgrounds0Screens and Broadcasting0Variable Scoping

Page 11: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Backgrounds What have we done so far with backgrounds?

Backgrounds are static (can’t move) in BYOB We can change them whenever we want using the

two following blocks:

What else might we want to do? What if we wanted a scrolling background in our

Galaga game? What if we wanted to create a Start or Game over

screen?

Page 12: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Moving Backgrounds?

Page 13: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Background in Galaga

Page 14: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Paper Prototype

0Partner up0Get out some paper0Try to recreate either Fred’s or Galaga’s

background as a quick mockup / prototype

0How would you solve this in BYOB?

Page 15: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Full Screen Sprites

Background images can also be used as regular Sprites - these are known as full screen sprites.

By using backgrounds as Sprites we can control: Position Animation/movement (tip: glide block will allow

for smooth background movement) Layering (tip: be careful of layering, make sure

what you want to show is layered on top at the correct time; layering can be used to control ordering of screens)

Demo scrolling background

Page 16: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

The Pseudo code & Math

0Start BG1 fully on screen (at 0,0)0Start BG2 fully on screen (above at 0,360)0Move both down at same time0When BG1 goes off the bottom of the screen

(0,-360), move it back to the middle0When BG2 goes to the center of the screen

(0,0), move it back to the top

Page 17: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

UPDATE

0 In the gear menu in Snap, turn on the Prefer smooth animations checkbox

0Also, if you get a gap, create 2 variables and try this:

Stage

On each sprite

Page 18: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Screens and Broadcasting

Page 19: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Start Screen State

Page 20: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Play Button

Similar to everything else in Scratch, the Play Button will also be a Sprite, however it’s more of an object than a character.

Demo Play Button

Page 21: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Variable Scoping

Page 22: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Global vs. Sprite Variables

What is a Global variable? Variable for all sprites Example: In our past projects we have used a

single variable for speed or step size. What is a Sprite variable (also known as local

variable)? Variable for a single sprite Example: If you want to make the dive directions

for your enemy ships in Galaga different or anything else that is specific to a single sprite.

Page 23: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Global vs. Sprite Variables – Used in

Broadcasting Scratch cannot limit where a Broadcast can

go Work around for this is to use a global variable

and private/local/sprite variable for each sprite:

Page 24: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Daily project

By the end of class: Add a scrolling background to your project

Extra: add a Start screen and button to your project

Page 25: Intro CS – Screens and Variables Lesson Plan 9. Goals  Using sprites as full screens (Start screen, Game over)  Using layering to control ordering of

Summary Discussion

How do you add Start and Game over screens to your Galaga game?

What kind of scrolling background will you use? How would you use global and local variables in

your Galaga game? Summary

Using variables to track app state and animation of backgrounds

Sprite vs. global variables