1. Introduction

CanVerse2D is an easy to use Framework for creating 2D games within the HTML5 Canvas. It uses an object oriented programming style which is implemented using the Mootools API. As my background is in the Python programming language and my roots for game development lie within [Pygame](http://www.pygame.org) I decided that I would build this project in a similar way. So for those of you who are familiar with Pygame, you should feel right at home.

Requirements

In order to use CanVerse2D you will need to know:

1. The Mootools inheritance system
2. Basic Object-oriented programming techniques
3. Basic Javascript
4. Basic JSON understanding

You will also require an HTML5 compatible web browser

Setup

In the head tags of your web page you will need to include these lines of code:

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script src="https://raw.github.com/RossLote/CanVerse2D/master/canverse2d.min.js"></script>

Then create a new file for the game code and include it directly below the previous lines.

<script src="Path To your main game.js file"></script>

Copy and Paste this code into your main game file.

// create your Sprite classes here

window.onload = function(){
    CVSetCanvas(document.getElementById('myCanvas')); // or what ever id you have given you're canvas
    
    // place your sprite code here.

    CVSetLoopFunction(function(){
        // insert game code here
    });

    CVInit();
    CVMainloop();
}

This is the basic setup that will be in all of your CanVerse2D games.

Sprite or 7UP?

At this point we’re ready to start drawing things. Everything that you draw in CanVerse2D is called a Sprite. Sprites are things that have a graphical representations and can be moved around on the canvas. So for this we need two things. An image, and a Sprite Object to hold the image.

First we will create an image. Under the comment: // place your sprite code here. Insert this code:

var myImage = new CVSurface({width: 50, height:50 });
myImage.circle();

The first line creates a new blank surface, gives it a width and a height of 50 and assigns it to the variable image. Alone this line of code is pretty much useless as it will just draw a blank image on the canvas. So we call the circle() method on it to draw a circle on the surface that will fill it’s size. Next we need to create a Sprite object to hold the image. Place this code below what you just wrote:

var mySprite = new CVSprite({
    image: myImage;
});

This creates a new CVSprite object and assigns our image to it. The variable s in function(s) is a callback and can be named anything you like as long as you refer to it when assigning attributes such as s.image = myImage. It refers to the sprite object being created and here s stands for sprite. Hopefully by now you will have noticed a theme with the way things are named. All CanVerse2D classes and functions are preceded with a ‘CV’. This will help to prevent naming clashes. One more line of code will have our game up and running. At the moment the script will run without an issue but nothing will really happen. To get the sprite to draw you have to call the draw() method on it. Looking at the code we have so far you will see a comment line which says: // insert game code here Anything you place here will be called every time the screen refreshes. So insert the following code below the comment:

mySprite.draw();

If you now load the web page you will see the results of your code. So after an exhausting 9 lines of code you have an awesome circle drawn on you canvas.

Move it or Loose it!

As you may know, games that don’t do anything don’t tend to be very good. So lets make our circle do something. Place these two lines of code above the draw() method from before:

var pos = mySprite.getPos();
mySprite.setPos(pos.x+1, pos.y+1);

I’m sure you can guess what this does but I’ll glance over it anyway. the getPos() method gets the sprites x and y positions in JSON format and assigns it to the variable pos. setPos() does the opposite. Two arguments are passed in: The new x coordinate and the new y coordinate. So here we are assigning the previous values plus 1 to the right and plus 1 down. This means that the circle will move a little to the right and a little down every frame. Run the code and take a look at what happens.

Trails Blazing!

If you ran the code you would have seen that there is a little unpleasant effect that we didn’t want. As the circle moves it leaves a trail in its wake. If you like this you can always leave it in but I’d recommend getting rid of it. The reason this is happening is that every time the sprite moves the image that was drawn on the canvas previously is still there. We need to clear the canvas every time we go through the loop before we draw again. You’ll be happy to know this takes only one more line of code. And here it is:

CVClearCanvas();

Add this above the previous three lines of code, reload the page and hey presto! Isn’t it beautiful? I bet you didn’t think it would be that easy.

Done!

Just for closure - here’s the entire script:

// create your Sprite classes here

window.onload = function(){
    CVSetCanvas(document.getElementById('myCanvas')); // or what ever id you have given you're canvas
    
    // place your sprite code here.
    var myImage = new CVSurface({width: 50, height:50 });
    myImage.circle();
    var mySprite = new CVSprite({
        image: myImage;
    });

    CVSetLoopFunction(function(){
        // insert game code here
        CVClearCanvas();
        var pos = mySprite.getPos();
        mySprite.setPos(pos.x+1, pos.y+1);
        mySprite.draw();
    });

    CVInit();
    CVMainloop();
}