Giter Club home page Giter Club logo

generator-phaser's Introduction

generator-phaser

A Yeoman generator to create HTML5 games with Phaser. This generator allows for the creation of Phaser games with best practices. The main generator (yo phaser) outputs a basic Phaser game. You can also generate new prefabs (yo phaser:prefab) or states (yo phaser:state) to add to your project.

You can view your game in the browser by running npm start from the project's root directory and the web page will refresh as you save your files.

When you are ready to publish, build your game with npm run build and view the output in the build/ folder. The build process minifies and compresses individual files into one file for faster network downloading, the source code is transpiled to ES5 compatible JavaScript using Babel.

INSTRUCTIONS

  • Install Node.js

  • Install the required npm modules by issuing these commands:

    npm install -g yo generator-phaser

  • Create a new directory for your game:

    • Unix/OSX : mkdir ~/Desktop/mygame && cd $_
    • Windows : mkdir %USERPROFILE%\Desktop\mygame && cd %USERPROFILE%\Desktop\mygame
  • Invoke the generator:

    yo phaser

  • Invoke the state generator (Note: this updates & overwrites main.js):

    yo phaser:state

  • Invoke the prefab generator:

    yo phaser:prefab

  • Invoke the shader generator:

    yo phaser:shader

  • Run a local development server (livereload enabled) with this command:

    npm start

  • Package your game (i.e. minify css, html and js) with:

    npm run build

Notes

The game's main.js file will be updated with new states when you run the state generator. It adds in .js files found in the src/states/ directory.

CREDITS

generator-phaser's People

Contributors

aido179 avatar bitdeli-chef avatar bojank avatar bramchi avatar casarock avatar dciccale avatar dependabot[bot] avatar glenngeenen avatar icbat avatar jcalonso avatar julien avatar krzychukula avatar marcospgp avatar mertkahyaoglu avatar nodehack avatar nuane avatar zachlatta 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

generator-phaser's Issues

Preload tilemap

Hi,
I have an issue, when i try to preload a json tilemap.
this.load.tilemap('level1', 'assets/level1.json', null, Phaser.Tilemap.TILED_JSON);
I get "Phaser' is not defined" in my terminal.
How can I load the tilemap properly?

State question

Hello,

I know that this is a wider question about phaser but, its one I cant find a decent answer to anywhere I look.

Basically: Should I create a state for every level of a game?

If so then that would imply I'll be best off creating a module for each character and for the game mechanics.

As a side note I'm starting a long term project to make a game similar to final fantasy tactics advance or tactics ogre etc. (grid based, turn based strategy)

Any advice beyond my initial question is also amazingly appreciated.

Lewis

Request

Whis is more a request than an issue, could it be posible so when you start a new proyect the varaible "example" would be changed with the proyect name ?

npm start failed

Hi there,

thanks for creating the generator for phaser.

But unfortunately when i tried to run "npm start" command, it throws an errors

 
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.2.4
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node ./node_modules/gulp/bin/gulp.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'node ./node_modules/gulp/bin/gulp.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the cobageneratorphaser package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./node_modules/gulp/bin/gulp.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs cobageneratorphaser
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls cobageneratorphaser
npm ERR! There is likely additional logging output above.

Yeoman not recognizing generator when phaser installed with Bower?

I installed phaser with bower and have it in my bower.json, but after installing generator-phaser running a yo phaser gives

You don't seem to have a generator with the name phaser installed. You can see available generators with npm search yeoman-generator and then install them with npm install [name].

when it also accepts generator-phaser as installed. I'm confused. Am I missing something basic?

Examples?

I think it would be really helpful if the documentation included a reference to a project that used this generator, so that people that are newer to Phaser (myself)could dig into the code.

Does anyone have any projects that they feel would be a good example based on the project structure that this generator creates?

I'm overwhelmed by possibilities at this point and would like to just base the structure of my project similar to what someone else, with more experience, has done. Thanks :)

es2015 error

Opening terminal. Creating new directory with following command and moving into new directory:
mkdir -p Games/lucky && cd Games/lucky

Running following command: [Updating npm, yo and installing generator-phaser]
npm install npm -g && npm install yo generator-phaser -g && yo

Now running generator and picking up options such as:
? What's the name of your application lucky
? Which version of Phaser do you want? Arcade Physics + P2 Physics (Default)
? Which ECMAScript version do you want to use? ECMAScript 6/2015 (Default)
? Output an example game or boilerplate code? Boilerplate

Installed properly, running command:
npm start

Result given:

โžœ lucky npm start
[email protected] start /Users/ts/Games/lucky
budo src/main.js:bundle.js --live -- -d -e src/main.js -t [babelify --comments false --presets es2015]
[0000] info Server running at http://192.168.0.5:9966/ (connect)
[0000] info LiveReload running on 35729
Error: Couldn't find preset "es2015" relative to directory "/Users/ts" while parsing file: /Users/ts/Games/lucky/src/main.js

Deploying to heroku?

Not sure if this qualifies as an issue, but did anyone successfully deploy this project to heroku? I am following the tutorials and I am sure that the issue that I run into is at creating the procfile where heroku does not understand the npm start because it does not have budo installed.

I also tried running the project with node main.js with no luck as I can't find info on how phaser code works.

If anyone can direct me to the right location then I will appreciate it.

Choose phaser build

Currently the generator uses phaser.min, this build is 745 KB while most of the time I never use P2 Physics. An arcade physics build is 568KB and no physics is 503KB.

So I wonder, what do you think of adding a question to choose the phaser build?

this.game.scale.setScreenSize is not a function

Hi!

When i run the project on android i got this :

Uncaught TypeError: this.game.scale.setScreenSize is not a function at t.value (bundle.min.js:1) at c.StateManager.loadComplete (phaser.min.js:10) at c.Loader.finishedLoading (phaser.min.js:20) at c.Loader.processLoadQueue (phaser.min.js:20) at c.Loader.asyncComplete (phaser.min.js:20) at c.Loader.fileComplete (phaser.min.js:20) at HTMLImageElement.a.data.onload (phaser.min.js:20)

It seem this method is deprecated in 2.6.2.
I've removed the line and tried on my phone (android 6) and a tablet(android 4.4). In both the built-in game seem to worked well.

EPEERINVALID error installing generator-phaser with NPM

Running sudo npm install -g generator-phaser gives me this:

npm WARN package.json [email protected] No description
npm WARN package.json [email protected] No repository field.
npm ERR! peerinvalid The package yo does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants yo@>=1.0.0

npm ERR! System Linux 3.11.0-12-generic
npm ERR! command "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "generator-phaser"
npm ERR! cwd /home/username
npm ERR! node -v v0.10.26
npm ERR! npm -v 1.4.3
npm ERR! code EPEERINVALID

I had yeoman working just fine with generator-angular and generator-angular-fullstack. What's different about generator-phaser?

LiveReload doesn't trigger

Hey there

I've created a new phaser project via the generator, and I'm running the embedded budo server via npm start, as recommended. Making changes to main.js (or indeed any other JS file) doesn't trigger livereloading, despite --live being set in the package.json scripts entry. The livereload js file is being injected successfully, but bundle.js is never regenerated without killing the server and reloading

Please advise if further information is required.

Mac OSX 10.10.5
Chrome 51.0.2704.103

Installing via npm doesn't work

When I run sudo npm -g install generator-phaser it finishes installing successfully, however after doing so running yo phaser fails.

Has something changed recently? Any ideas on why this fails now?

yo phaser crash when selecting Phaser version

hi! I've recently installed this generator but when I select the Phaser version this is what I get:

? Which version of Phaser do you want? Arcade Physics

TypeError: /usr/local/lib/node_modules/generator-phaser/generators/app/templates/_package.json:2
1| {

2| "name": "<%= _.slugify(projectName) %>",
3| "description": "",
4| "readme": "",
5| "repository": "",

Cannot read property 'slugify' of undefined
at eval (eval at (/usr/local/lib/node_modules/generator-phaser/node_modules/ejs/lib/ejs.js:485:12), :11:24)
at returnedFn (/usr/local/lib/node_modules/generator-phaser/node_modules/ejs/lib/ejs.js:514:17)
at Object.exports.render (/usr/local/lib/node_modules/generator-phaser/node_modules/ejs/lib/ejs.js:316:37)
at copy.process (/usr/local/lib/node_modules/generator-phaser/node_modules/mem-fs-editor/actions/copy-tpl.js:14:18)
at applyProcessingFunc (/usr/local/lib/node_modules/generator-phaser/node_modules/mem-fs-editor/actions/copy.js:13:16)
at EditionInterface.exports._copySingle (/usr/local/lib/node_modules/generator-phaser/node_modules/mem-fs-editor/actions/copy.js:51:16)
at EditionInterface.exports.copy (/usr/local/lib/node_modules/generator-phaser/node_modules/mem-fs-editor/actions/copy.js:23:17)
at EditionInterface.module.exports as copyTpl
at template (/usr/local/lib/node_modules/generator-phaser/node_modules/yeoman-generator/lib/actions/actions.js:134:11)
at generators.Base.extend.app (/usr/local/lib/node_modules/generator-phaser/generators/app/index.js:65:10)

Could you help me???
Thank you :)

Phaser3 support?

just wondering if supports phaser3?
i would test it myself however i have absolutely no idea what problems this tools solves! I am not familiar with Yeoman and i can't visualize the benefits of generated states as the "skeleton" would be like 2 lines of code and anything more is use-case specific...

EDIT: sorry forgot to mention, I am maintaining a Secure Docker Linux environment typical for a Phaser3 project (you'll see it on phaser news soon). I am now hoping to include some developer tools and this appears to be recommended in several places.

Asset folder building problem

npm: 4.0.5v; LinuxMint 17.2 Cinnamon.

I just installed this generator, and something I was troubled at is that "npm run build" command won't work properly if you don't create a subfolder also named "assets" inside you "assets" folder to put your files there; otherwise what will happen is that all your asset files will be "built" on the root folder of the project, and Phaser won't find them when loading.

This also happens with the generator game example, which means you can't test it from scratch just by generating and building it.

Prefab Inclusion

It's stated that generated states are included in main.js but I see nothing about prefabs. When I try and call a generated prefab it errors as undefined. Do I need to include my prefabs manually and if so what is the best way so that they will end up in the final build. Thanks!

'-rf' flag is breaking build

As of commit 1a0121c (the switch from cp to ncp), the build process is broken, because the '-rf' is not accepted by ncp. I can submit a pull request, if wanted, but it's mostly just removing the flags that fixes it.

Error when running erver

I ran the generator and it installed all dependencies fine but when I ran gulp it threw the following error:

gulp                                                                                                                                                                                                                      [ruby-2.1.0@main]
[gulp] Option open does not work in gulp-connect v 2.*. Please read "readme" https://github.com/AveVlad/gulp-connect
[gulp] Server started http://localhost:9000
[gulp] LiveReload started on port 35729

/Users/dkewal/Projects/test/node_modules/gulp/node_modules/orchestrator/index.js:47
            throw new Error('Task '+name+' can\'t support dependencies that is not an a
                  ^
Error: Task connect can't support dependencies that is not an array of strings
    at Gulp.Orchestrator.add (/Users/dkewal/Projects/test/node_modules/gulp/node_modules/orchestrator/index.js:47:10)
    at Object.<anonymous> (/Users/dkewal/Projects/test/gulpfile.js:65:6)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Liftoff.handleArguments (/Users/dkewal/.nvm/v0.10.24/lib/node_modules/gulp/bin/gulp.js:62:18)
    at Liftoff.launch (/Users/dkewal/.nvm/v0.10.24/lib/node_modules/gulp/node_modules/liftoff/index.js:144:6)

Using Node v0.10.24.

README.md has incorrect info about creating directory.

Create a new directory for your game:

Unix/OSX : mkdir ~/Desktop/mygame && cd $_
Windows : mkdir %USERPROFILE%\Desktop\mygame && cd %USERPROFILE%\Desktop\mygame

The OSs are reversed. I used the top one to create the directory on my Windows machine

Keep phaser separate in build.

Currently the build process packages all javascript together in main.min.js. I wonder if it wouldn't be better to keep phaser and your game separate. Many times you want to link phaser to a cdn or the same file so it can be cached.

Any reason these are together (apart of having a http request less)?

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.