More Graphics: Assets and Looping

This tutorial will show you how to add the following features to your ggame based applications:

• Image-based sprite assets.
• Sound assets.
• Respond to keyboard input.
• Respond to mouse button.
• Movement.

Fork the Tutorial Repository

Visit the ggame-tutorials repository and fork a copy to your own Github account (just like you did for the last graphics tutorial). Note that this repository is different from the one you forked earlier because it contains a number of assets that we will use for the final ggame tutorials.

After forking, add a new Python source file (press the + link for your new repository) and name it tutorial3.py. You can insert a comment at the top of the file with your name and the name of the file then commit it. Copy the URL for the file and load it up in runpython.

Now start by pasting in some "boilerplate" code for out tutorial. This should look familiar:

from ggame import App, RectangleAsset, ImageAsset, SoundAsset
from ggame import LineStyle, Color, Sprite, Sound

myapp = App()
myapp.run()

If you test your program now it should open a new, blank tab in your browser, but that's about all.

Fixed Graphics Area

In the past tutorial and graphics assignments we have used all of the available space in the browser for our graphics. For this one, we would like to know in advance what the size will be, so we'll fix it and use the size to create a colored background for the app. Add the following lines after the imports:

SCREEN_WIDTH = 640
SCREEN_HEIGHT = 480

green = Color(0x00ff00, 1)
black = Color(0, 1)
noline = LineStyle(0, black)
bg_asset = RectangleAsset(SCREEN_WIDTH, SCREEN_HEIGHT, noline, green)
bg = Sprite(bg_asset, (0,0))

We have created a couple of variables that hold the width and height of our app in pixels. We use upper case characters for the name as a convention that suggests these variables hold values that we don't intend to change. In other computer languages, we would call them constants, but Python doesn't actually support this idea of having constant variables.

Furthermore, we should create our app with the width and height limitation as well. Do this by changing the line that reads myapp = App() to read:

myapp = App(SCREEN_WIDTH, SCREEN_HEIGHT)

instead. The width and height values are optional arguments to the App creation function. Without them, App will use most of the available tab size.

Commit, then run your app to see the difference. You should be seeing a 640x480 pixel green rectangle in the upper left corner of the browser.

BIG IDEA

Any time you have a number that you will use in multiple places (i.e. the screen width and height), don't use the literal number everywhere in the code. Instead, create a variable to hold the number and use the variable name everywhere instead. Then, later, if you need to change the number you only have to change it in one place. This embodies a fundamental principal of Python and programming in general: DRY or Don't Repeat Yourself.

Image Assets

Next, add the following lines to your program, after the other asset and sprite lines, but before the App creation:

# A ball! This is already in the ggame-tutorials repository
ball_asset = ImageAsset("images/orb-150545_640.png")
ball = Sprite(ball_asset, (0, 0))
# Original image is too big. Scale it to 1/10 its original size
ball.scale = 0.1
ball.y = 200
# custom attributes
ball.dir = 1
ball.go = True

Step by step, here is what we have added:

• The ImageAsset function creates an image asset from an image file already in the ggame-tutorials repository. If you go back to the Github pages for your forked repository you can click on the images link in the file list to see all the images included in the repository.
• The Sprite function makes a sprite from the image asset, just the way it did in the earlier tutorials and assignments.
• Since the image asset we are using is a very large image, the ball.scale = 0.1 line will shrink the displayed image on your screen to 1/10 its original size.
• The next line places the ball image at 200 pixels down from the top of the page.
• The next two lines actually create two attributes of the ball sprite that don't already exist in Sprite objects. The first is a number (dir) that will represent the direction the sprite is moving. The second is a boolean (True or False) attribute (go) that will indicate whether the sprite is moving.