{% trans 'Watch it here now.' as msg_meta_extra} Broken Screen - Texting Story - CS First Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more.

arrow_back Broken Screen

Transcript

In this add-on, you will add a broken screen game feature to your animation.

The user must continually press the space bar to hold on to the phone.

If they stop pressing the space bar for one second the phone screen breaks.

First, draw a broken screen.

Click the stage.

Then the backdrops tab.

Right click on the blue desk backdrop to duplicate it.

Use the line and pencil tools to create a broken screen.

Try different colors and shapes to get your desired look.

When the flag is clicked, the screen should start unbroken.

Add a one flag clicked block and a switch backdrop block.

Change the dropdown to the unbroken screen backdrop.

The screen should break only if the user has not pressed the space bar with a one second interval.

To measure time elapsed, use the timer block from the sensing menu.

Click the checkbox next to timer.

The timer keeps track of the seconds passed since the flag was clicked.

Click the flag to see the timer red.

Reset the timer to zero using the reset timer block.

Use this block to constantly measure how long it has been since the space bar has been pressed.

Check out the reset timer block.

Then, attach a one key press block and change the value to space.

Test it out by clicking the flag.

Each time you hit the space bar, the timer resets.

Next, program the stage to change to the broken screen when the timer is greater than one.

Drag out an if block and attach it under the switch backdrop block.

Add a greater than operator and put a timer block from the sensing menu and the first value.

and type the number one in the second value.

Add a switch costume block instead the if statement then change the backdrop to blue desk two which is the broken screen.

Test by clicking the flag.

When the program starts, the code checks to see if the timer is greater than one.

But nothing happens.

That's because the timer only checks once.

The program should check continuously so add a forever loop around the if statement.

Test this.

Awesome, after one second the broken screen appeared.

Test again, only this time continuously press the space key.

Pressing space keeps the broken screen from appearing.

Add sounds to emphasize the broken effect.

The starter project contains crash sounds that you can add to your program.

Click on the sounds tab to sample them and find one you like.

(glass shattering sound)

Then, add a play sound until done block and change the dropdown to the sound effect you chose.

Cool. If you'd like, add other sound effects.

(scream sound)

To stop the code in the forever loop after the phone cracks add a stop all block from the control menu inside the if statement.

The entire program shouldn't stop just the code inside this block stack.

So change the dropdown to this script.

Next, add a say block to the you sprite to tell the user how to keep the phone from cracking.

To make the game start after the instructions go to the stage, and add a wait block above the forever loop.

This keeps the user from losing while the instructions are being given.

This example uses two seconds in the wait block.

Decide whether or not the players will see the timer by checking or unchecking the box beside the timer.

(glass shatters sound)

(scream sound)

Now it's your turn. Duplicate the screen backdrop and use a paint editor to draw a broken screen.

Keep the broken screen backdrop from appearing using one key pressed, and reset timer blocks.

Program the broken screen to appear using switch backdrop, greater than, timer forever, and if blocks.

Program a sound effect using play sound until done and stop this script blocks.

Finally, use the you sprite to give instructions by adding a wait block to delay the timer.

Choose an Add-On
Thumbs
Animate the thumbs holding your phone.
Later That Day
Add a second scene in which the sprites will interact outside the text conversation
Broken Screen
Add a broken screen game feature to your animation.
Answer the Phone Call
Create an incoming call notification so the user can answer the phone.
Accessorize
Animate an accessory, like headphones or phone cases, to express yourself.
arrow_backward Back
Next arrow_forward
Instructions
  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!