state

When we have to develop a large project we need to go with modular programming – we need to break the game into several meaningful modules and develop it separately and then let them communicate to produce the required results.

To demonstrate that we are changing our yesterdays basic phaser tutorial into a modular project using Phaser State Manager.

Video Tutorial List At One Place:
Phaser Video Tutorial List: Game Framework

In this video you’ll learn:
1. Writing modular code.
2. Using state manager – single state.
3. Project structure to handle large project.
4. Adding images to the project.

Phaser Version: 2.5.0
OS used for Demo: Windows 10
Server used: Node Server

Node Server
1. Node.js Video Tutorial List
2. Express Web Framework: Node.js

Phaser State Manager: Basic

[youtube https://www.youtube.com/watch?v=G2ZcM84cPrA]

YouTube Link: https://www.youtube.com/watch?v=G2ZcM84cPrA [Watch the Video In Full Screen.]

HTML File – index.html

< !DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascripts/library/phaser.js">
</script>
<script type="text/javascript" src="javascripts/Main.js">
</script>
</head>
<body>
 
<script type="text/javascript">
    var game = new Phaser.Game(400, 400, Phaser.AUTO);
    game.state.add('Main', Technotip.Main);
    game.state.start('Main');
</script>
</body>
</html>

Here we link the phaser library at the top and below that we link our Main.js file. At the end of body tag, we have a game object, and using that game object we add Technotip.Main state and start that state using game.state.start() method.

Javascript File – Main State

var Technotip = {};
 
Technotip.Main = function(game){
 
};
 
Technotip.Main.prototype = {
   preload: function(){
        this.load.image('org', '/images/logo1.png');
        this.load.image('com', '/images/logo2.jpg');
   },
   create: function(){
        this.add.sprite(10, 20, 'org');
        this.add.sprite(100, 100, 'com');
    }
};

Here we create an object called Technotip, and then create our state as Technotip.Main and pass our game object to it which will be referenced with this keyword inside Main.js

Next we define the prototype for the state – by defining methods inside it. In above code, we only define preload and create methods. Like our previous phaser tutorial, we load an image in preload method and add that image / sprite to the game stage inside create method.

That’s it. Make sure to add the link to the Main.js in your html file after the phaser library. And then add the state and then make sure to start the game.

In next video tutorial lets learn about update method ..

Today lets learn about canvas states, which will come handy once we start drawing complex shapes/graphics. Canvas state keeps track of current values of lineWidth, strokeStyle, fillStyle, lineCap, transformation matrix, clipping regions etc.

Backup-Recovery

Each time we save a state, it’s pushed onto a stack of saved states from which we can restore the state later.

HTML file
index.html

< !DOCTYPE HTML>
<html>
<head>
<title>Canvas: HTML5</title>
<meta charset="utf-8"/>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body>
 
<canvas id="myCanvas" width="200" height="200">
  Upgrade Browser
 </canvas>
 
</body>
</html>

HTML5 document with a canvas element which has an id and 200px width and height.
It’s also attached with an external stylesheet and a javascript file.

StyleSheet file
myStyle.css

1
2
3

canvas {
border: 2px dotted black;
}

Here we’re selecting canvas element and assigning it a 2px thick black dotted border.

JavaScript file
myScript.js

context.fillStyle   = "red";
context.fillRect(10, 10, 50, 50);
context.save();
 
context.fillStyle   = "blue";
context.fillRect(20, 20, 75, 75);
 
 
context.restore();
context.fillRect(30, 30, 100, 100);

We have 3 rectangle boxes.
First one is filled with red color.
Second one is filled with blue color.

Using save() method, we have saved the fillStyle property value.
Now we restore fillStyle property before drawing the third rectangle.
Saved canvas state has fillStyle as red, so our third rectangle gets red color.

JavaScript file
myScript.js

context.fillStyle   = "red";
context.fillRect(10, 10, 50, 50);
context.save();
 
context.fillStyle   = "blue";
context.fillRect(20, 20, 75, 75);
context.save();
 
context.restore();
context.restore();
context.fillRect(30, 30, 100, 100);

Here we’re saving canvas states twice.

Canvas State Stack
blue 2nd in.

red 1st in.

Canvas State Calls
1st restore call blue

2nd restore call red

Hence, now third rectangle will be red colored.

Canvas State: HTML5

[youtube https://www.youtube.com/watch?v=1oBlAhoa9zI]

YouTube Link: https://www.youtube.com/watch?v=1oBlAhoa9zI [Watch the Video In Full Screen.]

Full JavaScript Code
myScript.js

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.fillStyle   = "red";
context.fillRect(10, 10, 50, 50);
context.save();
 
context.fillStyle   = "blue";
context.fillRect(20, 20, 75, 75);
context.save();
 
context.restore();
context.restore();
context.fillRect(30, 30, 100, 100);
 
}
}

Instantly we could think of building “undo” feature for our drawing board application with the help of canvas state stack!

Tag: state

State Manager: Phaser

Canvas State: HTML5