Nahyan, ça fait un bout de temps dis donc et en en reparlant avec certains membres de l’équipe originale, ça n’a pas prit une ride (Merci K-you). Ça tombe bien j’ai toujours pas abandonné !
Reprenons la situation
Reprenons quelques instant un mini résumé de la situation : « Seul je ne sais pas faire le jeu tel que pensé et il faut arrêter de croire que je serai aidé ».
Ensuite, dans l’optique « j’y arriverais malgré tout », il faut reprendre ce qu’on a comme acquis permettant de démarrer : je suis développeur web et pas illustrateur. Il faut donc que j’amoindrisse mon ambition, sans casser le projet ou perdre l’envie de le faire, rester motivé et prendre du plaisir à le faire.
Du coup on repars un an en arrière, j’étais développeur web en mission pour Auchan et j’ai développé, entre autre, un éditeur de plan de masse (en gros la vue du haut des meubles d’un étage de magasin). Ceci a été fait sous Angular en Canvas et c’était bien amusant de le faire. Du coup quand c’est sympa on explore et on chipote, on fait ça encore mieux, etc. Ce qui donne ceci :
Vue partielle de l’éditeur
En gros on a comme possibilité de sélectionner, drag/droper d’une liste vers le plan ou du plan vers le plan (déplacer un meuble), molette de souris pour faire une rotation du meuble ou zoom du plan (min-max), visibilité de la sélection dans une liste sur plan ou inversement au survol, etc… Le tout avec les optimisation possible pour ne dessiner que ce qui est nécessaire tout en se faisant plaisir avec les petites ombres par exemple.
Ici on a un exemple de certains éléments graphiques créés directement en code.
Tant qu’on y est…
J’étais lancé et je ne pouvais pas explorer plus avant les possibilités de cet éditeur, du coup je me suis créé un petit projet perso pour tester les animations en sprite. En fouillant un peu j’ai retrouvé ce bon vieux Sonic.
Ainsi j’ai pu chercher comment découper, afficher, animer, retourner, etc. notre petit héro bleu. Ensuite, me casser les dents sur la physique de déplacement du personnage mais ça on va zapper…
Oui mais ensuite ?
Ensuite la mission s’est terminée et j’ai eu quelques jours au bench. Du coup je me suis occupé en tentant de renforcer mes compétences Angular, surtout sur la partie mise en place d’un nouveau projet. Car c’est facile d’utiliser ce qui a été mis en place par d’autres, mais le faire soit même c’est de la découverte casse-gueule…
Coder c’est joli, mais un rendu c’est mieux, Canvas c’était sympa et comme j’avais déjà fait un POC (preuve de concept) isométrique en canvas à la maison, je me suis dit que mélanger les deux rendrait la chose plus amusant, Angular et Canvas pour un moteur isométrique. Il manquait un truc : les éléments graphiques, et c’est pas le plus simple.
En fouillant je suis tombé sur l’excellent site opengameart.org, fait par un développeur, Clint Bellanger, d’un jeu gratuit et open-source nommé Flare, de lien en lien je suis également tombé sur son blog partageant ses études du sujet isométrique et de son jeu et moteur graphique.
C’est dans la même suite de recherches que je suis tombé sur le magnifique logiciel MagicaVoxel. Ce truc est terrible, pas évident au début mais très agréable. C’est là que je me suis dit : » tu n’es peut-être pas graphiste/illustrateur, mais t’as les notions et la créativité pour faire de ce logiciel l’instrument qui te manquait « .
Du coup j’ai fait ça :
Ok je me suis bien amusé, j’ai chipoté et fait un rendu isométrique par le logiciel et puis ?
Ensuite j’ai transposé mes précédents essais et morceaux de code du projet Auchan, Sonic et compagnies en un POC de rendu isométrique. Ce qui donne, après de nombreux chipotages et réflexions sur les calculs de rapports entre écran et monde, monde et écran, en incluant les notions de zoom, d’offset et d’élévation :
Tadaaa… ok ça ressemble à rien mais en une matinée c’était pas mal (une demi journée de recherche à tourner en rond sur le net et un début de rendu). Évidemment ce n’est pas suffisant, il nous faut un objet et un curseur pour contrôler et vérifier les formules de positionnement, de zoom etc.
Et avec un objet pour vérifier la superposition, l’ombrage et l’élévation :
Du coup ça fonctionne, un POC de +650 lignes, données incluses, ça fait plaisir, et on est à 1 jour et demi. Puis en chipotant sur des dessins et en repensant au plan de masse d’Auchan, je me suis dit, qu’est-ce que ça donnerait en isométrique ? Il m’a suffit de dessiner un meuble au l’autre, changer la carte de données, corriger des superpositions et ordonnancement pour avoir ce petit magasin :
Ça a fait beaucoup rire les collègues 🙂 .
On s’arrête au POC ?
Bien entendu non, j’ai réussi une étape, c’est bien, je l’avais déjà fait mais là c’est plus abouti. La base est là et vérifiée, on peut continuer ! Cependant c’est un POC tout dans un seul fichier, c’est pas propre et continuer là dedans c’est pas une bonne idée. Du coup, on décompose le code en morceaux, on crée des classes, on structure son code, on découvre les joies des inclusions cycliques, des prises de têtes de » Où mettre ça ??? « , etc… Il m’aura fallu presque une semaine pour transposer le code et en arriver presque au même point qu’au POC :
Là on a une version complète et fortement améliorée pour son côté structuré et flexible. Manque le curseur et le zoom qui n’ont pas encore été recâblé pour la simple et bonne raison que je me suis concentré sur le système de rendu, la structuration des données, simplification/factorisation du code et correctifs divers.
En parallèle
À coté de ça, j’ai tenté de m’installer un espace de travail propre, un petit GitLab sur le serveur daaboo, mais quand on a la moitié de RAM que nécessaire… et pas de redmine encore car GitLab pourrait peut-être suffire. Mais on est loin du compte encore. Le top serait d’avoir le moteur graphique séparé de l’usage Nahyan, on lui a trouvé un nom » TARS « , je vous laisse chercher pourquoi.
La suite ?
Là ça fait une semaine que je m’échine à refondre la structuration Sprite et Element, suite de ce que je disais avant, fondre et refondre pour trouver le bon équilibre de séparation des concepts, stockage des données, etc. J’y suis presque, l’idée est d’avoir un Sprite qui s’occupe de stocker l’image et les infos descriptives de cette image (points de référence, hauteur/largeur, frames d’animations, …) et de l’autre un Element faisant référence à un Sprite tout en ayant ses valeurs propres. Ainsi 2 Elements « brin d’herbe » utilisant le même Sprite pourront être animé séparément et ne pas avoir cet effet ringard de tous les mêmes élément animés en même temps.
Dans cette refonte j’essaye d’inclure directement la notion d’animation et d’objet composé.
Il y a encore pas mal de travail avant d’avoir à nouveau une base propre, stable et bien pensée, même si on sait d’avance que ce n’est pas le dernier refactoring du code de base.
Pour détails du jour
Pour ceux que ça intéresse ou pour le souvenir :
- Usage de la classe Bloc au lieu de l’interface périmée
- Suppression de Tile au profit de Element contenant une propriété Z (élévation).
- Nettoyage et fixes suite à la disparition tragique de Tile
- La grande question est… (non pas celle là) comment transférer Draw de Scene dans Element vu qu’on a un Camera, un incrément de bloc et des coordonnées d’écran
- Stacking mis en place au niveau du subset
- Hero est un set de données x, y en dur
- Cursor désactivé, mouse event aussi
- Autre question est comment mélanger Iso et rendu standard au sein d’une scène, mélange de méthode et de services
Pour info il y a 30 TODOs qui traînent dont 19 rien que dans Iso…
nice