Frogger - Part 4

In this section we will:
  • create a Game Over full-size splash screen
  • create a Welcome full-size splash screen 
    (with "Click Here to Play" button)
  • create an "Frogger Died" mini-splash screen
  • create a "Next Level" mini-splash screen
  • other art: Customizing Costumes & Background

Bonus Material -- Questions from my students
  • make cars appear off-screen and drive off the other side
  • make frog glide into finish area on celebration sequence
You must complete
 Frogger - Part 3 
before starting here!
Scratch Cat (from http://nagelelo.wikispaces.com)

About these Tutorials

A brief explanation of ownership and rights is found here:  Script 1&2.  If you use these tutorials, please let me know.

About Scratch

Scratch is an entry-level  free and open source software programming environment developed by MIT.

"Game Over"
    ... a splash screen

Making a full-size splash screen is easy.

It's even easier if you make a full-screen graphic (using your favourite graphic editor like Photoshop, The Gimp, Illustrator or Inkscape).

If using a graphic editor, then I recommend:
  • Width: 1024 pixels
  • Height: 768 pixels
  • Resolution: 72 ppi
    (ppi = pixels per inch)
  • Save or Export your file as "PNG".

I used the GIMP as my editor, with the above settings and it seemed to work out well!

 

Picture
Then, save your graphic and import it into Scratch using the "star-folder" button.
on youtube

Creating a "Welcome" 
   Splash Screen


As with most web-based games, the game doesn't start playing as soon as the window loads.  

Instead, the user must "Click here to play" to get the game started.

So, we'll create a full-size  Welcome splash screen.

And because Scratch makes it so easy, we'll make the whole screen into the "Click Here to Play" button!

Feb 2012 Note:

Having trouble making a Welcome Splash Screen?
on youtube
You should only use Photoshop (or the GIMP or Paint or Paint.Net or ...).  If you're comfortable with these tools.  You'd need to create a new sprite, go to the Costume tab and Import your PNG file (your splash screen).

Here's some sample code blocks, and feel free to create the splash screen using Scratch's "New Sprite" tool. 

A "Frogger Died" 
    mini-splash popup



Sometimes we don't need a full screen popup.    Sometimes just a small popup will do.

We want this to appear at (0,0) for
about 2 seconds.
on youtube

A "Next Level" 
    mini-splash popup



With this small popup, we also want to add the number of the actual level.
on youtube

Customizing Costumes and Backgrounds



At this stage, our game has no new functionality to add.

Now, you can change (or "customize")
the art work throughout this game.  

You can edit the costumes and the stage background!

Have fun!
on youtube

Answering Questions from my Students       (Formerly "Bonus Material")

Can the cars appear off-screen and drive off-screen?



Actually, one of my students discovered that he could pass every level if he directed his frogger to sneak around the side of the screen.

Well, this should solve that glitch!!!
on youtube

Why doesn't the frog go into the Finish Area when it's celebrating?



This is a great idea, and only involves one blue block.  The trick is to add it to the right place.    (It only took me 3 tries before I was happy with it.)
on youtube





Game Over!  No more Frogger pages!
If this is a school activity, hand in your Scratch file now ... or after you finish customizing your art work).


Bonus Activity:
Want to make a "Shoot the Rapids" boating-with-rocks video game?  
Click here.