Categories
makecode phaser resources

An Overview of Game Coding Tools

The field of game making is extremely dynamic as new tools frequently emerge with novel approaches and features. In this section I outline the key features of selected game making tools. Some game making tools for beginners, for example Kodu or the Game Maker series, use a Graphical User Interface (GUI) to abstract away the detail of the underlying code complexity. While those may be useful to learn game design without coding, in this section I only include tools that allow users to code the game directly.

Pygame – a python based library for 2D Games: Pygame is an add-on (code library) for Python to make game making easier. Pygame is a good choice for students that have had experience of coding in Python or for teachers that want to encourage fluency in this particular language. The Pygame community has produced resources aimed at beginner coders.1 There are also interesting resources and books to support game making with Pygame on the website of the Raspberry Pi foundation.2 It is harder to set up a game-coding environment using Pygame compared to some of the other tools here. There is also less of an active community of game makers sharing their games online.

Scratch – a familiar and flexible tool: Scratch is a block-based programming environment popular in schools. Scratch was designed for more general multi-media projects rather than being targeted at solely game making. However, games are a popular choice of project for young people. The ability to create your own graphical and audio assets allows users to bring their own interests into projects. However, from my experience, while it is quick to get started, the lack of program common game patterns like gravity and collisions means that complexity of the code you need quickly mounts. Even then, for the most part the game play of the learner created games is often a bit unsatisfactory. Where Scratch does stand out is the community element of the website where learners can get inspired by the extremely diverse creations of other young coders. The ability to remix the work of others is a great way start to get used to the production process.

Phaser.js in a Code Playground – an authentic web game making framework: Phaser is a javascript game making library. It is my own tool of choice when it comes to game-making using text code. To teach it I ask learners to code games a web coding environment called a code playground. Code playgrounds are a tool used by both expert and novice coders to share examples of code that can be edited and preview online. A key feature is the ability to make changes in code and quickly see the new results appear in the live game. The concept is particularly useful for novice coders. Many text-based code playgrounds exist online. I chose Glitch.com although the process also works well in Trinket which is promoted by Code Club resources. Using this kind of web playground is a particularly authentic choice of tool. Phaser is used by professional game makers and Glitch is the test bed of choice of many code developers. If learners do take to this way of working they can easily progress to creating genuine Indy Games, dynamic websites and flexible web applications.

Figure 1.1. Phaser in Glitch.com playground with code and game side by side. Screenshot by author.

The drawback of this approach is the potential complexity of using real web technology. While it is possible to hide certain elements of html and css away from the user, many mistakes are possible which break the game completely. Luckily Glitch has the ability rewind and undo your changes via an easy to use timeline of your project.

P5.play – an arts inspired coding environment: P5.play is an add-on to the p5.js javascript framework. P5 is a javascript library that is quick to learn and get creative results. Sample projects often involve moving interactive, coloured shapes around and generating patterns. P5 has become popular not only with artists and designers but increasingly with educators. This is partly due to the ability to use it in code playgrounds with all of the advantages previously discussed in the section Phaser and Glitch. While P5.play is limited to 2D games, it adds useful design patterns like animation support, basic collision detection and help for mouse and keyboard interactions. Accessible tutorials are available online.3

MakeCode Arcade – specialised block based programming: MakeCode Arcade is a block based programming environment similar to Scratch but with some interesting features which are tailored to game making like gravity, lives and a game over block. In addition, the multi-media making abilities are very stripped down, you can download the games to hand held devices or run them easily. Another advantage is that the MakeCode system is also used to code the popular Microbit micro controller. So this may be familiar to you as a teacher or to your students.

MakeCode Figure 1.2. MakeCode Arcade with code and game side by side. Screenshot by author.

The MakeCode Arcade interface, like Scratch has the ability to edit sprite characters. However, compared to scratch it is more limited in terms of what can be created. The simplicity of a tool like MakeCode Arcade can help address issues around learners trying to attempt projects that are too ambitious in scope. The designers have intentionally limited the tools provided to work on audio and graphical assets and the screen size of the game. This simplicity reduces the amount of time learners spend creating assets and thus support students to spend time build familiarity and fluency with coding constructs. There some engaging, diverse and comprehensive example games and tutorials at the project website.4

1https://www.pygame.org/wiki/resources

2https://www.raspberrypi.org/blog/tag/pygame/

3https://molleindustria.github.io/p5.play/

4https://arcade.makecode.com/

Categories
phaser resources

Phaser / Glitch Resources

There is a summary of the resources available here.