Comment créer un jeu vidéo html5

Un chevalier de l’espace sur son vaisseau vous invite à jouer et au moment où vous vous décidez, vous êtes tout d’un coup en train de piloter un vaisseau spatial, évitant des projectiles et tirant sur vos nombreux attaquants. C’est ainsi que commence le nouveau jeu html5 du site de jeux vidéo Spritted, intitulé War Games: Space Dementia. « J’en ai eu l’idée parce que j’avais envie de faire un jeu Arcade d’action. J’aime beaucoup le jeu Robotron 2084 : il est simple et amusant alors j’ai pensé m’en inspirer » explique Eduardo Ortega, le chef de projet de Spritted, qui a souhaité en dévoiler tous les secrets et, avec son équipe, nous explique comment se déroule la création d’un jeu vidéo.

Eduardo, qui se décrit lui-même comme « un passionné des jeux vidéo à qui les gameplays simples et directs des jeux classiques plaisent beaucoup », a eu l’idée de créer War Games: Space Dementia comme un « jeu Arcade simple et amusant». La première étape du processus créatif d’un jeu vidéo est d’avoir une idée et une fois trouvée, on passe au scénario. C’est-à-dire, déterminer de quoi traitera le jeu. Pour cela, l’équipe qui donnera vie à ce nouveau jeu doit se réunir et établir un plan à suivre.

« Une fois que je sais quel type de jeu nous voulons, nous nous réunissons et nous faisons une ébauche du concept général du jeu », explique E. Ortega. Avec lui travaillent un programmateur et un graphiste. Ce dernier élabore d’abord un schéma de l’interface utilisateur, c’est-à-dire le menu, les boutons et les transitions entre les écrans. Il se charge également de l’expérience utilisateur ce qui consiste à « développer tout le flux d’écrans et d’évènements de manière intuitive pour l’utilisateur » d’après Ortega. Puis on passe au développement du jeu : les écrans, les ennemis, les items, etc… Une fois que le graphiste a réalisé cette ébauche générale, il la présente à Eduardo qui l’approuve et tout le reste s’enclenche ? : les esquisses du graphiste et les premiers codes du programmateur.

Passion et inspiration, muses de la conception des jeux vidéo.

Daniel Peña est chargé de créer les personnages et de donner une forme physique aux objets du jeu. Le graphiste de Spritted avait déjà travaillé dans des agences de publicité mais sa passion pour les jeux vidéo l’a conduit à le concevoir. Ce jeune de Valladolid (Espagne) raconte que l’idée de concevoir War Games: Space Dementia lui est venue en écoutant une chanson des années quatre-vingt : « Avalon » de Roxy Music. Après l’avoir écoutée et après approbation d’Eduardo Ortega, il décida de créer les personnages en s’inspirant de la légende du Roi Arthur et des chevaliers de la Table ronde.

Le titre initial du jeu devait être Defenders of AVA mais il pensa que cela pourrait être compris comme une référence au groupe suédois de musique pop ABBA proposa Knights of Space pour ne pas porter à confusion. Toutefois, c’est finalement le titre actuel qui a été choisi pour des raisons commerciales. « Le titre de Knights of Space était un petit hommage aux Gardiens de la Galaxie de Marvel » explique D. Peña, qui a également confessé avoir intégré ce petit clin d’œil dans le logo.

Le procédé de conception est étonnamment assez classique. Daniel n’a besoin que de papier et d’un crayon pour faire ses esquisses et une fois que l’idée est claire et qu’il en est satisfait, il scanne les résultats et les passe sur Illustrator. Ce programme d’Adobe permet de numériser les illustrations qu’il a créées. Illustrations qui, rappelons-le, ont été inspirées par le Roi Arthur. « K1-ARZ à bord de son vaisseau XK-LIBUR doit défendre les 3 secteurs qui entourent KM-LOT » ; c’est ainsi que Peña raconte l’histoire de War Games: Space Dementia et il explique que K1-ARZ est la version intergalactique de King Arthur.

Il révèle également que l’inspiration esthétique pour ce jeu lui vint de Mike Mignola, illustrateur et père du personnage du comic Hellboy, et de ses tons contrastés caractéristiques, du manque de couleur et des polygones avec lesquels il a l’habitude de travailler. Ceci s’ajoute à l’influence des jeux classiques d’Arcade des années quatre-vingt comme Tron, Asteroids o R-Type.

La programmation, le squelette d’un jeu vidéo.

En se concentrant sur sa passion pour une jouabilité facile, E.Ortega a proposé au programmateur son projet de créer un jeu vidéo de survie simple sur un seul écran. David Santín raconte qu’il crée des jeux depuis ses onze ans et il est maintenant le programmateur des jeux vidéo de Spritted. Sa passion est née en 1986 avec le jeu Phantomas, programmé par un Espagnol. « C’est après avoir joué à ce jeu quand j’étais petit que j’ai pensé que si quelqu’un pouvait le faire, moi aussi » se souvient-il. Son pseudo de programmateur est d’ailleurs Phantomas, en hommage au jeu. Lorsque le chef de projet demanda au jeune Madrilène de créer un jeu inspiré de Robotron 2084, il pensa immédiatement au jeu Smash TV.

Ce classique jeu d’Arcade successeur de Robotron 2084 a toujours plu à David et c’est pourquoi il a décidé de suivre la dynamique de Smash TV pour créer War Games: Space Dementia. Robotron est sorti en 1982 et l’objectif en est d’éliminer les robots qui se sont rebellés contre les humains pendant l’année 2084 et de sauver les survivants. Plus tard, en 1990, Smash TV fut créé et l’objectif de survie était le même : le concurrent d’un programme télé du futur doit tuer ses attaquants et récupérer des « power-ups ».

« Nous avons choisi de faire un jeu de vaisseaux car le développement est plus simple » confesse David. Comme il s’agit d’un jeu avec vue zénithale, créer un vaisseau vu d’en haut est plus simple que de créer un homme. David explique que les mouvements des personnages dans un jeu vidéo ressemblent à ce qu’on voit « quand vous faites un dessin sur le bord d’un livre et en faisant défiler les pages, le dessin prend vie ; car chaque page est un sprite ». Ce qu’on appelle « sprite », c’est ce qui correspond aux photogrammes dans le monde cinématographique.

Dans le cas de War Games : Space Dementia, le jeu a été pensé depuis le début avec une vue zénithale, c’est pourquoi nous avons très vite opté pour les vaisseaux afin d’éviter les huit postures que demande le mouvement d’une personne : de face, de dos, de côté, etc. «  Si vous faites un tank ou un avion vu d’en haut, comme il n’a ni tête, ni nuque ni rien de tout ça, il n’y a qu’à faire un sprite », explique David. Huit postures demandent huit fois plus de temps pour programmer -car chaque mouvement a besoin d’un code- et pour dessiner.

David a programmé en fonction des graphismes de Daniel. Ils travaillent main dans la main et prennent les décisions ensemble, même si David attribue une intelligence artificielle à chaque objet du jeu, c’est-à-dire un comportement spécifique. « Chaque type de vaisseau a un comportement et une intelligence unique. Ceux des premiers niveaux sont lents avec des mouvements un peu errants, les derniers par contre n’ont presque pas de marge d’erreur et sont capables de vous suivre en équipe et d’anticiper tous vos mouvements » raconte D. Santín.

Chaque objet du jeu peut être doté d’un mouvement ou d’un comportement unique grâce à la maîtrise des variables qui forment l’Univers et d’après D.Santín « certaines de ces variables sont la vitesse, la gravité, la vitesse de réaction, la capacité de tir, les vies et la capacité de suivi et d’autogire ».
L’une de plus grandes difficultés à laquelle David a dû faire face lors de la création de War Games : Space Dementia est sans aucun doute de réussir à obtenir un bon rendement malgré tous les mouvements des vaisseaux, les projectiles, les personnages, etc. qui sont dans le jeu. « C’est difficile de trouver des jeux sur le marché html5 capables d’avoir autant d’objets simultanément et avec un aussi bon rendement », conclue-t-il.

Html5, un langage universel ?

D.Santín explique que « programmer en html5 présente des difficultés en particulier concernant le rendement car ce n’est pas un langage aussi puissant qu’un langage natif mais il a l’avantage d’être multiplateforme ». Le langage natif est celui d’un processeur spécifique et chacun a le sien : Apple, Android, etc. « Si vous programmez une application dans son code natif, c’est comme si vous le faisiez dans la « langue » de ce dispositif, donc vous n’avez rien à « traduire » et cela va plus vite ».

On peut donc dire que l’html est un langage compréhensible par tous mais comme ce n’est pas le natif il ne sera pas aussi efficace. « C’est l’intérêt d’utiliser un langage commun, mais ensuite chaque appareil doit l’interpréter dans son propre langage » raconte David.

C’est pour cette raison que le programmateur doit se concentrer sur un code très efficace car le jeu va être joué sur n’importe quel type de dispositif, allant d’ordinateurs très puissants à des téléphones portable anciens avec des connexions lentes. L’html5 ne va pas se comporter de la même manière sur un dispositif ou sur un autre. Il faut donc faire beaucoup de tests pour que le résultat final s’exécute correctement sur tous.

D’ailleurs, en jouant sur un téléphone, on a la sensation de piloter les vaisseaux grâce à la dynamique de dual joystick, caractéristique de Robotron 2084 et de Smash TV. En effet Phaser, le Framework qu’utilise David pour programmer les jeux, venait de sortir le plug-in du dual joystick, il a donc pu être intégré directement au jeu.

« Le Framework Phaser est un ensemble de structures de programmation pensées pour faire face à tout type de problème. Concrètement, Phaser est dirigé vers la création de jeux vidéo » clarifie David. Il se charge de gérer les sprite, d’introduire les sons, il a des outils pour la création de jeux et est conçu pour leur fournir un rendement très élevé.

Même si l’idée de départ d’Eduardo Ortega était de créer un jeu de survie simple et d’un seul écran – qui vous permet de jouer indéfiniment sans perdre, le résultat est finalement assez différent. Se rendant compte du potentiel du jeu et ayant pu y passer du temps (ils avouent que c’était pendant l’été), ses créateurs ont été plus loin et ont fini par créer un jeu html5 bien plus développé et détaillé que prévu. C’est, finalement, un jeu de vaisseaux spatiaux qui se divise en trois zones, dans lesquelles le protagoniste doit affronter cinq types d’ennemis qui l’attaquent tous différemment et battre le monstre final à chaque fois. C’est la magie des jeux vidéo et la mécanique de leur création.

Article écrit par Paula Gil Alonso.