NASA Planetary Mission

    generator-gamejam

    1.2.2 • Public • Published

    generator-gamejam

    This is a Yeoman generator for game jam HTML5 projects. With this you can quickly create a project skeleton that contains:

    • An index.html file that displays your game using the awesome Phaser game framework.
    • A local web server you can run your game into (needed for Phaser).
    • Developer tools: Gulp, Browserify, livereload.
    • A task to create a release of your game that you can zip or backup.
    • A task to deploy your game into your own server online.

    Getting Started

    You need to install both Yeoman and this generator globally:

    npm install -g yo generator-gamejam

    Create a directory for your project and run yeoman from within:

    mkdir awesome-game
    cd awesome-game
    yo gamejam
    

    You will get this project skeleton:

    ├── src
    │   ├── images
    │   │   ├── phaser.png
    │   │   └── preloader_bar.png
    │   ├── index.html
    │   ├── raw.html
    │   ├── js
    │   │   ├── main.js
    │   │   └── play_scene.js
    │   └── styles.css
    ├── gulp.config.json
    ├── gulpfile.js
    ├── node_modules
    └── package.json
    

    You will see a gulpfile.js, which is to setup Gulp, a task automator and building system. It is very useful to speed up our workflow.

    Developing your game

    Modules

    This project includes Browserify, a tool for managing dependencies and modules (like RequireJS). One of the cool things about Browserify is that it allows you to use node modules in your browser application. For instance, if you need Lo-Dash in your project, you would install it as a regular npm package:

    npm install lodash-node
    

    And then in your JavaScript files, you would just need:

    var _ = require('lodash-module');
    

    You can require local files too in this fashion, but you need to put a path (relative to the current file):

    var PlayScene = require('./play_scene.js');
    

    Running the game

    In the gulpfile.js there are defined some tasks to aid development. The default task will build the project in a dist folder.

    gulp
    

    You can now run a local server over dist. For instance:

    npm -g install http-server
    http-server dist
    

    Now open 0.0.0.0:8080 and you will see a "Hello, world" game.

    However, while you are developing, you will want to use the run task. This is similar to the default task, but will watch your JS files for changes and re-run Browserify automatically. This also uses browser-sync to reload your browser automatically whenever there are changes to JavaScript, HTML or CSS files.

    gulp run
    

    Releasing and deploying

    You can create a build, which will create a directory with only your project files ready to be distributed.

    gulp dist
    

    Embedding your game

    There are several places you can submit your game to, like itch.io or Ludum Dare. These websites have their own wrapper or viewer over your game. That's why raw.html exists: it is the bare game ready to be embedded in an iframe.

    Changelog

    1.2.2 (2 Jul 2016)

    • Fix bug in which phaser.min.js and phaser.map where not found.

    1.2.1 (12 Feb 2016)

    • Updated README

    1.2.0 (12 Feb 2016)

    • Used browser-sync instead of relying on live-reload.
    • Added README.md file to the scaffolding
    • Added deployment with Github Pages
    • Made deployment optional
    • Fixed gulp not running when config.local.json could not be found

    1.1.0 (1 May 2015)

    • Used gulp-livereload.
    • Now the game itself is in its own html file (raw.html) so it can be embedded into an iframe by third-party websites.
    • Removed linter (this is aimed for gamejams, after all).

    License

    © 2014-2016 Belén "BenKo" Albeza.

    generator-gamejam is released under the MIT license. Read LICENSE for details.

    Install

    npm i generator-gamejam

    DownloadsWeekly Downloads

    5

    Version

    1.2.2

    License

    MIT

    Last publish

    Collaborators

    • ladybenko