Une application réalisée en 500 heures avec les connaissances de Gamecodeur
AurePixel Il y a 2 ans Premium Pro - Adhésion à vie4

Bonjour à toutes et à tous,

 

Il y a bien longtemps que je n’étais pas venu faire un réel tour sur Gamecodeur et ce à mon insu.. En effet, les trois derniers mois ont été pour moi à la fois très épuisant et passionnant puisque j’ai pu mettre en oeuvre mes acquis de la formation Gamecodeur dans un projet réel.

 

Avant de tout vous dévoiler, je vais resituer le contexte. Commençons par le commencement: je m’appelle Aurélien, j’ai 21 ans et j’ai rejoint la formation Gamecodeur il y a près de deux ans désormais. Je réalise les ateliers et game jam sur mon temps libre, je développe des petits protos dans différents langages que j’ai appris ici même (NB: si vous souhaitez voir un peu tout ce que j’ai réalisé, vous pouvez aller voir mon portfolio).

En parallèle, je suis toujours sur les bancs de l’école, j’ai un BTS en spécialité programmation et je prépare actuellement un Bac +4 en tant que chef de projet informatique en alternance.

C’est dans le cadre de cette formation que le sujet de cet article prend place.

 

Venons en donc au fait, afin de valider mon Bac +4, l’école nous a collé un projet fil rouge dès notre arrivée en septembre 2018, pour un projet devant durer deux ans jusqu’en juin 2020. Le projet est découpé en quatre livrables qui seront accompagnés d’une soutenance chacun afin de clôturer le livrable précédent et d’entamer le suivant. Je précise également que nos équipes ont été tiré au sort, nous n’avons pas choisi nos partenaires et à chaque livrable un nouveau membre de l’équipe devient chef de projet.

Le projet étant le suivant: réaliser un prototype d’application de conception de devis de maison modulaire. Désolé pour ce nom à rallonge, prenez un doliprane et estimez-vous heureux car je ne vous ai pas donné le nom réel du projet qui s’écrit sur deux lignes ! L’application a pour contrainte de devoir tourner sur tablette Android et sur PC Windows.

 

Je vais vous passer les détails des livrables 1 et 2 qui correspondent respectivement à la rédaction d’un cahier des charges fonctionnelles et à un cahier des charges techniques.

Au cours du livrable 2, nous avions choisi de réaliser l’application avec une base de données NoSQL et un front-end en React Native pour le côté cross platform. Au cours de la soutenance du livrable 2 et bien tout s’est très mal passé ! Nos maquettes de l’application ne correspondaient pas aux attentes, notre cahier des charges était extrêmement pauvre et le jury était très inquiet quant à ce que nous allions proposer pour le livrable 3. Le jury nous a attribué la note de B– car il avait reconnu notre travail et a supposé que nous nous étions tout simplement égaré dans notre raisonnement. Et il avait très bien supposé !

 

Lors du livrable 3, le livrable de développement du prototype, c’est à mon tour d’être chef de projet, en reprenant les éléments des livrables précédents je m’aperçois que nous sommes réellement dans la m**** . J’ai compris les inquiétudes du jury, résultat: en tant que chef j’ai dû annoncer à mon équipe que l’on allait devoir mettre les bouchées triples si on voulait remonter la pente. Je rappelle que si nous ne validons pas le projet, nous n’obtenons pas notre diplôme.

Ah et point important, vu qu’on s’était littéralement planté le jury a décidé lors de la soutenance du L2 de nous challenger: même si ce n’était pas demandé initialement, nous devions réaliser le plan des maisons en 2D ! Malheureusement React Native ne propose pas nativement de solution à cette contrainte. Un moteur de jeu existe mais il faut l’implémenter à part et personne n’avait la connaissance du sujet.

On reprend donc la totalité jusqu’aux bases des bases: on refait de nouvelles maquettes, un nouveau schéma de base de données et on cherche une nouvelle technologie pour réaliser l’application.

 

Et c’est là que mon savoir de Gamecodeur entre en action. Notre temps était compté, nous avions deux mois pour produire une application qui:

  • Inclut un plan 2D.
  • Va chercher ses informations dans une base de données.
  • Exporte les données des devis en PDF.
  • Qui doit tourner sur Android et PC.

Bref, c’est la panique. Après de nombreuses recherches, réflexions et tests j’en viens à un outil que nous apprenons à utiliser dans la formation Gamecodeur: Unity.

David, pardonne moi si tu lis un jour ces lignes, tu as dû faire un bond de trois mètres sur ta chaise connaissant ton point de vue sur Unity. En revanche dans notre situation, il s’agissait de la meilleure option que nous avions et qui prenait en compte l’ensemble de nos contraintes.

 

Petit bémol: je suis le seul de l’équipe à connaître Unity. De ce fait, avant d’attaquer le développement j’ai dû réaliser la formation de mes partenaires en me basant sur l’ensemble des connaissances que j’avais acquis avec Gamecodeur et ce dans tout parcours confondu. Mais ce ne sont pas les seuls à avoir dû découvrir certaines choses. En effet j’ai moi-même dû me former pour découvrir comment créer des interfaces dans Unity, gérer la responsivité de l’écran, je me suis vraiment régalé à découvrir toutes ces nouvelles choses que j’ignorai.

 

L’application est essentiellement construite via des UI Elements, pour ceux qui ne connaisse rien à Unity, il s’agit d’un type d’objet que le moteur propose pour créer des éléments graphiques. Pour réaliser les éléments dans la scène 2D ainsi que les items dans les listes, nous avons utilisé un concept de Unity appris dans un cours de Gamecodeur: les prefabs. Ces petits joujous nous ont beaucoup aidé ! Pour faire simple, c’est un objet que l’on souhaite créer de façon très récurrente dans l’application et qui devient donc un modèle de référence pour le copier de façon infini dans son code !

 

Trève de blabla et voici quelques illustrations de l’application accompagnées d’explications ! (NB: Cliquer sur les images pour voir l’animation, la plupart sont des GIFS. Ces fichiers illustrent très bien mon propos)

 

  • Interface de connexion

Pas grand chose à expliquer ici, l’interface permet de se connecter à l’application en allant requêter les informations dans la base de données.

 

  • Interface d’accueil

Bienvenue dans l’application ! Ici vous pouvez créer un devis en partant de 0 ou bien en consulter un existant. Le menu “Paramètres” n’a pas été développé dans le cadre du prototype mais on avait déjà imaginé pouvoir choisir de passer ou non en dark mode sur l’application.

 

  • Création d’un devis en partant de 0

 

    • Création du projet

En cliquant sur “Créer un devis” depuis la page d’accueil vous tombez donc sur une nouvelle interface qui vous permet de créer un projet (NB: Un projet contient le ou les devis associé à un client).

Ici, commencez par sélectionner un client dans la liste déroulante ou en créer un nouveau. Il est également possible d’insérer l’adresse de construction de la maison.

 

    • Création des modules

Une fois le projet créé, il est demandé de créer des modules qui seront utilisés pour créer le plan 2D ensuite.

Il faut modifier le module en lui associant des éléments qui lui sont propres, par exemple on veut faire un mur de la gamme écologique et ensuite on choisit un bois précis pour les montant en bois se trouvant dans le mur. En revanche on ne choisit pas un plancher pour le mur pour des raisons plus qu’évidentes..

Après avoir créé plusieurs modules, on valide cette étape et on passe à la suivante !

 

    • Création de la maison en 2D

 

La partie la plus intéressante ! Ici, grâce au module créé dans l’interface précédente, on choisit nos éléments et on les places dans la scène. On peut modifier leur taille, leur angle et leur position dans la scène. On peut également ajouter des étages à foison dans le devis tout comme on peut les supprimer ! Pour des raisons évidentes une fois de plus, il n’est pas possible de supprimer le rez-de-chaussée et la toiture de la maison..

Une fois qu’on est content sa petite maison, on valide, une pop-up de confirmation vous demande si vous voulez bien enregistrer, on valide et c’est sauvegardé !

 

    • Récapitulatif

Maintenant que notre maison est créée, plusieurs fenêtres récapitulatives du devis se présente à nous, indiquant la quantité et le prix de chaque composant présent dans la scène 2D.

Il est même possible d’appliquer une remise sur la construction de la maison, on voit le coût total du chantier.

 

    • Étape de paiement

La fenêtre suivante permet de changer l’état du devis. Lorsqu’il est accepté, des échelonnements de paiement se présente à nous en fonction de l’avancée des travaux.

 

  • Consultation de devis existant
    • Liste des projets

Maintenant qu’on a fait le tour de la création d’un devis de A à Z, on va retrouver notre devis ! Depuis le menu en cliquant sur “Liste des projets”, voici l’interface qui s’offre à nous:

On retrouve ici, l’ensemble des projets existants dans la base de données. On va sélectionner le nôtre et aller le regarder de plus près !

 

    • Fiche projet

On arrive sur la fiche de notre projet, on a un récapitulatif des informations du client et du projet, ainsi que l’ensemble des devis créé pour le projet. Dans notre cas, nous n’en avons qu’un seul. En le sélectionnant dans la liste plusieurs options s’offre à nous, mais nous allons nous attarder sur les deux suivantes :

  • Consulter le plan 2D

On peut retourner voir notre plan 2D créé tout à l’heure. Et pouf ! Magie : tous éléments sont de nouveau là après un petit chargement de la scène.

  • Générer un PDF du devis

Enfin on peut générer un fichier PDF du devis avec tous les prix calculés et la liste des composants. Ici, nous avons utilisé une librairie externe car la création d’un script pour générer nous-mêmes le PDF nous aurait pris beaucoup trop de temps.

Et voilà tout ! Le fruit de deux mois de travail, plus de 500 heures de travail sur le projet à quatre. Je suis extrêmement fier de ce que nous avons accompli. J’ai gardé le cap de la maîtrise absolu de mon code même dans un monstre qu’est Unity comme nous l’a appris le Professeur Mekersa. Mis à part pour la génération du PDF, tout le code a été rédigé par nous-mêmes. Aucun éléments téléchargé sur le Store Unity qui nous a prémâché le travail. Pour les plus curieux d’entre vous, nous avons créé un Github pour versionner notre code.

L’application comporte encore quelques bugs, malheureusement nous n’avons pas réussi à les résoudre avant la deadline. La soutenance est dans moins de deux semaines, on prépare désormais notre présentation orale et la démo de l’application en live en espérant tout déchirer !

 

Le but étant ainsi de montrer qu’avec des concepts de jeu vidéo et des logiciels destinés au jeu vidéo, nous avons réalisé une dérive en créant une application qui n’est pas un jeu. Comme le dit si souvent David: “Les moteurs, frameworks, langages ne sont que des outils”, ce projet en est la preuve vivante.

 

Je ne sais si je réaliserai souvent des devlogs comme celui-ci, en revanche je suis heureux de voir que ma formation sur Gamecodeur a servi dans un cas concret en dehors de Gamecodeur et des jams. Et j’espère que ces occasions se présenteront à nouveau.

 

Merci à tout ceux qui ont eu le courage de me lire jusqu’au bout, croyez en vous et bon code !

Comments (4)

Bravo pour ta réactivité, c’est aussi ça l’esprit de Gamecodeur, ne pas être enfermé dans son langage et son framework et être capable de prendre celui que l’on a besoin pour mener à bien son projet comme tu l’as fait.
J’espère que tes profs reconnaitrons votre travail.
bonne chance

Bonne chance pour la soutenance et bravo !
Pendant la soutenance appuyez sur le gain d’expérience considérable acquis pendant ce projet grâce à la formation et vos professeurs (pommade…) et que ça va vous servir longtemps !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.