https://github.com/Cerlancism/Phaser-CE-TypeScript-ParcelJS

A simple boilerplate for Phaser CE, TypeScript and Parcel bundler. Also included with transformations and polyfills from Babel.
https://github.com/Cerlancism/Phaser-CE-TypeScript-ParcelJS

babel parceljs phaser phaser-boilerplate phaser-ce phaser2 typescript

Last synced: about 2 months ago
JSON representation

A simple boilerplate for Phaser CE, TypeScript and Parcel bundler. Also included with transformations and polyfills from Babel.

• Host: GitHub
• URL: https://github.com/Cerlancism/Phaser-CE-TypeScript-ParcelJS
• Owner: Cerlancism
• License: mit
• Created: 2019-01-03T10:41:34.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-09-29T17:38:37.000Z (almost 4 years ago)
• Last Synced: 2024-02-08T10:43:53.815Z (5 months ago)
• Topics: babel, parceljs, phaser, phaser-boilerplate, phaser-ce, phaser2, typescript
• Language: TypeScript
• Homepage: https://cerlancism.github.io/Phaser-CE-TypeScript-ParcelJS/build
• Size: 7.84 MB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-phaser - Phaser CE with TypeScript and Parcel - Phaser CE with TypeScript, Babel and Parcel, with wide browser compatibility and offline support. (Uncategorized / Uncategorized)

README

        
# Phaser CE TypeScript ParcelJS







[Phaser CE](https://github.com/photonstorm/phaser-ce) boilerplate.

### Try out here

## Features

- Using [Parcel bundler](https://parceljs.org/) as a seamless and lightweight build tool.  

    - Bulk import assets using glob file patterns.

    - Hot Module Replacement (fast game reload in browser during development)

    - Minification for build output

    - Source mapping (TypeScript breakpoints works with VS Code [Chrome Debugging Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)).

- Supports modern ECMA syntax as well as typings/intelliSense from [TypeScript](http://www.typescriptlang.org/).

- Browser compatibility down to Internet Explorer 9 with [Babel](https://babeljs.io/) transformations and [core-js](https://github.com/zloirock/core-js) polyfills.

- The build output is playable offline.

## Installation

- Recommended editor: [Visual Studio Code](https://code.visualstudio.com/)

- [NodeJS](https://nodejs.org/en/)

- (Optional) In command-line: 

    - `npm install -g typescript`

    - `npm install -g parcel-bundler`

## Set Up

Clone this repository.

Open this folder in Visual Studio code and from menu:  

`Terminal -> New Terminal`

`npm install` Download tools and dependencies (one time) 

`npm start` To develop (work in `src` folder, creates `dev` folder, open in browser )

`npm run build` To build (minified and playable offline, creates `build` folder)

## Important Note

Due to bundling and limitation of mounting Phaser to window scope, do not import Phaser as destructured ES modules (becareful as this is suggested by auto import), for example:  

``` ts

// You can use ES Modules for your own modules.

import { Logger } from '/utilities'

// But do not use ES Modules for Phaser.

import { Game, IGameConfig } from 'phaser-ce'

const config: IGameConfig = { /* Configs */ }

const game = new Game(config)

Logger.log("Game Created")

```

This will cause the build size to bloat as Phaser will be included twice.

To prevent this, use Phaser only as namepace:

``` ts

import { Logger } from '/utilities'

// Do use Phaser only as namepace.

const config: Phaser.IGameConfig = { /* Configs */ }

const game = new Phaser.Game(config)

Logger.log("Game Created")

```

## Credits

- Example game and assets from [Phaser 2 Examples](https://github.com/photonstorm/phaser-examples)

- [Phaser 3 TypeScript Webpack](https://github.com/troyedwardsjr/phaser3-typescript-webpack)

- [Phaser 3 with Parcel](https://github.com/samme/phaser-parcel)