Create HTML5 video games

Samuel Ronce, WebCreative5
26 Novembre 2012
LyonJS

Create a game with CanvasEngine

Structure of a scene

var canvas = CE.defines("canvas_id").
    ready(function() {
        canvas.Scene.call("MyScene");
    });
            
canvas.Scene.new({
    name: "MyScene",
    materials: {
        images: {
            img_id: "html5.png"
        }
    },
    preload: function() {
    
    },
    ready: function(stage) {
        this.element = this.createElement();
        this.element.drawImage("img_id");
        stage.append(this.element);
    },
    render: function(stage) {
        this.element.x += 1;
        stage.refresh();
    },
    exit: function(stage) {
    
    }
});

Properties and methods of the scene

Property/Method Explication
name Identifying the scene
materials Game resources (images and sounds) retrieved by identifier.
preload Display when preloading ; Useful for load bars
ready Construction of the scene when preloading is complete
render Method call every refresh rate (60 FPS)
exit Method is called when leaving the scene (or call another scene)

Call of the scene

 canvas.Scene.call("MyScene");

Create an element

 canvas.Scene.new({
    name: "MyScene",
    ready: function(stage) {
        var el = this.createElement();
	el.fillStyle = "red";
	el.fillRect(0, 0, 100, 100);
        stage.append(el);
    },
});

Group of elements

 canvas.Scene.new({
    name: "MyScene",
    ready: function(stage) {
	
	function rect(color) {
	  var el = this.createElement();
	  el.fillStyle = color;
	  el.fillRect(0, 0, 100, 50);
	  return el;
	}
	
	var el1 = rect.call(this, "red"),
	    el2 = rect.call(this, "blue");	
		
	el1.x = el2.x = 100; 
	 
	 // el2 is the child of el1. The el2 position is relative to el1
	el1.append(el2);  
	stage.append(el1);	
	stage.refresh();
    }
  }
});

Refresh

 canvas.Scene.new({
    name: "MyScene",
    materials: {
        images: {
           ball: "ball.png"
        }
    },
    ready: function(stage) {
        this.el = this.createElement(64, 64);
        this.el.drawImage("ball");
        this.el.setOriginPoint("middle");
        stage.append(this.el);
    },
    render: function(stage) {
	this.el.x += 0.5;
	this.el.rotation += 1;
	stage.refresh();
    }
});

Extend

var canvas = CE.defines("canvas_id").
     extend(Animation).
     ready(function() {
       canvas.Scene.call("MyScene");
     });

Timeline

 canvas.Scene.new({
    name: "MyScene",
    materials: {
        images: {
           ball: "ball.png"
        }
    },
    ready: function(stage) {
       this.el = this.createElement(64, 64);
       this.el.drawImage("ball");
       this.el.setOriginPoint("middle");

       var timeline = canvas.Timeline.new(this.el);
       timeline.to({x: 300, rotation: 260}, 60 * 5,  Ease.easeOutElastic).call(); // 5s

       stage.append(this.el);
    },
    render: function(stage) {
       stage.refresh();
    }
});

Easing name : http://gsgd.co.uk/sandbox/jquery/easing/

An animated Sprite

Image composed to 4 animations and 5 sequences

Animation

Code in the method "ready". An image with id "chara" is preloaded

  var el = this.createElement(),
  animation = canvas.Animation.new({
	 images: "chara",
	 animations: {
		walk_bottom: {
		  frames: [0, 3],
		  size: {
			   width: 250/5,
			   height: 200/4
		  },
		  frequence: 5
		}
	  }
  });

  animation.add(el);
  animation.play("walk_bottom", "loop");

  stage.append(el);
    

Extend

var canvas = CE.defines("canvas_id").
     extend(Input).
     ready(function() {
       canvas.Scene.call("MyScene");
     });

Keyboard management

Code in the method "ready". Press the A button in the iframe below

var el = this.createElement();
el.fillStyle = "black";
el.font = "20px Arial";
el.textBaseline = "top";
el.fillText("Appuyez sur la touche A ici", 0, 0);

canvas.Input.keyDown(Input.A, function(e) {
	el.fillText("A pressed", 0, 0);
});
canvas.Input.keyUp(Input.A, function(e) {
	el.fillText("A released", 0, 0);
});
    

Overview of the gamepad

Gamepad Management

Code in the method "ready" repeating the previous code.

canvas.Input.keyDown(Input.A, function(e) {
	el.fillText("A pressed", 0, 0);
});
canvas.Input.keyUp(Input.A, function(e) {
	el.fillText("A released", 0, 0);
});

this.gamepad.addListener("faceButton0", Input.A);

this.gamepad.addListener("faceButton1", function() {
   el.fillText("B button pressed", 0, 0);
}, function() {
   el.fillText("B button released", 0, 0);
});
    

Code in the method "render".

this.gamepad.update();
stage.refresh();

Test of the gamepad

Level Design

Preparation

Think load the JS file for Tiled Map Editor

<script src="extends/Tiled.js"></script>

Extend Canvas Engine

var canvas = CE.defines("canvas_id").
             extend(Tiled).
             ready(function() {
	           canvas.Scene.call("MyScene");
             });
		

Load map

canvas.Scene.new({
   name: "MyScene",
   materials: {
	  images: {
		  tileset: "tileset.png"
	  }
   },
   ready: function(stage) {
	    var el = this.createElement(),
            tiled = canvas.Tiled.new();
	    tiled.load(this, el, "map.json");
	    tiled.ready(function() {
		   var tile_w = this.getTileWidth(),
               tile_h = this.getTileHeight(),
               layer_object = this.getLayerObject();
		   stage.append(el);
	   });

   },
   render: function(stage) {
	 stage.refresh();
  }
});

Explication

Test map

Removed

Play music

canvas.Scene.new({
   name: "MyScene",
   materials: {
     sounds: {
       sound_id: "sound/music.mp3"
    }
  },
   ready: function(stage) {
	  canvas.Sound.get("sound_id").play();
   }
});

Play music with SoundManager 2

Integration of the library

<script src="soundmanager2.js">

Initialisation

var canvas = CE.defines("canvas_id", {
	         swf_sound: 'swf/'
             }).ready(function() {
                // Code
             });

Code to manipulate the sounds don't change

To fade the music

canvas.Scene.new({
   name: "MyScene",
   materials: {
     sounds: {
       sound_id: "sound/music.mp3"
    }
  },
   ready: function(stage) {
      var sound = canvas.Sound;
      sound.get("sound_id").play();
      sound.fadeOut("sound_id", 60 * 4); // 4s
   }
});

Thanks !

Twitter : @webcreative5

Questions ?