top of page

Carnet de Bord Miya

17/01/19

 

PARTIE THE F1RST :

 

Comment créer les graphismes d’un niveau généré aléatoirement ?

 

  • Comment créer la forme brute (sans texture) d’un niveau généré procéduralement ?

 

- 1ère piste : création de 4 rectangles de coordonnées et de dimensions aléatoires sur l’écran pour former et délimiter l’espace de jeu du personnage.

 

Illustration :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Les quatre rectangles, rectZoneJeu1, rectZoneJeu2, rectZoneJeu3 et rectZoneJeu4 auront pour coordonnées respectives des variables entières définies aléatoirement : xRectZoneJeu1, xRectZoneJeu2, xRectZoneJeu3, xRectZoneJeu4 pour l’axe des abscisses et yRectZoneJeu1, yRectZoneJeu2, yRectZoneJeu3, yRectZoneJeu4 pour l’axe des ordonnées.

Ils auront pour dimensions des variables entières définies aléatoirement : longRectZone1, longRectZone2, longRectZone3, longRectZone4 pour la longueur et largRectZone1, largRectZone2, largRectZone3, largRectZone4 pour la largeur.

Pour avoir une zone de jeu adaptée, il va falloir paramétrer ces variables selon plusieurs critères :

 

  • la zone de jeu doit rester dans l’écran :

    • les coordonnées x des rectangles devront être comprises entre 1/8 et 7/8 de la largeur width de l’écran.

    • les coordonnées y des rectangles devront être comprises entre 1/8 et 7/8 de la longueur height de l’écran.

    • la largeur d’un rectangle N ne devra pas dépasser : width xRectZoneJeu[N] .

    • la longueur d’un rectangle N ne devra pas dépasser : heightyRectZoneJeu[N].

       

  • Les rectangles doivent avoir une taille suffisante pour assurer l’unicité de la zone de jeu ; les rectangles doivent se toucher pour qu’il y ait toujours une seule zone, et non pas quatre espaces isolés. Les variables définissant les dimensions des rectangles devront donc être comprises entre des valeurs précises, que seul le test pourra nous aider à déterminer concrètement.

 

Pour gagner en efficacité, il serait judicieux de créer plusieurs tableaux pour affecter rapidement les valeurs correspondantes à un groupe de variable à la fois à l’aide d’une boucle « pour »  : xRectZoneJeuN, yRectZoneJeuN, longRectZoneN, largRectZoneN.

 

On doit donc pouvoir coder à partir de cela une forme brute adaptée qui se génère aléatoirement à chaque niveau .

 

Illustration :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Cette fonction sera appelée occasionnellement dans le draw, à l’aide d’un booléen. C’est à dire que si ChangementdeNiveau est vraie, la fonction FormeBrute sera appelée. A vrai dire, elle sera elle-même incluse dans la fonction NouveauNiveau.

Une fois la base de la zone de jeu créée, il faudrait pouvoir y ajouter des textures afin d’obtenir un visuel agréable et conforme au style graphique voulu.

24/01/19

 

  • Comment ajouter des textures variées et adaptées à la forme brute ?

 

L’objectif des textures va être de délimiter proprement espace de jeu et fond, mais aussi d’ajouter une dimension esthétique au jeu.

Si j’avais initialement quelques réticences envers le pixel-art (massivement utilisé dans des jeux comme celui que nous essayons de concevoir), l’idée d’un style qui se veut volontairement rétro m’a séduite et se conformait plutôt bien à l’atmosphère que nous voulions recréer. La fonction AjoutDesTextures sera incluse dans la fonction NouveauNiveau.

 

- 1ères pistes : On commencera par distinguer le fond et l’espace de jeu.

Pour commencer, le background sera noir. On va ensuite mettre en place une boucle de vérification horizontale. C’est à dire qu’il va s’opérer un contrôle de tous les pixels contenus dans une zone. Si l ‘ensemble des pixels sont noirs, aucun changement. S’il y a des pixels blancs et noirs dans une même zone du quadrillage, il y sera implanté une texture MurEspaceDeJeu. La texture MurEspaceDeJeu sera une image que nous aurons au préalable téléchargé dans le setup.

Enfin, si une zone de quadrillage ne comportait que des pixels blancs, il y serait implanté une texture SolEspaceDeJeu, qui sera téléchargée de la même manière que le mur.

Illustration:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

26/01/19

 

  • Comment implanter des éléments de décor à l’intérieur de ces niveaux ?

 

Bien entendu, l’espace de jeu ne peut pas se limiter à une salle vide délimitée par de simples murs. Il nous faudrait y ajouter des éléments de décors simples, les premières idées qui me viennent en tête étant :

  • des cloisons disposées aléatoirement de part et d’autre de la pièce pour servir de protection contre les balles. La fréquence d’apparition de ces murs diminuera au fil des niveaux.

  • des décors à placer de manière totalement aléatoire en quantité limitée (torches, végétaux..... à déterminer selon ce à quoi nous voudrons que l'espace de jeu corresponde).

 

Les cloisons seront constituées de la même texture que les murs. Nous créerons une fonction AjoutCloisons  qui sera incluse dans la fonction CréationDeNiveau.

Cette fonction ajoutera dans l'espace de jeu des cloisons constituées de un à quatre blocs de murs. Ces cloisons auront les mêmes propriétés que les murs : elles seront infranchissables par les balles ou les personnages. Il pourra y avoir jusqu'à quatre de ces cloisons par niveau. A chaque niveau, la probabilité qu'il y en ait quatre diminuera. On aura donc une variable décimale NombreAléatoireCloisons, qui sera défini aléatoirement entre 0 et 100. Au début du jeu, les chances d'avoir quatre cloisons sont plus importantes. Si NombreAléatoireCloisons est comprise entre 0 et ProbaApparition4Cloisons (une variable décimale), il y aura quatre cloisons. Si NombreAléatoireCloisons est comprise entre ProbaApparition4Cloisons et ProbaApparition3Cloisons, il y aura trois cloisons. Si NombreAléatoireCloisons est comprise entre ProbaApparition3Cloisons et ProbaApparition2Cloisons, il y aura deux cloisons. Si NombreAléatoireCloisons est comprise entre ProbaApparition2Cloisons et 100,  il n'en y aura qu'une. 

Les coordonnées des cloisons qui apparaîtront seront aléatoires. 

07/02/19

 

Au cours de la dernière séance, Max s’est chargé de l’interface graphique brute, en codant la fonction CréationDeNiveau. Ayant été absente ce jour là, j’ai essayé de compenser mon retard en complétant l’interface dont il avait créé des bases exquises. Aujourd’hui, nous avons travaillé ensemble dessus. Pour rendre l’interface graphique plus fluide et agréable pour l’utilisateur, j’ai préféré l’adapter en plein écran et y ajouter une « mini map » . Max m’a donné les outils informatiques dont j’avais besoin pour y parvenir correctement. Nous avons aussi fait l’inventaire du matériel Arduino que nous utiliserons.

Pour adapter l'interface en plein écran, il nous a suffit d'utiliser la fonction fullScreen, et de revoir les paramètres liés aux pixels. Il fallait aussi adapter la taille et la position des rectangles créés aléatoirement.

En ce qui concerne la "mini map", il s'agit simplement d'une photographie en taille réduite de l'écran qui est affichée dans le coin inférieur droit.

14/02/19

Au cours de cette séance, j'ai réfléchi à la meilleure manière de limiter les déplacements du personnage de sorte à ce qu'il ne puisse sortir de l'espace de jeu. En début d'année, nous avions vu un programme codant un labyrinthe dans lequel le joueur devait se déplacer. Le joueur ne pouvait franchir les murs du labyrinthe grâce à une partie du code qui exploitait les différences de couleurs entre les murs et le reste de l'interface. J'ai donc essayé de coder une fonction qui s'inspirerait de cela. Mon principal problème était de trouver une texture pour les murs qui soit unie, afin que chaque pixel ait la même couleur. Une texture unie manquant cruellement d'esthétique à mes yeux, j'ai plutôt opté pour une texture dont une mince bande seulement serait unie. Encore faut-il s'assurer que cette bande unie soit toujours dirigée vers l'intérieur.Or, par défaut, la texture s'affichera toujours dans le même sens et la bande unie sera dirigée vers le haut, par exemple. Pour palier ce problème, j'ai utilisé la fonction de vérification de pixels qu'a utilisé Max pour que les textures de sol et mur soient placées correctement. Cette fonction est simple : imaginons que la fenêtre soit virtuellement quadrillée de petits carrés de 64 pixels de côté; si les pixels aux quatre coins du carré sont noirs, aucune texture, si au moins un des pixels à un coin du carré est blanc, on a une texture de mur, si les pixels aux quatre coins sont blancs, il  y a une texture sol. Je l'ai utilisé pour différencier les coins qui étaient noirs ou blancs, en ajoutant quatre variables correspondant respectivement au nombre de coins inférieurs noirs, coins supérieurs noirs, coins gauche noirs, coins droits noirs. Ainsi, si l'on compte deux coins inférieurs noirs par exemple, on va considérer qu'il s'agit d'un mur situé en bas de l'espace de jeu. La texture ajoutée à ce mur aura donc sa bande unie tournée vers le haut. On se retrouve ainsi avec une bande de même couleur entourant l'espace de jeu.

23/02

Aujourd'hui, j'ai terminé la limitation des déplacements du personnage. Avec la nouvelle texture mise en place, cela a été relativement simple. J'ai créé quatre variables correspondant à la couleur des pixels en haut, en bas, à gauche et à droite du personnage. Si cette couleur est noire (couleur de la bande unie ajoutée à la texture), le joueur ne peut plus avancer.

25/02

J'ai amélioré l'interface graphique en réglant les derniers problèmes inhérents aux textures.En effet, les coins étaient à revoir, il n'y a désormais plus de problème.

Illustration:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

07/03

Au cours de cette séance, j'ai essayé d'améliorer la fonction de détection de collision en mettant en commun celle que j'avais déjà créée et celle de Max. J'ai aussi essayé de configurer le menu Options. Je pensais créer une nouvelle fenêtre qui s'afficherait lorsque l'on clique sur le bouton associé, et ce à l'aide d'une librairie. Max étant finalement contre l'ajout d'une librairie, j'ai abandonné l'idée.

08/03

J'ai commencé à étudier sérieusement la partie concernant l'Arduino, sur le plan électronique. Après de multiples recherches, je suis parvenue à comprendre comment utiliser la breadboard afin d'optimiser l'espace. J'ai réussi sans trop de mal à connecter les deux joysticks et les cinq boutons poussoirs, et à les faire reconnaître par le logiciel Arduino (on constate que les valeurs affichées par le moniteur changent si l'on tourne le joystick ou que l'on appuie sur les boutons). En revanche, j'ai rencontré plus de difficultés concernant l'écran lcd que Max m'avait prêté. En me renseignant, je n'ai trouvé la plupart du temps que des montages assez complexes nécessitant beaucoup de câblages et un potentiomètre, pour régler le contraste. Je suis parvenue sans mal à allumer l'écran, mais pas à afficher quoique ce soit dessus. Dernier problème de taille : le manque d'entrées analogiques sur l'Arduino. En effet, presque tous les composants que je comptais utiliser nécessitent un port analogique, et non pas digital. Faute d'avoir un Arduino assez grand, je me verrais contrainte de renoncer à un des composants, reste à savoir lequel.

09/03

J'ai réalisé les plans pour la manette. Max et moi sommes tombés d'accord sur l'idée de la faire en bois, et l'écran lcd (une fois en état de marche), pourrait la faire ressembler à une mini borne d'arcade. J'ai adapté les mesures en fonction des composants présents à l'intérieur; et j'ai dû mesurer chaque composant censé être visible pour réaliser les "trous" associés dans la manette. En me penchant un peu plus sur le cas de l'écran pour décide définitivement si oui ou non je pourrais l'intégrer, j'ai trouvé une manière plus simple de réaliser le montage, en utilisant simplement deux ports analogiques. J'ai réussi à afficher un message, le problème se pose encore pour la taille de l'Arduino cependant.

J'ai consacré une grande partie de l'après-midi à m'occuper des découpes de pièces de bois. Malheureusement, le bois était fin et les "trous" à réaliser très petit et près des bords, si bien que certaines pièces sont fragilisées. Le montage s'annonce moins simple que prévu. Certaines pièces ont besoin d'être retravaillées, et les trous que j'avais prévu pour certains composants ne sont pas assez large, les joysticks notamment. L'espace prévu ne permet pas une bonne utilisation.

10/03

J'ai essayé de commencer le montage de la manette, la fragilité de certaines pièces m'a contrainte à faire des changements par rapport au plan initial.

11/03 ET 12/03

Je me suis consacrée à l'amélioration du GUI et des texture.

13/03

J'ai continué le montage de la manette, mais il y a quelques problèmes. J'ai dû supprimer les boutons poussoirs, et l'écran lcd n'affiche plus rien de visible. Les valeurs associées au joystick variant sur le moniteur Arduino restent constantes sur Processing, si bien que je ne peux pas coder les commandes.

 

 

 

 

 

 

 

Schema Espace de Jeu 1.PNG
Schema Espace de Jeu 2.PNG
Capture.PNG
Capture Jeu.png

Lycée B.Palissy

164 Bd de la Liberté

47000 Agen

© 2018 usethfrogsluke . ecole du baguette Créé avec Wix.com

 

bottom of page