Learn JavaScript with Phaser
Summary of our approach to learning Game Making
This chapter explains some of the wider learning approaches that are behind the way this guide is structured. Although the guide has been written so that it suits a wide audience, it was created to act as a support for a family based coding course. As such there may be some parts of the book that might not apply to you if you are not part of a group learning how to code together. Some of these parts like the physical activiites and drama based games have been moved to the appendix to reflect this.
While in this case we are learning about coding games, there are parts of this book that could support the learning any kind of language or complex systems based activity. As such, the concepts listed below may be transferrable to other courses. The main authour of this guide, Mick Chesterman, is using this area as a basis for a PhD in the field of education, so if the following gets a little theoretical at times that's why. There are footnotes in this chapter which link to further reading. Where possible academic sources are freely available.
Some context to our approach
From the very early days of using computers in Education, game has have been a great test bed to understand how we learn. The work of Seymour Papert who originated the LOGO language
He created the learning theory called constructionism which proposed that we learn best when we are working with objects that we can play around with and which allow us to share our creations with others 1. Digital games were an area where Papert and 1 saw a lot of motivation from young people to create and share what they had created 2.
In early work on teaching coding where students issued commands to control a mechanical or screen based drawing Turtle, Papert noted the importance of visual feedback in the process to allow students to see what is happening to an object then can control .
Although it was possible to create games in the LOGO language, it did seem like hard work. Following this pioneering work other researchers at MIT have developed other tools which are more adapted to the job. These emerging tools also the hands on learning of complex elements of computing concepts, practices, and system thinking.
Central to this is the work of Mitch Resnick, one of the creators of the Scratch software which many parents and educators will know about. Scratch is a coding environment which uses code blocks to make it quick to get started and which helps prevent coding syntax errors through only allowing relevant code blocks to connect together. We can use the Scratch software tool and the concepts behind its creation as a useful tool to compare our approach using the Phaser code environments.
Resnick has written widely about ways of designing software tools to promote creativity and computational thinking and indeed to help define a wider way of viewing computational thinking which includes elements of design, creativity and interpersonal skills 3.
It is worth summarising some of these concepts that Resnick has written about very effectively. Resnick and Brennan outline three areas of computational thinking, which it could be argued are a part of many design practices, but which nevertheless are useful to explore the kinds of learning we can hope for in digital game making.
- Computational Concepts: listed as, sequences, loops, events, parallelism, conditionals, operators, data
- Computational Practices: being incremental and iterative, testing and debugging, reusing and remixing, abstracting and modularising,
- Computational Thinking Perspectives: Expressing (via fluency with interactive media), connecting with and audience, questioning (the nature of tools and processes being used)
In this book some of these approaches or content are addressed explicitly in the flow of the book. For example many of the concepts listed above are dealt with directly in "Under the Hood" sections where code we have been working with is analysed to explain such underlying and foundational computational concepts. These sections also address tactics and tools for debugging and testing and later in the book deal with abstracting our code.
The "Have a Play" sections of each chapter address some of the practices referenced above. Early in the book, these sections often point users to an online code playground with code that can be remixed and reused. These sections jump us right into playing with the code we will be studying right at the beginning of the process. There will often be challenges to find and change one or more code elements to alter the behaviour or look of the game.
The following sections of this chapter explore some of the concepts above in relation to our choice of tools and processes used in the book and the "learning design" activites which make up the linked family game making programme which are also included in the appendix.
Tools to Promoting Hands on Tinkering
The promotion of having a play with code is a reference to the importance of a playful / gameful approach to learning which Resnick and Rosenbaum frame as Tinkerability in their exploration of how to design playful learning tools which promote tinkering. We can compare a tinkering approach to one where learners only receiving information about coding concepts and step by step instructions.
A summary of the concepts are as follows:
- Immediate Feedback: see the result of your actions
- Fluid Experimentation: easy to get started, easy to connect
- Open Exploration: variety of materials, variety of genres,
While approach of this book has also been guided by these principles on designing tools for tinkerability, some of the guidelines above present particular challenges when working with a text code environment. Foe example when looking at fluid experimentation the use of the Scratch has key advantage of already having a working environment, the project canvas, and a list of available commands already ready for the beginner user on starting up the program.
Ideally we want to promote the idea of hands on coding first and the work out what you are doing later to gain underlying knowledge of the coding concepts involved. However, for text coding as we are doing with Javascript it's hard to jump right into tinkering and making your own creations with out some instructions to get you started.
In addition, the opening Have a Play activiites encourage users to play around with existing projects to make alterations to the the game elements involved. This approach of messing around with existing projects is welll supported by research. Scratch has a huge community of user created projects which can be remixed and the content analysed.
While Phaser does have many tutorials and game projects created to help users to pick up topics, they are fragmented in theri coding approaches, often not easily available for remixing or often not pitched at beginner users. A sister project of this book aims to address these issues by creating a growing repository of remixable Phaser games aimed at beginner and intermediate users. See here for details - https://github.com/webgameclubs/edlab-gamemakers-club
To support this approach, chapters in this book are arranged so that users follow instructions to get a game-like environment up and running in your web browser as quickly and easily as possible.
To summarise some of the challenges presented by a web coding approach are
- less scaffoling of code so text syntax errors are very likely
- setting up a Phaser project can involve hosting HTML and js pages online
- the use of three technologies between js, css and html can be confusing to beginners, especially including links
- there are so many ways of working that even exemplar projects designed to support learning can be disparate and confusing
You may ask, if the web and its textual code nature provides these challenges, why bother to use it?
Why use the Web? Browser coding as a authentic environment
The choice to use Web-based games as an environment is led mostly from a desire to work in an authentic environment. Resnick and Shaffer explored this in the area of new media in and article which pointed to different kinds of learning that can be viewed as authentic and how certain characteristics of computational media can support these approaches 6.
In terms of using authentic tools we could see the problems listed above as assets rather than drawbacks. For the reality of modern coding, typified by the web, is that it is a complex activity which draws on decentralised networks of contributing projects which must be drawn together by the coder. Learning this reality in a relatively structured and supported framework like Phaser is a great way to set up users for a real coding career.
One concept of authenticity, key in Project Based Learning approaches, is the process of thinking and acting like a professional. The theory goes that if the work you do when you are learning is similar or identical to the work of professional in the area, this increases the motivation of learners and opportunities to put their learning into practice and get real feedback earlier on in the learning process.
We are making web based games and our approach uses Code Playgrounds - websites that allow you to test web code online - as a learning and teaching environment to make them. This is explained in more detail elsewhere in this book.
Many web developers use something called a code playground to quickly and easily share a working version of their code as a webpage or part of a page. Using Code Playgrounds is much easier then having to have your own webspace. In some ways all code playgrounds are similar. They let you type in some web code and you can see a preview of the resulting webpage immediately. This quick feedback is great for beginner coders. We can see straight away when we have something right or when we have made a mistake that need correcting.
There are other ways of developing web pages, so what are the pros and cons of this approach?
Getting up and running quickly: An alternative to using an online code playgroud is to set up a coding environment on your own computer with a local webserver. to code and run your web games but there is quite an involved process as in this offical guide - https://phaser.io/tutorials/getting-started-phaser2/
We acknowledge that the sane option for non-beginner developers to work on a local computer and there is also a section on using the programme Brackets to do this in a quick and easy way. However, we hope that avoiding a technically rigourous process at the start of our learners journey through the use of Code Playgrounds helps avoid learner anxiety. We really don't want learners to be thinking "If getting starting is so complex, you know what this just isn't for me".
Immediate Feedback: Feedback is key to the learning process and there are many kinds. We talk about more social feedback later in the chapter. We can also talk about the kind of immediate feedback that Papert imagined when he described his concept of Objects to Think with. As mentioned in the introduction, in the LOGO language environment screen drawing tools and physical robots were able to give quick and tangible visual or physical feedback to the coding input of participants. Interestingly, this idea of the value of getting immediate and concrete feedback as a way of increasing the motivation and engagement of participants is also very important in the research into what makes video games fun to play 7.
Code playgrounds show code on one part of the screen and allow a very quick or even immediate updating of the resuting web page or game or the other. This very interactive feedback between us and our emerging game is ideal to keep us motivated. I would even describe it as complusive in the way that many describe mental flow states 8.
Social Learning via sharing and forking of projects: Researchers Yasmin Kafai and Quinn Burke have recently focused on the possibilities offered by online communities to share the work that is created in the process of coding games and media. They argue that their is not only a high incentive to share what is created as participants identify highly with the game and media they are working, but also there is a great educational value in such sharing and resulting feedback and discussion that takes place 9. They also note however that it can be quite a daunting process to move from making a game to then sharing it in an open community, hence the value of our playgful group activities outlined in the appendix.
Our use of Code Playgrounds, whose primary use is to allow web developers to showcase their work and solve problems, also allows us to share links of our projects which may be completed games to share and to act as inspiration to others, or they may be work in progress shared to garner encourangement or to ask for fixes.
Studies on the Scratch community show the value of remixing existing sample projects that are provided by fellow participants or volunteer game makers / educators. These can be can be taken apart and reconstructed and reshared.
There is also good research to support the value of asking student to fix existing games that are a bit broken or incomplete, so-called half-baked games. That fact they don't quite work, but are almost playable gives participants incentive to delve into the code to fix the problems. Kynigos and Yiannoutso explore the motivational value of these games that need fixing 10.
We are crafting a community to support the development of a community of learners and users working with Phaser to here -https://github.com/webgameclubs/edlab-gamemakers-club/
- You can log in and borrow a copy of Papert's key work Mindstorms at the Internet Archive. https://archive.org/details/mindstormschildr00pape ^
- This review of constructionist gaming by Papert's colleagues Yasmin B. Kafai and Quinn Burke is a very comprehensive look at the issues in this field and key research studies. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4784508/ ^
- See this chapter on designing for tinkerability https://web.media.mit.edu/~mres/papers/designing-for-tinkerability.pdf And this paper on a wide definition of computational thinking with many examples using the Scratch too. https://web.media.mit.edu/~kbrennan/files/Brennan_Resnick_AERA2012_CT.pdf a, b
- See this article for a bit of a summary of learner anxiety and language learning. While this is written for foreign languages, we can see how it can apply to the culture of Computer Coding. https://www-jstor-org.ezproxy.mmu.ac.uk/stable/pdf/329492.pdf ^
- Find out more about this book here. https://www.google.com/search?q=art+of+game+design ^
- See http://web.media.mit.edu/~mres/papers/authenticity/authenticity.pdf ^
- This idea is explore by Malone and Kurt Squire - http://www.scit.wlv.ac.uk/OJS_IJIGS/index.php/IJIGS/article/view/38 ^
- For more on Flow and games see the following links http://www.ccs.neu.edu/home/lieber/courses/csu670/f08/materials/p31-chen-flow-in-games.pdf and http://www.gamasutra.com/view/feature/166972/cognitive_flow_the_psychology_of_.php ^
- For an introduction to area see Kafai and Burke here https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4784508/ For a more in depth coverage see their book Connected Gaming. ^
- An article called "Children challenging the design of half-baked games: Expressing values through the process of game modding" explores this idea in a context of modding games but it not freely available However an original article on Microworlds perhaps explains the concept better and is freely available here - https://hal.archives-ouvertes.fr/file/index/docid/588777/filename/Kynigos-Chronis-2007.pdf ^