samme / phaser-parcel Goto Github PK

A Phaser 3 game template using Parcel bundler

JavaScript 94.84% HTML 5.16%

phaser phaser3 es6 phaser-boilerplate coffeescript typescript

phaser-parcel's Introduction

Phaser 3 with Parcel

This is a simple Phaser game template using Parcel. Most common transformations (CoffeeScript, Babel/Flow, TypeScript) work “out of the box”.

Use

# If you don't have Parcel, install it:
npm install -g parcel-bundler

# Clone or download this repo or its template <https://github.com/samme/phaser-parcel/generate>
# 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 to suit your needs. See:

Game assets

Static assets used in your JavaScript must be imported:

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

See BootScene for an example.

If you prefer, you can use a parcel plugin to copy static assets instead. You must copy file pack and multitexture atlas assets using a plugin. See the static-files-copy branch.

Package aliasing

You can use package.alias to specify an alternative Phaser build, e.g.,

{
  "name": "my-phaser-game",
  "alias": {
    "phaser": "./node_modules/phaser/src/phaser-arcade-physics.js"
  }
}

See the phaser-src branch.

Custom Phaser

See the imports branch.

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 at all, you can turn it off:

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

More Phaser with Parcel

phaser3-parcel-template

phaser-parcel's People

Contributors

Stargazers

Watchers

Forkers

justdaft cogentx oggata heronbeluci brendansparrow joaopedrodiasmonteiro bytedecoder ammar-oker samathir gabalicious vigi-p makingbrowsergames creedofcool neonarray usaukel extrasaucestudio trissolo feidianbo

phaser-parcel's Issues

Disable Experimental Scope Hoisting

I was only able to get the template to run the built index.html properly by removing the option --experimental-scope-hoisting, other than that it works great!

[Query]How to run the release version

Hi,
I made a release build. Now how do I run it? Just open the index.html?
That does not work for me.

HMR is not behaving correctly due to if (game) return; is commented out

The game actually created twice in HMR. It is due to the comment in

function newGame()
{
  //if (game) return;
  game = new Phaser.Game(gameConfig);
  console.log("New Game")
}

Uncomment solves this problem.

Error loading JSON

So I'm new with phaser and I'm currently trying to follow a dungeon crawler tutorial. I'm using this template https://github.com/samme/phaser-parcel and when i load a JSON

//BootScene
    this.load.image("tiles", images.grass)
    this.load.tilemapTiledJSON('forest', 'assets/forest.json')

//PlayScene
    const map = this.make.tilemap({ key: 'forest' })
    const tileset = map.addTilesetImage('forest', 'tiles')

i get errors like

Invalid JSON: forest
JSON.parse: unexpected character at line 1 column 1 of the JSON data

I put the grass.png, forest.tmj and forest.json in src/assets but i think the problem is that the .json doesn't appear in the dist folder. Any help? If a solution is to try parcel-plugin-static-files-copy , sadly, i dont know how to start using it so im gonna need some help there.

codesandbox example is down

https://codesandbox.io/s/github/samme/phaser-parcel

Apologies for not being able to fix this yet, but I just noticed the codesandbox example (link in description of github repo) is not working with the following error: Unexpected frame by generating stack

JSON assests load

Not an issue really, but I found that json assets have some "troubles" loading with Parcel.
For example, if I require json file as follows:

static ParticlesAtlas = new Asset("particles", {
    texture: require("./res/img/particles.png"),
    atlas: require("./res/img/particles.json")
})

it's loaded as file not url and gives following error

Uncaught TypeError: this.url.indexOf is not a function
    at JSONFile.File (File.js:97)
    at new JSONFile (JSONFile.js:70)
    at new AtlasJSONFile (AtlasJSONFile.js:73)
    at LoaderPlugin.atlas (AtlasJSONFile.js:235)
    at loadAtlas (assets.js:87)

Maybe you know how to deal with this properly?
The only way I found - change json extension to something like ._json

disable plugins

where you put the flag to disable phaser plugins? , like fbook for example.

Bundling sprite atlases

Any luck bundling sprite atlases using imports/file globs?

Using import images from './assets/*.*'; I can get the correct URL for all of my assets, but with sprite atlases the path to the image files are going to be baked into the JSON. I'm trying to solve this without using the file copy plugin, as it seems that Parcel 2's dev server does not play well with static assets that weren't bundled this way.

Have you encountered this at all?