A quick-start project template that uses Phaser 3, TypeScript and Rollup for bundling

License: MIT License

JavaScript 81.83% TypeScript 18.17%

phaser3-typescript-project-template's Introduction

Phaser 3 TypeScript Project Template

This quick-start project template combines Phaser 3.60 with TypeScript 5 and uses Rollup for bundling.

Requirements

Node.js is required to install dependencies and run scripts via npm.

Available Commands

Command	Description
`npm install`	Install project dependencies
`npm run watch`	Build project and open web server running project, watching for changes
`npm run dev`	Builds project and open web server, but do not watch for changes
`npm run build`	Builds code bundle with production settings (minification, no source maps, etc..)

Writing Code

After cloning the repo, run npm install from your project directory. Then, you can start the local development server by running npm run watch. The first time you run this you should see the following demo run:

After starting the development server with npm run watch, you can edit any files in the src folder and Rollup will automatically recompile and reload your server (available at http://localhost:10001 by default).

Configuring Rollup

Edit the file rollup.config.dev.js to edit the development build.
Edit the file rollup.config.dist.js to edit the distribution build.

You will find lots of comments inside the rollup config files to help you do this.

Note that due to the build process involved, it can take around 20 seconds to build the initial bundle. Times will vary based on CPU and local drive speeds. The development config does not minify the code in order to save build time, but it does generate source maps. If you do not require these, disable them in the config to speed it up further.

Versions Used

Phaser 3.60
TypeScript 5.0.3
Rollup 3.20.2
Rollup Plugins:
- @rollup/plugin-commonjs 24.0.1
- @rollup/plugin-node-resolve 15.0.2
- @rollup/plugin-replace 5.0.2
- @rollup/plugin-terser 0.4.0
- @rollup/plugin-typescript 11.1.0
- rollup-plugin-serve 2.0.2

phaser3-typescript-project-template's People

Contributors

Stargazers

Watchers

Forkers

bhgsbatista storiesclass luke0924 obenxiaohai enigmanark zthorn acbart funkitronstudios gormonn partht92 cjrutherford johntiglias cogentx juliegirlgames simonthoresen mrdockal silvertree7622 atranimal dheerajsuthar ebabel-games anthonypengelly schadocalex joshuamorony justinro-underscore minigraphx shizonic j-stoff qwerxman ndthanh20 antoniozanini dasheck0 patomation triberraar idtksrv junklabgames dead-tr meta-groove sixtease tophwells ivankoop telostia elephantthink phesodge zinkko space11 tiffany-brand thundree steve-salmond umi-tyaahan lx-0 gabe-tapple danielliu-ai vonixa aidenchiu2011 anthonyjoeseph muhdnurkamal brockweekley jhessin sinmetal studnitz nayrpg diogo-pessoa treylok derrickp mejsik zhouxiaona aerze casonclagg mwidman javel555 alidbc tohzen adorazel kdorland mbrie041 casualistic lipinska-anna dahausa tchaudhry91 isral amirh19 jmondaut ruckychang sfritton colin-h brannonh douglaslira dotnosy ffabisiakk junwei-wong webeleon bassochette cliveybhoy37 luisroder mscarn96 nocturnal-petals stephanalas coulgreer cprerovsky cabzx

phaser3-typescript-project-template's Issues

no default index.html

Hi Richard,

I'm considering Phaser again, seeing proper typescript template is awesome.

When cloning and building the demo, I get an error on my localhost since no basic .html is provided.

404 Not Found

/Users/aymeric/Documents/Workspace/TypeScript/phaser3-typescript-project-template-master/dist/index.html

(rollup-plugin-serve)

Would you mind to add a default one?

Replace rollup-plugin-uglify with rollup-plugin-terser for es6 compatibility

rollup-plugin-uglify no longer supports es6 and should be replaced by rollup-plugin-terser.

When I ran my first prod build I received the following error using rollup-plugin-uglify:

[!] (plugin uglify) Error: Unexpected token: name «YourFirstClassReference», expected: punc «;»

To fix this on your project do the following:

npm i rollup-plugin-terser --save-dev
npm un rollup-plugin-uglify

Then replace the following 2 lines in your rollup.config.dist.js file.

-import { uglify } from 'rollup-plugin-uglify';
+import { terser } from 'rollup-plugin-terser';

-        uglify({
+        terser({

Unable to find module '.assets/...'

Hi,

I have a Phaser 3 project in JS and I want to try to move it to typescript. Unfortunately, I am not able to figure out how to import image assets. I have tried a few different things from the web but nothing helps :(
My imports currently look like this:
import x from "./assets/x.png"

Could you please explain how to properly import assets?

Issue with Mapping

When I build this project and turn on source mapping in the tsconfig file like so:

{
    "compilerOptions": {
        "target": "es5",
        "moduleResolution": "node",
        "sourceMap": true,
        "module": "ES2015"
    },
    "include": [
        "./src/**/*"
    ]
}

The mapping seems to be off by one when I turn on the debugger, here is an example:

It is hitting an illogical point in the code because it is off by one. The map file is being created, but for some reason it is off by one line. I have not changed the rollup.js file any from what is supplied in the repository.

Need to add `tslib` to `package.json`

It is a peer dependency of @rollup/plugin-typescript.

The template contains a high severity vulnerabiltiy

I just tried to use the template, and npm complained about

~/src/phaser3-typescript-project-template$ npm audit
                                                                                
                       === npm audit security report ===                        
                                                                                
┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Remote Code Execution                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ serialize-javascript                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=3.1.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ rollup-plugin-uglify [dev]                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ rollup-plugin-uglify > serialize-javascript                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/1548                            │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 high severity vulnerability in 86 scanned packages
  1 vulnerability requires manual review. See the full report for details.

Given that it is only used in an uglify step in a build dependency, it may not actually be exploitable, but it is still a bad first impression.

The link again as a link: https://npmjs.com/advisories/1548
The CVE: https://nvd.nist.gov/vuln/detail/CVE-2020-7660

May be a reason to reprioritize #7

Are there typescript definitions for Phaser lib?

Has anyone made typescript definitions for Phaser?

Tiles not loaded

I started a new project using this repository.
The project runs everething okay when I just clone it and run "npm run watch".

But when I add some lines, this not runs like I expected.

This is my game.ts file:

import * as Phaser from "phaser";
import GroundPNG from "../dist/assets/[A]Grass4_pipo.png";
import mapJSON from "../dist/assets/map.json";

export default class Demo extends Phaser.Scene {
  constructor() {
    super("demo");
  }

  preload() {
    this.load.image("tiles", GroundPNG);
    this.load.tilemapTiledJSON("map", mapJSON);
  }

  create() {
    const map = this.make.tilemap({ key: "map" });
    const tileset = map.addTilesetImage("assets", "tiles");

    const ground = map.createLayer("ground", tileset, 0, 0);
  }
}

const config = {
  type: Phaser.AUTO,
  backgroundColor: "#125555",
  width: 800,
  height: 600,
  scene: Demo,
};

const game = new Phaser.Game(config);

This is my rollup.config.dev.mjs file?

import commonjs from "@rollup/plugin-commonjs";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import serve from "rollup-plugin-serve";
import typescript from "rollup-plugin-typescript2";
import json from "@rollup/plugin-json";
import image from "@rollup/plugin-image";
import dataUri from "@rollup/plugin-data-uri";

export default {
  //  Our game entry point (edit as required)
  input: ["./src/game.ts"],

  //  Where the build file is to be generated.
  //  Most games being built for distribution can use iife as the module type.
  //  You can also use 'umd' if you need to ingest your game into another system.
  //  If using Phaser 3.21 or **below**, add: `intro: 'var global = window;'` to the output object.
  output: {
    file: "./dist/game.js",
    name: "MyGame",
    format: "iife",
    sourcemap: true,
  },

  plugins: [
    //  Toggle the booleans here to enable / disable Phaser 3 features:
    replace({
      preventAssignment: true,
      "typeof CANVAS_RENDERER": JSON.stringify(true),
      "typeof WEBGL_RENDERER": JSON.stringify(true),
      "typeof WEBGL_DEBUG": JSON.stringify(true),
      "typeof EXPERIMENTAL": JSON.stringify(true),
      "typeof PLUGIN_CAMERA3D": JSON.stringify(false),
      "typeof PLUGIN_FBINSTANT": JSON.stringify(false),
      "typeof FEATURE_SOUND": JSON.stringify(true),
    }),

    //  Parse our .ts source files
    nodeResolve({
      extensions: [".ts", ".tsx"],
    }),

    //  We need to convert the Phaser 3 CJS modules into a format Rollup can use:
    commonjs({
      include: ["node_modules/eventemitter3/**", "node_modules/phaser/**"],
      exclude: [
        "node_modules/phaser/src/polyfills/requestAnimationFrame.js",
        "node_modules/phaser/src/phaser-esm.js",
      ],
      sourceMap: true,
      ignoreGlobal: true,
    }),

    //  See https://github.com/rollup/plugins/tree/master/packages/typescript for config options
    typescript(),

    //  See https://www.npmjs.com/package/rollup-plugin-serve for config options
    serve({
      open: true,
      contentBase: "dist",
      host: "localhost",
      port: 10001,
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    }),
    image(),
    json(),
    dataUri(),
  ],
};

My tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "esModuleInterop": true
    },
    
    "include": [
        "./src/**/*",
        "**/*.ts",
        "index.d.ts",
        "**/*.png"
    ]
}

This is my assets files folder: https://filebin.net/uofi8tthkp55dabz

This is my folder structure:

And finally, this is the result of code running:

How you can see, nothing is loaded on screen to create my scene.
How could I fix it? Is this some issue related to rollup or something?

RollupError: @rollup/plugin-typescript: Could not find module 'tslib', which is required by this plugin. Is it installed?

I run the project on my macOS.
First run npm install, and then npm run dev, got follow error:

./src/game.ts → ./dist/game.js...
[!] (plugin typescript) RollupError: @rollup/plugin-typescript: Could not find module 'tslib', which is required by this plugin. Is it installed?
at error (/Users/sven/Documents/Crowdsourcing/phaser3-typescript-project-template-master/node_modules/rollup/dist/shared/rollup.js:274:30)
at Object.error (/Users/sven/Documents/Crowdsourcing/phaser3-typescript-project-template-master/node_modules/rollup/dist/shared/rollup.js:24694:20)
at preflight (file:///Users/sven/Documents/Crowdsourcing/phaser3-typescript-project-template-master/node_modules/@rollup/plugin-typescript/dist/es/index.js:496:17)
at Object.buildStart (file:///Users/sven/Documents/Crowdsourcing/phaser3-typescript-project-template-master/node_modules/@rollup/plugin-typescript/dist/es/index.js:746:13)
at /Users/sven/Documents/Crowdsourcing/phaser3-typescript-project-template-master/node_modules/rollup/dist/shared/rollup.js:24893:40
at async Promise.all (index 3)
at PluginDriver.hookParallel (/Users/sven/Documents/Crowdsourcing/phaser3-typescript-project-template-master/node_modules/rollup/dist/shared/rollup.js:24821:9)
at /Users/sven/Documents/Crowdsourcing/phaser3-typescript-project-template-master/node_modules/rollup/dist/shared/rollup.js:26005:13
at catchUnfinishedHookActions (/Users/sven/Documents/Crowdsourcing/phaser3-typescript-project-template-master/node_modules/rollup/dist/shared/rollup.js:25256:20)
at rollupInternal (/Users/sven/Documents/Crowdsourcing/phaser3-typescript-project-template-master/node_modules/rollup/dist/shared/rollup.js:26002:5)

Sourcemaps should be enabled by default

The project makes users write code in typescript and thus they must be able to find typescript files in source to put debug points at right place. Currently we need to go to minified/ transpiled js files to be able to debug.
If it sounds valid, I can create a PR for the same.

Hot-reload functionality

Currently changing code causes the bundle to be rebuilt, but the user still has to refresh the page to see their changes. Is it possible to auto-reload the page on changes?

Repository as a template

Hello guys,

Did you know the feature "repository as a template" from github? https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template

I think this feature is extremely optimal for this project!

What do you think about this?

Is there any way to combine with phaser3-custom-build?

Hello,

This (rollup) template works fine but it exports the whole engine. Is there any way to combine it with this webpack exporter https://github.com/photonstorm/phaser3-custom-build ?

I remember some engines like Threejs thanks to tree-shaking import reduce automatically the package size.

Phaser is not defined when using plugins

I am trying to use the Virtual Joystick plugin from rexrainbow, but whenever I try to install it using any of the three ways he provides. I get the error Uncaught ReferenceError: Phaser is not defined. this also happens with other plugins as well

Steps to reproduce

clone the repository git clone https://github.com/photonstorm/phaser3-typescript-project-template.git
install the dependencies npm install
open the file game.ts in the src folder
put this line in the preload function scene.load.plugin('rexvirtualjoystickplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexvirtualjoystickplugin.min.js', true);
run npm run watch (error also occurs when building using npm run build and using a http-server on the dist folder)
navigate to localhost:10001 on chrome or firefox
open the console

!Not updating!

In case the project on the browser always show the same and you have this text in the terminal:

rollup v2.79.1
bundles ./src/game.ts → dist/game.js...

It means it's still bundling, even if it takes an hour, so don't quit it before it loads.

Uncaught ReferenceError: require is not defined

npm run watch and then access http://localhost:10001 find error in browser console.

minified game.js cotains > 200kb of repeated copyright header (after running "npm run build")

The final game.js contains this copyright block:

 /**
 * @author       Richard Davey <[email protected]>
 * @copyright    2013-2023 Photon Storm Ltd.
 * @license      {@link https://opensource.org/licenses/MIT|MIT License}
 */

1149 times - which contributes more than 200kb to the file size ( about 20%).

Could this please be reduced to one copyright instead of 1149?

photonstorm / phaser3-typescript-project-template Goto Github PK