Understanding View Port

What if one screen isn’t enough to hold the world you are creating? We can have a world that is larger than just our window. We do this by adjusting the view port. Normally coordinate (0, 0) is the lower left corner of our screen and (SW,SH) are the upper right coordinates. We can change that! We could have an entire world stretch from (0, 0) to (3000, 3000), and have a smaller view port that was 800x640 that scrolled around that. The command for using the view port is set_viewport(). This command takes four arguments (left, right, bottom, top). 

What we want to do is constantly check where BB8's center_x and center_y are located and then change the parameters of the view port accordingly so that BB8 stays in the center of the viewport. We also will need to check if the viewport boundaries get to the edges of our screen.

#16: Set a VIEWPORT_MARGIN constant that will be used to determine the amount of pixels surrounding BB8 on all sides.

#237: In the on_update() section of our game, if our game_running variable gets set to false we want to reset our viewport back to the full screen. The screen is 800 pixels (SW) wide. This is pixel 0 up to 799 so for the right parameter we needed to use SW-1. We use the same concept for the top parameter (SH-1).

Next if our game_running variable is True, we need to update the viewport. 

#244-245: Set variables view_left and view_right to BB8's center_x - VIEWPORT_MARGIN and BB8's center_x + VIEWPORT_MARGIN, respectively.

#246-247: Set variables view_top and view_bottom to BB8's center_y + VIEWPORT_MARGIN and BB8's center_y - VIEWPORT_MARGIN, respectively.

Now we'll use an if-elif to check view_left and view_right to see if they get to the left or right edges of the screen.

#249-251: Check if view_left < 0. If it is, set view_left = 0 and view_right = 2*VIEWPORT_MARGIN.

#252-254: Check if view_right > SW. If it is, set view_right = SW-1 and view_left = SW-1-2*VIEWPORT_MARGIN.

Now we'll use an if-elif to check view_top and view_bottom to see if they get to the top or bottom edges of the screen.

#256-258: Check if view_top>SH. If it is, set view_top = SH-1 and view_bottom = SH-1-2*VIEWPORT_MARGIN.

#259-261: Check if view_bottom<0. If it is, set view_bottom = 0 and view_top = 2*VIEWPORT_MARGIN.

#263-266: Here we will update the viewport with our new variables.

Move Score Box

If you try this code out you will now see a smaller section of the screen with BB8 at the center. If you travel over to the left side you will notice that you can't see the score box anymore. We want to keep the score box in the upper right corner of our viewport. This is a pretty easy change.

#216-220: Instead of SW use self.view_right and instead of SH use self.view_top.

Finally, we will run the main function. We can change the game title to "BB8 Viewport". 

When you get the viewport to work, demonstrate it to your instructor. Chapters 15-21 have covered many topics of game design. Hopefully, you have been working and updating your own game project throughout these chapters. You will have a week to finish your game. When you are finished make a screencast of you playing it and upload to YouTube. E-mail your instructor the link.

Next you will create an Escape Room game like you made in Scratch in Intro to Coding. The objective is for a user to escape a room. You need to come up with a challenging method for them to figure out how to unlock the door. You can also use an arrow for them to see the back half of a room. Start by sketching out your room and determining a creative way to unlock it. The user should be able to use keyboard and/or mouse input to click on and drag items in the room. When they unlock the door you should display a congratulations message and also how long it took them to escape the room. Here are some example Escape Rooms that were written in Scratch:

Open the Door to Stem

Cabin Fever