rblopes / generator-phaser-plus Goto Github PK

since phaser 3 doesn't t have proper scale manager yet(or never). If you add support for the different screen sizes that would be wonderful. also, orientation(check) support, Thank you.

I'm on Mac OSX 10.10.5 in a dev environment.

I've built a test project straight from the generator and am serving via gulp or npm start.

If I go into Logo.js under Objects and change the angle to say, 0.5 or 1.0 and save, gulp reports that game.js was changed (and the browser refreshes). However, the result of the change isn't persisted to game.js until I kill the server and restart it. There are no lint warnings or errors in evidence.

Any ideas what this could be?

I'm using an external plugin called phaser-plugin-isometric to create isometric game spaces. I add this plugin to Phaser via simple command within the preload() method of my Boot state:

preload () {
    // Load the graphical assets required to show the splash screen later.
    this.load.pack('boot', null, assets);
    this.game.plugins.add(new Phaser.Plugin.Isometric(this.game));

It seems to work fine in all forthcoming states as well.

It, among other things, extends Phaser object with isoSprite function that creates isometric sprites. It works like charm when I use it explicitly in my Game state:

 tile = this.game.add.isoSprite(xx, yy, 0, 'tile', 0, this.isoGroup);

I would like to be able to describe object classes that inherit from isoSprite the same way they can inherit basic Sprite class from Phaser with something like this:

/* Tile object class, creates isometric tiles
*/
export default class Tile extends Phaser.isoSprite {

However I have found out that in this case the isoSprite method appears undefined. How can I make it visible in the scope of my object class?

Do you have any repository demonstrating a game in some working form using the layout pattern proposed by this generator - would be a nice example guide for n00bs.

Link in README.md is broken:

https://github.com/rblopes/generator-phaser-plus/blob/master/docs/dev-guide.md

Copy the required files into the default template when my-phaser-template is ready.

Tasks:

• Copy template files

How is asset preloading handled in this version?

In Generator Phaser+ v2 there was in src/assets.js file with an array of files in - and then a states/PreLoader.js to load it all in. I don't see anything in the new structure that gets generated?

I noticed in your snake game repo you've added an extra constants directory and stuck an assets.js in there. Is that the new intended way but it's missing from the auto-generated files at the moment?

Been considering migrating this generator to Yeoman for quite a while. Some limitations of using Gulp as a scaffolding tool are showing up and these may become more difficult to address over time.

My main concerns are:

1. Testing: current test suites are brittle, but not on purpose. Some cases, like inspecting the contents of some generated files, are not covered yet. Writing some of these tests require reading the Gulp streaming internals directly. I can write the necessary fixtures for that (I'll have to research how to accomplish this, though), but I'm pondering if this is worth all the trouble.
2. gulp-install: incompatible changes made to this task plugin since 0.3.0 are incompatible with the current project setup. Version 0.4.0 conflicted Bower and tests. Now, Bower is gone from the template project, so upgrading to 0.4.0 is not a problem, but tests run much slower with that version. 0.5.0 completely breaks the test suites, and I couldn't get it work at all. Again, I may replace this plugin with a more suitable one, perhaps gulp-spawn but, again, I'm considering if I should be doing this.

Suffice to say that much of these issues are addressed in Yeoman already. Only thing that holds me back is there are many Yeoman generators related to Phaser published already.

Should I decide to move forward and begin developing a new project based on this one's project template, further development and support for slush-phaser-plus will cease and its npm package will be deprecated in favor of the new solution instead.

I may be adding more details to this issue later.

This notice is a heads-up to the people using generator-phaser-plus under old Node.js releases. Currently, generator-phaser-plus is developed ensuring its compatible with the old Node.js 0.12 series.

In order to keep evolving the program and deliver the best Yeoman generator for Phaser Web game projects for everyone, I've decided it's time to push the boundaries a bit further. That means the currently planned 0.7.x will be the last version guaranteed to work with Node.js 0.12.

After that, the base Node.js version of generator-phaser-plus will become Node 4.

If you're a Node.js developer, no matter if a casual or a professional one, using Phaser and generator-phaser-plus to create games, you're encouraged to upgrade to, at least, the latest stable Node.js release.

How I know which Node.js version I'm running?

Just fire up your terminal emulator or command prompt of choice and run node --version.

What to expect when these changes take effect?

Developers using Node.js 0.12 will no longer be able to update the generator-phaser-plus package using npm, and both generator and its template projects are expected to no longer work under Node.js environments older than release 4.0, giving errors and not being able to run.

Why Node.js 4?

It's the current LTS release, supported by the Node.js Foundation until March 2018. Also, Node.js 0.12 end-of-life is scheduled to the end of December 2016.

Hi,

i had encoutered this prob when i tried to build my game,

Solution is simpe, here is it : npm i --save-exact --save [email protected]

Bye <3 !

I don't know if I'm doing something wrong or something is wrong with my config but I'm trying to install generator-phaser-plus and it's not working.

Via NPM and I get the following error.

$ npm install -global generator-phaser-plus
npm ERR! path C:\Users\Jesse\AppData\Roaming\npm\node_modules\generator-phaser-plus\cli.js
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall chmod
npm ERR! enoent ENOENT: no such file or directory, chmod 'C:\Users\Jesse\AppData\Roaming\npm\node_modules\generator-phaser-plus\cli.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Jesse\AppData\Roaming\npm-cache\_logs\2018-02-13T23_29_20_809Z-debug.log
/c/Program Files/nodejs/npm: line 34: 12576 Signal 112              (core dumped) "$NODE_EXE" "$NPM_CLI_JS" "$@"

I can't see the package in my global node_modules folder.

Installing via Yarn appears to work (I can see the folder in Yarn's global node_modules folder) but after installation running phaser-plus returns phaser-plus: command not found

Hello there,

It seems that the audio assets are not loading correctly, I tried ogg and mp3 files without success:

In the assets.js file:

// - Music and Sound effects ------------------------------------------------
'audio': [
{
key: 'totta',
type: 'audio',
url: 'totta.ogg'
}
]

Gives error:

Uncaught TypeError: Cannot read property 'length' of undefined

I didn't find any email to check first if this is really an issue or an error from my part...

Regards

How to guide explains the requirements https://gamedevacademy.org/phaser-progressive-web-apps-tutorial/

Hi to you, I hope you have a great day and i would like to let you know that this generator is amasing! Good job really.

I found a small issue in your tutorial tough.

In the ''declaring game assets section'', you say we need to find the preload() method in the new title.js to load our assets. There is none since by default the generator create only the create and update method, maybe add a notice to use the --customize suffix?

PS: The assets seems to be handled in some way by the assets.js files. (maybe its for objects assets more than small assets inside scene classes). It would be nice to know how to take advantage of that with spritesheet and more complex type of assets.

I have a problem installing

I was trying to follow..

to no avail.

First, just want to say I love the work you've done here and I've been using your generator exclusively for my Phaser projects.

I've just begun setting up a new project and encountered this error while extending a Phaser class in the same way that I have previously using this generator. Thinking it may have been something that I did, I set up a fresh project and created a new file extending the Phaser.Tilemap class and sure enough I immediately encountered the same error. Extending something like Phaser.Group works fine. Difference seems to be that I'm using the latest version of your generator for this project. Any help you could provide would be greatly appreciated.

Edit: Looks like the issue was fixed with a recent update

How about adding support for exporting a project as a package for http://electron.atom.io/ using the gulp dist: task ?

And similar for things like Cordova ? (if already installed on system)

*   Which Node.js version: 9.6.1

*   Which package manager (npm or Yarn): Yarn: 1.5.1

*   The project configuration created by Yeoman (the `.yo-rc.json` file).

{
  "generator-phaser-plus": {
    "meta": {
      "createdWith": "3.0.0-beta.2",
      "creationDate": "2018-04-21T22:02:00.600Z"
    },
    "objects": {
      "dest": "app/scripts/objects/"
    },
    "plugins": {
      "dest": "app/scripts/plugins/"
    },
    "scenes": {
      "dest": "app/scripts/scenes/",
      "index": {
        "name": "app/scripts/scenes/index.js",
        "requirePath": "./"
      }
    }
  }
}

When I install all dependencies and run yarn start it runs ok, but gives me the following console error:
Uncaught TypeError: Cannot read property 'sys' of null

When I edit a file in Atom editor I need to save it twice before the new code is available in my browser, Chrome.

I can see the gulp stuff working in the terminal on each save -- but the new files are not being re-loaded in the browser it seems.

Is there a way to force the web browser to be using the new build output without me sacing each edited file twice?

I think it's a best-practice to export strings, integers, dimen, font definitions, and IDK what else to external files so it's easier to change them when the project becomes large. I know Android projects follow this design paradigm. I have all my JSON in assets/json, load it on preload, and then create aliases once preload finishes. That allows me to do things like:

//Scale to device pixelRatio - consistent dimensions across all screens
this.game.dimen = this.game.cache.getJSON('dimen');
for (var dimension in this.game.dimen) { //adjust dimensions for different screen densities
  this.game.dimen[dimension] = this.game.dimen[dimension] * window.devicePixelRatio;
}

Node 9.2.1

npm

.yo-rc.json
{
"generator-phaser-plus": {
"meta": {
"createdWith": "3.0.0-beta.7",
"creationDate": "2019-06-03T18:33:31.708Z"
},
"objects": {
"dest": "app/scripts/objects/"
},
"plugins": {
"dest": "app/scripts/plugins/"
},
"scenes": {
"dest": "app/scripts/scenes/",
"index": {
"name": "app/scripts/scenes/index.js",
"requirePath": "./"
}
}
}
}

I have added

to the index.html file head. I also tried adding it to the body above the comment line where scripts are injected.

I also added

new webpack.DefinePlugin({
// Required by Phaser: Enable Canvas and WebGL renderers.
'CANVAS_RENDERER': JSON.stringify(true),
'WEBGL_RENDERER': JSON.stringify(true),
'PLUGIN_FBINSTANT': JSON.stringify(true)
}),

to the gulpfile.js/webpack/config/plugins.js file but I get the FBInstant is not defined when I add this to my index.js file

export function boot() {
return new Phaser.Game(config);
}
FBInstant.initializeAsync().then(function() {
FBInstant.setLoadingProgress(100);
FBInstant.startGameAsync().then(function() {
boot();
});
});

Any idea what I'm doing wrong? Other development environments do this and it works great, but this generated development environment is the best I've found yet and I would love to make it my go to project creator.

Thanks for your work on this generator.

Everytime i run npm start I always see a block of gulp script errors for babel.

Congrats! Now, launch your project with
npm start and happy hacking :)

$ npm start

> @ start /Users/mike/Code/blox
> gulp default

[20:43:13] Using gulpfile ~/Code/blox/gulpfile.js
[20:43:13] Starting 'dev:lint'...
[20:43:13] Starting 'dev:watch'...
[20:43:13] Finished 'dev:watch' after 14 ms
[20:43:14] Finished 'dev:lint' after 770 ms
[20:43:14] Starting 'dev:scripts'...
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/core-js/object/keys' from '/Users/mike/Code/blox/src'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/classCallCheck' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/createClass' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/possibleConstructorReturn' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/inherits' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/classCallCheck' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/createClass' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/possibleConstructorReturn' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/inherits' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/classCallCheck' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/createClass' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/possibleConstructorReturn' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/inherits' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/classCallCheck' from '/Users/mike/Code/blox/src/app/objects'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/possibleConstructorReturn' from '/Users/mike/Code/blox/src/app/objects'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/helpers/inherits' from '/Users/mike/Code/blox/src/app/objects'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/core-js/object/get-prototype-of' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/core-js/object/get-prototype-of' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/core-js/object/get-prototype-of' from '/Users/mike/Code/blox/src/app/states'
[20:43:21] gulp-notify: [Error running Gulp] Cannot find module 'babel-runtime/core-js/object/get-prototype-of' from '/Users/mike/Code/blox/src/app/objects'
[20:43:21] Finished 'dev:scripts' after 7.17 s
[20:43:21] Starting 'dev:server'...
[20:43:21] Finished 'dev:server' after 91 ms
[20:43:21] Starting 'dev'...
[20:43:21] Finished 'dev' after 6.79 μs
[20:43:21] Starting 'default'...
[20:43:21] Finished 'default' after 9.41 μs
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://10.10.1.109:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://10.10.1.109:3001
 ------------------------------------
[BS] Serving files from: static
[BS] Serving files from: build

During the initial npm install the babel modules were all listed without any errors as being installed:

[email protected] node_modules/babel-polyfill
├── [email protected]
├── [email protected]
└── [email protected]

[email protected] node_modules/babel-plugin-transform-runtime
└── [email protected] ([email protected])

[email protected] node_modules/babelify
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/babel-preset-es2015
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"android","arch":"arm"})

added 976 packages in 178.255s

Congrats! Now, launch your project using
npm start and happy hacking :)
$ npm start

> @ start /data/data/com.termux/files/.../testproject2
> gulp

sh: 1: gulp: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ start: `gulp`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /data/data/com.termux/files/home/.npm/_logs/2018-02-21T07_23_40_153Z-debug.log

Tried a yarn add gulp

success Saved 689 new dependencies.
...
├─ [email protected]
├─ [email protected]
├─ [email protected]

Yet still getting gulp not found?

Also having trouble with fsevents so that might explain some of it. Thanks! So close though.

Just as it says…

If a README exists I'm prompted what to do but the generator hangs instead of accepting input

Where is the best place to read/understand when best to use the src/scripts/app/objects folder and associated object sub-generator?

For Phaser fiddlers who are just dipping their toe in the environment could be nice but some documentation on getting started would be useful.

Covering such basic things as:

• where to put the game/app js files for the project.
• how to upgrade phaser when a new release is available.
• where to dump game assets in the created directory structure
• any explanations about the built in Android & iOS support i see

Hopefully this info wont care about slush vs Yeoman issue either.
Enable the Github Wiki for the project to get started?

This is more a question of approach

If I wanted to include a 3rd party plugin, installed via NPM or otherwise, what would be the best way to do that?

e.g, I've tried installing this plugin, but it doesn't seem to be part of the deployment process. Does it need to be included in index.html manually?

What needs testing:

• The default generator task
• All subgenerator tasks
• Inquirer input validators
• Inquirer validation filters
• "Transforms"
• Project configuration fixtures

If i try:

  create() {
    //  Creates a blank tilemap
    var map = this.add.tilemap('map');

I get the error Uncaught TypeError: Phaser.Tilemap is not a constructor -- whats the correct way to create a timemap using the generators structure?

When trying to generate an object i get:

$ yo phaser-plus:object
Object class generator:
? What's the name of the object? Shape
? (Optional) What does this object do? Represents a single shape on the grid.
? From which base class this object extends? Group
? Is that OK to proceed? Yes
events.js:154
      throw er; // Unhandled 'error' event
      ^

TypeError: Cannot read property 'objects' of undefined
    at module.exports.yeoman.Base.extend.writing (/usr/local/lib/node_modules/generator-phaser-plus/generators/object/index.js:16:38)
    at Object.<anonymous> (/usr/local/lib/node_modules/generator-phaser-plus/node_modules/yeoman-generator/lib/base.js:436:25)
    at /usr/local/lib/node_modules/generator-phaser-plus/node_modules/run-async/index.js:24:25
    at /usr/local/lib/node_modules/generator-phaser-plus/node_modules/yeoman-generator/lib/base.js:448:8
    at processImmediate [as _immediateCallback] (timers.js:383:17)

I just gave it a go slush phaser-plus and npm packed in with the following errors:

npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.7
npm ERR! npm  v2.14.1

npm ERR! Callback called more than once.
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/mike/Code/blox/npm-debug.log
[03:32:27] npm exited with non-zero code 1 , run `npm install` manually
events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: npm exited with non-zero code 1
    at ChildProcess.<anonymous> (/usr/local/lib/node_modules/slush-phaser-plus/node_modules/gulp-install/lib/commandRunner.js:14:19)
    at ChildProcess.emit (events.js:110:17)
    at maybeClose (child_process.js:1015:16)
    at Process.ChildProcess._handle.onexit (child_process.js:1087:5)

Any ideas?