phaser-framework Getting started with phaser-framework
Remarks
Phaser is an open source Desktop and Mobile HTML5 game framework primarily.
It includes a robust set of documentation, features and examples to get you moving towards a working game quickly. It supports WebGL, via the Pixi.js rendering engine, and includes a Canvas fallback for support on older devices.
Although the engine is built in JavaScript it also includes TypeScript definitions
There is a new envisioning of the project that is ES6 compliant called Lazer.
Versions
Phaser 2
| Version | Release Date |
|---|---|
| 2.6.2 Kore Springs | 2016-08-25 |
| 2.6.1 Caemlyn | 2016-07-11 |
| 2.6.0 Fal Moran | 2016-07-08 |
| 2.5.0 Five Kings | 2016-06-17 |
| 2.4.9 Four Kings | 2016-06-16 |
| 2.4.8 Watch Hill | 2016-05-19 |
Getting Started Phaser
- Create a folder
- Create an index.html inside the new directory. Open it in the Bracket editor
- Download the Phaser repository from github, then grab the phaser.js file from the build folder. Place the file inside your project directory.
- Open index.html and link the phaser.js inside the header tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Gamer</title>
<script type="text/javascript" src="lib/phaser.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<div id="gameContainer"></div>
</body>
</html>
- Create another js file inside the directory named game.js
- Open game.js file in editor and write the following code:
// Phaser instance, width 800px, height 600px render as CANVAS.
// Method signature - preload, create and update
var game = new Phaser.Game(800, 600, Phaser.CANVAS,'gameContainer', { preload: preload, create: create, update: update });
function preload() {
// this method used to load your game assets
}
function create() {
// this method run only once used to create to game world
}
function update() {
// this method loop 60 times in a seconds, used to handle gameplay.
}
- Save all files and open index.html using Bracket liveserver (top right icon).
- The Phaser development environment is now created. A console screen should appear in the browser for error verification.
Getting Started with Phaser using Node.js
- Create a folder where you would like to have your game live, and move into that
mkdir my-new-game cd my-new-game
- Initialize the directory using npm.
npm init -y
- Install phaser as a node package.
npm install phaser
- Install http-server as a global module, to be used on the commandline.
npm install -g http-server
- Create an index.html file and reference the Phaser executable and paste the following code into it.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Gamer</title>
<script type="text/javascript" src="node_modules/phaser/build/phaser.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<div id="helloWorld"></div>
</body>
<script>
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'helloWorld', {
create: create
});
function create() {
var text = "Hello World!";
var style = {
font: "65px Arial",
fill: "#ff0044",
align: "center"
};
var t = game.add.text(game.world.centerX, 300, text, style);
t.anchor.set(0.5);
}
</script>
</html>
- Start the server and load http://localhost:8080 in your browser!
hs
