Basic Training: How to Create an Interactive Game Using Canvasser


Canvasser is a building tool that allows you to create simple animations and interactives that can be displayed on the web (in both desktop or mobile view). An interactive is essentially content that changes depending on the input of a user, meaning it is ideal for making online games, quizzes, adding popup annotations to a diagram or map, creating simple animations, and more.

In this training, you’ll learn about the process of creating a Canvasser interactive from start-to-finish by looking at examples created by past STAs. Then you’ll create your own interactive game, which you can model on an existing interactive or design from scratch. Your game should be educational and relate to the theme you chose for your CLIO module, where it will eventually be uploaded. Once your game is added to your module, other STAs will be able to play it.


 

Past Canvasser Projects

In past years, design STAs have used Canvasser to recreate interactive content that uses Flash Player, which is no longer supported by many browsers. STAs have made hundreds of Canvasser interactives for different educational services and online courses, including Texas Beyond History, Virtual Laboratories for Biological Anthropology, taught by Professor John Kappelman, and a digital history of the United States, created by Professor Steven Mintz.

The following interactives were all created by STAs in Canvasser. Take a few minutes to look through them before you start working on your game design. You can preview each live interactive and see how it was built by loading it in Canvasser. Follow these steps:

    1. Log in to the Canvasser editor with your UT EID and password
    2. Click on File > Load File
    3. Search for the project folder and file name of the interactive

 

Basic Features of an Interactive

Interactives are built using a series of images—typically PNGs created in Photoshop—that have transparent backgrounds and are layered on top of each other. Once they are uploaded to Canvasser, these images become objects, which can then be animated or made interactive.

Here is a breakdown of some basic interactive elements that are possible in Canvasser:

Buttons

Any object that you can click is a button. Usually, clicking on a button will trigger a new popup to appear and at the same time make all other popups disappear. Buttons can also be used in combination with a begin screen or filter at the start of an interactive as a gateway into the game. 

Toggle Elements

Toggle elements are very similar to buttons, but different in some key ways. Like buttons, toggle elements trigger a popup to appear. But unlike buttons, they can be clicked repeatedly to make a popup appear and disappear, and multiple toggle elements can be on (i.e. visible) at the same time.

Toggle elements will have 3 parts: a popup, an off button, and an on button.

Click-and-Drag Objects

These are objects that can be dragged with your cursor. They can be incorporated into games by having a user drag a tool (like a ruler) across the screen or into games where a player has to correctly match two elements.

Tip: Drag objects require some special settings to run more smoothly. Before you export drag objects, make sure they’re cropped to fit the image content so they can slide more easily across the screen.

Popups

Popups are objects that appear after clicking on a button. They usually include text, and almost always include a close button. If you do decide to include a close button, make sure to export it separately from the popup itself so that it can be made into a button later on. 

 

Conditional Popups

Conditional popups are not triggered by a button; instead, they only appear if certain criteria are met (e.g. the position of an object is guessed correctly or the correct answer is entered into a text box).

Conditional popups can be used with click-and-drag objects to create matching games, where placing an object in the correct location triggers a “correct” popup, and placing an object incorrectly triggers an “incorrect” or “try again” popup. 

Text Entry Boxes

Text entry boxes can be used to prompt someone to enter their own response to a question. For text entry to work, you’ll need to create an empty box and upload it to Canvasser so the user will know where to begin typing their response.

Next to each text entry box you’ll probably want to include a submit button which will trigger a popup with the correct answer. Depending on how many answers are possible for a given question, you may want to use different kinds of answer popups.

Tip: If a question has multiple possible answers, you can create one answer popup. It’ll function like a regular popup and appear no matter what a user enters as their response. Or, if a question has only one possible answer, you can use conditional popups that will appear depending on whether the input is correct or incorrect. 

 


Step One: Propose a Game Idea

Now that you’ve reviewed some Canvasser interactives, you can start planning the type game you want to create. Your game will eventually be uploaded to your CLIO module as part of an activity, so make sure it fits within the theme of your page and is educational.

Some ideas to consider:

  • Create a game where you have to match pairs of elements (see Kincaid Creatures game for an example). 
  • Find a map or chart and create text popups that appear on top
  • Create a multiple choice quiz using check boxes that can toggle on and off
  • Create a fill in the blank quiz using text entry boxes and a submit button
  • Or pick an completely new concept

While the aesthetic and type of game you create is up to you, it must include the following elements:

  • a begin button and begin screen (which will both become hidden once the game starts)
  • a stationary background
  • at least one button (besides the begin button)
  • at least one popup
  • at least one click-and-drag object
  • one additional interactive feature from the list above (either a text entry box, toggle element, or conditional popup)

Post your idea to Basecamp and tag your STA mentor! They will let you know if it seems feasible, give you feedback on your design, and answer any questions you might have about implementing it. When you get approval on your game concept, move on to the next step.


Step Two: Build the Assets

Now you can start building the assets for your game. Open a new document in Photoshop and choose a width of 956 pixels (the height is up to you).

Set Up Your Layers Panel

Create the following 4 groups in your layers panel:

  • Begin filter (*this will include your begin screen and begin button)
  • Popups
  • Clickable Elements (*includes buttons, toggle elements, and drag objects)
  • Stationary

This organization will make it easier to export assets for your interactive and, if necessary, go back and make edits to the PSD later.

Start Making the Assets

To see some examples of recent interactive assets made by other STAs, click here and select any of the lab folders.

You can start creating the elements of your game in whatever order you want to. Here are some tips to keep in mind:

  • Every clickable element and popup will need to be saved on its own layer, so keep them unmerged*
  • The begin screen can be a filter on top of your game (for example, it can be a solid black layer set to 50% opacity, which will make your game look grayed out until you start playing it)
  • Anything that remains static for the whole game can be grouped under “Stationary”
  • When you create a toggle element, make sure you save the on and off buttons as separate images, like this:

Finally, save your PSD using the following format:

[Last Name First Name] Canvasser Game

Before you move on to the next step, upload your PSD to your UT Box folder and share the link with your STA mentor on Basecamp so they can review it.


 

Step Three: Export the Assets as PNGs

When your PSD is approved, you’ll need to export each element of your game individually as a PNG (this is the ideal format because PNGs support transparent backgrounds).

Most of your assets (e.g. buttons, popups) should be exported with the same dimensions as your game, which means the images will be surrounded by excess transparent space. 

You don’t have to save your assets this way, but the point of doing this is to guarantee that they are perfectly centered in the game without having to manually enter the location of every object you upload. It should save you time overall.

The exception to this rule is if your game involves matching pairs of elements. Any objects that are supposed to be matched together (e.g. including both drag objects and drag locations) must be cropped to fit the size of the image content, otherwise Canvasser won’t be able to read the location of each object.

Tip: An easy way to export objects so they’re cropped to fit the pixel content and not the canvas is to right click on a layer or group (selecting just those pixels) and clicking “Quick Export as PNG.”

When you’re ready to start exporting your assets, name them using roughly the following format. Keeping your file names consistent by using some type of prefix for all your assets will make your files easier to find later when you upload them to Canvasser, since they’ll all be grouped together.

[last-name-first-name]-[type-of-element]

  1. Save the stationary background as a single PNG. Turn off the visibility of all layers except for the stationary group. Go to File > Export > Quick Export as PNG. Save it using the name [last-name-first-name]-stationary
  2. Repeat step 1 with the begin button and begin screen. Save them as separate images and use the names [last-name-first-name]-begin-button and [your-name]-begin screen
  3. Repeat step 1 with each clickable element. Name them [last-name-first-name]-click-1, [last-name-first-name]-click-2, etc.
  4. Repeat step 1 with each popup. Name them [last-name-first-name]-popup-1, [last-name-first-name]-popup-2, etc. Make sure it’s easy to remember which popup corresponds to which button.

When you’re done, upload your PNGs to the same UT Box folder.


 

Step Four: Assemble the Game in Canvasser

Upload Your Files

You should’ve been given permission to log in to Canvasser as an editor. Go to Canvasser and log in with your UT EID and password. After you log in you’ll see a blank workspace.

The first thing you should do is import your PNGs to Canvasser, which you should be able to upload all at one time. Click on File > Upload Files, and when prompted, select the folder “canvasser-games” (You may have to manually type it in if you don’t see it appear).

You’ll know your files have successfully uploaded when you see the file paths appear under “Upload Status.” This lets you know that your files are now stored in Canvasser.


 

Save Your New Project

Click on File > Save File in the top left of your screen. Under project, choose “canvasser-games” again. Then pick a name for your file and press save. It’s a good idea to save your project periodically in case Canvasser crashes or your screen times out (which usually after 30 minutes or so of inactivity).


 

Set Up Your Workspace

Now you can start setting up your workspace. Here are the main windows that you will need to have open. If you don’t see one of them, click on Windows in the top menu of Canvasser.

Output

The ouput window is a live preview of your interactive. It updates automatically. 

  • Tip: You can use the settings window to resize the output window to fit the dimensions of your game.

Files

Even though you’ve already uploaded your PNGs, they’re only stored in Canvasser. In order to start using them, you’ll need to link them to your interactive.

  • First, open the files window and search for your project name (canvasser-games) by typing it into the search bar manually or selecting it.
  • Scroll until you find the images you uploaded
  • Left click and drag your cursor down to highlight them. They will turn neon green.
  • Finally, press the link button at the top of the window.


Images

If you want, you can double check that your images have been linked successfully by opening the images window. Every file you link will show up here.


Settings

Next adjust the height and width of your interactive by selecting them in the settings window. Enter a new value for each in the properties panel (the height is in pixels and will be the same as the height of your Photoshop document). You should see your output window change to match the new values.


Objects

After linking your PNGs, you will need to add a new object for every asset you’ve uploaded. The new objects will be listed as object1, object2, etc. until you name them.


Properties

Next, select one of your objects to start modifying it. The properties panel is where you can choose which images you want to be displayed, name them, set their positions, and eventually make them interactive. Right now we’re just going to set up their basic properties, then in the next section we’ll get into more advanced interactive settings.

Naming an Object

  • At the top of the panel you can enter a name for each object. Try to pick names that will help you differentiate your objects so you can find them again easily
  • For type, make sure “image” is selected
  • For image, use the dropdown to select one of the images you linked. Once you select an image you’ll see a tiny preview of it appear under Image Preview.

Change the Visibility of an Object

  • To change the visibility of an object, check or uncheck the box that says Show. This will only affect which objects are visible at the beginning of the game.
  • As a general rule, all popups should be invisible at the start of the game (they’ll become visible later on), and all other objects should be left visible. 

Setting an Object’s Position

  • Next you can set the positions of all the objects. Since most of your objects will have the same dimensions as your game, the position is super easy to set. All you have to do is enter (0,0) as the position coordinates. 

  • When you set the position to (0,0), you’re lining up the upper-left corner of the object (aka the origin of the object) with the upper-left corner of the output window. If you hover your cursor over this corner, you’ll notice that the XY coordinates appear as (0,0). 

  • In some cases, your objects won’t have the same dimensions as your game. If have any drag objects or drag locations (objects marking the position where the drag objects should be dropped), you’ll need to set their positions manually. 
  • First you’ll need to change the object origin to center for all drag objects. Then hover your cursor over the area where you want the object to be positioned, copy the XY coordinates that appear, and enter them as the new position.


Layers

Open the layers window to check the arrangement of the objects. Generally, you’ll want your popups to be on top of your clickable elements, your begin button and screen at the very top, and your stationary elements on the bottom layer (see screenshot below).

  • Tip: If you have any drag locations that are meant to be hidden, these will be directly under the stationary layer.
  • Another Tip: You can also check the visibility of each layer (you can click on the icon to toggle between visible and invisible) 


Groups

Groups are useful because they allow you to apply a command to multiple objects at the same time. If your game has many popups, it will be helpful to add them all to a single group. This will let you turn of the visibility of all popups so that only one popup shows up at any given time. Open the groups window, add a new group, and name it “Popups” or “All Popups.”

  • Tip: Feel free to add more groups, especially if your game has a lot of popups! They can help you keep your settings more simplified.


(Optional Step) Variables

If your game includes text entry boxes, you will need to add at least one variable (you can add more if you want). You can apply a single variable to multiple text boxes, and for most interactives one variable might be all you need. But if you want to be able to check the answers of each text box, you will have to create separate variables for each text box.

  • Open the variables window by clicking on Windows > Var. Then add a new variable. Under type, select either number or string, depending on if you want people to be able to enter a single number or a string of numbers/letters, respectively.
  • The value of the variable(s) should always be zero or left empty (it may autofill as “NaN,” or not a number/undefined). This the value that will automatically show up in the text box before a user starts typing, so you want it to be blank initially.


Advanced Properties

Now that your document is set up and your images are linked, you can start modifying the advanced properties of each object. This is the fun part because it is what will make your interactive functional. Let’s start with the begin button since it’s the top layer of your interactive.

Begin Button

When you click a begin button, you want two things to happen simultaneously: the begin screen (or filter) and the begin button itself should both disappear. You can do this by adding vis events.

  1. Select the begin button.
  2. In the properties panel, scroll down and check the box to make the object interactive.
  3. Add a new action under Click/Touch Events. Whatever actions you add under this category will happen simultaneously when you click on the begin button. For the first action, choose these settings:
    • Command (the first dropdown): “vis” (means visibility)
    • Type: “object”
    • ID: select the begin screen
    • Show: Uncheck box
  4. Then add a second action by repeating step 3, but this time select your begin button as the object. 

All Other Buttons

The rest of your buttons will work essentially the same way, but instead of making objects disappear, they’ll trigger a popup to appear. 

  1. Select another button and check the box to make it interactive.
  2. If you haven’t already created a group called “Popups,” open the groups window to make one. Then add an action under Click/Touch Events. Choose these settings:
    • Command: “vis”
    • Type: “group” 
    • ID: choose the group called “popups”
    • Show: Uncheck box
  3. Add a second action under Click/Touch Events. Choose these settings:
    • Command: “vis”
    • Type: “object”
    • ID: choose the popup that you want to appear
    • Show: Leave box checked

Popups

Popups do not need to be made interactive because they are not clickable elements, but you still need to make a few changes to their properties so they show up at the right time.

  1. Click on a popup
  2. Under properties, uncheck the box that says Show. This will make sure that the popup is hidden at the outset of the game, and only becomes visible when it is triggered.
  3. And finally, if you created a group for popups, make sure each popup object is added to that group by checking the corresponding box.

Toggle Elements

Toggle popups will work the same as regular popups, but toggle buttons need special settings in order to work because they are overlapping objects.

  1. In the objects window, click on the button that is visible when the toggle is off (i.e. the empty circle). Name this button “Toggle Element On” because clicking on it will turn the toggle on.
  2. Add an action under Click/Touch Events. Choose these settings:
    • Command: “vis”
    • Type: “object”
    • ID: “Toggle Element On”
    • Show: Uncheck box
  3. Add a second action under Click/Touch Events. Choose the command “cleardown.” This step is crucial whenever you have overlapping buttons because it will enable you to click one button at a time.
  4. Add a third action under Click/Touch Events. Choose these settings:
    • Command: “vis”
    • Type: “object”
    • ID: “Toggle Element Off”
    • Show: Check box
  5. Add a fourth action under Click/Touch Events. Choose these settings:
    • Command: “vis”
    • Type: “object”
    • ID: “Toggle Element popup”
    • Show: Check box

  1. Finally, click on the button that is visible when the toggle is on (i.e. the button called “Toggle Element Off”). This is the button you will click to turn the toggle off.
  2. Select the opposite settings you just used for “Toggle Element On” (make sure you keep the cleardown command though).

Click-and-Drag Objects

  1. Click on an object and check the interactive box under properties.
  2. Add an action under Drag Event. Choose these settings:
    • Command: “slideobject”
    • Type: “object”
    • ID: Select the object you want to turn into a click-and-drag object (in this case a pin)

Conditional Popups

To create popups that only show up when an object is placed correctly, you’ll need to add a few more commands to your drag object.

  • With the drag object still selected, add an action under Drop Event. Choose these settings:
    • Command: “conditional”
    • Condition: “position”
    • Item to Check: Select the object that represents the correct location
    • Position: Select the drag object
  • Next, add an action under Conditional True. Whatever command you specify here will be true only if the drop event conditions are also true.
    • Command: “vis”
    • Type: “object”
    • ID: choose the popup you want to appear when the drop event is true
    • Show: Leave box checked
  • Finally, add an action under Conditional False. Whatever command you specify here will be true only if the drop event conditions are not met (i.e. false)
    • Command: “vis”
    • Type: “object”
    • ID: choose the popup you want to appear when the drop event is false
    • Show: Leave box checked

Text Entry Boxes

To make a functional text entry box, you’ll need to add some settings to link the variable(s) you’ve created to the text box object. (If you haven’t added a variable yet, you’ll need to do that step first.) 

  1. Select your text box in the objects window. In the properties panel, check the box to make it interactive.
  2. Add an action under Click/Touch Event. Choose these settings:
    • Command: “textentry”
    • Variable: select the variable you created (you probably won’t need to have more than one variable per interactive)
    • Class: Leave blank
    • Style: Here you can specify characteristics of the text box like width, outline/no outline, and font. Copy the following style and adjust the width as needed:
width:50px; outline:none; border:none; font-family:verdana
    • Over Cursor: Don’t check
    • Position: Here you’ll need to enter the X and Y coordinates of the text entry box. To do this, hover your mouse over the top left corner of the text box. Note the coordinates that appear in the top right of the output window, and copy the numbers you see:


 

Step Five: Have Another STA Test Run Your Game

If you’ve made it this far, congratulations! You’re almost through with your first Canvasser interactive. The next step (when you’re happy with how your game is looking) is to have another STA do a test run and give feedback on it.

First, save your Canvasser file again, and you should see that your file is saved in 2 formats: html and json.

Copy the html URL and post it to Basecamp. Tag your STA mentor, and either they or another STA will give you feedback and/or suggestions on how to make it better. Once your game gets approved, move on to the next (and final) step!


Step Six: Upload Your Game to Your Clio Site

The last step is to upload your game to your Clio module and invite other STAs to join your course. Log in to Canvas and navigate to the modules tab in the left sidebar:

Then select the activity you want to add your game to. Add a new link and paste the html URL to your game. Change the display text to something that fits with the content of your page (e.g. “Play Game” or “Test Your Knowledge”).

Finally, invite STAs to your Canvas sandbox so they can play your game. Navigate to the people tab in the left sidebar and click on the +People button at the top-right of the page. Enter the emails or UT EIDs of your fellow STAs and give them the student role:

Let your STA mentor know on Basecamp when you’ve done this final step, and now you’re done!

 

 


Canvasser | Frequently Asked Questions

Q: Conditional true and false not working?

A: If this is happening, a couple things could be interfering with how Canvasser is able to read the position of either the drag object or the drag location.

Double check the image dimensions of your drag objects and the objects that mark the correct location for each conditional. They should be cropped to fit the image content so that Canvasser can read their location in the game.

If the conditional popups are still not working, double check the properties. Make sure that when you’re setting the position of both your drag objects and drag locations, you’re changing the position of the object and not the XY origin, which should always stay (0,0). Then double check that the origin of your drag objects is set to “center” (instead of “upper_left”)


Q: Files not showing up in the files window?

A: Sometimes the files window can be glitchy when you first log in to Canvasser. If the window appears empty when you open it, try hitting the refresh button. It may take a minute or two for the files to show up. If you’re still having trouble, tag your STA mentor on Basecamp.


Q: Buttons not clicking properly or acting glitchy?

A: When buttons are directly on top of each other (e.g. toggle buttons), you need to add a cleardown command underneath Click/Touch Events. This prevents the button from “clicking through” to the button underneath it (i.e. trying to perform multiple actions at once).

 

This entry was posted in Misc. Bookmark the permalink.

Comments are closed.