Créer des jeux vidéo en HTML5

Samuel Ronce, WebCreative5
26 Novembre 2012
LyonJS

Création d'un jeu avec CanvasEngine

Structure d'une scène

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) {
    
    }
});

Propriétés et méthodes de la scène

Propriété/Méthode Explication
name Identifiant de la scène
materials Ressources du jeu (images et sons) récupérables grâce à leur identifiant.
preload Affichage lors du préchargement ; Utile pour les barres de chargement
ready Construction de la scène lorsque le préchargement est terminé
render Appel de la méthode à chaque rafraichissement (60 FPS)
exit Appel de la méthode lorsqu'on quitte la scène (ou appel d'une autre scène)

Appel de la scène

 canvas.Scene.call("MyScene");

Créer un élément

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

Groupe d'éléments

 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 est l'enfant de el1. La position de el2 est relative à el1
	el1.append(el2);  
	stage.append(el1);	
	stage.refresh();
    }
  }
});

Rafraichissement

 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/

Un Sprite animé

Image composée de 4 animations de 5 séquences

Animation

Code dans la méthode "ready". Une image avec l'identifiant "chara" est préchargée

  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");
     });

Gestion du clavier

Code dans la méthode "ready". Appuyez sur la touche A dans l'iframe ci-dessous

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);
});
    

Aperçu de la manette

Gestion de la manette

Code dans la méthode "ready" reprenant le code précédent.

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("Touche B appuyée", 0, 0);
}, function() {
   el.fillText("Touche B relachée", 0, 0);
});
    

Code dans la méthode "render".

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

Test de la manette

Level Design

Préparation

Penser à charger le fichier JS pour Tiled Map Editor

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

Etendre Canvas Engine

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

Charger une carte

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 de la carte

Enlevé

Jouer une musique

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

Jouer une musique avec SoundManager 2

Intégration de la librairie

<script src="soundmanager2.js">

Intégration de la librairie

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

Le code pour manipuler les sons ne change pas

Effectuer un fondu sur la musique

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
   }
});

Merci !

Twitter : @webcreative5

Vos questions ?