Small codes

HTML5, Javascript and AS3

Création d’un jeu HTML5 avec EaselJS : Space Kamikaze 2

| 1 Commentaire

Spalsh screen Space Kamikaze

Je voulais passer à Sencha et ExtJS (dont la V2 semble prometteuse) à partir du mois de février, et laisser un peu de côté EaselJS, mais j’ai finalement changé d’avis.
Je vais essayer, durant cette année, non seulement d’étudier différentes librairies HTML5, mais aussi, pour chacune, créer une appli ou un jeu. Après tout, on ne peut se rendre compte des possibilités d’un outils qu’en s’en servant sur des problèmes concrets.

C’est dans cette optique que je me suis lancé dans la création de mon premier jeu HTML5 : Space Kamikaze 2. Sencha attendra bien le mois de mars !

Space Kamikaze 2

Ce jeu sera un Shoot-them-up pas trop classique (j’espère !), dont voici en gros le cahier des charges :

Contenu
  • Le jeu sera composé de 50 niveaux avec une difficulté croissante
  • Pour chaque niveau, le but est de survivre à toutes les vagues d’ennemis
  • Entre les niveaux, il sera possible d’améliorer son vaisseau avec l’argent récupéré sur les ennemis
  • Il sera possible de sauvegarder sa partie entre chaque niveau
  • Les effets sonores seront très limités
Compatibilité
  • Le jeu sera compatible avec toutes les dernières versions des navigateurs principaux sur desktop : FireFox, IE9, Chrome,Safari et Opéra
  • Le jeu sera lisible sur tablettes Androïd et Ipad, avec quelques aménagements
Délais
  • Le jeu devra être terminé fin février. (Oui, enfin, j’estime à 6 ou 7 jours de travail plein, mais 1° j’ai aussi un vrai travail à temps plein la journée – 2° je ne suis pas tout seul dans la vie, ce qui me laisse à peu près une heure par jours pour y travailler ;) )
Techniques
  • Le jeu sera codé uniquement avec HTML5+Javascript, en utilisant les framework EaselJS et jQuery
  • Le jeu sera codé en OOP

Au commencement était la schématisation

Avant de commencer, j’ai griffonné deux ou trois schéma, un pour la navigation du point de vue utilisateur, un pour les différents éléments d’interfaces à prévoir, et un dernier où j’ai grossièrement prévu l’ossature de mes classes. Je savais que ces schéma n’étaient pas définitifs et qu’il faudrait les adapter petit à petit. Mais c’est un gain de temps énorme que de prendre un moment pour réfléchir à la manière de faire les choses avant de les commencer.

Menu et mécaniques de navigation

J’ai ensuite posé les bases du moteur de navigation du jeu. J’ai défini un certain nombre d’états (« main-menu », « level », »level-ending », « shop »…) que j’associe à une variable gameState. Avec EaselJs, et l’objet Ticker, il est possible lors d’un « tick » de lire l’état de cette variable. Le jeu affiche alors la partie d’interface associée à cet état après un nettoyage de la scène.
Ce système me permet de parer à un manque assez cruel dans EaselJS à ce niveau : aucun système évènementiel. Mais j’ai bon espoir que les nombreux contributeurs du framework pallieront tôt ou tard à cette carence. Je pense que si j’en ai le temps, j’essaierai d’implanter un système en m’aidant de jQuery. Mais pour l’instant, ce système d’états fonctionne plutôt bien.

Space Kamikaze Menu

Les données externes

Pour l’instant, les données externes sont chargées par XML avec Ajax. Mais il est clair que ce système a ses limites en terme de sécurité. Je pense pouvoir faire mieux de ce côté là avec une base de donnée.
Le XML contient le contenu des niveaux avec leurs vagues d’ennemis successives. Chaque ennemi est décrit par une entrée dans le XML : type (Bomber, chaser…), vitesse, points de vies et comportement.
J’ai donc aussi créé une classe « Foe.js », qui se construit selon les données du XML. Cette classe contient une classe « Behavior.js », qui régit le comportement du vaisseau ennemi (déplacements, tirs), toujours d’après le XML.

 	
<level title="1">
		<wave>
			<ship type="bomber" behavior="harmless" shields="1" maxFire="0" delay="3000" side="top"/>
			<ship type="bomber" behavior="harmless" shields="1" maxFire="0" delay="2000" side="left"/>
			<ship type="bomber" behavior="harmless" shields="1" maxFire="0" delay="1000" side="right"/>
			<ship type="bomber" behavior="harmless" shields="1" maxFire="0" delay="500" side="right"/>
			<ship type="bomber" behavior="harmless" shields="1" maxFire="0" delay="500" side="right"/>
		</wave>
		<wave>
			<ship type="chaser" behavior="harmless" shields="1" maxFire="0" delay="3000" side="top"/>
			<ship type="bomber" behavior="harmless" shields="3" maxFire="1" delay="500" side="top"/>
			<ship type="bomber" behavior="harmless" shields="3" maxFire="1" delay="500" side="top"/>
			<ship type="bomber" behavior="harmless" shields="3" maxFire="1" delay="500" side="top"/>
		</wave>
	</level>

Grâce à ce système, je peux facilement créer de nouveaux ennemis, et de nouveaux niveaux. J’ai même pensé faire un système de création de niveaux personnalisés. Mais bon, plus tard, si j’ai le temps.

Gameplay

Le gameplay – c’est à dire, pour moi, tout ce qui est géré dans la fameuse « gameLoop » – est encore bien pauvre.
Pour les collisions, j’ai simplifié au maximum avec un système de gestion par cercles, ce qui est très bien pour un Shoot-them-up. Après tout est géré par classes.
Le score est compté, les gains d’argent aussi.
Je dois encore travailler sur le maniement du vaisseau, que j’aimerai moins souple.

InGame ScreenShoot

Graphismes et animations

Ici aussi, c’est encore très limité.
J’ai créé les vaisseaux sur Photoshop, et certaines animations avec Flash. Je me suis ensuite servi de Zoe pour transformer les swf en SpriteSheets.
Mais à ce niveau, j’ai un problème à résoudre : je dois ralentir mes animations, mais mais je veux conserver mon framerate pour les déplacements généraux. J’ai vu sur ce tutorial de David Rousset une technique qui me semble la bonne, mais j’essaie de trouver une astuce pour l’appliquer dans mon système.

C’est encore un peu tôt pour une démo, mais j’espère pouvoir en poster une la semaine prochaine au maximum !
D’ici là, j’espère avoir bien avancer dans les différents menus, et le magasin.

N’hésitez pas à me conseiller, où à me demander des précisions ou des bouts de codes, si ça vous intéresse.

Un Commentaire

  1. Pingback : EaselJS become CreateJS and will be used in Flash IDE to export in HTML5 canvas | small codes

Laisser un commentaire

Champs Requis *.


Social Widgets powered by AB-WebLog.com.