Découverte de la conception d’un jeu vidéo Runner 2D : les coulisses de la création

Écrit par Nicolas et Jérôme

1 – Pourquoi Ouijump ?

Un jour, en interne, un développeur avait pour mission de créer un petit jeu vidéo. Il avait pour but de faire la promotion de l’entreprise de manière ludique.

Il y a quelque temps de cela, une équipe a décidé de redonner un coup de jeune à ce projet pour lui donner une identité mieux réfléchie et d’utiliser une technologie plus appropriée. Le changement de technologie permettrait également de mieux structurer le projet pour le développement d’évolutions futures.

Pour avoir une deadline qui nous servirait de cape, nous avions décidé de la date du Devfest de Strasbourg le 15 novembre 2023. Cette année, le thème du Devfest était le “Sport”, thématique parfaite pour notre projet.

2 – L’idée originale et conception des phases de gameplay

Nous avons choisi de maintenir le runner 2D, apprécié pour son gameplay simple et ses contrôles faciles. Le jeu vise à parcourir de longues distances, la distance étant le score. Pour éviter la répétitivité et maintenir l’intérêt, nous avons introduit des défis :
– des obstacles diminuent la vie du joueur, ils sont générés intelligemment pour augmenter progressivement la difficulté
– les vies ne se régénèrent pas, évitant un jeu sans fin
– changer de monde est possible en attrapant des maillots de sports différents, introduisant de nouveaux ennemis.
De plus, pour renforcer la progression, la distance parcourue et le classement en temps réel sont affichés, permettant aux joueurs de se mesurer aux autres et de fixer des objectifs.

3 – Moodboard et conceptualisation graphique du jeu

3.1 – Le système de grille :

La grille aide à équilibrer les éléments visuels, assurant que chaque composant qu’il s’agisse de personnages, d’obstacles ou d’arrière-plans s’intègrent parfaitement dans l’ensemble du jeu. Cette grille facilite également l’alignement et la mise à l’échelle, garantissant une expérience visuelle agréable pour l’utilisateur.

Nous avons adopté un système de grille de 32px pour assurer la cohérence et la précision du design. Cela a permis une conception structurée et une mise en œuvre efficace des éléments graphiques, tout en réfléchissant à l’univers et aux ambiances à intégrer dans le jeu.

3.2 – L’univers du jeu

L’univers du jeu est conçu pour être immersif et captivant. Nous avons opté pour une ambiance qui mêle à la fois le dynamisme et une certaine nostalgie des jeux classiques. Cela inclut des décors variés sur notre thématique du sport, des paysages de nature de type golf à des environnements plus tamisé, comme le bowling.

3.3 – Ambiances à intégrer dans le jeu

L’objectif est de créer une série de mondes dans lesquels le joueur se sent engagé et motivé à explorer. Chaque monde possède sa propre palette de couleurs et ses éléments uniques, contribuant à une expérience riche et diversifiée.

3.4 – L’apparence du personnage

Le design du personnage principal a été une étape clé. Nous voulions que le personnage soit à la fois identifiable et attachant. Son apparence a été conçue pour refléter l’identité de la marque Ouidou, tout en étant suffisamment flexible pour s’adapter à différents environnements de jeu. L’esthétique du personnage combine des éléments modernes avec un style légèrement rétro, offrant ainsi un charme universel.

3.5 – Comment le personnage va évoluer dans son environnement

L’évolution du personnage dans différents environnements est un aspect essentiel du gameplay. Nous avons conçu le personnage pour qu’il réagisse de manière dynamique à divers scénarios de jeu. Par exemple, ses interactions avec les obstacles de chaque monde, les changements de terrain, et les divers éléments collectables sont tous animés pour enrichir l’expérience du joueur. Nous avons également intégré des animations spécifiques pour les différentes actions du personnage, comme sauter, courir, et glisser, assurant ainsi une réponse visuelle cohérente et satisfaisante aux commandes du joueur.

4 – Création d’un prototype avec Phaser JS

4.1. Choix de la technologie

Pour le développement nous avons choisi de nous diriger vers https://phaser.io/. C’est une librairie Javascript intéressante pour la création de jeux 2D directement dans le navigateur. Comme tous les outils elle comporte des avantages et des inconvénients :

Avantages :
– très simple à prendre en mains
– utilise WebGL, et donc marche sur ordinateur, smartphone, tablette, etc… toutes plateformes comportant un navigateur
– très grande quantité d’exemples de fonctionnalités sur le site et une documentation complètes
– système de physique intégré
– compatible avec Typescript

Inconvénients :
– la documentation est complète, mais des fois manque de liens avec les exemples, il faut savoir où aller pour trouver ce que l’on cherche
– pas de fonctionnalités pour gérer le responsive plus facilement, il faut le penser soi-même
-il faut créer soi-même son environnement développement. Il existe des starter-pack et des boilerplate, mais il faut savoir où chercher et les qualités sont variables
– la liste pourrait être plus complète, mais c’est l’essentiel des retours.

4.2. Le prototypage

Le but du prototypage est de créer les fonctionnalités du jeu de manière très minimaliste pour pouvoir rapidement tester les boucles de gameplay et ainsi pouvoir pointer les mécaniques qui fonctionnent et celle qui méritent des ajustement. C’est un processus très important car il va en partie démontrer si le jeu est réalisable dans les temps et également montrer ce qui marche ou non.

Dans notre cas, il fallait tester les fonctionnalités suivantes :

– création d’un personnage qui court vers la droite de manière automatique et sans s’arrêter
– lui donner la possibilité de sauter, faire un double saut et de pouvoir glisser pendant un court laps de temps
– générer différents obstacles avec un algorithme de placement spécifique
– créer un “props” à attraper pour passer à l’univers suivant

Vu que nous sommes sur un prototype, il n’y a aucune contrainte de design, il suffit simplement de mettre en place des carrés qui représenteront nos différents éléments : rouge pour le personnage, jaune pour le sol, orange pour les ennemis, et cyan pour le “props” de changement d’univers.

Mais comme on dit “une image vaut mille mots”, voici le résultat :

5 – Design et Développement Visuel

Le personnage a été créé pour symboliser une mascotte plus réaliste pour Ouidou. L’objectif était d’incarner les valeurs de la marque tout en offrant un personnage attachant et identifiable pour les joueurs. Pour l’animation, nous nous sommes inspirés des frames de personnages de Street Fighter et d’autres grands jeux vidéo. Nous avons exploré divers mouvements pose neutre, course, saut, dégâts, et pause de fin de jeu pour créer une identité propre et dynamique pour le personnage.

6 – Développement

6.1 – Organisation des fichiers

Pour découper les fichiers et avoir une arborescence qui permet des évolutions futures, nous sommes partis là-dessus :

Les images qui sont présentes dans le jeu sont découpées et ensuite fusionnées dans un seul fichier .png pour limiter le nombre de requêtes à faire lors du chargement du jeu.

Pour les scènes, nous les avons découpées en 3 parties :

– scenes/boot.scene.ts : c’est ici que l’on va lancer le chargement de tous les assets nécessaire au jeu, une fois terminée, il lance le menu.
– scenes/menu.scene.ts : c’est l’interface qui permet d’être redirigée vers les différents écrans. Dans notre projet, nous n’avons pour l’instant qu’un seul mode de jeu, donc nous lançons directement le jeu.
– scenes/ouijump/game.scene.ts : c’est le mode de jeu principal qui gère l’ensemble de la partie (joueur, obstacle, point de vie, etc…)

6.2 – Lancement de la partie

Les premières secondes du jeu sont consacrées à la découverte des contrôles, il ne faut pas oublier que le jeu est présenté lors d’un salon de développement, il y a du bruit et les gens passent derrière le joueur.

Cette première phase sans obstacles nous permet d’expliquer brièvement au joueur comment jouer ou qu’il les découvre lui-même. Ensuite, le joueur arrive devant les premiers obstacles.

Pour la génération des obstacles, nous sommes partis sur un système de “chunk”.
Nous créons à la volée les obstacles qui arrivent selon le niveau du joueur et l’univers dans lequel il est.

Pour créer et contrôler tout ça, nous nous sommes basés sur ce que Valve a pu faire sur Left 4 Dead, le principe est d’alterner entre des phases intenses et des phases de relâchement pour apporter au joueur des moments de tensions et qu’il soit challengé pour casser l’ennui et des phases “relax” pour lui laisser le temps de souffler.

7 – Test, débogage et affinage du gameplay

Les maillots ont été désignés seulement à la fin, nous avions pensé à mettre un portail qui pourrait s’ouvrir avec une animation, un peu comme dans Rick et Morty et qui permettrai au joueur de sauter dedans pour se retrouver dans le monde d’après.

Après discussion nous avons opté pour l’idée des maillots, le joueur entre dans le portail puis il est propulsé dans le prochain monde, le monde correspondant au maillot récupéré. Il y a en tout 4 mondes.

8 – Marketing et Promotion

La campagne a été marquée par une impressionnante bâche publicitaire conçue sur Illustrator. Inspirée par les voyages inter-mondes du jeu, elle recrée l’effet de saut à travers les mondes, capturant ainsi l’aventure du jeu et incitant les spectateurs à explorer ses univers variés.

Le splash screen du jeu a été crucial pour notre stratégie visuelle, représentant les univers du jeu via des objets emblématiques. Utilisant Photoshop et le digital painting, nous avons créé un écran d’accueil accueillant et captivant, évitant un style trop enfantin au profit d’une esthétique moderne. Une attention particulière a été portée à la mascotte, rendue en 3D pour une présence dynamique, renforçant la cohérence visuelle et l’attachement émotionnel du public.