Découverte de Phaser.IO – #02 (Initialisation)

/ 27/01/2015

phaserInitialisation du projet

Nous allons commencer par créer un simple fichier HTML5 à la racine de notre dossier « 1stPhaserGame » nommé « index.html » et y inclure phaser.io :

<head>
 <meta charset="UTF-8" />
 <title>1stPhaserGame</title>
 <script type="text/javascript" src="phaser.min.js"></script>
</head>

Nous allons définir la zone de notre jeu, en créant un simple élément « div » et en lui donnant un id :

<body>
 <div id="phaser-game">
 </div>
</body>

Et créer et  inclure notre fichier de démarrage nommé « app.js », en fin de fichier index.html :

<body>
 <div id="phaser-game">
 </div>

 <script type="text/javascript" src="app.js"></script>
</body>

Notre fichier « app.js » contient simplement l’initialisation de notre jeu :

var app = new Phaser.Game(800, 540, Phaser.AUTO, 'phaser-game', { create: create});

function create() {
 var style = { font : "65px Arial",
 fill: "#3399FF",
 align: "center"
 };
 var text = app.add.text(app.world.centerX, app.world.centerY, "1stPhaserGame", style);
 text.anchor.set(0.5);
}

Explication : On initialise notre jeu en lui passant la largueur et la hauteur souhaitée. On précise si on souhaite utiliser le mode WebGL ou Canvas, ici Phaser.AUTO signifie qu’on laisse Phaser vérifier la compatibilité et appliquer le meilleur choix en fonction. Puis on lui passe l’identifiant de la div qui contient notre jeu, soit ici « phaser-game ». Et enfin, on lui donne un objet JSON qui afin de mapper les différents événements à nos fonctions (ce point sera détaillé par la suite).

Démo

Vous aimez mes articles ? Offrez-moi un café !

Articles en rapport