rroylance / phaser-ce-npm-webpack-typescript-starter-project Goto Github PK

I want to change scale mode from default's "USER_SCALE" to "SHOW_ALL" by using command:

npm run setupGameSize --width 800 --height 800 --scale-mode SHOW_ALL
But in game's console log:

DEBUG....................... true 
           
GIT_REVISION................ cc15ebdb3c91e11e0ebe53cec0454a8438a6ef58
           
SCALE_MODE.................. USER_SCALE
           
DEFAULT_GAME_WIDTH.......... 800
           
DEFAULT_GAME_HEIGHT......... 500
           
MAX_GAME_WIDTH.............. 888
           
MAX_GAME_HEIGHT............. 600 
           
game.width.................. 800 
           
game.height................. 580
           
GOOGLE_WEB_FONTS............ Barrio
           
SOUND_EXTENSIONS_PREFERENCE. webm,ogg,m4a,mp3,aac,ac3,caf,flac,mp4,wav

It's still USER_SCALE. Also, the game width and height are not changed.

Hi,
I created a beginner level Pong clone with the help of this cool starter project.
Repo:
https://github.com/ProfitWarning/p0ng

Live:
p0ng-live

If you would like, you can add it to the list in readme.

best,
ProfitWarning

There are a number of compile errors when running the project with npm run server:dev. Forgive me if I'm missing a step but I have tried it a couple times now. Cheers.

Hi

After installing all the dependencies I wanted to start the server but that didn't work. I'm getting some compilation errors and the opened tab stays blank:

https://gist.github.com/leozulfiu/e6ccf90b27122244ecaa2eaa3710b7c5

Richard,
Thank you for creating this Phaser template, especially the very detailed write up on its design/structure. None of the other templates have that much detail. Although I don't have any issues at the moment, I would like some advice. Is TypeScript suitable for a beginner? I'll probably ask google but wanted to get your thoughts.

"If you use this template/starter project in any capacity; I’d love to hear about your experience with it. Whether you continued with it or decided not to (I really want to hear why you made your decision)."

• I love the detailed write up on the template especially since I'm a beginner. I think it's important to know where to put things. Other templates leave it up to the user to figure out. If you're a beginner that can be challenging.
• I like the fact that it works. I was able to install it without any issues from NPM.
• I like that you included Electron support.
• I like that you included links to three projects that use the template.

TJ

1: I can't set aspect-ratio to 16:9. I tried the val 16:9, 16/9, and I should not use 1.77777777..... I think.
2: After trying some times for problem 1, I can't set scale mode any more, it fix on USER-SCALE

Just cloned the repo, after npm install run npm run server:dev

ERROR in ./src/states/title.ts
(45,130): error TS2339: Property 'SpritesheetsMetalslugMummy' does not exist on type 'typeof Spritesheets'.

Hi there,

would love to use your framework but can't as you have not offered a license and with that it is free. If you want it to be free I personally like MIT 2.0.

Cheers,
Carsten

Just a suggestion for the tslint.json file.

I noticed that it's basically the same as phaser's own tslint, with the exception of one setting. You use single quotes instead of double.

You could simplify the tslint.json file to this (I also added a max-line-length option, which I think helps making code more readable), and automatically use the default phaser settings, and extending those for your own overrides:

{
  "extends": "./node_modules/phaser-ce/typescript/tslint.json",
  "rules": {
    "quotemark": [
      true,
      "single"
    ],
    "max-line-length": [true, 140]
  }
}

Hi,

there is a bug in line 213 of generate AssetClass:

for (var a in json['frames']) {
    frameFull = (json['frames'][a]['filename']);
     frame = frameFull.substring(0, frameFull.lastIndexOf('.'));                 
     shell.ShellString('\n        ' + toPascalCase(frame) + ' = <any>\'' + frameFull + '\',').toEnd(assetsClassFile);
}

assets in the atlas do not need to have a .png (or any extension) in the name. a simple fix is to add:

if (frame === "") {
    frame = frameFull;
 }

sample asset file:

{
    "frames": [{
            "filename": "Foo",
            "frame": { "x": 1627, "y": 1198, "w": 32, "h": 34 }
    }]
}

As for Chinese and Japanese languages, we should use a local font file(*.ttf file).

I am making a game with lots of dialogs, it will use many glyphs so bitmap is not suitable for Chinese.
Anyways to use local TTF fonts?

I know this may sound odd, but I want to learn it.

I am new to Front End development, and setting up a development environment is always the most frustrating thing. Lots of tools but I do not know how to choose, or which is better. Webpack, Gulp, Grunt, Babel... And most tutorials ignore telling this HARD process, just let learner choose a favorite text editor.

I analysed package.json in this project, and npm js scripts. But it's too hard for a newbie like me.

So would you please shed some light on how to set up a development environment for Phaser? Just to say telling me how you made this project step by step.

Days ago, I wanted to add source map for webpack for better debug. But it failed. Then I tried to set up a Phaser project from scratch, also no good. Webpack ran, but without showing my index.html, it showed a list of js files.

This is why I made this issue. Or would you recommend me some tutorials on this?

Thank you!

Hi
assetutil is not es6 ready. It uses reflection api that is not available in es6.
I fixed this locally for resources I use ...

The rest of the code seems to be es6 ready (not promising full test coverage :)).

Added two functions that do the same and are es6 ready:

private static loadImages() {
        for (let image in Assets.Images) {
            if (!this.game.cache.checkImageKey(Assets.Images[image].getName())) {
                if (Assets.Images[image].getPNG !== undefined) {
                    this.game.load.image(Assets.Images[image].getName(), Assets.Images[image].getPNG());
                } else if (Assets.Images[image].getJPG !== undefined)  {
                    this.game.load.image(Assets.Images[image].getName(), Assets.Images[image].getJPG());
                } else {
                    throw 'not supported';
                }
            }
        }
    }
    
    private static loadAtlases() {
        for (let atlas in Assets.Atlases) {
            if (!this.game.cache.checkImageKey(Assets.Atlases[atlas].getName())) {
                let imageOption = null;
                let dataOption = null;

                if (Assets.Atlases[atlas].getPNG !== undefined) {
                    imageOption = Assets.Atlases[atlas].getPNG;
                } else if (imageOption = Assets.Atlases[atlas].getJPG !== undefined)  {
                    imageOption = Assets.Atlases[atlas].getJPG;
                } else {
                    throw 'image format not supported';
                }

                if (Assets.Atlases[atlas].getXML !== undefined) {
                    this.game.load.atlasXML(Assets.Atlases[atlas].getName(), imageOption.call(), Assets.Atlases[atlas].getXML());
                } else if (Assets.Atlases[atlas].getJSONArray !== undefined) {
                    this.game.load.atlasJSONArray(Assets.Atlases[atlas].getName(), imageOption.call(), Assets.Atlases[atlas].getJSONArray());
                } else if (Assets.Atlases[atlas].getJSONHash !== undefined) {
                    this.game.load.atlasJSONHash(Assets.Atlases[atlas].getName(), imageOption.call(), Assets.Atlases[atlas].getJSONHash());
                } else {
                    throw 'atlas format not supported';
                }
            }
        }
    }

Sometimes we need load a sprite sheet image file with no JSON like:

this.game.load.spritesheet('uiButtons', Assets.Images.ImagesUiButtons.getPNG(), 260, 100);

As you mentioned before, maybe we can specify these files with formatted name like rings[100,100].png, which indicates the frame size is 100*100.

Or just create a folder called sprite sheet and exclude it from auto loading, let users load manually.

I have followed the instructions in the README, but i have still the error:

TS2694: Namespace 'Phaser.Plugin' has no exported member 'PhaserInput'.

Here is what I did:

1. drop the plugin PhaserInput.js file into assets/scripts folder (https://github.com/orange-games/phaser-input/blob/master/build/phaser-input.js)

2. declare the plugin in the assets.js file like this:

export namespace Scripts {
    export class ScriptsPhaserInput {
        static getName(): string { return 'PhaserInput'; }

        static getJS(): string { return require('assets/scripts/PhaserInput.js'); }
    }
}

3. create a 'definitions' folder in the project root and drop the d.ts file into (https://github.com/orange-games/phaser-input/blob/master/build/phaser-input.d.ts)

4. add the path to this file into the "files" array in the tsconfig.jsonfile.

But when, in my state preload function, I declare Phaser.Plugin.PhaserInput, it doesn't work.

Am I missing something?

I can't see sourcemaps when debugging in chrome, only plain js. How to debug code with this template?

Hi, thanks for creating this Starter Project.

I'm having some trouble trying to use JSON files loaded with assetsUtils. Not sure If it's my lack of understanding or an actual issue.

When I add a JSON to the assets folder, I was assuming I could later access it through Assets.JSON.[name of json].getJSON(). In actuality getJSON() returns a path to the JSON (for example: "assets/0471943eb658d5fbb7f06bf1275a7fc7.json").

But how can I actually access the JSON contents?

Hello,
I'd like to add a plugin (https://github.com/lewster32/phaser-plugin-isometric) but can't make it work.
I'm not sure about how to do with the starter project. Any example?

Thanks.

When running npm run build:dist, I was getting the error below (after adding additional debug statements):

> webpack --config webpack.dist.config.js --progress --colors

[ { keyword: 'additionalProperties',
    dataPath: '[\'compress\']',
    schemaPath: '#/additionalProperties',
    params: { additionalProperty: 'compress' },
    message: 'should NOT have additional properties' },
  { keyword: 'additionalProperties',
    dataPath: '[\'screw_ie8\']',
    schemaPath: '#/additionalProperties',
    params: { additionalProperty: 'screw_ie8' },
    message: 'should NOT have additional properties' } ]
/home/aero/dev/mars-delivery/game/node_modules/schema-utils/dist/validateOptions.js:41
    throw new _ValidationError2.default(ajv.errors, name);

To fix it, I had to change

        new Uglify({
            compress: {
                warnings: false
            },
            screw_ie8: true
        }),

to

        new Uglify(),

Is there a way to tell webpack to build a custom phaser? (as seen https://phaser.io/tutorials/creating-custom-phaser-builds )

I didn't know how to contact you so I thought it would be the easiest way.
I've made a game called R0d3nt, using your boilerplate.

you can see the repo here
and play it there

Game: R0d3nt
Author: tuskat

Github Repo: https://github.com/tuskat/R0d3nt

Description: Futur1st1c P3st C0ntr0l

Thumbnail: https://img.itch.zone/aW1nLzIyMzU1NjIucG5n/315x250%23c/ZbaHXr.png

Hi,
added some text content and it seems that assetUtils. loadText is just not implemented correctly but rather a copy of loadXML.

I changed it to this but have not been able to verify it works as designed as I am fighting other errors.

private static loadText() {
        for (let text in Assets.Text) {
            if (!this.game.cache.checkTextKey(Assets.Text[text].getName())) {
                this.game.load.text(Assets.Text[text].getName(), Assets.Text[text], true);
            }
        }
    }

Hello,
it seems it's not possible to generate spritesheets.
I dropped a file "file[10,10].png" in assets and a spritesheet is not generated.

Looking at the code, it seems this portion is looking at the file extension:
var spritesheetData = gameAssets[i][0].match(/\[(-?[0-9],?)*]/);

I don't feel familiar with this part, can you confirm there's a problem with this?

trying to build the project after download the zip file.
Getting this error

npm run server:dev

fatal: Not a git repository (or any of the parent directories): .git
child_process.js:518
    throw err;
    ^

Error: Command failed: git rev-parse HEAD
fatal: Not a git repository (or any of the parent directories): .git

    at checkExecSyncError (child_process.js:475:13)
    at execSync (child_process.js:515:13)
    at module.exports (/Users/keenan/development/lastlight/node_modules/git-revision-webpack-plugin/lib/helpers/run-git-command.js:25:34)
    at GitRevisionPlugin.commithash (/Users/keenan/development/lastlight/node_modules/git-revision-webpack-plugin/lib/index.js:42:10)
    at Object.<anonymous> (/Users/keenan/development/lastlight/webpack.dev.config.js:29:68)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at requireConfig (/Users/keenan/development/lastlight/node_modules/webpack/bin/convert-argv.js:96:18)
    at /Users/keenan/development/lastlight/node_modules/webpack/bin/convert-argv.js:109:17
    at Array.forEach (native)
    at module.exports (/Users/keenan/development/lastlight/node_modules/webpack/bin/convert-argv.js:107:15)

Hi,

I made a fresh clone of your repo to give it a try. However I have the following error while running npm run server:dev

ERROR in ./assets/atlases/preload_sprites_array.png Module parse failed: e:\MyFolder\assets\atlases\preload_sprites_array.png Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./src/assets.ts 30:65-116 @ ./src/states/boot.ts @ ./src/app.ts @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/app.ts

My node version is v6.9.5 and I'm using windows 7

Any idea ?

Any plan to support Yeoman Generator ?
http://yeoman.io #

Does not respond to resizing of browser.

The annual Hacktoberfest is back!

Please feel free to take a look at the issues already present or if you think of something else to contriute; whether it be a bug fix, new feature, optimization, or whatever else.

We'd love the help! Remember to have fun and get those 4 pull requests in by Halloween 🎃

Is there any support for map's loading via load.tileMap?

What's "assets_raw" folder? Why we need it?

All the dependency versions in package.json are too specific. We should change, for example "phaser-ce": "2.11.1", to "phaser-ce": "^2.11.1",

Keeping on fixed versions is bad, for example the electron version specified has security issues. The user can then use their own lock file for locking their versions.

Hi, I just scaffolded this project. It compiiles, but I get a bnuch of errors in my IDE (webstorm) with squggly lines under the references to Phaser library. The error message is, "Corresponding File is Not Included In tsconfig.json".

If strict is activated, via "strict": true, at tsconfig.json, TypeScript throws many errors at utils/assetUtils.ts, but they're just a side effect of how assets.ts is constructed.

This kind of error:

ERROR in ./src/utils/assetUtils.ts
(10,48): error TS7017: Element implicitly has an 'any' type because type 'typeof Images' has no index signature.
. . .
ERROR in ./src/utils/assetUtils.ts
(22,48): error TS7017: Element implicitly has an 'any' type because type 'typeof Spritesheets' has no index signature.

thrown at code that accesses static methods through dynamic class definitions inside namespaces:

if (!this.game.cache.checkImageKey(Assets.Images[image].getName())) {

TypeScript cannot know what type Assets.Images[image] is, and me neither as each asset generates a class.

After some refactoring, I've found myself rewriting generateAssetsClass.js, and as I'd like to collaborate with this project, I don't want to diverge that much without further debate about options available.

Some relevant points:

• Namespaces are not used as such and just as keys.
• Classes are not created to be instantiated and just as containers.

The idea I'm studying is to create some classes:

export class AssetImage {
    constructor(public name: string) {
    }
    getName(): string {
        return this.name;
    }
}

export class AssetImagePNG extends AssetImage {
    constructor(name: string, public getPNG: () => string) {
        super(name);
    }
}

and then generate the code with instances like:

const Assets = {
    Images: {
        backgroundTemplate: new AssetImagePNG("background_template", () => require("assets/images/background_template.png"))
    }
};

The main advantage should be that TS can follow those types and it simplifies the generator and the generated assets.ts.

Issues? Options? Ideas?

Hello. I love your project!

However, I am not sure, how to debug it.

In my similar, simpler, project, I use the "Debugger for Chrome" plugin in VS Code. For this I need to have launch.json in .vscode folder configured. I then create breakpoints and use the Debug panel to start/play debugging. It opens new chrome window and when I e.g. click on something it shows me the line in VS Code and all the values etc.

Please, can you let me know, how you do it?

Thanks and again - great template!

if typing the bellow code:

game.math.linearInterpolation([1,2,3,4,5], 0.1);

the typescript throws error:

error TS2339: Property 'linearInterpolation' does not exist on type 'Math'.

I'm experiencing issues when building for dev/dist that are annoyingly happening only 90% of the time. When asset generation is happening, quite often the compiler falls over with 100s of

"ERROR in ./src/states/Instructions.ts
(25,86): error TS2339: Property 'BitmapFonts' does not exist on type 'typeof "C:/Users/XX/XX/XX/XX/src/assets"'.

It feels like the asset generation has not finished before it tries to compile the JS - meaning I get loads of errors of non-existent assets.

I did try and add in the few lines from the latest merges, but it made no difference.

Any help would be great :)

Hello,
Thank you for this starter project.

How to load tilemap in json?

Hi,

How to use the node fs module to write file when the game is running in Electron?

Thanks for your help!

@rroylance Sorry to add another issue here, but I don't know other ways to contact you.

I made a template project from scratch with TypeScript, webpack, webpack dev server.
https://github.com/Majirefy/PhaserTest
I copied some configuration from your project. But now there are some problems.

Visual Studio Code failed to give me code completion.
It will say "cannot find Phaser" if you add codes in app.ts file.

Do you use VSC? How to config?

After I run npm run build:dist I got the following error when I try to run the game on broswer
game.min.js:1 Uncaught TypeError: Cannot convert undefined or null to object at Function.keys (<anonymous>) at window.onload (game.min.js:1)

Quick questions, where are the typescript definitions coming from? They're no working for me ([ts] Cannot find name 'Phaser') and I can't find them on DefinitelyTyped. How do you make them work with this project?

Hi,
I noticed that the latest version (master) has an error with build:dist .
Error:
ERROR in game.min.js from UglifyJs Unexpected token: name (ImagesBackgroundTemplate) [game.min.js:88,10]

Uglify can't parse es6 builds.

I had to change the target in tsconfig.json to es5 and include lib: ["es2016", "dom"]

here my tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": false,
    "experimentalDecorators": false,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "files": [
    "./src/globals.d.ts",
    "./src/app.ts",
    "./node_modules/phaser-ce/typescript/phaser.comments.d.ts"
  ]
} 

Describe the bug
When using npm audit, this results in 1 high severity vulnerability for webpack-dev-server v3.1.10.

To Reproduce
Steps to reproduce the behavior:

1. run npm audit
2. See audit report

Expected behavior
No vulnerabilities 😄

Report

                       === npm audit security report ===

# Run  npm install [email protected]  to resolve 1 vulnerability

  High            Missing Origin Validation

  Package         webpack-dev-server

  Dependency of   webpack-dev-server

  Path            webpack-dev-server

  More info       https://nodesecurity.io/advisories/725

Additional context
Updating webpack-dev-server to 3.1.14 should fix this.

I've made a pull request #69.

I must load a binary file with own extension in my game like described in http://phaser.io/examples/v2/loader/load-binary-file

how can I do it?
thx

Hi, I'm having a hard time to integrate pusher here.

Can you help me to set it up?

Thanks.

This project assumes that it is running in a git folder, I'm looking for a suggestion on how to remove that.
Right now, in webpack.dev.config.js , replacing:

'GIT_REVISION': '\"potato\"',

is a working workaround (the escaped quotes are required since the value is interpreted as-in (which seems bad)), but is hackish at best.

Hey! Tried using this as an experimental test to see if I would go ahead and try using this instead of writing it all up myself--and I can't even get the dependencies to install. I tried installing that dependency below globally and it works--but I still get the below error regardless. Running Node_v8.4.0

I'm not sure if something with my environment is wonky--or if something is actually broken--but heads up regardless. I tried using the Bash terminal for npm install--also tried using Webstorm's built in support for installing the dependencies--as well as Atom's terminal. All the same.

What I am not actually understanding--is why npm is trying to resolve references in setupGameSize when all I want it to do is install deps?? Am I overlooking something?

UPDATE:

More information I have come across. I was able to get past the error above AFTER globally installing the dependency--then using an npm link

However, I had to do this for every single dependency in the package.json. I am unsure why. I am going to attempt to completely blow away and reinstall Node--but I can't imagine it would be causing problems because I use it for Angular Development on a daily basis.

I create this issue just for keep track of the progress of multi-platform support: for Desktop(via Electron) and for Mobile(via Cordova).

There are some starter project.

For Electron:
Eletron

For Cordova:
Cordova

Thank you for your awesome work! Your project makes game-making have more fun instead of losing myself in "setup a development environment for a long time then give up".

👍

Asset loader system seems to not support tile maps loading, or am I missing something? :)