Lab 2.5: Displaying an Image

Goals

In this lab, we will learn the following computer science concepts:

Accessing the Quorum Standard Library
Creating Objects
Calling Actions on Objects

Computer Science Principles Curriculum

Big Idea: Creativity: EU 1.2, LO 1.2.1, EK 1.2.1A, EK 1.2.1B, EK 1.2.1C, EU 1.3, LO 1.3.1, EK 1.3.1A, EK 1.3.1C
Big Idea: Programming: EU 5.1, LO 5.1.1, EK 5.1.1A

Common Core Standards

English Language Arts Standards » Science & Technical Subjects: CCSS.ELA-Literacy.RST.9-10.2, CCSS.ELA-Literacy.RST.9-10.3, CCSS.ELA-Literacy.RST.9-10.4, CCSS.ELA-Literacy.RST.9-10.5, CCSS.ELA-Literacy.RST.9-10.6, CCSS.ELA-Literacy.RST.11-12.2, CCSS.ELA-Literacy.RST.11-12.3, CCSS.ELA-Literacy.RST.9-10.1, CCSS.ELA-Literacy.RST.9-10.2, CCSS.ELA-Literacy.RST.9-10.7, CCSS.ELA-Literacy.RST.9-10.8, CCSS.ELA-Literacy.RST.9-10.9
Standards For Mathmatical Practice: CCSS.Math.Practice.MP1, CCSS.Math.Practice.MP2, CCSS.Math.Practice.MP5, CCSS.Math.Practice.MP6, CCSS.Math.Practice.MP7, CCSS.Math.Practice.MP8,

Vocabulary

Library
Object
Instantiation
Action Call
Parameters
Parameter Passing
Pixels
PNG file extension
JPG file extension

Overview

This lab demonstrates the use of the Game library in Quorum. The Game library can be used to display graphics to the screen, which is an important first step in making games. The Quorum Game Engine supports image files with the ".png" or the ".jpg" file extensions. You will write a program that displays an image to the screen. This lab can be completed in Sodbeans or online. For Sodbeans, download this "zip file" for the template to help you get started. To open the template, follow these steps:

1. Download and extract the zip file

2. Open NetBeans

3. Under File, click Open Project

4. Navigate to where you downloaded the zip file

5. Select your project and click Open Project

You may also use this IDE to write and test your code.

Displaying an Image

1

use Libraries.Game.Game

/*
    This is a default class for creating a game in Quorum. Note that the Main 
    action begins by calling StartGame(), which loads a window a game can 
    be displayed in. The action CreateGame is where the game should load any 
    assets, like images to be displayed, frames of animation, or sounds to be
    played. 
*/

class Main is Game

/*
        This action, Main, starts our computer program. In Quorum, programs always
        begin from Main.
    */

action Main
        StartGame()
    end

/*
        This action sets up the default values for a game. For example, we might
        use the Libraries.Game.Graphics.Drawable class to load up an image or 
        a shape. Or, we might add a Libraries.Interface.Button for making something clickable
        or a Libraries.Interface.TextBox for gathering user input in a game.
    */

action CreateGame
    end

/*
        The update action is called on every "frame"of animation in a game. This
        action should be used to do operations on items. So, for example, we 
        might use this action to change frames of animation, to rotate items, 
        or to make creatures jump.
    */

action Update(number seconds)
    end
end

Goal 1: Accessing the Quorum Standard Library

Open the provided template and navigate to the main.quorum file.

This assignment makes use of the Quorum Game Library in the Quorum Standard Library. You need to type the code to include these libraries at the very top of the main.quorum file, above the line that starts with class Main is Game on line 11 of the file.

Begin by typing the appropriate code to use the Quorum Game Engine Libraries in your project. The Drawable Library is called Libraries.Game.Graphics.Drawable and is used to draw objects on the screen.

Example: Tell Quorum you want access to graphics.

// this line tells Quorum we will be using the Graphics library to draw images to the screen
use Libraries.Game.Graphics.Drawable

Any time you want to use a Quorum library, you need to include a statement like this at the top of your program code that lets Quorum know that you will be using that library.

In order to work with files, you also need to use the File library. The File library is called Libraries.System.File. Add a statement to your project that allows you to use the Quorum File library, below the other usestatements.

You now are able to use these Quorum libraries in your program.

Goal 2: Creating Objects

Look for the lines that look like the following around lines 19-20 of the file:

action CreateGame
end

You write your code between the line that starts with action CreateGame and the line that starts with end.

To put theGame and File libraries to use, instantiate a new Drawable object, calling it bunny. Add this code between the action CreateGame line and the end line.

Example: Instantiate an Drawable object.

action CreateGame
   // this line of code creates the Drawable object called "bunny"
   Drawable bunny
end

Now, in order for the Drawable object to be able to display your image, it needs the file that contains the image. Create a new File object, naming it file.

In order to use the File object, you need to tell the File object what file it is. Since this file will represent the image file for your Drawable object, your file should be an image file. Image files save data that represent all the pixels of an image. The file formats that the Quorum Game Engine supports are ".png" or the ".jpg" formats.

To set the name of your file, you use the SetPath action. The SetPath action takes a text parameter that represents the name of the file.

Example: Tell the File object the name of the file it should represent.

// this line of code tells the File object that the file it should
// represent is the file called "media/bunny.png"
file:SetPath("media/bunny.png")

Now that you have your file set up, you can tell the Drawable object what to do. The Drawable object needs to load a file, the file you just set up! Use the Load action to give the Drawable object the file you created in your program.

Example: Tell the File object the name of the file.

// this line of code passes the file you created and set the path to the bunny
// Drawable. The bunny now knows which image it should display.
bunny:Load(file)

You are now ready to display your image. You can do this by calling the Add action, passing your Drawable object as a parameter.

Activity: Add your bunny to the game by calling the Add action, passing it your bunny object.

You can now compile and run your program. There should be no errors and your image should display on the screen in a separate window. If your program does not compile, fix any errors and try again.

Goal 3: Calling Actions on Objects

When displaying your image, you may have noticed that it was placed in the lower left-hand corner of the screen. You may want to change this position so that it can appear in another part of the screen. You can do this in Quorum by calling theSetPosition action on your Drawable object.

The SetPosition action takes two parameters, both number variables. These number s represent coordinates that tell the Drawable object where to appear on the screen. Coordinates of (0, 0) represent the lower left-hand corner of the screen. To move the image to the right, increase the x-coordinate (the first parameter). To move the image up, increase the y-coordinate (the second parameter).

The default values for the coordinates of the Drawable object are (0, 0). If you never call the SetPosition action, the Drawable bject will automatically appear at the lower left corner of the screen.

Example: Change the position of the bunny Drawable on the screen.

// this line of code tells the bunny to appear at the location (500, 500) on the screen.
bunny:SetPosition(500, 500)

Play around with setting the position by changing the parameters of the SetPosition action. What happens when the coordinates go off of the screen?

Compile and run your program again to see the change.

Next Tutorial

In the next tutorial, we will discuss Lab 2.6, which describes how work moving the Robot in Quorum..

Go Back Next Tutorial

Chapter 2