Phaser Game Running From Glitch

 

Background

I’m helping https://twitter.com/mickfuzz with https://github.com/webgameclubs/edlab-gamemakers-club. One goal of the project is to allow the easy development of game building projects that educators can use in their sessions. We’re looking to cover off these two constraints:

  1. The educator should be presented with an online coding environment that is easy for novices to use and requires no installation of dev tools
  2. The coding environment should support a development workflow from git into the coding environment and ideally back into git from the coding environment.

We’ve been looking at https://codepen.io/ as a coding environment but its lack of easy git integration means we’re going to try other options.

Glitch

https://glitch.com/ is another online coding environment. It is slightly more complex for novice users than CodePen, but in return is also more capable. Glitch does have direct support for import and export from git repos: see their documentation.

…But Does Glitch Work for Phaser.js Games?

In this post I’m going to walk through setting up one of the existing Phaser.js games in Glitch and working through the code session sheet in Glitch.

Importing CodePen Into Glitch

Let’s get started with this basic game made by Mick and friends in CodePen: https://codepen.io/mrmick/pen/wXMMXR.

2018-09-07 07_24_59-Simple game to edit

CodePen lets you export a project to a zip file. From the export I’ve got an index.html file and an index.js file. I’ll import them into a new Glitch project: https://glitch.com/edit/#!/fertile-origami. One small wrinkle with Glitch is that you can’t directly add a content folder. Rather when you add a new file you include the path in the file name, i.e. to add an index.js file in the js folder you add “js/index.js”. The import worked fine and the basic game runs fine in Glitch.

Running Through the Session Steps in Glitch

The next steps is to run through the tutorial steps in the Glitch environment. The tutorial has these parts:

  1. Make some code edits
  2. Update the assets

How Easy Are the Code Edits?

Edits are really easy in Glitch. The layout of the interface differs from CodePen in that it doesn’t try to squash the output window into the same screen as the editor. Rather Glitch has a “️Show Live” button that then opens the output in a new browser window. This is a trade off:

  • CodePen gives faster feedback as the changes are visible as you are typing
  • Glitch gives much more room to edit code but the changes are in a separate window

Despite being in a separate window the changes are instantaneous. Change the value of game.stage.backgroundColor = '#81dafa'; and the game window changes colour almost as soon as you have stopped typing.

How Easy Is It To Use Assets in Glitch?

Using assets, e.g. image files, is not seamless in Glitch. The way that Glitch wants this to work is for you to add media files to their “assets” section. When you add the asset it is added to the Glitch content delivery network (“CDN”) and assigned a unique identify. This means that rather than referencing say,

var sprite = "assets/player.png";

…instead your code would need to be along the lines of,

var sprite = "//cdn.glitch.com/bab20fc1-f1c8-4cea-be3a-ba6b02b4e63f%2Fplayer.png?1536480377832";

Beyond the obvious complexity of the code this has a couple of downsides.

How Do You Update Assets in Glitch?

If you take the simple approach of updating your player.png image and dropping it back in Glitch then you get a whole new web address. This means that you update a new image in the assets folder but the image doesn’t change in your application. To get your application to change you have to go into your application and change the web address in every place your new image is used. This is going to be really confusing for new coders.

What Happens to Assets When You Export a Project to GitHub?

Glitch has some nice GitHub integration (see their video: https://youtu.be/aWvTqHNDi_Q). So what happens to the assets hosted on the Glitch CDN when you export your code to GitHub? After some experimentation it turns out that your assets aren’t saved to GitHub. Rather a .glitch-assets file is saved to GitHub. The assets file is a look up of asset names to CDN web addresses. Here’s an example snippet:

"name":"player.png","date":"2018-09-09T08:06:17.832Z","url":"https://cdn.glitch.com/bab20f

Does This Mean Glitch.com Is Unusable for the EdLab Game Making Club?

It’s not perfect but it will do. Mick has some good advice on GitHub. It’ll do for a beginner, just need to get the GitHub pipeline working.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s