Time for action – increasing the width of the scene
The game file to import and load for this session is 5961_02_10.stencyl.
We're going to change the width of the scene, so we need to display the jungle scene's properties:
- On the Dashboard, click on the Scenes heading.
- Double-click the thumbnail image for the Jungle scene.
- Ensure that the Scene button is selected in the row of buttons at the upper-center of the screen.
- Click on the Properties button in the same row of buttons.
- In the Edit Scene Properties dialog box, under the Size heading, change the Width from
20to60.
- Click on OK.
- Test the game by making the monkey run past the rightmost edge of the scene, and then close the Flash Player window—expect a problem to occur when the monkey leaves the edge of the screen!
What just happened?
We've increased the width of the scene from its original 20 tiles to 60 tiles—three times its original width. We can see that, as soon as we confirmed the changes to the width of the scene, it immediately increased in size—it's now so wide that we need to use the horizontal scroll bar at the bottom of the Scene Designer in order to see the whole scene!
However, we have a problem because, when the monkey ran off the edge of the screen, he disappeared, never to be seen again.
Another problem that may not immediately be apparent, is that there aren't enough tiles for the monkey to run along—when he ran past the edge of the screen, the poor monkey fell off a cliff!
Our next task is to fix both of these problems, starting with the tiles:
Have a go hero – adding more tiles to the scene
The game file to import and load for this session is 5961_02_11.stencyl.
We already know how to add tiles, and we're already looking at the Scene Designer, so go ahead and add enough tiles to reach the far, right-hand side edge of the scene, as shown in the following zoomed-out screenshot:
When designing scenes that are too wide to fit on our screen, we can either scroll along the scene using the horizontal scroll bar, or we can zoom in and out of the scene using the zoom utility buttons in the toolbar at the left-hand side of the Scene Designer. Clicking on the zoom tools and then clicking on the scene, enables us to zoom in and out as required.
When we have added the extra tiles, we can test the game again and, this time, instead of running off a cliff when we hold the right arrow key down, the monkey will run off the side of the scene and disappear but, if we hold the left arrow key long enough, he will run back into the scene so we can see him again.
That just leaves us to solve the problem of the disappearing monkey—we'd like to see him, wherever he is, on our wide scene!