GRIFFURE.COM : Le blog des créateurs de mondes

BACKRUN: le jeu vidéo et son évolution

Il y a des histoires que personne n’a envie d’entendre.

Des histoires qui fascinent, qui répugnent, qui passionnent.

Et aujourd’hui, je veux vous présenter le prélude de mon histoire: BACKRUN.

Le projet de jeu vidéo BACKRUN

Ce projet, je rêve de le faire depuis des années: j’ai déjà trois version du projet qui précèdent celle-ci.

J’ai choisi de la developper au format jeu vidéo sous le moteur de jeu Unity.

BACKRUN est un jeu vidéo d’aventure mixant une composante de gameplay shooter à la troisième personne, et une dimension plateforme.

Vous incarnez ici un personnage appelé Unai. Ce jeune homme va traverser un niveau couloir ou une horde d’ennemis l’attendent.

Armé de votre pistolet, votre objectif est de vous frayer un chemin dans le niveau. En plus de sa capacité à tirer sur les ennemis, Unai est doué d’une fonctionnalité appelée « retour sur vos pas ». Ce dispositif vous permet de retourner en arrière pour retrouver votre position et les points de vie de Unai quelques secondes en arrière.

Le level design, est composé de quatre parties:

une première qui est la partie intro, ou vous allez pouvoir vous initier au gameplay. Cette partie est une session de tuto qui vous permet de mieux appréhender le tir au format TPS, mais aussi une partie plateformer sommaire permettant d’intégrer l’idée du « retour sur vos pas ».
une partie shooter qui va vous permettre de parcourir un niveau, tirer sur les ennemis.
une partie plateformer qui fera part belle à la réflexion qui implique une maitrise totale de la mécanique de « retour sur vos pas ».
et enfin une dernière partie ou vous allez devoir survivre à plusieurs vagues d’ennemis, puis au boss du jeu.

Le tout se termine par une cinématique de fin.

La direction artistique est pensée pour s’approcher d’une bande dessinée franco-belge, et un filtre cellshading a été appliqué sur les personnages et l’environnement.

La technique

Plusieurs questions se sont posée pour la création du projet. La première est bien évidemment l’outil de création du jeu. La question est simple: aujourd’hui, les deux outils les plus utilisés sur le marché sont Unreal Engine de la société Epic Games, et Unity.

Unreal Engine est aujourd’hui bien plus qu’un moteur de jeux vidéo. D’abord, il s’agit d’un éditeur de jeux, permettant de créer son jeu très rapidement et passer de l’idée au prototype en un rien de temps. Il est doté d’une fonctionnalité appelée Blueprint, permettant de faire de la programmation en nodale sur le moteur.

Unreal est pour moi un problème, car je voulais pouvoir créer un jeu en construisant la totalité du jeu. Hors, Unreal est le type d’outils qui est tellement surchargé qu’il permet de créer un jeu graphiquement aussi abouti qu’un triple A sans aucune connaissance préalable.

Doté d’un générateur de personnage, de générateur procéduraux de niveaux, d’outils clé en main de création graphique, il ne correspond pas à mes besoins.

Car avant toute chose, BACKRUN est un projet personnel. Il est voué a me permettre de découvrir de nouvelles opportunités sur l’outil que j’utilise, à approfondir mes connaissance et à inventer de nouvelles manière de construire.

Unreal Engine, tout comme Construct, ne m’interessent pas dans le cadre de ce projet. Je souhaite avant toute chose continuer à apprendre quelques subtilités.

Unity est un moteur de jeu beaucoup plus rigide: sans sur-couche de simplification avancée. Il est doté d’un système de compilation multi-support: quelques clics suffisent à porter le jeu sur une autre plateforme.

J’ai donc créé le projet sous Unity, avec l’idée de produire l’ensemble de mes assets et mes codes dédiés au gameplay.

Le mot de la fin

Ceci est l’un des nombreux prototypes que j’ai réalisé au fil des années pour mon projet BACKRUN. C’est une histoire de science fiction que je développe depuis 2014 (j’avais 16 ans).

Le jeu vidéo BACKRUN n’est peut-être pas encore impressionnant ou abouti. Mais c’est moi qui l’ai fait.

Le gameplay vidéo est disponible sur GRIFFURE.COM.

J’ai hâte d’écrire la suite !

Comment j’ai créé ma web-série ?

Une odyssée spatiale et créative

Cela fait maintenant près de six ans que je travaille sur un projet de web série. Mêlant images de synthèses et prises de vues réelles, la série dénombre aujourd’hui une demi-dizaine d’épisodes disponibles sur Youtube. Et j’écris cet article car je souhaite évoquer le travail que j’effectue en autodidacte depuis tout ce temps.

UNAI raconte l’histoire de Unai, un enfant renard anthropomorphique et de Keeper, un humain. Tous deux sont à la recherche de l’Homeless, le centre de l’univers.

Mon objectif est de créer une relation père-fils entre les deux personnages. Chaque épisode a pour thématique une émotion, et a pour ambition d’approfondir leur relation. Chacun dure entre trente secondes et deux minutes.

UNAI a été réalisé en mélangeant prises de vues réelles et images de synthèses. Le character design se veut cartoon, pour se rapprocher de l’idée d’un Roger Rabbit.

L’univers est inspiré par le Petit Prince de Saint-Exupéry, mais aussi de Star Wars, Star Fox et Alert Spoiler.

J’ai réalisé ces courts métrages en alliant prise de vue réelles sur fond vert, puis j’ai incrusté mon personnage dans l’environnement 3D créé avec le logiciel Blender et rendu avec le moteur Cycles. J’ai créé beaucoup de versions du personnage de Unai. D’abord pensé comme un robot, puis comme un petit garçon à la peau bleue, je me suis arrêté à la forme d’un renard humanoïde car le rendu du pelage est vraiment intéressant, et permet de rendre le personnage palpable.

Au tout début, UNAI n’était pas une web série, mais une chronique dédiée au jeu vidéo. Je me retrouvais face à une caméra, dans ma chambre, en train de parler de jeu vidéo. L’idée était d’intégrer un personnage en image de synthèse. Une sorte de side-kick qui aurait pour but de faire sourire le public.

A ce moment, nous sommes en 2015, et je commence à me former en autodidacte sous Blender. Et la première chose qui me vient à l’esprit, c’est de donner vie à un object simple du quotidien: un lampe qui serait sur mon bureau et qui me jouerai des mauvais tours.

Hélas, l’idée ne me convient pas. Je revois mon ambition à la hausse en imaginant un enfant en 3D, avec qui je pourrais intérargir librement. Unai est né !

Le personnage de Unai dans une première version

Le personnage était un enfant à la peau bleu. Ses yeux sont blanc car je se veux pas lui faire des yeux à ce moment donné, ne sachant pas encore comment les animer. Les cheveux sont également blanc et la peau réagit différemment à la lumière.

Même si l’idée est bonne, le n’était pas assez organique. J’abandonne cette idée, mais je veux absolument poursuivre dans cette idée qui consiste à mettre en scène un jeune extraterrestre qui parle avec un jeune humain de jeu vidéo.

J’aime l’idée qui consiste à opposer deux personnages qui n’ont rien en commun, voire qui se detestent, mais qui partagent une même passion.

Je me décide alors à designer une première ébauche d’un personnage qui se rapproche du Unai actuel.

Unai sous forme de personnage poilu daté se septembre 2016

L’évolution de la modélisation du personnage

Dans cette itération, l’idée était de créer un personnage plus simple. Le douer d’un visage cartoon me permettait alors de faciliter le futur processus d’animation. Et s’éloigner du réalisme me permet alors de décompléxifier son mouvement.

Même si je ne suis pas satisfait par le personnage, je sens que je m’approche du but.

Mais une problématique se pose au niveau de son design. Je vois plus ou moins à quoi le personnage doit ressembler. Mais je n’ai pas d’idée sur la forme de que doit prendre son visage.

N’étant pas suffisamment doué à l’époque avec la modélisation Blender, je choisis de passer par la sculpture sur terre. Même si le résultat n’est pas vraiment à la hauteur, il a le mérite d’affiner ma vision du personnage.

Sculpture du visage de Unai version plus cartoon de profil

Sculpture du visage de Unai version plus cartoon de face

Sculpture du visage de Unai version plus réaliste de profil

Sculpture du visage de Unai version alternative

A cet instant, je comprends que le personnage devient plus palpable. La terre me permet de le toucher et de mieux visualiser son visage et sa personnalité.

Le personnage est désormais modélisé. Il m’apparait comme une évidence. Alors que j’hésite entre un pelage blanc et un pelage roux, je me dit que j’ai envie de tester les couleurs d’un renard.

Tout me plait dans ce personnage avec les différents détails sur son pelage rendu avec Cycles, son air optimiste et amusé.

Je vais donc procéder à de multiples prises de vues test tout en imaginant à quoi ressemblerait le premier épisode.

Première ébauche — Unai regardant l’horizon

Les quatre premiers épisodes de Unai ont été écrits de manière procédurales. J’ai juste fait les scènes les une après les autres, sans savoir à quel moment j’allais finir l’histoire.

Comme je le disais précédemment, l’un de mes objectifs était de faire une chronique jeu vidéo. Mais alors que je m’approchais de la fin de chacun des épisode, j’étais embêté par le fait de parler de quelque chose sans être légitime. Je savais que je n’avais pas assez de vécu pour pouvoir évoquer l’histoire du jeu vidéo.

C’est pourquoi UNAI est devenu une web série. Sans jamais prononcer le mot “jeu vidéo”.

L’histoire du premier épisode raconte comment une créature se moque de son créateur d’une part, et d’autre part se veut un appel au voyage.

L’épisode 2, quant-à lui, se veut plus sombre. On y voit Keeper protéger Unai. Ma volonté était d’y installer une sorte de tension, même si le fond vert approximatif nous sort une fois de plus de l’immersion.

Dans UNAI #03, Unai montre ses talents de pilote à Keeper. Je voulais montrer la fierté de Keeper envers Unai, et présenter pour la première fois l’interieur du cockpit du vaisseau.

Dans l’épisode quatre, je voulais juste souligner le sentiment de solitude des deux personnages. Mais aussi présenter un début de confrontation: Unai grandit, et montre un caractère rebelle.

Du coup, je profitais des épisodes pour développer l’univers visuel. L’idée était alors de parler de la relation entre Unai et Keeper, en installant l’idée que Keeper protège son petit frère. Et Unai, lui semble avoir peur de Keeper dans l’épisode 2, puis être fier de lui présenter ses talents de pilote dans l’épisode 3. Dans l’épisode 4, qui est le plus court de tous, il exprime sa tristesse, et sa solitude. Keeper, lui justifie cette difficulté par le fait qu’il veuille le protéger.

L’idée est aussi de faire en sorte qu’à chaque épisode de UNAI, une émotion ressorte du visuel. Avec une colorimétrie propre. Et en analysant ces premiers épisodes, je ne peux m’empêcher de remarquer que les visuels sont de plus en plus sombres. Et l’univers de plus en plus triste.

Avec l’épisode 5, je fais un choix radical. Jusqu’à présent, le tout semblait plutôt sérieux. Mais j’ai envie de m’essayer à quelque chose de plus drôle. Et cette cinquième excursion dans UNAI va être un premier pas dans la comédie.

Jusqu’à présent, UNAI était voué à être une simple web série de science fiction cachée dans les entrailles de youtube. Cette aventure de Unai et Keeper renoue avec mes objectifs de départ: faire rire mon auditoire et faire une oeuvre burlesque.

Pour la première fois, un autre personnage que Unai et Keeper va enter en scène. Celui ci sera un antagoniste dont le design sera tout droit sorti du design des robots de Portal 2.

Autre révolution: l’épisode a été tourné en décor réel ! Tandis que l’ensemble des épisodes précédents avaient vu les plans de Keeper être tournés sur fond vert, celui-ci serait tourné en plein air.

Enfin, dernière révolution: le personnage de Unai lui-même. En effet, l’ensemble du squelette d’animation du personnage a été revu, avec un redesign au passage. Désormais, Unai n’est plus torse nu !

Unai version test avec rigg facial animé à la main

De plus, son rig facial a été refait de manière à pouvoir intégrer un système de capture faciale, pour pouvoir animer le visage du renard de manière rapide en me filmant avec mon téléphone. Le tout est calculé pour que le faciès de Unai soit plus organique. Et en plus, je n’ai plus à animer chacune de ses interventions à la main !

Quand je vois l’évolution de mon travail, je me sens fier du travail accompli jusqu’à présent. A l’heure où j’écris ces lignes, l’épisode 6 est encore en cours de production. En levant les yeux, de temps en temps, je vois les visuels de UNAI qui prennent vie, frame après frame, scène après scène.

Je ne suis pas l’animateur le plus doué de ma génération, ni le gars le plus imaginatif qui soit. Mais créer UNAI me rend heureux.

Quand je vois Unai et Keeper discuter, c’est une partie de moi qui s’exprime. Et raconter leur histoire me fait le plus grand bien.

Leur prochaine aventure sera la plus ambitieuse à ce jour, et va complètement se reconnecter avec la fonction de base du projet: parler de jeu vidéo.

Oui, l’épisode 6 sera une chronique. Et sera un mêlange de fiction comme les épisodes précédent, mais aussi de chronique au format voix-off.

A chaque nouvelle image rendue, ma hâte de présenter l’épisode 6 grandit.

Unai et Keeper sont quelque part mes enfants. Je les ai créés et imaginés. Je les ai écrits et sculptés, modélisés et filmés.

Version retravaillée de la scène 01 de UNAI #01 – Bienvenue dans mon univers

Les voir s’animer à chaque épisode sous une nouvelle forme me rempli d’ivresse.

Pour moi, ces personnages sont l’image même de la liberté.

William-Arno CLEMENT

Hap: l’application de microblogging

Hapshot est une application de microblogging développée avec NodeJS pour serveur et MySQL pour la base de données. Il s’agit d’une application web de microblog similaire à X (Ex Twitter). L’idée était de créer un site web avec des technologies modernes du web pour gérer un site communautaire en ligne.

La problématique est la suivante : Comment créer une application de réseautage social, et surtout comment la mettre en production ?

Concept

On peut partager sur Hapshot des textes courts accompagnés (ou pas) de photos. Le logiciel est construit en suivant le pattern MVC. Côté design, le logiciel est inspiré de Twitter et Tumblr.

Un utilisateur inscrit au service peut publier un article sur son compte. Ce dernier peut être accompagné ou non d’une image. L’utilisateur peut également accéder à son fil de messages personnalisé pour voir le journal des publications des personnes suivies dans l’ordre anti-chronologique.

Une page profil contient les derniers posts d’un utilisateur ainsi que sa photo, sa biographique, son pseudonyme et son nom en haut de page. Les pages profils sont accessibles depuis le web à l’adresse suivante : www.hap.sh/ot/nom_d_utilisateur .

Choix techniques

L’application Hapshot se veut être une plateforme sociale. Pour cela, elle doit répondre aux codes des réseaux sociaux actuels. Le choix de NodeJS est pour moi un avantage dans la réalisation de ce projet : il permet un chargement de page rapide : il est notamment utilisé chez de nombreux médias en ligne pour sa rapidité d’exécution et ses performances SEO. NodeJS supporte également les fortes montées en charge : il peut donc gérer un grand nombre de requêtes simultanément. Il est un environnement de développement stable, sécurisé et javascript est un langage que j’aime particulièrement.

Le logiciel sera architecturé à l’aide du standard MVC pour plusieurs raisons :

La segmentation du code sous forme Modèle/Vue/Contrôleur permet plus de clarté

Il permet de rendre le code évolutif

La gestion des packages sera performée par npmJS.

Pour le back-end, Express sera utilisé comme serveur. Tandis que la base de données MySQL sera connectée à notre application à l’aide du module officiel NodeJS. Des modules tels que bodyParser, cookieParserJS, JSWebToken ainsi que HBS seront utilisés pour les vues.

Objectifs du projet

Apprendre et comprendre le fonctionnement d’une application sociale • Maitriser NodeJS et le système de développement avec packages (npm) • Approfondir mes connaissances sur MySQL • Créer une interface utilisateur conviviale et une expérience à forte valeur ajoutée

Enfin ce projet sera pour moi l’occasion de travailler sur une application douée de sens : à la fois expérimentale et sociale.

Le développement du projet

La charte Graphique et technique

La première étape du développement du projet a été la création d’une charte graphique. Car c’est à partir de cette ligne directrice que j’ai eu l’opportunité de filtrer un public qui s’apprête à utiliser l’application.

L’idée est partie d’un constat simple : à quoi ressemblerait Twitter s’il était pensé pour une audience jeune, par exemple celle de Snapchat ou Tumblr ?

Mon objectif est donc de cibler une tranche de la population jeune, volatile et qui partage plus vite que son ombre chaque moment marquant.

Pour m’accorder au mieux à ce jeune public, il m’a été tout à fait naturel de m’inspirer des chartes graphiques les plus populaires des magasins d’applications. A partir de cela, je me suis appliqué à la création d’une marque claire, efficace : Hapshot. Hap pour « Happy », « Happening » concaténé au mot « shot » pour l’esprit jeune, pour l’idée d’addiction.

L’application sera représentée par un smiley armé de dents de vampire, le tout sur un fond bleu uni.

Le site web sera accessible à partir de l’url www.hapshot.com, mais j’ai finalement décidé de raccourcir cette url à www.hap.sh afin que le site soit accessible plus rapidement.

Lors de mes recherches graphiques, j’ai effectué quelques itérations pour la création du logo. Celui-ci représente bien ma vision du projet.

L’interface utilisateur : la page d’accueil

La première page du site internet est pensée pour être minimaliste, et proposer à l’utilisateur la vision du produit.

Sur la capture d’écran ci-dessus, vous pouvez constater que l’interface fait part belle à l’image d’un concert, qui doit selon moi montrer le potentiel de l’application : partager le moment. A droite se trouvent les premières ébauches de ce que sera l’interface utilisateur : le logo de l’application, suivie du slogan « Tweet less, do more » (Tweetez moins, faites plus). A partir des boutons en dessous, l’utilisateur va pouvoir se connecter à son compte, ou en créer un nouveau.

Inscription au service

Une fois son compte créé, l’utilisateur pourra se connecter à son compte, mais son interface ne sera pas encore accessible car son compte n’aura pas encore été activé. Un mail de confirmation sera alors envoyé à l’adresse fournie par l’utilisateur afin d’activer son compte, et lui permettre d’accéder aux services. Les services et fonctionnalités.

La page d’accueil après connexion au service

Une fois connecté à son compte, l’utilisateur va pouvoir entrer dans le vif du sujet avec le fil d’actualité. Y seront disposés dans l’ordre anti-chronologique les différents posts des « hapshooters » suivis par l’utilisateur. L’utilisateur pourra interagir de deux manières avec un post : lui laisser une mention « j’aime » ou bien accéder au profil de son émetteur.

Pour accéder au profil, il y a plusieurs possibilités : la première est de cliquer sur le nom de l’utilisateur à consulter. La deuxième est la consultation par l’utilisateur de son propre profil à l’adresse www.hap.sh/ot/. Dans le cas où le profil consulté n’est pas celui de l’utilisateur, un bouton « Suivre/Follow » va apparaître à côté du nom d’utilisateur.

Technologies

Après avoir imaginé l’architecture du logiciel en avril 2021, je me suis appliqué au développement du projet. L’idée est la suivante : rendre le projet le plus modulaire possible afin de pouvoir développer une API et peut-être plus tard greffer une application mobile au projet.

Le développement est toujours en cours à l’heure où j’écris ces lignes. Néanmoins, plusieurs obstacles se sont dressés sur ma route durant le développement du projet.

Comment passer une variable HBS à un fichier Javascript du client ?

L’un des problèmes sur lequel je suis tombé est le transfert de variables depuis handlerbar.js vers un fichier javascript client. Je pensais au début passer par une méthode native à javascript, mais je n’ai jamais trouvé de solution propre à ce problème.

C’est pourquoi j’ai trouvé une alternative en me servant d’une balise cachée permettant de servir de fichier temporaire entre les deux partis.

Comment est géré l’affichage des posts ?

La première idée qui m’est venue à l’esprit, pour l’affichage des posts dans le fil d’actualité ou dans une page profil, était de passer les données au format JSON directement au travers du rendu par le serveur express.

Mais pour rendre le processus plus modulaire et permettre plus tard de greffer au projet une application mobile, mon choix s’est porté sur la création d’une API permettant la récupération des post depuis une url donnée. Par exemple, pour récupérer les posts, le client va faire un appel get à l’API via l’url www.hap.sh/api/posts afin de récupérer au format JSON les différentes données des posts à afficher.

HBS, le moteur de vues

Handlebar.js est un moteur de vues pour serveur express. J’avais le choix entre ce dernier et un autre moteur de templates : Pug.

Néanmoins, j’ai choisi HBS car je me sentais vraiment à l’aise avec ce moteur dans mes projets personnels, et étant adepte des balises de styles au sein du HTML, il m’a semblé nécessaire d’utiliser un outil permettant la manipulation de code HTML directement dans la vue.

MySQL, ma base de données

J’ai longtemps hésité entre MySQL et Moongoose pour la gestion de la base de données. Mon choix s’est finalement porté sur MySQL car le fournisseur que j’utilise pour l’hébergement NodejS, à savoir OVH, propose une base de données MySQL et l’outil de gestion PHPMYADMIN.

Nodemon

Afin de gagner du temps lors de mes différentes itérations, j’ai utilisé un outil NodeJS nommé Nodemon. Ce framework permet un gain de temps considérable dans le développement du serveur. A chaque modification de fichier, le serveur redémarre automatiquement, et ainsi, je peux m’abstenir de relancer le serveur Node manuellement. J’ai gagné en efficacité et en efficience grâce à cet outil, et j’ai donc pu me concentrer sur le produit plutôt que sur le côté administration.

Nodemailer : le mailer simple d’utilisation

Afin d’automatiser l’envoie de mail de confirmation/validation de compte, j’ai utilisé une dépendance au Mailer Nodemailer. Ce dernier possède une approche assez simple, et il suffit d’entrer l’identifiant, le mot de passe ainsi que le serveur SMTP du webmail que l’on veut utiliser pour permettre l’envoie de mails automatiques.

Par la suite, il suffisait de générer un entier unique pour valider le compte. Dans mon code, j’utilise les routes « verify » et « send » pour respectivement vérifier si le lien est correct, et pour envoyer le mail auprès du courrier électronique fourni par l’utilisateur venant de s’inscrire.

Voir sur github

Apperture: le Répertoire d’applications métiers

Apperture est une application web développée dans le cadre de ma formation en alternance à la Mairie de Vitry-sur-Seine. Il s’agit d’un répertoire d’applications métiers développé en PHP et avec une base de données sous MySQL.

Le logiciel est développé en PHP Vanilla, avec une base de données MySQL. Il est destiné a servir de panorama des applications métiers utilisées au sein de la ville.

Il permet d’enregistrer des logiciels, leurs éditeurs attitrés ainsi que les informations correspondantes au service consommateurs des dits logiciels.

Apperture peut également voir quels services de la Mairie utilisent quels logiciels. L’objectif était d’obtenir un outil complet capable d’anticiper les couts de chaque logiciel métier, mais aussi de savoir quels sont les besoins par départements.

Le Répertoire d’application Métiers est disponible sur Github. Il est open-source, modulaire et très facile à entretenir.

Voir sur github