Scratch game making tutorial 106

iPhone simulator

In this tutorial you will create a simulation of an iPhone home screen with 9 app icons. You will be shown how to create simulations of 3 of the app's after which you can decide to create simulators for the others.

 

Complete these steps ..

 

1. Open Scratch, OR create a new game (from the top menu choose "File>New").

 

2. Click on the Cat thumbnail (sprite1) under the stage and right-click to delete it.

 

3. Create these variables then hide them ..

The icon-height, icon-width, icon-x-position and icon-y-poistion variables will be used to position the app icons in a grid on the home screen. By using maths instead of just dragging them, we can easily adjust their locations and the spaces between them.

 

4. Select the stage and import this background image ..

iPhone background.BMP

Delete the existing white background.

 

5. Add these scripts to the stage ..

Note that we are setting initial values for our icon variables. Later you can experiment with changing these values to alter the position and tightness of the the grid of app icons.

Also note that after the variables are set we are broadcasting "home" to set-up the iPhone home screen.

 

6. We will use a home button to close an open app and return to the home screen. Import these two sprites ("Choose new sprite from file") ..

home button.sprite

home bar.sprite

 

7. Select the home bar and add these scripts ..

 

8. Now select the home button sprite and add these scripts ..

Notice how when the home button is clicked "home" is broadcast. This broadcast will be used whenever we return to the home screen from an open app. It will ensure that all the sprites of an open app hide and all the home screen app icons reappear.

 

9. Press the "B" key to check that the home button appears in front of the home bar.

 

10. Press the "E" button to end your game and then use "File>Save as" to save your game. Name it "iPhone simulator".

 

11. Import all of the following sprites ..

icon safari.sprite

icon phone.sprite

icon messages.sprite

icon photos.sprite

icon clock.sprite

icon calculator.sprite

icon music.sprite

icon weather.sprite

icon compass.sprite

 

12. Select the icon safari sprite and add these scripts ..

Press "B" and the icon should position itself towards the top left of the stage. You will notice that half of the position operator calculations don't do anything (e.g. "+ icon-width x 0"), but because we are going to duplicate this script to the other icons and then edit them, we have created the complete script here.

Duplicate the script to all of the icon sprites.

Change "icon-width x 0" and "icon-height x 0" to these values for each sprite ..

Icon icon-width x ..
(column)
icon-height y ..
(row)
safari 0 0
phone 1 0
messages 2 0
photo 0 1
clock 1 1
calculator 2 1
music 0 2
weather 1 2
compass 2 2

Press "B" and the icons should position themselves into a grid. If you like, go and experiment with the icon position variables to change the position and tightness of the grid.

 

13. Use "File>Save" to re-save your game.

 

14. We want the home screen app icons to hide whenever we launch an app. Add this script to all of the app icon sprites ..

 

15. When we launch an app from the home screen it will be good if it's icon animates. Let's make it expand and fade.

Add this script to the icon safari sprite ..

Notice how the last script blocks broadcast "hide app icons" and "safari". We will use these simple broadcasts to hide all of the other app icons and show the current app's sprites.

Switch to full screen mode, then Press "B" to start your game and click on the safari icon, then click on the home button to return to the home screen. If the scripts work, press "E" to end.

 

16. Duplicate the above script to all of the app icon sprites, and then take care to edit the final broadcast in each script to "phone", "messages", "photos" etc.

 

17. Test your game in full screen mode again, trying out each app icon.

 

18. Use "File>Save" to re-save your game.

 

19. We now have a completed iPhone interface. The next step is to create an app. Let's start with the music app.

Import the following sprites ..

music screen.sprite

music cd.sprite

music play button.sprite

music progress.sprite

 

20. Add these scripts to the music screen sprite ..

This sprite provides a background for our music player.

 

21. Add these scripts to the music CD sprite ..

This sprite shows the cover of the CD which will be playing.

 

22. Select the music play button sprite and import this mp3 track..

Saturday Nite.mp3

Now add these scripts ..

Notice how we are using the "music playing?" variable. We can leave the music playing even when we switch to other apps.

Also notice how the final script uses the two play button costumes ("play-button" and "pause-button") to decide if the music should start or stop.

 

23. A nice final touch to the music app will be to have a progress bar move as the music plays. Select the music progress bar and add these scripts ..

Notice how we are using a round operator to control the speed of the progress bar. The progress bar is approximately 140 pixels wide and Saturday Nite is approximately 240 seconds long. If we don't round down the calculation it will create too many decimal points and slow the script down. To arrive at the wait duration we have divided 240 by 140.

 

24. Test this app out to ensure the play button works, then press "E" to end your game and continuing scripting.

 

25. Use "File>Save" to re-save your game.

 

26. Let's create the weather app. This app is going to consist of some simple animations.

Start by importing the following sprites ..

clouds 1.sprite

clouds 2.sprite

weather text.sprite

weather refresh.sprite

 

27. Select the icon weather sprite. We need to add some script blocks to the scripts.

The weather app animations will continue in the background when we return to the home screen. This may slow down the performance of our game when we open another app, so we will ensure they only run whilst the app is open. We will do this by using our "weather app open?" variable.

Insert two "set weather app open? to" script blocks to the scripts in the places shown here ..

 

28. Select the clouds 1 sprite and add these scripts ..

Notice how the simple repeat blocks slowly animate the clouds back and forth across the stage.

 

29. Duplicate the scripts to the clouds 2 sprite, add the ghost effect script block, and edit the animation operator blocks to the values shown here ..

This sprite will animate in the opposite direction.

 

30. Add these scripts to the weather text sprite ..

 

31. Add these scripts to the weather refresh sprite ..

 

32. Test your weather app then use "File>Save" to re-save your game.

 

33. Let's create the compass app. Select the icon compass sprite. We need to add some script blocks to the scripts.

Insert two "set compass app open? to" script blocks to the existing scripts, in the places shown here ..

 

34. Import the following sprites ..

compass background.sprite

compass base.sprite

compass needle.sprite

 

35. Add the following scripts to the compass background ..

 

36. Add the following scripts to the compass base ..

Notice how this sprite will rotate to point at the mouse-pointer. This will simulate how a real compass is operated when the user lines up the base with the compass needle.

 

37. Add the following scripts to the compass needle ..

Notice how this script creates random rotations of the needle simulating a real compass needle.

 

38. Test your compass app then use "File>Save" to re-save your game.

 

39. Well done, you're finished! Here are some suggestions for what to do next ..