Use Viewport for Larger Maps

[info-creaticode]

Description

When you create a new project on the CreatiCode platform, the default size of the stage is 480 by 360. However, if you want to make the sprite navigates a larger map, the stage size is often too small to show all parts of the map. You can solve that problem using a “viewport”.

Using a viewport is like watching a soccer game through a TV camera. Though the soccer stadium is very large, the camera only captures and displays a small portion of it. As the camera turns, we see different parts of the stadium.

 
 

Canvas Size and Viewport Size

On the CreatiCode platform, you can draw a much larger map (the canvas), then only show a small portion of it through a window (the viewport).

In the code editor, under the “Edit” menu, you can find 4 inputs for you to specify the canvas size and viewport size. For example, we can set the canvas to 1000 by 1000, and the viewport to 500 by 500:

 

After making this change, switch to the costume editor, you will notice some changes:

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/3dca043f-3e9a-4d01-9c45-05dcb6e4487a.png" width="1200" style="border-radius: 5px; border: 1px solid #29622d;">

 

• The canvas size is much bigger now, which is a square that is 1000 by 1000. This allows you to add more objects/sprites to the world map of your game.
• There is a smaller square made of dotted lines, which indicates the size and position of the viewport. It is 500 by 500, so it only shows the center portion of the canvas. You can change the viewport’s position using blocks, but not its size.
• The stage window is also 500 by 500, so it looks like a square instead of a rectangle. The stage window will always have the same size as the viewport so that it will display the part of the canvas currently enclosed by the viewport.

 
 

Cover the Entire Canvas

If you have made the canvas larger, you need to make sure the entire canvas is covered. For example, you can select the stage, then select a backdrop design. You can switch to the “Vector” mode and scale up the backdrop image to cover the entire canvas:

 
 

Block to Lock the Viewport on a Sprite

Since the viewport is smaller than the map (the canvas), you need to move the viewport around to view different parts of the map. The easiest way to do so is to lock a sprite at the center of the viewport using this block:

 
After locking the viewport to the selected sprite, as you move the sprite, the viewport will also move at the same time. It will appear that the sprite is not changing position, and the backdrop is moving. When the viewport is already at the edge of the canvas, it will no longer move, and you will see the sprite moving relatively to the viewport.

 
 

Block to Move the Viewport Directly

When the viewport is not locked at any sprite, you can change its position on the map directly using this block:

 
The x and y inputs are the position of the center of the viewport. So if you set x and y to 0, the viewport’s center will be at the same position as the center of the map.

 
 

Find the Current Position of the Viewport

You can use the following 2 blocks to get the x and y positions of the center point of the viewport on the map:

 
For example, when the viewport is at the center of the map, both blocks will report 0. However, after the viewport moves, these 2 blocks will also report different values.

 
 

Attach to Viewport

Suppose you have locked the viewport to sprite A, and you need to always show another sprite B. That means when sprite A moves, the viewport will move, and sprite B needs to move the same way as well. To do this, you can use the following 2 blocks to attach a sprite to the viewport, or detach it from the viewport:

 

When attaching to the viewport, you can specify the x and y positions of the sprite relative to the center of the viewport.

For example, a balloon is attached to the viewport at x of 0 and y of 100. The balloon will move together with the viewport, and will always appear at the position of x = 0 and y = 100: