Learn JavaScript with Phaser
Introduction
Learning to code can be tricky, sometimes like a puzzle to solve. At times you get stuck. It helps to have a project you really want to get working. It can help you to keep you going to overcome your problems. Part one of this book gives you a structured start to give you the basics and part two encourages you to start your own project and to use some commons game elements that we explain.
As we make our games on the web in code playgroungs (see below). It means that we can easily share our coding creations as part of web pages. You'll be able to share your creations with friends and family.
What this Book is and isn't
It is:
- a great way to get started making a simple 2D arcade style game
- a fun way to find out about the basics of the coding process
- an introduction to Javascript and some of the ways it does things
- a partner guide to support more hands-on collaborative workshops
This book has limits! It's a short book that you can progress through quickly. Here are some of the things that we don't cover;
- more advanced 3D approaches to game making or any role playing elements
- a systematic way to learn a programming language (we pick up concepts when we need them)
- a complete guide to the most advanced approaches to writing game using the Phaser code library
Making Games for the Web using Phaser
Phaser is a Javascript library which supports the creation of web games. Real game developers made it and other game developers use it. They get paid for their games. It's a for real project. This is serious fun.
Retro games have come back into fashion. Parents play them with children and they are fun and easy to play on home computer, consoles and especially on your phone. They are a great way to start learning how to make digital games.
This book will help you create a game in a step by step way adding different game features along the way. It is inspired by and guided by some great tutorials that are out there on various websites. Particularly the work of Richard Davey at Phaser, end3r, Belen Albeza and Chris Mills at Mozilla and Thomas Palef at lessmilk.com.
Making Games on the Web using Glitch
This book uses Glitch our working and learning space for games. At Glitch.com you have an editing area for your code on one tab of the browser and a preview area on another tab. We can also see our code side by side. This kind of website is called a Code Playground. Using Code Playgrounds skips having to set your own website and importanly 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.
How and What we Learn in this Book
How we learn is described in more detail in a chapter in the Appendix but here it is in a nutshell. We learn by;
- diving into the process of making games together by playing and tweaking games right from the start
- following a short course which covers the bare minimum of platform game
- then encouraging our game makers to branch out to choose and add their own game mechanics and elements of game polish
- their starting mechanics and polish elements can be chosen from a list which will give them the skills to then add their own.
Why Javascript for beginners?
In short, because Javascript is the language of the web. And web games are great fun to play, make and share!
A lot of beginner text coders and teachers stick to Python or other text code languages that are easier than Javascript. You can also avoid text code completely. Kodu, Scratch and Blockly and Game Start Mechanic use a visual approach to coding, where you snap together colour coded blocks.
Even fans would admit that learning Javascript can be tricky and there are lot so different ways to do the same thing. Also to make your own real web pages you also need to also learn about HTML and CSS.
However, we think that the combination of tools like Phaser and Code Playgrounds and Encouraging Facilitation bring the process of making fun, accessible games with our reach even if you haven't already done some coding using other tools. Here are some ofthe tactics that we use to help you through the process.
- we use a range of starter games that are available on our project home page here - https://github.com/webgameclubs/edlab-gamemakers-club
- we have created to some coding guidelines1 to approach it in a simple and consistent way.
- we focus on simple but acheivable tasks that are easy to grasp along the way we pick up the fundamentals of Javascript language and coding processes
About the Phaser Community and Games
Richard Davey is the lead coder on the phaser project. There are two main versions of Phaser in use Phaser 2 and Phaser 3. This book looks at Phaser 2 as it is a bit easier to start to learn. One thing that the community of people using Phaser to make games is very good at is sharing how they do it and helping others who get stuck. There are some fantastic resources available for free. A lot of these resources are available on the main Phaser website.There is also an online forum for when you get stuck as well here - http://www.html5gamedevs.com/forum/14-phaser-2/
There are some great games out there made with Phaser which we can look to for some inspiration. Here are a few of our favourites.
Dork Squad: Can you (and a partner) save the world from robots. Have you got what it takes?
https://eoinmcg.itch.io/dork-squad
Grooow: Platformer game with puzzle elements! Pick up all the dots to advance to the next level.
But be careful! The more you pick up, the heavier and bigger you get, and thus it'll be more difficult to move and jump!
https://ladybenko.itch.io/grooow
Cybertank: Guide the tank through the levels to collect the cubes and escape. Great sounds and retro graphics here.
http://cybertank.paulp.ws/
Knife Hit: This game is created as part of a fantastic tutorial. It's a bit advanced for beginners but is definately worth checking out.
https://www.emanueleferonato.com/tag/knife-hit/
Playful group learning processes
This guide is offered originally as a support to group work. As such it contains group starter and reflection activities. These are included at the end of this book in the appendix so as not interfere with the flow of someone working through this book to teach themselves.
Learning a new language can be stressful. Sometimes it can be tempting to think, this just isn't for me. I'm not a coding type of person and this is stressing me out. From the work of Krashen and other second language learning scholars 4, we are inspired to try to create an atmosphere for learning the Javascript language in an anxiety free environment. The appoach ideally is through learning by doing when ever possible.
We see playing around with existing games and promoting a playful curious approach as a great way to reduce learner anxiety. While the focus of this guide is to work through code examples and to undertake coding challenges, there are also group activities described which help to introduce concepts to do with game making and coding in a accessible and non-digital way. The motivation is to provide an accessible gateway into the culture and language used for game making for those who do not feel part of a digital maker or coding culture. This approach is explored with activities in the appendix;
Drama Games - Turning on the Tap
These games are designed to help reduce anxiety of participants starting a new and unfamiliar activity, to get communication and energy going as a group. They often involve a bit of sillyness and they are definately a way of the facilitator to put themselves out there and make a connection to the group and to show that while we'll be learning useful skills this is not a place to be too serious.
Playful Attitudes to Learning & Reflection
The work on a playful approach to studies is key to the game making course of club that this book was written to support. Jesse Schell defines a game as “a problem-solving activity, approached with a playful attitude". And when it comes to keeping a hold of what we have picked up and communicating it with the others in our group, sometimes that can just feel like hard work. This chapter in the appendix is a work in progress where we keeping a record our out attempts to do this.
Welcome to the Adventure!
Learning to code by creating your own games is always going to have some ups and downs. If you are worried you are going to get stuck. We would reccomend trying out the exercises in this book and the challenges together with someone else. Maybe someone in your family or a friend. That way you can get past some of the challenges without getting to frustrated.
In addition to coding and game making, there are other skills that you may pick up through making games, especially if you do it with other people. These are explored more in the next chapter but include problem solving, communication and collaboration skills, computational, systems and design thinking approaches.
Read on to start the adventure.
- https://github.com/webgameclubs/edlab-gamemakers-club/blob/master/CODE_GUIDE.md ^