11486 sujets

JavaScript, DOM et API Web HTML5

Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS

Bonjour à tous,

Si vous voulez écrire un petit jeu HTML5 pendant les vacances, il va falloir choisir une librairie JavaScript pour vous aider. De mon côté, je m'intéresse en ce moment à EaselJS. Comme je trouvais qu'il n'y avait pas des masses d'exemples et de documentation, j'ai écrit 3 petits tutoriels pour se faire la main et apprendre à animer un sprite dans cet article :

Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS

J'espère que cela pourra aider certains et suciter des vocations! Smiley cligne

Bye,

David Rousset
Microsoft France
Modifié par davrous (22 Jul 2011 - 16:03)
Hello,

Oui, je sais, je l'ai dit au début de l'article. C'est apparemment due à un bug dans Firefox 5.0. Il doit être corrigé dans les dernières build car mes démos marchent dans Firefox Aurora 7.0.

Bye,

David
Salut,
j'ai suivi ton tutoriel fort intéressant, cependant il y a des choses qui ne fonctionnent pas chez moi.
j’essaie de simuler une écriture de chiffre et de lettres, mais aucune erreur n’apparait, et rien ne se passe...

une aide est elle possible ?

voila mon code : 
var MonImg = new Image();
  
function init() {
    //récupère le canvas et charge les images, attention à bien attendre la fin de tous les téléchargements
    CanvasLogo = document.getElementById("CanvasLogo");
    MonImg.src = "sprite.png";
    MonImg.onload = handleImageLoad;
    MonImg.onerror = handleImageError;
    
 }
 
 function handleImageError(e){
  
  alert("error");  
   
 }  
 
 function handleImageLoad(e){  
    //Declaration nouvelle sequence dessine
    var spriteSheet  = new SpriteSheet(
        MonImg, //image à utiliser
        242, //largeur de chaque sprite
        192, //hauteur de chaque sprite
        {    
            dessine: [0, 18] //Nombre d'image qui compose l'animation, sprite est composé de 19 images. et le nom de l'animation.'
        });
        
    // Animation via bitmapSequence pour afficher et animer une instance de SpriteSheet:
    
    bmpSeq = new BitmapSequence(spriteSheet);
    
    // on fixe un point de registration (le point où l’objet sera positionné et autour duquel il tournera)
    // au centre des dimensions d’une frame/sous-image (Ici inutil car l'animation est fixe'))
    bmpSeq.regX = bmpSeq.spriteSheet.frameWidth/2|0;
    bmpSeq.regY = bmpSeq.spriteSheet.frameHeight / 2 | 0;
    
    // On lance la séquence d’animation
    bmpSeq.gotoAndPlay("dessine");     //animation
        
    // mise en place d’une ombre portée. Cela peut couter cher en FPS en fonction du navigateur.
    //bmpSeq.shadow = new Shadow("#454", 0, 5, 4);
    
   
            
    // On peut choisir exactement à quelle frame démarrer l’animation
    bmpSeq.currentFrame = 10;
    stage = new Stage(CanvasLogo);
        
    stage.addChild(bmpSeq);
}
function angleChange(bmpSeq) {
	//after each sequence ends update the rat's heading and adjust velocities to match
	bmpSeq.direction -= 60;
	/*var angle = bmpSeq.direction * (Math.PI/180);
	bmpSeq.vX = Math.sin(angle) * bmpSeq.speed;
	bmpSeq.vY = Math.cos(angle) * bmpSeq.speed;*/
}


mon canvas : 
<body onload="init()">
	<div width="400" height="300" id="canvasWrapper">
		<canvas width="242" height="192" id="CanvasLogo" style="background-color:#900000;"></canvas>
	</div>
</body>


rien ne se passe.
mon image sprite : http://portfolio-celian.fr/sprite.png (c'est du blanc faut un fond de couleur pour le voir.)

merci de ton aide si tu prends le temps de te pencher sur mon probleme!!
Hello,

Il te manque la méthode tick() pour rafraichir ton canvas. Ce code marche bien chez moi avec tes sprites:

<!DOCTYPE html>
<!-- Tutorial series by David Rousset:  http://blogs.msdn.com/davrous  -->
<!-- Based on this EaselJS sample:  http://easeljs.com/examples/bitmapSequences.html  -->
<html>
<head>
<title>EaselJS Sprites Tutorial 01</title>

<script>
    // using recommendations from :
    //  http://stackoverflow.com/questions/2745432/best-way-to-detect-that-html5-canvas-is-not-supported
 
    function isCanvasSupported() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }

    function jsAppend(js_file) {
        js_script = document.createElement('script');
        js_script.type = "text/javascript";
        js_script.src = js_file;
        document.getElementsByTagName('head')[0].appendChild(js_script);
    }

    if (isCanvasSupported()) {
        jsAppend("./src/easeljs/easel.js");
    }
</script>

<script>
var canvas;
var stage;
var screen_width;
var screen_height;
var bmpSeq;

var imgMonsterARun = new Image();

function init() {
    if (isCanvasSupported) {
        //find canvas and load images, wait for last image to load
        canvas = document.getElementById("testCanvas");

        imgMonsterARun.onload = handleImageLoad;
        imgMonsterARun.onerror = handleImageError;
        imgMonsterARun.src = "http://portfolio-celian.fr/sprite.png";
    }
}

function reset() {
    stage.removeAllChildren();
    Ticker.removeAllListeners();
    stage.update();
}

function handleImageLoad(e) {
    startGame();
}

function startGame() {
	// create a new stage and point it at our canvas:
	stage = new Stage(canvas);
	
	// grab canvas width and height for later calculations:
	screen_width = canvas.width;
	screen_height = canvas.height;
	
	// create spritesheet and assign the initial frameData
	// frameData defines the sequences that can be played
	// in this format: {nameOfSequence:[startFrame, endFrame, optionalNameOfNextSequence]}
    var spriteSheet  = new SpriteSheet(
		    imgMonsterARun, //image to use
		    242, //width of each sprite
		    192, //height of each sprite
		    {	
			    walk_left: [0, 19]
		    });
	
    // create a BitmapSequence instance to display and play back the sprite sheet:
    bmpSeq = new BitmapSequence(spriteSheet);
	
    // set the registration point (the point it will be positioned and rotated around)
    // to the center of the frame dimensions:
    bmpSeq.regX = bmpSeq.spriteSheet.frameWidth/2|0;
    bmpSeq.regY = bmpSeq.spriteSheet.frameHeight / 2 | 0;

    // start playing the first sequence:
    bmpSeq.gotoAndPlay("walk_left"); 	//animate
	
    // set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
    // of animated rats if you disabled the shadow.
    bmpSeq.shadow = new Shadow("#454", 0, 5, 4);

    bmpSeq.name = "monster1";
    bmpSeq.x = 115;
    bmpSeq.y = 96;
		
    // have each monster start at a specific frame
    bmpSeq.currentFrame = 0;
    stage.addChild(bmpSeq);
		
    // we want to do some work before we update the canvas,
    // otherwise we could use Ticker.addListener(stage);
    Ticker.addListener(window);
    // Best Framerate targeted (60 FPS)
    Ticker.setInterval(50);
}

//called if there is an error loading the image (usually due to a 404)
function handleImageError(e) {
	console.log("Error Loading Image : " + e.target.src);
}

function tick() {
    // update the stage:
    stage.update();
}

</script>
</head>
	
<body>
	<div class="description">

	</div>
	<div class="canvasHolder">
		<canvas id="testCanvas" width="240" height="192" style="background-color:#607559">
            Your browser doesn't support canvas. Please download IE9+ on <a href="http://ie.microsoft.com/testdrive">IE Test Drive</a> 
        </canvas>
	</div>
    <button id="Start" onclick=init();>Start</button><button id="Reset" onclick=reset();>Reset</button>
</body>
</html>


Bye,

David
Modifié par davrous (23 Aug 2011 - 19:29)
bonjour, j'ai quelques connaissances basique en HTML CSS et javascript.
et je veux apprendre à créer des jeux avec html5,
est ce que la meilleure méthode a débuter avec votre cours? sinon quesque vous me conseillé.
Merci
Bonjour,

Cela serait un peu prétentieux de prétendre que mon "cours" est la meilleure méthode pour débuter. Cependant, j'ai eu d'excellents retours sur le web et je sais que certains sont partis depuis ces 3 tutoriaux pour faire leurs propres jeux HTML5.

Tu peux aussi aller jeter un œil sur le site d'EaselJS qui contient d'autres tutoriaux: http://www.createjs.com/#!/EaselJS

Bye,

David
Sujet clos
Aller à