{"id":4152,"date":"2020-08-05T17:32:38","date_gmt":"2020-08-05T17:32:38","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=4152"},"modified":"2020-11-24T17:41:40","modified_gmt":"2020-11-24T17:41:40","slug":"basic-training-how-to-create-an-interactive-game-using-canvasser","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2020\/08\/05\/basic-training-how-to-create-an-interactive-game-using-canvasser\/","title":{"rendered":"Basic Training: How to Create an Interactive Game Using Canvasser"},"content":{"rendered":"

\"\"<\/p>\n

\"\"<\/a>
<\/a><\/p>\n

Canvasser<\/a> 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 can be used to make online games, quizzes, adding popup annotations to a diagram or map, creating simple animations, and more.<\/p>\n

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.<\/p>\n

\n

 <\/h2>\n

Past Canvasser Projects<\/strong><\/h2>\n

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,<\/a> Virtual Laboratories for Biological Anthropology, taught by Professor John Kappelman, and a digital history of the United States, created by Professor Steven Mintz.<\/p>\n

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:<\/p>\n

    \n
  1. \n
      \n
    1. Log in to the Canvasser editor<\/a> with your UT EID and password<\/li>\n
    2. Click on File > Load File<\/strong><\/li>\n
    3. Search for the project folder and file name of the interactive<\/li>\n<\/ol>\n<\/li>\n<\/ol>\nngg_shortcode_0_placeholder\n
      \n

       <\/h2>\n

      Basic Features of an Interactive<\/strong><\/h2>\n

      Interactives are built using a series of images\u2014typically PNGs created in Photoshop\u2014that 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.<\/p>\n

      Here is a breakdown of some basic interactive elements that are possible in Canvasser:<\/p>\n

      Buttons<\/em><\/strong><\/span><\/h3>\n

      Any object\u2014including text\u2014can made clickable and turned into a button. Usually, clicking on a button will trigger a new popup to appear and at the same time make all other popups disappear (so that only one popup is visible at any given time). <\/span><\/p>\n

      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. <\/span><\/p>\n