Journal de bord d'un programmeur.​
Semaine:
le projet de l'année: le mien
En raison de mon inproductivité,
je ne ferais qu'une étape par semaine
Re bonjour ! C'est re moi ! Et il est maintenant pour moi le temps de vérifier si je suis capable de créer tout seul mon premier code qui fonctionne pour mon gros et unique projet: Un Platformer. (un jeu de plateforme).
Niveau d'impossibilité de ça:
-
+
Alors … avant tout je vais vous exposer les grandes lignes de ce que je veux faire sur mon "jeu", mon projet:
​
- C'est un environnement en 2d qui se déplace par rapport à la caméra et dans lequel un petit personnage peut le parcourir. Il y a des collisions et de la gravité. Je pourrais même essayer de rajouter un décor et un arrière plan qui ne se déplace pas à la même vitesse pour créer un effet de profondeur.
​
- Le petit personnage, ce sera Ori, le personnage principal d'un jeu vidéo que j'affectionne particulièrement (en gros c'est mon préféré) et qui est assez facile à reconnaitre et représenter.
​
- Le plus dur je pense, sera d'animer le personnage et de lui faire effectuer différentes actions dans son environnement , autre que se déplacer, sauter et courir.
​
- Si j'ai encore du temps (et de la santé mentale restante), je pourrais aussi essayer de rajouter des élément interactifs dans l'environnement (pnj, ennemis, plateformes mouvantes…)
-Je pourrais aussi rajouter des musiques et des effets sonores/visuels.
​
-Attacher un scénario à mon jeu (une histoire quoi).
Croquis 4
Croquis 5
​
​
​
​
​
​
[]pas fait
​
​
​
​
​
​
​
​
​
​
​
​
[]pas fait
​
​
​
​
​
​
​
[]pas fait
​
​
​
​
​
​
​
[]pas fait
​
​
​
​
​
​
[]pas fait
​
​
​
[]pas fait
.png)
Texte texte
texte texte
texte texte
Le tout sera fait sur processing, une version de Python qui possède un environnement graphique et différentes fonctions qui s'activent et se répètent toute seules. (setup et draw).
Donc, j'ai dressé une liste des trucs que je prévois de faire pour ce projet. Vous noterez que la liste est longue et que j'ai mis un code couleur pour la difficulté de la tache. Pas besoin de l'expliquer, vous l'avez déjà compris. J'ajoute aussi que cette liste n'est pas exhaustive et que je risque de ne pas (pouvoir) tout faire par contrainte de temps et/ou de technicité. Donc j'ai tout classé par ordre de priorité.
-Créer un environnement de démo (dessin)
-Créer le personnage basique (rectangle).
-Créer un arrière plan démo (dessin)
-Créer des déplacements, sauts, gravité et collisions.
-Créer un scrolling environnement.
-Créer un scrolling(s) arrière plan(s) (démo).
-Créer des animations raccords avec actions/mouvements et personnage complet.
-Créer un niveau complet.
-Créer arrière plan(s) complet(s)
-Créer des plateformes mouvantes avec une détection non buggée de celles ci.
-Créer des Pnj, environnements différents et fenêtre textuelle.
-Créer des ennemis et leurs attaques/animations.
-Créer action d'attaque du personnage et animation de celle ci.
-Ajouter des effets sonores/visuels su personnage.
-Ajouter une météo ?
-Ajouter des éléments collectables
-Créer un inventaire
-Ajouter un ou plusieurs combats de boss.
-Ajouter autres mécaniques (vol, nage, creusage)
-Ecrire un scénario, une histoire à suivre.
​
Semaine Nr 1.
Ca y est. le moment est venu d'entreprendre la chose la plus ambitieuse que j'ai jamais faite en programmation. Un Jeu Complet, qui prend a minima une heure à terminer.
Pour commencer, il faut installer Processing depuis internet. Une fois que c'est fait, il va falloir l'apprivoiser, comprendre comment il marche. La première chose que j'ai remarqué est que Processing fonctionne en Java, or, le seul langage que je connais est le Python. Heureusement, j'ai réussi à trouver comment passer le logiciel en Python.
Alors quand je l'ouvre ça donne un truc comme ça:
Et ça c'est le petit drapeau vert.
J'explique: Le code, on
l'écrit là
Comme dans Python, on a la console dans laquelle s'affiche les résultats.
Donc maintenant, on va commencer la première étape: -Créer un environnement de démo (dessin)
On commence par dessiner l'environnement basique sur Paint (ou ce que vous voulez).
(Attention! Le fond doit être transparent!)
Bon… Maintenant on a notre image, mais il faut l'afficher à l'écran dans notre projet.
Après trois heures de recherches intensives, j'ai réussi à coder les bases de mon programme:
Là on va dire au code de créer une fenêtre de 1000 par 500 pixels.
def setup():
size(1000,500)
background(50)
frameRate(60)
Ca, c'est la fonction setup qui est automatiquement définie à chaque exécution du code.
Puis, on va mettre le fond gris foncé.
Et pour finir, bien que ça ne soit pas obligatoire pour le moment, on définit à combien d'images par seconde on fera tourner le projet.
Bon… Maintenant qu'on a notre environnement de codage, commençons à coder!!!
Pour afficher, l'image, je bloque un peu, mais je crois avoir trouvé. (non sans quelques conseils):
-D'abord, on va créer une variable "global" qui stockera la donnée "img" reconnue par le logiciel comme une image.
-Puis, on va charger l'image qu'on veut dans cette donnée "img", ici "Niveau Ori 0;0 béta".
-Enfin, on affiche cette image à l'écran avec cette ligne de code:
global img
img = loadImage("Niveau Ori 0;0 béta")
image(img, 0,0)
Et ça nous donne ça:
Euuuuh... Attendez moi je recommence...
ET CA DONNE CA:
Houston ? Je crois qu'on a un petit problème là…
Mais pourquoi ça ne veut pas afficher mon image? Ne nous énervons pas, réfléchissons calmement…
… D'abord, l'image que je veut afficher est en .PNG alors que Processing ne semble accepter que les .JPG, donc je vais recommencer avec une image .JPG
978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9
978.978.9
978.978.9 978.978.9
978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9
978.978.9 978.978.9
978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9
978.978.9 978.978.9
978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9
978.978.9 978.978.9
978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9
978.978.9 978.978.9
978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9
978.978.9
978.978.9
978.978.9
978.978.9
978.978.9
978.978.9 978.978.9
978.978.9 978.978.9
978.978.9 978.978.9
978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9
978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9
978.978.9 978.978.9
978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9
978.978.9 978.978.9
978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9 978.978.9978.978.9 978.978.9978.978.9 978.978.9978.978.9 978.978.9978.978.9 978.978.9978.978.9 978.978.9978.978.9 978.978.9978.978.9 978.978.9978.978.9 978.978.9978.978.9 978.978.9978.978.9 978.978.9978.978.9 978.978.9
Etape 1
Snif :(
Je crois avoir trouvé comment faire. Il faut importer l'image dans le dossier data du projet Processing (je vous passe les détails).
CA MARCHE PAAAAAAAAAAAAAAS
Après avoir galéré pendant 1h, mon prof, m'a expliqué que le nom de mon image ne devait pas avoir d'espaces, ni d'accents, ni de caractères spéciaux. (&é"_ç';:) Pour que le programme puisse détecter l'image et l'afficher dans le code.
ET CA MARCHE !!!! YOUPIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII !!!!!
A suivre la semaine prochaine pour la prochaine étape...
Semaine Nr 2.
Etape 2
Allez ! C'est moment de s'y remettre! Maintenant, on va créer notre personnage.
-Créer le personnage basique (rectangle).
Commençons d'abord par le dessiner:
Je sais c'est très basique mais
vous allez vite comprendre pourquoi
Bon… ça, c'est joli, mais maintenant il faut l'afficher sur Processing comme pour le décor qu'on a fait.
On va ajouter un deuxième code pour charger l'image du personnage et l'afficher dans le code:
Mais visiblement, ça fait replanter mon code
Bon… Qu'est ce qui va pas? Visiblement, j'ai oublié de mettre le .png à mon personnage. On va commencer par l'afficher tout seul.
Et CA MARCHE !!!
Maintenant, on essaie d'afficher les deux...
A suivre la semaine prochaine pour la prochaine étape...
Et CA MARCHE !!!
Et CA MARCHE !!!
Semaine Nr 3.
Etape 3
-Créer un arrière plan démo (dessin)
Bon... On est sur la bonne voie, maintenant, il faut afficher un arrière plan derrière tout ça.
Et on arrête pas une vieille tradition, on va dessiner cet arrière plan.
Oui c'est moche mais j'ai fait ça vite fait.
Une fois qu'on a fait ça, il faut le mettre dans notre code, ce machin là. On va commencer par rouvrir le code de notre projet:
Comme vous l'avez vu, j'ai changé deux trois trucs:
-J'ai ajouté des variables au début du programme:
â—‹ gravity, qui définit la gravité (pour plus tard)
â—‹ x et yniveau, qui servent à afficher l'image du niveau aux cordonnées de ces deux variables, qui peuvent être modifiées.
â—‹Orix et y, qui fonctionne pareil mais pour le personnage, Ori
​
-J'ai décidé d'afficher Ori à la moitié de sa taille. (image(img1,Orix,Oriy,img1.width / 2, img1.height / 2))
La première chose à changer (ou ajouter) dans le code est img2, on va rajouter une image et on va l'attribuer à img2.
Et là, dans la fonction draw, on va demander d'afficher le décor, mais on va le faire EN PREMIER pour qu'il soit affiché derrière.
Et visiblement, ça semble marcher.
Note: Au début de la fonction draw, j'ai ajouté clear, qui suprimme toute les images précédemment dessinées pour pouvoir les redessiner par dessus, ça évite la superposition d'images.
A suivre la semaine prochaine pour la prochaine étape...
Semaine Nr 4.
Etape 4
-Créer des déplacements, sauts, gravité et collisions.
Vous avez vu ça ? Cette couleur jaune ça veut dire que je vais en baver...
Donc maintenant qu'on a notre personnage là, il va falloir le faire bouger.
C'est pour ça que dans le code qui affiche cette image, j'ai mis des variables à la place des cordonnées, pourquoi ? Parce que si je modifie les variables, ça modifie aussi ses cordonnées. Regardez :
Vous avez vu ? Ca marche ! Et surtout, on peut les modifier pendant l'exécution du code, c'est là que ça devient intéressant, parce que c'est là qu'on va créer le mouvement.
On va faire un test, dans Draw, on va modifier la variable Orix de 1 à chaque tour de boucle, ce qui devrait faire bouger notre personnage vers la droite (ou la gauche je sais pas...)
Beh?
​
Pourquoi ça marche pas?
Alors, qu'est ce qu'il va pas dans mon code?
Premièrement, j'ai testé pleins de codes différents pour faire bouger mon image, mais à chaque fois que la touche est détectée; ça fait planter mon programme. Le problème vient alors du cœur de mon code.
Semaine Nr 5.
Bon… Heu… je crois que je bute devant un problème de taille importante puisque ça fait une semaine que je suis dessus… Laissez moi vous expliquer ça…
Voyez vous, Processing n'a pas de réelle fonctionnalité pour détecter les touches et modifier les variables, c'est pourquoi il a fallu que je commence à coder ça moi même…
Mais, car il y a un mais, je pense
que, malgré les heures de
recherches que j'ai fait sur le
sujet, je pense que mon code
est défaillant; parce que dés
que je presse ne serais ce qu'une touche détectée par mon programme, ça le fait planter, mais pourtant j'ai essayé! J'ai essayé de résoudre le problème! Mais non ça veut pas, peu importe ce que je fais ça fait inlassablement tout planter. C'est pour ça que coder me fait rager, je sais même pas ce qui va pas ! Ni par où commencer! Si ça se trouve, c'est mon code entier qui est défaillant, ou alors c'est juste que Processing ne peut pas faire ce genre de choses! Je devrais donc tout recommencer depuis le début? Impossible, je vais pas tout refaire quand même? Vu comment j'ai galéré pour écrire 3 pauvres lignes… En fait, plus j'essaie de répondre à mes questions et plus j'en ai des nouvelles qui se posent, j'en ai marre, j'ai envie de laisser tomber ce projet qui m'énerve…
Ou peut être que pas...
Peut être que je suis plus proche de la réponse que je le pense, peut être que si je cherche un peu plus, je la trouverais. Ce qui me manque en fait, c'est de la motivation, mais au fur et à mesure que j'écris ces lignes, je me sens, comme une confiance, qui revient en moi, et je me dit que finalement, oui , ça va être possible.
OUI C'EST POSSIBLE!!!
Alors, qu'est ce qu'il va pas dans mon code?
Il faut qu'on fasse le point...
Logiquement, et je dis bien logiquement, le problème devrait venir de la manière dont j'ai créé mon code et comment il détecte les touches, ou bien ça pourrait être le fait qu'on ne pourrait pas déplacer une image avec des variable, mais une forme oui, je vais essayer.
Alors heuuuuuu… Par où je commence? Je sais toujours pas ...
Bon d'abord, comment on crée un rectangle? pas un image de rectangle mais le VRAI quadrilatère