Starting JS-Game-Dev-Projects the quick & modern way

Read this if you'd rather spend more time coding and less time crying in your cereal.

Some years ago I spent a whole evening trying to set up a Game-Dev-project.

I wanted to use modern JS-features that weren't available yet.
There goes half an hour setting up Babel..
I couldn't live without modules, for keeping everything organized.
An hour of fighting against old Webpack he'll never get back..
Phaser (the game-library) wasn't really module-ready yet.
Weeps silently, as he script-tags the compiled bundle into the head-tag.

I think you get the gist.

Browsers and libraries have improved to the point that frontend-development is getting simpler again. At least it feels that way. Simplicity of use has been made a bigger priority by developer-tools, and modern browsers do support the most useful ES6+-features by now.

To learn and prototype with modern paradigms, I don't need to go through any of the mentioned steps anymore.
What will he do with all those saved hours?

Let's see what changed:

Chrome, Safari, Edge, Firefox all support modern JS-Syntax like classes, arrow-functions, async/await etc.
JS-modules are supported, so there's no need to bundle and compile before sending them to the browser.
Phaser reached version 3 and it's a breeze to import it as a module.

Ok but how on earth does this work?

First but not foremost, the ol' index.html:

<html>
    <body>
        <script type="module" src="./app.mjs"></script>
        <script type="module">
            import './app.mjs';
        </script>
    </body>
</html>

I bet you noticed the "mjs"-ending of the "app.mjs"-file. It means "Michael Jackson Script" (I think). This way the browser knows that it's supposed to load files as modules. I can only use the "import"-syntax in "mjs"-files.

He'd never confess it but he's kidding, here's what .mjs really means

Let's take care of the app.js. It's just enough to get Phaser started:

import './phaser.mjs';

const config = {
    type: Phaser.AUTO,
    width: 400,
    height: 400,
    scene: {
        preload,
        create,
        update
    }
};

var game = new Phaser.Game(config);

function preload() {}
function create() {}
function update() {}

I still need Phaser! Bzzzssshhhhh! Let's grab it from their releases-page and rename the "phaser.js" to "phaser.mjs" so it's recognized as a module.

Now here's a little caveat: "mjs"-files will only be loaded and parsed if my server is transferring them with the correct MIME-type. I couldn't get it working with a normal PHP-server (I usually use MacOS' "php -S localhost:9999"-command).
He wanted to use "caveat" ever since he heard Jon Blow use it on his stream.

Node-based servers seem to work better. Http-server (npm install -g http-server) is handling the files as expected. I can execute "http-server" in my project-folder and directly visit the link it outputs.

Hooray! I'm seeing an empty canvas and Phaser running in my Browser. Here's everything you need in one screenshot:

Here comes Horror Vacui, but that's for another article.

In my directory lie three files:

index.html
app.mjs
phaser.mjs

Isn't it great not to need node_modules?
It's almost like in the old days, isn't it?

☝️ Don't get me wrong. If it's about performance, shipping and supporting a wide range of browsers, I'll absolutely want to bundle, babel and minify my code. This is all about getting your ideas out as soon as possible, while still being able to use modern features. No more evenings of setting up stuff on spec.
He's not missing his daughter's second wedding again!

Once I decide to go all in with bundling and transpiling, it won't be more work to set it up afterwards. The JS-files can stay as they are, and still will work with Webpack or Parcel.

Ready to code? Check out this nice intro to Phaser 3!

Blog

Starting JS-Game-Dev-Projects the quick & modern way

Antonio Radovcic

Join Our Newsletter. No Spam, Only the good stuff.

Related