Examining screen size and scene size

In our newly created behavior, we specified the x position as 320 and the y position as 10. It's a good idea to examine what these numbers mean so that we have a good understanding of why the statue actor is appearing exactly where it does.

The coordinates on a computer screen are measured from the upper left-hand corner of the screen, which has an x position of zero and a y position of zero. As we move from the left of the screen to the right, the x coordinate increases in value. As we move from the top of the screen to the bottom, the y coordinate increases in value, as shown in the following figure, in which the dotted lines represent the edges of our screen:

Examining screen size and scene size

When we initially created our game, at the beginning of Chapter 2, Let's Make a Game! we accepted the default screen width of 640 pixels and screen height of 480 pixels. The screen size determines the area of the game that we can see on the computer screen at any one time. We can see this configuration by clicking on the Settings icon on the Stencyl toolbar, and clicking on Setting, and then on Display in the Game Settings dialog box.

Note

A pixel is the smallest controllable point on a computer display. In Stencyl, although it is easy to do, it is fairly unusual to draw on the screen at pixel level. We usually create actors and tiles, or draw shapes that are constructed for us, without having to worry about individual pixels.

The point on the previous figure, labeled 320, 10 represents the x and y coordinates at which our statue is being created, that's 320 pixels horizontally from the left of the screen, and 10 pixels vertically from the top of the screen.

Later on in Chapter 2, Let's Make a Game!, when we made the jungle scene scrollable, we changed the scene width from 20 tiles to 60 tiles. In our game, each tile is 32 pixels wide, which means that we changed the width of the scene from 640 pixels wide (20 tiles x 32 pixels) right up to 1,920 pixels wide (60 tiles x 32 pixels). We can see this information about the scene width by looking at the properties dialog box for the Jungle scene. Open the Jungle scene and click on the Properties button at the top of the screen.

The following screenshot shows how our screen size (the area that is displayed) relates to the scene size (the whole area in which our game is played).

Examining screen size and scene size

In the previous screenshot, the dotted rectangle, which is 640 pixels wide, represents the size of the screen, that is, the area of the game that we can see at any one time while the game is being played, and this is also known as the viewport. The solid line, which is 1,920 pixels wide, represents the width of our scene. As the monkey runs towards the right-hand side of the screen, we can imagine that the dotted black rectangle will slide along the scene in order to prevent the monkey disappearing off the side. It's the camera that we set up back in Chapter 2, Let's Make a Game!, that manages this process for us.

The reason that the statues always fall at the same location, is that we have specified a fixed x coordinate of 320 pixels (that's the horizontal location) for the statue. This means that, as our monkey runs towards the right edge of the screen, the statues will always fall at 320 pixels from the left-hand edge of the scene.

We need the statues to be dropped in the center of the screen (or viewport), so let's resolve that issue.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.144.217