Unity 2D

If you’ve been following my blog, you know that I’ve started with game development a few months ago.

I started with Javascript engines but, this time I tried something different. I started with Unity engine!

Unity 4.3 was launched with a new feature.. the 2D! So, I gave it a shot and I loved it! You really feel that you are working with a professional tool for developing games. I’ve started developing another clone of Flappy Bird that you can play here.

 

Scrolling background on Canvas

In this post I will show how to implement a scrolling background on the canvas.

Actually this is something very easy to achieve. The trick is that we have to draw the image twice, one for the top of the image and the second for the remaining part.

If you want, you can see the final result here and the source code on my Github page.

We start with the window onload event. We check if canvas is supported, if not we send an alert.


window.onload = function () {
 // get canvas
 var canvas = document.getElementById('canvas');
 // get context
 var ctx = canvas.getContext && canvas.getContext('2d');
 if(!ctx) {
 alert("Your browser is not supported!");
 } else {
 // start
 start(canvas, ctx);
 }
}

After checking that the canvas is supported we start by loading the image.


var start = function (canvas, ctx) {
 // load image
 var img = new Image();
 img.onload = function () {
 // start animation
 animateBg(canvas,ctx, img);
 };
 img.src = 'lib/img/starBackground.png';
}

As you can see, we set a callback to run on the image onload event.

On this event we call our function that is responsible for the animation.


var animateBg = function (canvas, ctx, img) {
 // properties
 var y = 0;
 var speed = 2;
 var ch = canvas.height;
 var cw = canvas.width;

// our loop
 setInterval(function () {
 // draw botom part
 ctx.drawImage(img, 0, 0, cw, ch, 0, y, cw, ch);

// draw remaining part
 ctx.drawImage(img, 0, ch-y, cw, ch, 0, 0, cw, ch);

// increment y or reset y if reached the bottom
 y = y < ch ? y + speed : 0;
 }, 1000/30);
}

In this function, first we get some properties, the Y position of the image (set to 0 initially), the speed of the animation and the canvas size. Next I use the setInterval function to create the animation loop (which is not the best way, but for our demo it works just fine). In the loop, first we draw the bottom and then the remaining part. Finally we reset the Y if we reached the bottom of the canvas.

Oops, too fast? Ok, let just take a look at the drawImage. We are using all the parameters that the function provide to us.


void drawImage(
 in nsIDOMElement image, // the image
 in float sx, // source coordinate X
 in float sy, // source coordinate Y
 in float sw, // source width
 in float sh, // source height
 in float dx, // destination coordinate X
 in float dy, // destination coordinate Y
 in float dw, // destination width
 in float dh // destination height
);

So, for the top, the only thing that changes with time is the destination Y coordinate.

For the remaining part the only thing that changes with time is source coordinate Y, which will be the canvas height – Y coordinate.

And that is all we need to set up a scrolling background!

Instant Handlebars.js book

A few months ago, I had the opportunity to participate in the book Instant Handlebars.js as a technical reviewer.

The book is now on sale on packtpub website. The book covers the following topics:

  • Create and display templates on your pages
  • Extend Handlebars with custom helpers
  • Organize your code with partials
  • Optimize your development environment

The Instant series are a collection of short books, that offer fast and focused guide delivering immediate results.

 

ImpactJS – how classes work

As you know, in Javascript there is no traditional class structure as on classical OOP languages.

So, how does ImpactJS structures its code? Well, it has a pseudo-class  object, which is the basis for every class we create on the game.

This is based on John Resig’s simple JavaScript inheritance code

Here is an example of how it looks like:


// Create a new class "Player"
var Player = ig.Class.extend({
 name: '',
 init: function( name ) {
 this.name = name;
 }
});

// Instantiate an object of the Player class
var e = new Person('Nuno');
console.log(e.name); // logs Nuno

All classes that are created with .extend() will also have an .extend() method that can be used to create other subclasses.

Inside of extended classes, we can use .this and .parent for scope. And very shortly, this is how ImpactJS structures its code in classes almost as a traditional OOP language.