Voir le résultat Retour à la page du projet
Afficher/Masquer les commentaires
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<title>Sprite animé</title>On appelle le framework phaser.
<script type="text/javascript" src="phaser.min.js"></script>
On appelle le fichier main.js où se trouve le code javascript de notre TP.
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<p>Utilse les flêches de déplacement pour jouer</p>C'est dans cette div appelée gameDiv, que se trouvera le sprite animé.
<div id="gameDiv"></div>
</body>
</html>
Afficher/Masquer les commentaires
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'gameDiv', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('background', 'assets/background.jpg');
On appelle notre feuille de sprites DragonRouge.png qui contient les différentes images pour créer notre animation. On donne les dimensions ici 96x96 d'une image et phaser fera automatiquement le découpage de la feuille de sprites, en numérotant les sprites de 0 à 15 dans le sens de lecture habituelle.
game.load.spritesheet('dragon', 'assets/DragonRouge.png', 96, 96);
}
var player;
function create() {
game.add.tileSprite(0, 0, 800, 600, 'background');
player = game.add.sprite(game.world.centerX, game.world.centerY, 'dragon');
player.anchor.setTo(0.5, 0.5);
player.scale.setTo(1, 1);
On crée des animations à partir des sprites avec la méthode (associée à l'objet player) player.animations.add avec comme variable : le nom de l'animation, le numéro des sprites entre crochets, la vitesse d'affichage, et true.
player.animations.add('down', [0, 1, 2, 3], 10, true);
player.animations.add('left', [4, 5, 6, 7], 10, true);
player.animations.add('right', [8, 9, 10, 11], 10, true);
player.animations.add('up', [12,13,14,15], 10, true);
player.animations.add('pause', [0], 10, true);
player.body.collideWorldBounds = true;
}
function update() {
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) && player.x>48)
{
player.x -= 4;
On lance l'animation left.
player.animations.play('left');
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) && player.x<752 )
{
player.x += 4;
On lance l'animation right.
player.animations.play('right');
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.UP) && player.y>164)
{
player.y -= 4;
On lance l'animation up.
player.animations.play('up');
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN) && player.y<552)
{
player.y += 4;
On lance l'animation down.
player.animations.play('down');
}
On lance l'animation pause.
else {player.animations.play('pause');}
}
function render() {
//game.debug.spriteInfo(player, 96, 96);
}