Ouvrir | Auteur : David Souder - contact

EN : https://docs.google.com/document/d/1Zy4HhzP3yw_kNwRAO7ACzb3Gkcnh-NaamZNWE-UPUM4/pub


EasyGameProg SPACE 100

Personnaliser les images de votre jeu


Par David Souder - www.duinoama.com - - mars 2013 - Tous droits réservés


SOMMAIRE


1. Rappel sur le projet

2. Télécharger le code source Processing (=le jeu non encore compilé)

2. Vérifier la présence de Processing (ou téléchargement s’il est absent de votre ordinateur)

3. Modification des images du jeu (personnaliser votre jeu)


     1. Rappel sur le projet


EasyGameProg SPACE 100 est un logiciel faisant bouger différentes images sur l’écran d’un ordinateur pour donner vie à un jeu vidéo simple et personnalisable.

Il se présente sous forme d’un simple dossier contenant :

  1. le logiciel lui-même (qui ne nécessite aucune installation)
  2. un dossier data contenant les images à modifier

Le fonctionnement est le suivant :

  1. le logiciel gère le déplacement de toutes les  images ainsi que toute la logique du jeu
  2. les élèves modifient toutes les images du dossier data en fonction du thème choisi
  3. le logiciel est déjà configuré pour déplacer l’objet mobile en fonction :
  1. des touches appuyées au clavier
  2. des messages série reçu de la carte Arduino ou Picaxe
  3. des fréquences reçues sur la prise audio (en option)


     2. Télécharger le code source Processing (=le jeu non encore compilé)


Vous allez télécharger ce que l’on “appelle le code source”. Il s’agit des lignes de code écrites par le développeur mais pas encore converties en langage binaire (=0 et 1).

2.1. Cliquez sur le lien suivant :

| Télécharger le code source Processing |

2.2. Une nouvelle page doit apparaître.

Cliquez sur “Télécharger”.

2.3. Vérifiez que le téléchargement est bien parti. 

2.4. Une fois le téléchargement terminé, récupérez le.

Un dossier doit ensuite s’ouvrir avec votre dossier compressé appelé “UPLOAD - SPACE-MINI : 3

Placez ensuite votre souris au dessus du dossier téléchargé et faites “Clic droit : 4” puis “Copier : 5

Allez sur le bureau et faites “Clic droit : 6” puis “coller : 7

Attendez que votre dossier “UPLOAD SPACE-MINI” arrive sur le bureau. Vous devez normalement obtenir quelque chose comme ceci :

2.5. Vous allez extraire le véritable dossier source

A partir du dossier compressé (=archive). Placez votre souris au dessus de votre dossier compressé puis, faire “clic droit : 8” puis “Extraire tout : 9”.

2.6. Une fenêtre doit apparaître. Faites “Suivant” et encore “Suivant” et enfin “Terminé”.

Un nouveau dossier doit apparaître portant le même nom que le dossier compressé.

C’est votre dossier de travail.


     3. Vérification de la présence de Processing sur votre ordinateur


Processing est un logiciel gratuit (et portable) permettant de compiler un code source (=les lignes écrites par le développeur) en véritable jeu.

3.1. Vérifiez que vous avez bien un dossier nommé “Processing” ou équivalent.

Vérifiez bien car le récupérer peut être un peu long...

Si Processing est bien présent sur votre ordinateur => passez directement à l’étape 3.

Si Processing n’est pas présent, => passez à l’étape 2.2 (vous allez le télécharger)

3.2. Si vous n’avez pas Processing, vous allez le télécharger.

Pour cela

 Télécharger Processing pour Windows32 (si non déjà présent sur votre ordinateur) 

D'autres options (MAC, Windows64...)

Vous devez suivre la même procédure que précédemment :

-télécharger le dossier compressé Processing

-attendre la fin du téléchargement

-extraire le dossier compressé


     3. Modification des images du jeu


Information : toutes les images doivent être placées dans le dossier “data” lui-même déjà présent dans votre dossier de travail SPACE-MINI (celui que vous venez de télécharge).

3.1. Ouvrez le dossier “data” en :

3.2. A partir d’ici 2 solutions sont possibles :

SOLUTION 1 : Cette solution s’applique uniquement si vous n’avez pas créé d’images vous-même.

Si vous avez déjà créé vos images, passez directement à la SOLUTION 2.

Vous allez ouvrir et modifier chaque image.

3.3. Ouvrez l’image nommée :

SI01” en plaçant la souris au dessus de l’image et en faisant “Clic droit” puis ouvrir avec” puis “Paint”... L’image doit s’ouvrir...

3.4. Modifiez l’image afin de la personnaliser

Idéalement, vos dessins doivent avoir été réalisés sur feuille et respecter le thème du groupe

3.5. Cliquez ensuite directement sur “Fichier” puis “Enregistrer”

Comme l’image est déjà au bon format, il n’y a rien à faire de plus.

3.6. Vérifiez dans le dossier “data” que votre image est bien modifiée.

Remarque : vous n’êtes pas obligé de modifier toutes les images pour réaliser un test. Le jeu est testable à chaque étape de modification.

3.7. Vous allez tester votre première modification. Pour cela :

2.7.1. Revenez dans le dossier “Sketch...” en cliquant sur “dossier Parent” (ou équivalent)

Voici le dossier de travail avec tout ce qu’il faut pour fabriquer votre jeu :

3.7.2. Cliquez 2 fois sur le fichier “sketch....pde”.

Une fenêtre équivalente à celle-ci doit s’ouvrir. Ne vous préoccupez pas des lignes de programme. C’est le code source...

3.7.3. Pour tester votre jeu (personnalisé), cliquer sur la petite flèche comme montré ci-dessous.

Votre jeu doit s’ouvrir et doit pouvoir être joué avec les flèches du clavier.

Vous avez maintenant 3 fenêtres :

  1. Le dossier de travail (à laisser ouvert)
  2. La fenêtre du logiciel EasyGameProg
  3. La fenêtre du jeu

3.7.4. Vous aller stopper proprement le eu avant de modifier d’autres images

Il n’est pas possible de modifier une image qui est en cour d’utilisation !

Avant d’essayer de modifier une autre image, cliquez sur le bouton STOP

POUR INFORMATION :

Il est aussi possible d’utiliser Picaxe ou Arduino à condition qu’ils soient correctement installés

-Un programme Arduino exemple est disponible grâce au bouton “Programme Arduino exemple...”

sur cette page : http://www.duinoam.com/crbst_40.html

-Des TP d’apprentissage sur l’utilisation d’Arduino avec EasyGameProg sont disponibles ici :

  • Atelier 01 : Premier programme Arduino avec ArduBlock (=Arduino en mode graphique)
  • Atelier 02 : Envoyer des informations séries avec ArdduBlock
  • Atelier 03 : Exploiter les messages série avec ArduBlock

-Une aide pour installer ArduBlock (=Arduino en mode graphique - gratuit) :

-Vous voulez en savoir plus sur EasyGameProg ?

SOLUTION 2 : Cette solution concerne ceux qui ont déjà créée des images.

Vous         allez veiller à vérifier

Nous allons prendre un exemple classique où :

3.10. Ouvrez le dossier dans lequel vous avez créée toutes vos images

Dans mon exemple, seules 2 images sont terminées.

3.11. Sélectionnez toutes vos images (pour moi, c’est uniquement 2 !)

3.12. Sélectionnez toutes vos images (pour moi, c’est uniquement 2 !)

Vous allez copier vos images avec :

  1. Souris au dessus d’un fichier sélectionné
  2. Clic droit
  3. Copier

3.13. Retournez dans le dossier “data” (le même que précédemment)

3.13. Vous allez coller vos images

Faire “Clic droit” puis “Coller”

Vos images doivent s’ajouter à celles déjà présentes dans le dossier “data”

3.14. Vous allez rouvrir votre image (dans Paint)

Pour cela :

  1. Placer le souris au dessus de l’une de vos images
  2. Cliquez avec le bouton droit de la souris
  3. Sélectionnez “Ouvrir avec...”
  4. Sélectionnez “Paint”

Paint doit s’ouvrir avec votre image

Vous pouvez apporter des modifications si besoin mais le but est

  1. d’enregistrer au bon format (.PNG et rien d’autre)
  2. de remplacer l’image originale (ici, c’est l’image du fond)

3.15. Vous allez enregistrer votre image à la place de l’originale

L’image que j’ai choisie doit remplacer l’image de fond. Ne vous trompez pas !

-Faire “Fichier” puis “Enregistrer sous (ou équivalent)

Une boîte de dialogue doit s’ouvrir

-Dans Type sélectionnez .PNG (c’est important).

Paint travaille maintenant avec le bon format.

-Vous allez écraser l’image de fond originale par la vôtre. Pour cela :

1-Cliquez :

-une fois sur “Bureau

(sauf si vous avez décidé de placer votre dossier de travail ailleurs)

-deux fois sur “UPLOAD EasyGameProg...

2-Ensuite cliquez :

-deux fois sur “Sketch...

-deux fois sur “data

Vous retrouvez le contenu original de “data” avec toutes  les images.

3-Sélectionnez l’image que vous voulez écraser

Pour l’exemple proposé, c’est “IMAGE_DE_FONT” mais pour vous, c’est peut-être autre chose.

4-Cliquez sur “OUI” pour confirmer

Le dossier “data” à une nouvelle image de fond.

3.16. Vous allez tester les modifications apportées à votre jeu

Pour cela, cliquez une fois sur la “petite flèche” de Processing

Votre jeu doit s’ouvrir et doit pouvoir être joué avec les flèches du clavier.

Remarque : il est possible de rendre le contour noir des images transparent mais ce n’est pas l’objet de ce tutoriel. Nous nous contenterons dans un premier temps de ce résultat. On peut aussi choisir une même couleur de fond uniforme pour toutes les images (par exemple noir).

3.17. Vous allez tester les modifications apportées à votre jeu

Vous ne pouvez pas faire des modifications des images

si le jeu est en cours d’utilisation.

Il faut d’abord cliquer sur le bouton STOP !

3.17. Vous pouvez continuer en adaptant de cette façons toutes les images que vous avez déjà créées.

3.18. Si vous n’avez pas encore modifié toutes les images et que vous voulez le faire. Vous pouvez suivre la SOLUTION 1 (disponible plus haut dans ce document)

SOLUTION 1 = modifier les images d’origine pour les personnaliser (voir plus haut)

 COMPLEMENTS :

C1-Récapitulatif des noms utilisés pour les images

Arrière plan

IMAGE_DE_FOND.png

Tombante

(haut/bas)

OBJETS_TOMBANTS.png

Pilotée

(gauche/droite)

OBJET_MOBILE.png

Images du tube

ImageDuBas01.png

//

ImageDuBas02.png

//

ImageDuBas03.png

//

ImageDuBas04.png

//

ImageDuBas05.png

//

...

...

//

ImageDuBas20.png

                                               

C2-Récapitulatif des images utilisées pour le tube


Document pour le compte de www.duinoam.com par David Souder - Electronique programmée en collège Arduino / Picaxe

www.duinoam.com - www.arduinoedu.cc - www.easygameprog.com - Souder David - 2013 Tous droits réservés