Fév 28, 2016 Jeu HTML5

Un jeu HTML5 : le jeu et ses ressources

Pour créer un jeu on a besoin de s’organiser, de décider de ce qu’on va voir et faire. On aura besoin de ressources : images et sons. Soit on les crée soi-même si on est assez doué, soit on va les chercher sur la toile. Dans ce dernier cas il faut être très attentif aux droits d’auteur. Si ce n’est pas crucial dans une optique pédagogique comme le présent cours, il n’en est pas de même si vous voulez diffuser un jeu ou aller jusqu’à le commercialiser.

Le jeu

C’est quoi un bon jeu ?

Il est à la fois facile et ardu de répondre à cette question. Le plus simple est de dire qu’il s’agit d’un jeu auquel on a envie de jouer. Mais on peut toutefois dégager certaines directions :

  • le type de jeu : arcade, puzzle, stratégie, adresse, tir, conduite, combat… La gamme est large et variée…

  • la simplicité : il est rédhibitoire de devoir lire des pages d’explications avant de jouer, plus un jeu est intuitif et plus il aura du succès.

  • les niveaux : on se lasse vite d’un jeu lorsqu’on en a fait le tour ou lorsqu’on a acquis suffisamment de maîtrise pour que le challenge ne soit plus présent, il faut alors prévoir de le rendre de plus en plus difficile pour conserver son intérêt.

  • l’interaction : les actions du joueur doivent être simples et logiques selon ce qu’on attend de lui.

  • les réglages : il est agréable pour un joueur de pouvoir peaufiner les réglages pour personnaliser le jeu.

  • le visuel : le graphisme doit être soigné et adapté au jeu.

  • les sons : la musique et les sons doivent être aussi adaptés, à la fois présents mais pas envahissant ou trop répétitifs.

  • l’ouverture : le jeu peut être ouvert à d’autres jeux ou un contexte plus vaste, il peut aussi permettre l’interactivité entre joueurs.

Le jeu qu’on va réaliser

Le jeu qu’on va réaliser dans ce cours sera simple mais intéressant et complet. Le seul but est de faire le tour de la palette des connaissances et pratiques nécessaires pour que vous puissiez ensuite réaliser ce que vous voulez.

Dans ce jeu on a un oiseau qui vole, qui doit crever les ballons qu’il croise tout en évitant les avions qui passent eux aussi. Il y a des ballons jaunes qui permettent de gagner un point et des ballons rouges, plus rares qui permettent de gagner une vie. Au bout d’un certain nombre de ballons on passe au niveau suivant et le jeu s’accélère, le rendant plus difficile. Si l’oiseau percute un avion, soit il a au moins une vie, l’avion explose (ce qui permet de remporter 10 points d’un coup) et l’oiseau continue sa quête, soit il n’a plus de vie et le jeu se termine.

A partir de cette base il faut savoir quelle sera la logique séquentielle du jeu. En gros on va avoir :

  1. l’amorçage (boot) : création du canvas, détection des possibilités d’affichage et adaptation, chargement du minimum pour présenter un message d’attente pendant le chargement des ressources.

  2. le chargement des ressources (load) : les sons et les images et mise en place des événements.

  3. les réglages visuels : détection du mode paysage, passage en plein écran.

  4. le menu : aide ou lancement du jeu.

  5. le jeu : animation, détection et traitement des actions.

  6. la fin du jeu : arrête des animations et détection, nouveau menu pour proposer de rejouer.

On va revenir en détail sur ces différentes phases mais il est important d’avoir une vue d’ensemble de ce qu’il nous faut réaliser.

Les images

Il faut commencer par décider quelle sera la résolution de base qu’on va choisir. Si on part avec une faible résolution ça sera moche sur grand écran et si on part d’une très forte résolution on risque d’avoir des ressources très lourdes. Il y a donc un choix à faire selon le jeu. Dans notre cas le jeu sera très simple et on peut donc envisager de partir avec une bonne résolution. On sait que statistiquement la résolution la plus utilisée est 1366 x 768 (statistiques ici), on va donc partir sur cette base.

On va prévoir un double fond :

  • un ciel avec des nuages en arrière plan :

img05

 

  • des collines vertes en premier plan :

land

Vous remarquez qu’on a affaire à des « tiling sprites » comme on l’a déjà vu au chapitre 4 de la première partie.

Il va nous falloir ensuite un certain nombre de textures :

  • oiseau animé,

  • ballon animé,

  • avion,

  • textes.

Comme on l’a vu au chapitre 2 de la première partie on va utiliser un atlas pour ces textures. On peut utiliser TexturePacker comme on l’a vu, il suffit de mettre toutes les images dans un dossier :

img01

Et ensuite de faire glisser le dossier dans la fenêtre centrale de TexturePacker, de procéder aux réglages comme on l’a vu si vous n’avez que la version gratuite (en éliminant tous les réglages particuliers) et vous en arrivez avec une seule image comportant toutes les textures :

sprites1

On a également l’atlas associé pour pouvoir facilement récupérer les textures.

Mais où va-t-on mettre tout ça ?

Il est temps de penser à l’organisation des fichiers. Comme on n’aura pas tellement de choses on va mettre toutes les ressources dans un dossier assets :

img02

J’ai déjà prévu également un dossier pour les fichiers JavaScript ainsi qu’un fichier HTML (index.html) que nous verrons plus loin.

Dans ce dossier assets nous allons donc mettre 4 fichiers :

img03

Les sons

On va avoir besoin également de sons :

  • une musique de fond (background),

  • un crash d’avion (crashplane),

  • un crash de l’oiseau (crash),

  • une explosion de ballon jaune (balloon),

  • une explosion de ballon rouge (life).

Là encore vous pouvez soit récupérer des ressources sur le web (attention aux droits d’auteur !), soit les créer vous-même.

Pour la musique de fond j’ai choisi de prendre le tout début de cette musique. L’utilisation en est gratuite à condition de référencer la source (ce que je suis en train de faire) et de ne pas en faire un usage commercial, ce qui est le cas ici.

Les autres sons font partie de librairies gratuites.

On va donc ajouter ces fichiers dans le dossier assets :

img04

En résumé

Dans ce chapitre on a :

  • déterminer quelques directions pour faire un « bon » jeu.

  • établi le fonctionnement de base du jeu qu’on va réaliser.

  • créé les fichiers nécessaires pour les textures.

  • créé les fichiers nécessaires pour les sons.

  • créé un dossier assets pour ranger toutes ces ressources

Laisser un commentaire