2. Guidelines for web app game development¶
By default, each fully-functional command-line game automatically has as a fully-functional web app version. The framework puts a thin web app layer over the logic code to automatically make this web app. However, while this automatically-generated web app is fully functional, it is still fully text-based. The main job of developing the web app version is to make the game engaging for children.
Tip
The logic file should do all of the heavy calculations when it comes to graphics and animations. If you find that your web app is doing a lot of work, then you need to move this code into the logic file. The reason for this is that we want the framework to be able to support multiple graphical front ends (e.g. desktop, mobile, and alternative web-based game engines). Since the logic file will be common to all front ends, the less code that will be in the web app, the easier it will be for the game to be deployed with a different front end. In particular, the web app should not perform any calculations that are already performed in the logic file (e.g. checking if the player’s answer is correct); this opens up the possibility for contradictions to occur (e.g. where the logic will say that an answer is correct but the graphical animation indicates that it is incorrect, or vice versa).
2.1. Simplest web app games to learn from¶
One excellent way to learn how to create games with the CTGames framework is to try to understand the code of existing games. Besides the template game, the three simplest games in CTGames are designed to act as learning aids for someone starting out with the framework. They are Just Addition (directory justaddition), Just Odd (directory justodd), and Just Reverse (directory justreverse). Please read and understand their code to get some ideas for how to make a start with your game.
When you have a need to move on to more complicated features/functionality for your game beyond what these simple games provide, try to find existing CTGames games that have that feature or provide that functionality. The full code of each game is available, so you’ll quickly be able to see how that game achieved it. Playing a large selection of web app games will also give you ideas for how your game could progress. If there is a feature or piece of functionality that you don’t see in any previous game in CTGames, talk to your supervisor to see if and how it could be implemented.
2.1.1. Running locally the web app versions of other developers’ games¶
Open a terminal in any directory, and enter
cd ~/gitlab.cs.nuim.ie/ctgames/ctgames/CTGames/bin/
git pull
To start the docker containers with web server, Flask server, and database server, within the CTGames Conda environment you can type (without pressing Enter)
./sta
Press Tab and it should autocomplete to ./start_docker_server. Then press Enter. You will be asked to enter the password you used when signing in to Ubuntu.
Note
You do not need to be in the CTGames Conda environment when you run ./start_docker_server. If you do, you will see an error of the form
activate: No such file or directory; you can safely ignore this error. Also, ignore an error of the form/etc/init.d/postgresql: command not found; it just represents a check in case you are running a local version of PostgreSQL.
You will have to leave this program running in the terminal as long as you need the web server to be active. So, if you have other work to do on the command line, you’ll have to open a new terminal.
Tip
If you are using the VirtualBox image for CTGames development, a teacher name, email, and password have been created for you and are in a text file on the Ubuntu desktop called
~/Desktop/Player PINs.txt. This file also contains a class name and class members’ IDs and PINs.Alternatively, if you are installing CTGames directly on your computer according to the previous instructions, you will have already created the class members’ IDs and PINs by this point.
The teacher credentials are needed to activate the class (to allow class members to sign in). Point Firefox to http://127.0.0.1:8080/teachers and sign in as a schoolteacher. Choose the appropriate class and click Activate.
Any of the player credentials can be used to play the web-based versions of games. Point Firefox to http://127.0.0.1:8080/ and sign-in as one of the class members using the appropriate ID and PIN.
To stop the server, go back to the terminal. Enter Ctrl-c and wait a couple of seconds for the server to shut down.
2.2. Graphics¶
SVGs are preferred for cartoon-like backgrounds and game elements because they are infinitely scalable and usually smaller in size compared to raster images. JPG images should be used for real-world photos used for backgrounds. PNGs would be acceptable for game title graphics.
Ensure that you have a licence PNG file for each graphic used in your game.
This can be obtained by taking a screenshot of the web page where it was downloaded from (with URL visible).
This screenshot, saved in PNG format, should be in the licence/ directory for your web app with a name similar to that of the original graphic in your game.
Filenames should all be in lowercase to conform to a Python convention to support cross-platform compatibility.
The recommended app to edit SVG files is Inkscape (https://inkscape.org/). It runs on GNU/Linux, Windows, and macOS. Online SVG editors also exist, for example Boxy SVG (https://boxy-svg.com/) (as of 2023 it seems to run on Chromium but not Firefox).
Below are suggested websites to download graphics with favourable licence terms. (Be aware if any links redirect you to a different website that requires a paid licence for graphics.)
Image resources
Download SVGs for game elements from (for example):
Download photos for game background images from (for example):
SVG files can be made smaller (in terms of bytes) using:
https://jakearchibald.github.io/svgomg/ (web app)
https://github.com/RazrFalcon/svgcleaner-gui/releases (Linux app)
2.3. Web app debugging¶
Some tips to get you started debugging your web app programs:
To see error messages from a web app, right-click on a background area of the web app and choose the option that contains the word Inspect (Firefox and Chromium/Chrome use this term), then select the tab labelled Console.
With Brython,
print()calls in your Python code will also print to this console.To inspect the properties of a DOM element, left-click the arrow that is a couple of symbols to the left of, and on the same row as, the Console tab, then left-click the DOM element you wish to inspect, and the properties of that DOM element will instantly appear in a tab labelled Inspector (using Firefox) or labelled Elements (using Chromium/Chrome).
After changing your web app code, the quickest way to see the updated behaviour in the web app is to first click the hamburger menu (the ☰ icon), and then click Reload game from server (this just reloads the code for your web app, and leaves the CTGames framework in memory). If the hamburger menu is not visible (if CTGames crashed, for example), then you will have to type Ctrl-r on the keyboard to reload the CTGames framework and sign in again.
2.4. Conveniences for web app development¶
A local preferences file can be found in your local copy of the git repo at CTGames/ctgames/ (or, equivalently, at CTGames/bin/server/docker/app/static/ctgames/) with the name local_player_preferences.py. It is explained below how you should edit it. It is intentional that this file is ignored by git, so you should push your edits to the git repository.
2.4.1. Player name and PIN¶
When signing in to the CTGames web app, you will notice that for privacy reasons (schoolchildren will usually share computers at school) the browser will not store player sign-in details. As a convenience for developers, this can be bypassed, by using the file
local_player_preferences.pyto store a schoolchild’s name and PIN as shown:saved_player_name = 'ExampleA1' saved_player_pin = '0000'