https://github.com/samme/phaser-parcel

A Phaser 3 game template using Parcel bundler
https://github.com/samme/phaser-parcel

coffeescript es6 phaser phaser-boilerplate phaser3 typescript

Last synced: 4 months ago
JSON representation

A Phaser 3 game template using Parcel bundler

• Host: GitHub
• URL: https://github.com/samme/phaser-parcel
• Owner: samme
• Created: 2018-07-25T18:33:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-10-03T18:42:17.000Z (over 1 year ago)
• Last Synced: 2024-09-29T23:39:28.080Z (4 months ago)
• Topics: coffeescript, es6, phaser, phaser-boilerplate, phaser3, typescript
• Language: JavaScript
• Homepage:
• Size: 1.83 MB
• Stars: 74
• Watchers: 9
• Forks: 21
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-parcel - Phaser 3 with Parcel - Simple Phaser game template. (Examples)

README

        
Phaser 3 with Parcel

====================

This is a simple Phaser game template using [Parcel](https://parceljs.org). Most common transformations ([CoffeeScript](https://parceljs.org/coffeeScript.html), [Babel/Flow](https://parceljs.org/javascript.html), [TypeScript](https://parceljs.org/typeScript.html)) work “out of the box”.

Use

---

```sh

# If you don't have Parcel, install it:

npm install -g parcel-bundler

# Clone or download this repo or its template 

# From the project directory, install:

npm install

# Auto-compile and run dev server:

npm run start

# Compile for production:

npm run build

```

You can edit these scripts in [package.json](./package.json) to suit your needs. See:

- [Parcel: Getting Started](https://parceljs.org/getting_started.html)

- [Parcel: Production](https://parceljs.org/production.html)

- [Parcel: CLI](https://parceljs.org/cli.html)

Game assets

-----------

Static assets used in your JavaScript must be imported:

```javascript

import space from './assets/space.png'; // -> './space.89e3a46b.png'

// OR

import images from './assets/*.png'; // -> { space: './space.89e3a46b.png', … }

```

See [BootScene](./src/BootScene.js) for an example.

If you prefer, you can [use a parcel plugin to copy static assets](https://github.com/elwin013/parcel-plugin-static-files-copy 'parcel-plugin-static-files-copy') instead. You **must** copy [file pack](https://newdocs.phaser.io/docs/3.60.0/focus/Phaser.Loader.LoaderPlugin-pack) and [multitexture atlas](https://newdocs.phaser.io/docs/3.60.0/focus/Phaser.Loader.LoaderPlugin-multiatlas) assets using a plugin. See the [static-files-copy branch](https://github.com/samme/phaser-parcel/tree/static-files-copy).

Package aliasing

----------------

You can use [package.alias](https://parceljs.org/module_resolution.html#aliasing) to specify an alternative Phaser build, e.g.,

```json

{

  "name": "my-phaser-game",

  "alias": {

    "phaser": "./node_modules/phaser/src/phaser-arcade-physics.js"

  }

}

```

See the [phaser-src branch](https://github.com/samme/phaser-parcel/tree/phaser-src).

Custom Phaser

-------------

See the [imports branch](https://github.com/samme/phaser-parcel/tree/imports).

Hot reload

----------

When running the dev server the game is destroyed and then recreated after you save changes to your files. Rarely, this can fail. Just refresh the browser.

If you don't like [hot reload](https://parceljs.org/hmr.html) at all, you can turn it off:

```sh

parcel serve src/index.html --no-hmr

```

More Phaser with Parcel

-----------------------

- [phaser3-parcel-template](https://github.com/ourcade/phaser3-parcel-template)