emarb

Multiplayer Online Part 1: Easiest project setup with TypeScript and ParcelJS

Recommended Posts

Introduction

I am a big fan of strongly typed programming languages, and a big fan of Phaser. So TypeScript was a no brainer for me.

The thing about TypeScript and phaser for me was a bit of a learning curve in terms of project setup and configuration. The last thing I was using was a combination of gulp, browserify, watchify, and uglify. Plus, setting up a nodeJS server, in order to boot phaser in localhost, and furthermore, run the server in a cloud service, in my case, I used Heroku.

This can be a little bit of a turn off for most users who just want to start building video games. This was not my case particularly, but I indeed wanted to get to a point of writing the least amount of code as possible for setting up a project. Even more if I'm just prototyping.

The solution for all of the above, is ParcelJS.

 

Installation

First of all, of course you will need to install Node.js from https://nodejs.org/en/download/ or from your system's package manager.

After that you will need to install the TypeScript and Parcel packages globally through npm.

npm install -g typescript parcel-bundler

Then we can create a folder for our project and initialize a node project

mkdir MyNewGame
cd MyNewGame
npm init -y

At this point we need to install the packages at project level

npm install --save phaser
npm install --save-dev typescript parcel-bundler

Now we can fire up our text editor, in my case I'm using Visual Studio Code. I find it really lightweight, customizable and robust.

code .

Now we'll create a folder called 'src' and add two files to it: main.ts and index.html

image.png.bc7028cc08c4d773c2a9e5387b30a082.png

In main.ts we'll create an instance of a Phaser game, with it's config.

import * as Phaser from "phaser";

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
};

let game = new Phaser.Game(config);

Then at index.html we'll add a basic html structure, and add a script tag with a source pointing directly to the main.ts file. Yes! We do not need to transpile the .ts file to .js!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My New Game</title>
</head>
<body>
    <script src="main.ts"></script>
</body>
</html>

And believe it or not. You only have to go back to your terminal and point parcel to the index.html file.

parcel .\src\index.html

You should get the following response in your console

image.png.51ccae08861796392d6d614ab8099134.png

If we open a web browser and access the localhost at the port printed in your console. We can see the Phaser black canvas rendered on the page.

image.png.e521f7afc2762d822d36d3007b0a2b1f.png

And if you open the developer tools you'll see Phaser 3 running, and no errors in the console.

image.png.3d8dc22a75514228a7fb54e935a7e01c.png

Just to have something to display on the screen we can add a quick text like so

Create a new folder inside src called scenes, and create a new file called mainScene.ts

export class MainScene extends Phaser.Scene {
  constructor() {
    super({ key: "MainScene" });
  }

  create() {
    this.add.text(220, 150, "TITLE SCREEN", { fontSize: "48px", color: "red" });
  }
}

Then modify your main.ts file config to use this new MainScene class

import * as Phaser from "phaser";
import { MainScene } from "./scenes/mainScene";

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MainScene
};

let game = new Phaser.Game(config);

Now you only have to save both files and parcel will detect the changes, re-transpile and re-bundle everything, and even refresh your browser.

image.png.d61c7a19895f90464d3bbad16c0bebb8.png

That's it for this first part. Covering mostly setup. For the next parts I will explore an easy approach to multiplayer online with Google Firebase, with zero server-side code, and automatic deployment alongside source control in GitHub. I really hope this is helpful for anyone, I would love to hear about your experience with bundlers, and what are your recipes of choice, and if you find this to be a good choice :)

Take care everyone!

 

Edited by emarb

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.