09 May 2014

Getting started with PandaJS

HTML5 is the next big thing. There are new and interesting APIs to experiment with. Among them, Canvas caught most of the attention (You can amaze yourself with the demos here). Canvas is a container to draw graphics on the go. From text and images to 3D, you can draw and manipulate them in a web page. This along with JS gave rise to a lot of game frameworks. PandaJs is only a few months old but has some powerful features – Physics engine, particle engine, WebGL, mobile support and much more.

Today, we will learn

  1. How to setup a game scene.
  2. How to add and remove assets and
  3. Making the assets interactive.

The Engine

Goto www.pandajs.net and download the latest engine. After extracting the zip, you will find two folders src (engine and game main file) and media (media assets – images, audio etc.).  Inside the src folder you will find two files – config.js (path configurations) and main.js (your game code). You can find the source codes inside the engine folder or make your own and add it there.

Setting up the scene

Open the main.js using a text editor. You would see the following codes:

[code lang=”html”]

game.module(
‘game.main’
)
.body(function() {
game.addAsset(‘logo.png’);
SceneGame = game.Scene.extend({
backgroundColor: 0xb9bec7,
 
init: function() {
var logo = new game.Sprite(‘logo.png’);
logo.anchor.set(0.5, 0.5);
logo.position.set(game.system.width / 2, game.system.height / 2);
this.stage.addChild(logo);
}
});
game.start();
});
[/code]

game.module – Configures which all modules the game needs.

game.addAsset() – Assets (images, audio etc.) should be added before its referenced inside a scene. The above line adds the image logo.png from the media folder (path configured in config.js) to its assets set.

To create a scene, we create a class which extends(inherit properties) the game.Scene class. Several methods and properties are available for the game.Scene class. The backgroundColor property lets you paint the background with a solid color.

The init() function is called to initialize the scene. Here we create a sprite of the PandaJs logo which we added to our assets set earlier.

anchor.set(x,y) – Sets the registration point of the sprite. You can find a demo of what is anchor point here.

position.set(x,y) – Sets the x and y coordinates to display the sprite.

stage.addChild() – Adds the sprite to the scene.

game.start() – To start the game. You can specify which scene to start first, the dimension of the scene and the CanvasId. The parameters are in the order – game.start(Scene,width,height,loaderClass,CanvasId).

Making the sprite interactive

To make the sprite interactive, we must include the core.js and set the sprite’s interactive property to true. Below the game.module add the following –
[code lang=”html”]
.require(
"engine.core")
[/code]

And inside the init() function, after creating the sprite class add –
[code lang=”html”]
logo.interactive = true;
[/code]

Interactions are possible through keyboard and mouse. For mouse several methods like click, mouseup, mousedown, mousemove are supported. To make it do some function on click, we implement the click method as follows –
[code lang=”html”]
logo.click = function () {

//your code to do something

}
[/code]
Removing the sprite

To remove a sprite from the screen, call the removeChild() method from the scene or just remove() from the object itself. Like –
[code lang=”html”]
logo.click = function () {

this.remove();

}
[/code]
Or
[code lang=”html”]
this.stage.removeChild(logo);
[/code]
More?

That is pretty much the basics. You can find more about PandaJs on its official website. If you want to know more about HTML5 Game engines, head onto this site and find which is right for you. There are plenty out there (Flash like, Multiplayer supported, Construct 2 and Stencyl for non-programmers) and I am sure you will find the one for you. Happy coding!

Download source files