Giter VIP home page Giter VIP logo

phaser3-es6-webpack's Introduction

Generic Platformer and Phaser Bootstrap Project

Phaser 3 + ES6 + Webpack

This repository started as a sandbox for testing out Phaser 3 while it was in Beta bundeled with a few examples. These examples are now removed and replaced with a generic platformer project that explores Phaser 3 API. With the example project removed this is still a good boiler plate to start with. The aim of the platformer is not to relase a game but to try stuff out and to share something for others to learn from. I usually think the best way to learn is to read and manipulate source code. A quick disclaimer though, even if my aim is to identify best practices that's far from where the source code is today. I don't use pools. I do define at least one global function. Etc etc.

Running example

Live demo: http://metroid.niklasberg.se/phaser3platformer/

The boiler plate code is based on the excellent Bootstrap project for Phaser 2 "Phaser + ES6 + Webpack" (https://github.com/lean/phaser-es6-webpack), which was based on https://github.com/belohlavek/phaser-es6-boilerplate and https://github.com/cstuncsik/phaser-es6-demo. Most of this project is an exact copy of that repository, only with the Phaser package updated to Phaser 3 and the example replaced with one based on Phaser 3. If (or when) Lean releases a Phaser 3 version of their own I'll probably shift to use that and focus on the generic platformer.

Disclaimer: The generic platformer isn't an attempt to recreate any copyrighted game, and it will not become a playable game. You get nothing out of this besides learning about Phaser 3.

Contribute

Please any submit issues you have, including proposals. Ask me before preparing a PR or your PR might be rejected if in conflict with other ideas and planned way to do stuff. This would be great:

  • Feedback on best practises and why I'm being stupid
  • Extend the sprites texture atlas from the spritesheets I still use so I can dump them

Parts of API used:

A messy list of things I used from the Phaser API. I'll try to improve this, but it gives a hint of what you might expect to find in the source code to read bring to your own projects.

Preloader

  • image, tilemapTiledJSON, spritesheet, atlas, audio, audiosprite, bitmapFont, plugin

Input

  • Phaser.Input.Keyboard
  • Touch controls

Audio

  • Audioatlas (including some event listeners)
  • Music (pause/resume/rate)

Animations

  • Animating sprites

Tilemaps

Tilesprite

  • Background clouds

Sprites

  • All sprites are ES6 extensions of native Phaser.Sprite

Physics

  • Acceleration
  • body sizes
  • pause
  • collisions and overlap sprite/sprite and sprite/tilemaplayer

Groups

  • Sprites are put in groups

BitmapText

  • For score and timer

Tweens

  • entering pipes, ending the world etc.

Thanks to

  • The Phaser team @photonstorm, @mikewesthad and @pavle-goloskokovic for building Phaser 3 in general and for assisting while building this.
  • @AleBles - Updated webpack-stuff when the project was stalled at Beta 19.

Setup

You’ll need to install a few things before you have a working copy of the project.

1. Clone this repo:

Navigate into your workspace directory.

Run:

git clone https://github.com/nkholski/phaser3-es6-webpack.git

2. Install node.js and npm:

https://nodejs.org/en/

3. Install dependencies (optionally you could install yarn):

Navigate to the cloned repo’s directory.

Run:

npm install

or if you choose yarn, just run yarn

4. Run the development server:

Run:

npm run dev

This will run a server so you can run the game in a browser.

Open your browser and enter localhost:3000 into the address bar.

Also this will start a watch process, so you can change the source and the process will recompile and refresh the browser.

Build for deployment:

Run:

npm run deploy

This will optimize and minimize the compiled bundle.

phaser3-es6-webpack's People

Contributors

benabbottnz avatar hongpong avatar mukhametvaleev avatar nkholski avatar sebudde avatar stahlmandesign avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

phaser3-es6-webpack's Issues

npm test fails

Game works fine, but npm test list 88 problems (88 errors, 0 warnings)

How do I disable unused variables removal

Would you know the best way to disable unused variable removal during dev? I need it for debugging.

For example I could have a variable initialed to number or an object, but never used.

I suspect it is the

        new HtmlWebpackPlugin({
            filename: '../index.html',
            template: './src/index.html',
            chunks: [ 'vendor', 'app' ],
            chunksSortMode: 'manual',
            minify: {
                removeAttributeQuotes: false,
                collapseWhitespace: false,
                html5: false,
                minifyCSS: false,
                minifyJS: false,
                minifyURLs: false,
                removeComments: false,
                removeEmptyAttributes: false
            },
            hash: false
        }),

Thanks!

Get crisp pixel edges instead of blurry anti-aliasing

A hint I learned from another game engine: if you add a bit of CSS you can get crisp pixels:

        html,
        body {
          margin: 0;
          padding: 0;
          image-rendering: optimizeSpeed;              /* Older versions of FF */
          image-rendering: -moz-crisp-edges;           /* FF 6.0+ */
          image-rendering: -webkit-optimize-contrast;  /* Webkit (non standard naming) */
          image-rendering: -o-crisp-edges;             /* OS X & Windows Opera (12.02+) */
          image-rendering: crisp-edges;                /* Possible future browsers. */
          -ms-interpolation-mode: nearest-neighbor;    /* IE (non standard naming) */
          image-rendering: pixelated;                  /* Chrome 41 */
        }

blurry-crisp

npm run deploy fails

npm run dev works fine :-)

npm run deploy fails:

ERROR in multi pixi p2 phaser webfontloader
Module not found: Error: Can't resolve 'p2' in 'phaser3-es6-webpack'
@ multi pixi p2 phaser webfontloader

ERROR in multi pixi p2 phaser webfontloader
Module not found: Error: Can't resolve 'phaser' in 'phaser3-es6-webpack'
@ multi pixi p2 phaser webfontloader

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'phaser' in 'phaser3-es6-webpack/src'
@ ./src/main.js 3:0-17
@ multi babel-polyfill ./src/main.js

ERROR in multi pixi p2 phaser webfontloader
Module not found: Error: Can't resolve 'pixi' in 'phaser3-es6-webpack'
@ multi pixi p2 phaser webfontloader

npm ERR! Linux 4.4.0-93-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "deploy"
npm ERR! node v6.11.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] deploy: webpack --config webpack.production.config.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] deploy script 'webpack --config webpack.production.config.js'.

In webpack.production.config.js

// Phaser webpack config
var phaserModule = path.join(__dirname, '/node_modules/phaser-ce/')
var phaser = path.join(phaserModule, 'build/custom/phaser-split.js')
var pixi = path.join(phaserModule, 'build/custom/pixi.js')
var p2 = path.join(phaserModule, 'build/custom/p2.js')

Build folder doesn't exist

Physics issues

The repository is suffering from not having it's physics adjusted to last Phaser versions' changes in Arcade physics. The live demo now runs better than the version in the repository. I managed to fall through the ground after jumping into the toggle 16-bit block.

Linter?

Hey, thanks for making this available! I'm having trouble debugging because the dev build is linting stuff in a way that even with a source map the line numbers don't match. .eslintrc doesn't seem to be used at all?

pic of what shouldn't happen

How can I turn this off?

Comments in production mode

Comments had not been removed in production mode, thus output javascript file size is very large.
Phaser3 use optimization to run UglifyJSPlugin, to remove comments.

Deploy command not work

Steps:

  1. download project from phaser3-es6-webpack repo
  2. run npm install
  3. run npm run deploy
  4. log:

[email protected] deploy D:\work\phaser3\phaser3-es6-webpack
webpack --config webpack.production.config.js

Hash: 379fbc1d51360dac6cca
Version: webpack 3.8.1
Time: 6704ms
Asset Size Chunks Chunk Names
bundle.js 119 kB 0 [emitted] app
vendor.bundle.js 2.73 MB 1 [emitted] [big] vendor
[134] (webpack)/buildin/global.js 488 bytes {1} [built]
[506] ./src/sprites/Enemy.js 4.45 kB {0} [built]
[507] multi babel-polyfill ./src/main.js 40 bytes {0} [built]
[710] ./src/main.js 649 bytes {0} [built]
[831] (webpack)/buildin/module.js 495 bytes {1} [built]
[1350] ./src/MarioBrosScene.js 18.6 kB {0} [built]
[1351] ./src/sprites/Mario.js 10.1 kB {0} [built]
[1352] ./src/sprites/Goomba.js 3.78 kB {0} [built]
[1353] ./src/sprites/Turtle.js 4.54 kB {0} [built]
[1354] ./src/sprites/PowerUp.js 4.98 kB {0} [built]
[1355] ./src/sprites/SMBTileSprite.js 3.45 kB {0} [built]
[1356] ./src/helpers/animations.js 5.32 kB {0} [built]
[1357] multi phaser 28 bytes {1} [built]
+ 1345 hidden modules

ERROR in vendor.bundle.js from UglifyJs
Unexpected token: name (fov) [vendor.bundle.js:41229,12]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] deploy: webpack --config webpack.production.co nfig.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

mario/bendSuper

What does it typically mean when I recieved a warning in Google Chrome console that states the following as the game loads into my browser?

phaser.js:28424 Texture.frame missing: mario/bendSuper

I'm recieving that message right now and not sure how to resolve it...

About production mode

Hello @nkholski
Thanks for making this template first of all. I would like to ask, i check on the production mode of this template and saw that it's including phaser into bundle, tryed to seperate it to another bundle but i couldn't.

Can you please help me about this or update chuck's with SplitChunksPlugin ? :)

Mario can double-jump

This is probably "out of scope" for the purpose of this project, but I just thought I'd make a quick note of it.

If you double-tap the jump button, Mario will get a tiny second jump in the middle of his initial jump.

I've tried fixing it but I'm not 100% sure about the logic around the jump-timer outside of enforcing how long you're allowed to hold the jump-button for upward momentum.

On a side-note, thanks for this lovely repo, it's certainly jump-started my grasp on phaser 😄

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.