Giter VIP home page Giter VIP logo

chomper's Introduction

What is the Phaser Project Template?

This is a simple project template I created to help add structure and automation to your next Phaser game. It includes the following things:

  • A package.json for installing npm dependencies
  • GruntFile.js for automating build tasks and compiling your game
  • src folder where you can put your game code.
  • deploy folder where all code gets compiled to and you can push to a server

To get started all you need to do is download a copy of this template, the latest version of Phaser, NodeJS and Grunt.

Installing NodeJS and Grunt

You can get a copy of NodeJS on its site here and install it. After installing it you will want to install grunt from the command line.

Now you can install Grunt's command line tools by typing out the following:

> npm install -g grunt-cli

From here, Grunt should work via the command line. If you have never installed Node or Grunt, make sure you watch these two videos:

These two videos help walk you through how I have used Node and Grunt in the past with my other game starterkits. Note: You will not need to install PHP for this project which is covered in these videos.

Setting up the Template's Dependencies

Via the command line, navigate into the template directory's root and run the following command:

> npm install

This will download all the dependencies in the package.json file and install them locally for you to use.

After that you can simply run the following:

> grunt

It will launch a browser with the default screen which will look something like this:

<img border="0" width="624"id="Picture 3" src="http://jessefreeman.com/wp-content/uploads/2014/03/Phaser-Template.png" />

You can start building a game with Phaser, simply modify the main.js file inside of the src/game directory. As long as you have the Grunt task running, your project will automatically recompile every time you make a change to any JavaScript file inside of the src directory. Once the project is recompiled, simply refresh your browser to see the changes. Also make sure you disable your browser's cache.

What Else?

While I have included a version of Phaser to get you started, chances are very good that it is already out of date. Make sure you go to the Phaser github page and download the latest source code. Once you have that, simply copy the minified version of Phaser into the src/lib directory and replace the one that is currently there.

<img border="0" width="333"id="Picture 3" src="http://jessefreeman.com/wp-content/uploads/2014/03/pt-src.png" />

Also, if you are lost or need some point of reference I highly suggest going through each of the tests in the Phaser project to see how things work until more of the framework is documented.

chomper's People

Contributors

jessefreeman avatar

Watchers

 avatar  avatar

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.