Jasper Engine 2D

Lets have some fun now!

We are going to start off with something to teach you the basics of object-behavior manipulation.

In this tutorial, we will make a scene where a number of object are going to be constantly chasing the mouse. We'll introduce new variations as we go through the tutorial.

Before we begin

Make sure to have done the following:

1. Create a html page with a <div> having id = 'container'
   

   <div id="container">
   </div>
   

2. Include the jasperengine.js or jasperengine.min.js
   

   <script src="(path_to_js)/jasperengine.js" ></script>
   

   ---

Creating the core

Lets start off by creating a core object. This is done by constructing a new Jasper.Core object by passing an argument object containing:

1. canvasHeight : Height of the canvas to be created.
2. canvasWidth : Width of the canvas to be created.
3. container : The name of the <div> inside which the canvas is to be created.

After creating the gameCore object, init() must be called on it to start the JasperEngine game loop.

init() must be called during the creation of Jasper.Core object. However it can be paused and resume anytime later.

var gameCore = new Jasper.Core({
        canvasHeight: 800,
        canvasWidth: 1000,
        container: "container"
    }).init();

Getting the heirarchy up

First, let's create the main game Scene which will contain our layers in the game. However in this game, we only have one layer.

We can create a Jasper.Scene by passing in an object with the following:

1. name : The name of the scene, juz so we can use it later
2. worldW : The width of the entire world in this scene, even the off-canvas area.
3. worldH : The hieght of the entire world in this scene, even the off-canvas area.

Finally add the scene to the gameCore object and start it. However there is nothing for the engine to display right now.

    var gameScene = new Jasper.Scene({
        name: "main",
        worldW: 800,
        worldH: 1000,
    });
    gameCore.addScene(gameScene).startScene(gameScene);

Now it's time to get our Layer up. Remember, from here onwards in the heirarchy,

The order in which you add layers to scenes or add objects to layers play a role in determining their z-level.

Each the objects in one layer are at a different z-level relative to the objects in the another layer.

Let's create a Jasper.Layer ,with the name "arena", by passing in an object with the following:

• name : The name of the scene, juz so we can use it later

Then, add the layer to the scene. This makes the layer as the innermost layer in the scene. Since we have only one layer, it doesnt matter now.

``` javascript

var arenaLayer = new Jasper.Layer({name:"arena"});
gameScene.addLayer(arenaLayer);

```

Rise my minions!

Let's bring in these bad boys:

Download the image and keep it in '/img/' as 'evil.png'

First we need to create an object:

    var evilface = new Jasper.Object("evilface");

At this point, the object is almost nothing.

So let's add a sprite behavior to give it some visual evilness!!!

    evilface.addBehavior("sprite").setSprite("../img/evil.png").setHeight(30).setWidth(30);

Thats awesome but we can't have any fun with one evilface, we need a lot more!!! A hundred seems fair enough!

    for(i=0;i<10;i++){
        for(j=0;j<10;j++){
        var evilface = new Jasper.Object("evilface");
        evilface.setPos(i*50,j*50);
        evilface.addBehavior("sprite").setSprite("../img/evil.png").setHeight(30).setWidth(30);
        arenaLayer.addObject(evilface);
        }
    }

Show two ways of creating the behavior for sprite here

Run the file.

Seems like the evilfaces are not so evil… THEY ARENT MOVING YET.

I guess it's time for a custom behavior now!!! Continue Tutorial...

Author : Jude Naveen Raj

Organisation : Delta NITT