simiancraft / create-phaser-app

Phaser 3, Webpack 4, Babel 7+boilerplate and a scaffold

Create-Phaser-App

About Create Phaser App

Quickly prototype and build the Phaser game you want to make! Develop in Phaser faster than before.

• 🕹️Working Example Of Create Phaser App
• 🖥️ Project Homepage
• 📅Change Log

⚠️Important

This project is under development. The goal is to start with a boilerplate, but transition into a scaffold with various development tools. Many dev tools are here now, but many are yet to come. Examples are the bundle analysis and complexity analysis.

This project can be used right now as a boilerplate, even without the eventual scaffolding features. It is a complete build using all the latest versions of Webpack, Babel and Phaser, and has an idiomatic project structure. Just follow the Quickly Start instructions!

Features

--

• Webpack 4
• babel 7 +
• Es6 support
• Prettier Style
• Easy deployment to gh-pages
• Webpack bundle analyzer
• Howler 2 for Audio
• Browsersync
• Project Complexity analysis yarn complexity-report
• Tilemap processing (extrusion and minification and more)
• Image processing (moving and compression with pngquant)
• Audio processing (Audiosprite Creation)

Quickly Start

1. Clone the repo
2. yarn install
3. yarn start

Play the Demo!

The work in progress is here: 🕹️Working Example Of Create Phaser App

Click to begin. It is (still) currently a simple level, but soon will eventually integrate examples of level triggers, create behavior, and Game UI.

Locomotion:

• W,A,S,D = walk/aim
• Space = jump
• Shift = boost/slide

Ordinance:

• ← = Vulcan Cannon
• ↑ = Missile (WIP)
• ↓ = Laser (WIP)
• → = PLasma Thrower (WIP)

create-phaser-app's Issues

Create asset browser to read conventional folder structure

Depends on #3

Think about final-state of webpack config to prepare for Lerna-style conversion

@DannyT opened a PR here: #55 which wile wasn't pulled in, made me think a bout a few things

1. If this is meant to be well documented, and commented- I need to really see that through and make this file better
2. Soon, this app will be converted to a Lerna-style scaffold, really similar to Create React App v2. I need to set this up in a way that will make the conversion work well. I think that this also means its close to time to pull in inquirer and some tooling to test this. I will follow the testing methodology I used in slush-phaser-webpack, most likely with the output mocking
3. Its probably close to time to update webpack and these sorts of dependencies again

Add typescript template

I really like this project, the only thing that is missing for me is typescript template.

Sprites are not rendering correctly in Chrome on Linux.

Linux: Ubuntu 18.04
Chrome: Version 67.0.3396.79 (Official Build) (64-bit)

Firefox is rendering normally.

Can this be a Phaser bug? Or is something with Chrome?

Integrate kinematic animation tools

One of the goals is to consolidate free tools, a good example is dragonbones: DragonBones/DragonBonesJS#66

They are actively working on Phaser 3 integration

other examples are Creature, Spine and Spriter.

Create Sprite: Portal

facing right

facing left

• door opens when near
• requires its own FSM (similar to player)
• glyphs 'light up' when you use the portal

Implement sound management

Depends on #4

Integrate occlusion with Tiled

related to #48

Implement the player-entity

• this is something that can benefit from the boilerplate
• use a control library to assist in control management

@vantreeseba

Fix Tilemap (make a process for this?)

You have to extrude tilemaps for webgl : phaserjs/phaser#3766 (comment)

Update to 3.15

Phaser just released version 3.12, and its time to upgrade!!

Add the animation reverser to the animation sequencer

  reverseCurrent() {
    return new Promise((resolve, reject) => {
      this.entity.anims.reverse();

      this.entity.once(
        'animationcomplete',
        (animation, frame) => {
          resolve(name);
        },
        this.entity
      );
    });
  }

drop this method in on the next update, it is easy-mode for reversing the animation where it currently is.

change the sounds template

    let template = `
${_importsString};
import {Howl, Howler} from 'howler';
const soundsConfig = ${_json};
const sounds = new Howl(soundsConfig)
export default sounds;
export { Howl, Howler, sounds, soundsConfig };
`;

• exposes the config so you can TIME things very accurately.

create-phaser-jetpack

One of the plans for this repo is to make a webapp that runs parallel to the webpack browsersync server, that allows you to do some basic tasks, and assist in development. This will depends on a fairly conventional file structure, or some configuration in the tool. I plan on this project being managed as a sub-project with lerna.

The purpose of this issue is to capture ideas for this tool. and discuss them by difficulty before taking them

Some rudimentary ideas are

• A level viewer,
• some sort of asset previewer, like for animations

Some advanced ideas:
the focus on here is to integrate good pipelines with as many free things as possible.

• a clear pipeline for Tiled integration
• A Sound Effect maker such as https://www.leshylabs.com/apps/sfMaker/ or https://www.bfxr.net/ .
• kinematics pipeline see #15
• possibly some sort of shader editor like : http://archo.work/ShaderEditorHTML5/shaderedit.html

@vantreeseba , add to this if you think of stuff

Create first level with assets

https://github.com/simiancraft/create-phaser-app/blob/master/src/assets/levels/rock-tilemap.png

add @babel/plugin-proposal-class-properties

also research other plugins you will certainly use (decorators)

Explain how to use the tilemap processing pipeline

short version:
the command is yarn process-levels
You put your assets in the levels/raw folder. You also put your level.tmx here alongside the tilemap
The processor outputs into the 'processed' folder and it fixes the level.json and the image to work

Webpack issue loading static images

Really, this is me seeking support with webpack/modular web applications and not so much specifically an issue with this repo so apologies in advance, but it is (I think) slightly related or at very least highlighting an area for documentation for the less-well initiated 😁.

When loading an image, e.g. the flares atlas, you're importing the asset via:

import flaresJSON from '../../assets/particles/flares.json';
import flaresPNG from '../../assets/particles/flares.png';

Then loading it as normal in phaser, only referencing the imported objects instead of relative file paths:

this.scene.load.atlas('flares', flaresPNG, flaresJSON);

I'm assuming this affords some value from having it in the webpack pipeline so optimisation, file organising or such like can be performed on the images.

I'm currently facing a workflow issue with this as in my case, the atlas png file can't be written to whilst I'm running the dev server and so have to stop and restart the site every time I tweak an image in an atlas. Changing it to load the relative static file path instead doesn't serve the file as seemingly the above pipes a blob with a hashed filename straight into the webpack server.

So, getting to an actual question(s):

1 - what is the value in having the image imported as an object vs served as a traditional static asset
2 - how can I configure webpack to serve static assets or can this be made non-locking so changes to the file are possible whilst webpack is running?

Create level transitions with new tilemap

BrowserSync gets disconnected

I don't know if I'm doing something wrong but BrowserSync gets disconnected as soon as the page loads. In the Firefox console, just below the Phaser version (first line of console), I see the "[WDS] Disconnected!" message.

I knew something was up when I saved my changes and the browser didn't auto refresh.

Convert repo to scaffold

• inquirer for command line
• use lerna for monorepo nanagement

Test framework integration?

I have limited experience with gamedev, but it seems to me integrating a test framework might be worth it, at least for testing ui (especially with React #18).

Jest seems to me like the most obvious option, seeing its quality and level of support.

If you think it's useful, I can open a PR that adds Jest integration (if #26 is validated, I can make tests run precommit as well).

Use prettier automatically on pre-commit

Edit: I hadn't seen prettier was already on, I'll make a PR with husky in case you want this formatting to happen automatically pre-commit

Use some public domain assets to make the sample level

Possible places to look:
https://adamatomic.itch.io/

WIP Notes: These are the components that should be abstracted into seperate modules by LERNA

• the level processor
• the animation loader and sequencer
• the 'level loader' that links tiled to a level

Refactor player animations to a state machine with a command pattern

Fix player collider (it seems to be shifted up)

Readme Steps to include `cd`

Can I add a new step 2 such as, type into your console cd create-phaser-app

Improve docs on extended features

• bundle analysis
• complexity analysis
• easy github deployment

Update all npm packages

• update npm packages
• sort dev and 'non-dev' dependencies out

Game type boilerplate

At the moment, the demo game is a platformer, a game that uses 2D physics with a player controlled entity that moves around. This may not be helpful to someone who wants to make a strategy game, or a management game, or a card game, ...

So I was wondering, what are the plans (if any) to support different game type demos in the phaser app? I can imagine maybe a RTS, a management game, a Zelda-like isometric one...

From a usability standpoint, I imagine there could be several scenes with different demos available. But if you plan on doing such a thing with create-phaser-app, I'm wondering how to structure the app so that someone can easily identify the parts they need for their type of game and discard the rest, while keeping the opinionated file structure that makes getting right into development easily.

Security Issues

So i've just cloned this repo and install dependencies and saw that there are bunch of security issues reported by npm.

even when i try to run npm audit fix is also not fixing those

It gives me this.

Can we do something to update phaser version along with others?

Image compression

check out https://www.npmjs.com/package/brotli-webpack-plugin

Create Level-Loader/Manager

this will be in PR #47 along with the additional level tooling

Compose music for title screen and first level

React ui implementation

Use React for menus and overlays. This is fully aware there are limitations to this sort of UI, such as the inability to pur UI behind the canvas, but its great for menus and things like that. Many game can make ui faster with this approach.

• Semantic ui as the standard library see https://react.semantic-ui.com/introduction

• also the core tool used for create-phsaer-jetpack #17

• easier google fonts integration

  • we currently have a google fonts loader, right now that takes a simple list of fontnames

• react Vis for visualizations https://uber.github.io/react-vis/documentation/welcome-to-react-vis

  • use skill tree example in create-phaser-app