Je programme ma DS

avec Petit Computer

de

Grégoire et Marie-Noëlle de Woot

Collection if-then-else.academy

Éditions des 3 hibouks

Je programme ma DS avec Petit Computer - Première édition

Copyright (c) 2014 Éditions des 3 hibouks

Tous droits réservés. Aucune partie de ce livre ne peut être reproduite, enregistrée ou transmise, de quelque façon que ce soit et par quelque moyen que ce soit, sans le consentement préalable écrit de l'éditeur, à l'exception de l'inclusion de brèves citations dans une revue, un article, un livre, un blog ou un article universitaire.

D/2014/13.554/1

Dépôt légal: novembre 2014

ISBN de la version kindle: 978-2-930784-26-7

Éditions des 3 hibouks

Overijse, Belgique

http://3hibouks.com

Profil des auteurs

Grégoire a eu 11 ans au printemps dernier. Tout l'été, il a attendu sa lettre d'admission à Poudlard, en vain. Alors, il s'est tourné vers une autre forme de magie: la programmation de sa DS avec Petit Computer!

Mais, même s'il sentait qu'il y avait moyen de faire des trucs de ouf avec ce langage, dur dur de s'y mettre tout seul alors qu'il n'avait jamais programmé de sa vie et qu'il n'existait pratiquement aucune ressource à ce sujet en français.

Heureusement, sa maman, Marie-Noëlle, s'est prise au jeu avec lui. À deux, ils ont fouillé les forums, les wikis et tous les sites en anglais. Ils ont fini par comprendre, ils ont testé plein de fonctionnalités et, par essais et erreurs, ils sont arrivés au Graal: le premier jeu créé entièrement par Grégoire grâce à Petit Computer!

Tout heureux de leurs découvertes, Grégoire et Marie-Noëlle ont décidé de les partager avec toi pour que, enfin, il existe un bon (un excellent!) tutoriel:

- en français

- à la portée de tous.

C'est celui-ci que tu as entre les mains. Bien sûr:

- Les "pros" diront que le code n'est pas optimisé. C'est vrai: là où ça permettait d'être plus clair, quelques lignes de code qui pourraient encore être réduites ont été laissées.

- Les noms utilisés pour certaines variables sont parfois exagérément longs. C'est vrai: quand tu seras un développeur chevronné, tu en utiliseras des plus courts. Mais ici aussi, le but était que le code soit compréhensible le plus facilement possible.

Tous les exemples donnés ici ont été développés pour une DSi XL. Si tu as une 3DS ou une 3DS XL, tout est identique, à part la taille des écrans, comme expliqué ci-dessous.

Nous te souhaitons beaucoup de plaisir à la découverte de Petit Computer. Tu ne verras plus jamais ta DS de la même façon... Bon amusement!

Je programme ma DS avec Petit Computer

1. Installation et démarrage de Petit Computer

2. Premier programme: Affichage et animation d'un personnage

1. Afficher un personnage

2. Faire bouger le personnage

3. Animer le mouvement du personnage

3. Deuxième programme: Le personnage tire!

4. Troisième programme: Apparition d'ennemis, qui tirent aussi

5. Quatrième programme: Quand les tirs commencent à faire mal!

1. Mes tirs ont-ils touché l'ennemi?

2. Les tirs de l'ennemi m'ont-ils touché?

3. Calcul du score

6. Cinquième programme: On fignole!

1. Avec un bel arrière-plan, c'est encore mieux

2. Avec une belle intro, c'est plus pro

3. Et on anime les fins de partie

7. Sauver un programme et le partager

8. À toi de jouer!

1. Installation et démarrage de Petit Computer

Comme n'importe quel jeu, Petit Computer doit d'abord être acheté et installé sur la DS.

Au cas où tu n'aurais encore jamais acheté de jeu sur la boutique Nintendo DSi, voici comme procéder:

- à partir de ta DS, va sur la Boutique Nintendo DSi

- clique sur "Accéder à la boutique", puis sur "DSiWare", "Chercher des titres", "Recherche par nom"

- là, introduis "Petit Computer".

Pour le paiement, tu as le choix entre:

- un paiement online par carte de crédit

- l'utilisation d'une carte de points Nintendo prépayée (tu trouveras la liste des revendeurs pour chaque pays sur le site de Nintendo).

Dès que le paiement est effectué, Petit Computer est chargé sur ta DS. Bonne nouvelle: il ne vient pas seul, mais avec toute une série de programmes illustrant les (nombreuses!) possibilités de Petit Computer. Voyons ça.

Quand tu ouvres Petit Computer, tu te trouves face au menu suivant:

Clique sur "View Gallery" pour accéder aux programmes pré-installés. Tu obtiendras la liste suivante:

Pour passer d'un programme à l'autre, utilise les flèches vers le haut ou vers le bas sur la droite de l'écran.

Pour tester un des programmes, clique sur son nom, puis, pour confirmer que c'est bien celui-là que tu veux faire tourner, clique sur le bouton "Run" en bas à droite de l'écran inférieur. Par exemple, si tu as choisi "SAMPLE 1", tu obtiens alors, sur l'écran du dessus, une étrange addition de pommes (Apples) et d'oranges... Pourquoi? Pour le savoir, éditons le code.

Sur l'écran du bas, en-dessous du clavier, tu as un bouton "STOP". Clique dessus pour sortir de l'exécution du programme et retourner à la liste des programmes disponibles (voir image ci-dessus).

Au bas de cette page, clique sur le bouton "BACK". Sur l'écran qui apparaît alors, clique sur "Write Program", ce qui te donne les deux écrans suivants:

Outre le clavier, l'écran inférieur te présente, au-dessus, 5 menus: "FILE", "LOAD", "SAVE", "CONT" et "RUN". Clique sur "LOAD". Les caractères LOAD" s'affichent sur l'écran supérieur. Ajoutes-y le nom du programme que tu souhaites éditer, ici par exemple SAMPLE1, en n'oubliant pas de fermer les guillemets ("). En tout, tu as donc écrit:

. LOAD "SAMPLE1"

Clique sur la touche "Enter" du clavier. Le programme est alors chargé avec un délicieux bruit qui n'est pas sans rappeler les anciennes imprimantes matricielles des années '80... bon d'accord, "Je vous parle d'un temps que les moins de 20 ans ne peuvent pas connaîîîîîîîîîître" ;-)

Une fois le chargement terminé, clique sur le bouton "End", au bas de l'écran inférieur, puis sur "EDIT", toujours dans le bas de l'écran inférieur. Tu as alors le code du programme qui apparaît sur l'écran supérieur. Nous y voilà!

De quoi est fait ce programme?

Pages laissées intentionnellement blanches (extrait gratuit).

2. Premier programme: Affichage et animation d'un personnage

1. Afficher un personnage

Calculer des nombres de pommes et d'oranges, c'est bien, mais ce n'est quand même pas très excitant. Et si on commençait à dessiner des personnages de jeu, et à les faire bouger?

Première chose à faire: choisir ton personnage. Quand tu t'y connaîtras un peu plus, tu verras que Petit Computer te permet de dessiner toi-même tes propres personnages. Mais pour commencer, c'est plus facile d'utiliser un personnage qui existe déjà. Surtout que Petit Computer t'en propose toute une série, dans laquelle tu devrais trouver ton bonheur. Pour les voir, va sur le site de Petit Computer et télécharge leur manuel, là:

http://petitcomputer.com/manual/

Tu as le choix entre télécharger ce manuel en format pdf ou le lire en ligne:

Quand tu ouvriras ce manuel, tu verras qu'il est en anglais. Pas de panique, on ne va pas te demander de le lire! Va jusqu'au chapitre 7, dont le titre est "SPRITE". Dans la version du manuel disponible en ligne lors de la rédaction de ce livre, ce chapitre commençait à la page 24. Le mot anglais "sprite" veut dire lutin, farfadet. En clair, il s'agit de tous les personnages, objets, armes et effets que tu peux utiliser pour ton jeu. Les différents "sprites" disponibles en standard dans Petit Computer sont divisés en différentes catégories (les images qui suivent viennent du manuel de Petit Computer):

- éléments de jeu standard:

- petits garçons et sorciers:

- petits ennemis etc.:

- effets, objets, etc.:

- objets volants:

- ennemis plus grands, explosions, etc.:

- ennemis horizontaux plus grands:

- vaisseaux de combat:

Imaginons que tu aies envie, pour commencer, d'utiliser un sorcier. Regarde dans le deuxième de ces tableaux, celui qui montre des petits garçons et des sorciers. En-dessous de chacune de ces images, il y a un numéro. Prenons par exemple le sorcier qui est dans l'image numéro 100:

Crée un nouveau programme. Pour ça, à partir du menu principal de Petit Computer, choisis l'option "Write Program" puis, au bas de l'écran inférieur, clique sur le bouton bleu "EDIT". Ceci ouvre, sur l'écran supérieur, une "page" vide, sur laquelle tu peux commencer à écrire ton programme.

Pour être sûr qu'au moment où ton programme sera lancé il n'y aura plus sur l'écran aucun dessin ou texte restant d'un jeu précédent, ou de la partie précédente de ce jeu-ci, commence avec la commande "ACLS": elle efface tout ce qui pourrait traîner sur ton écran.

Autre précaution utile: pour être sûr qu'aucune de tes variables ne garde des valeurs d'une partie précédente, utilise la commande "CLEAR", qui vide toutes les variables de leur contenu éventuel.

Si tu veux mettre ces deux commandes sur une seule ligne, pas de problème: sépare-les d'un double point ":". Ce qui donne la première ligne de ton programme:

. ACLS : CLEAR

Pour dessiner un personnage, on utilise la commande "SPSET". Il faut donner à cette commande plusieurs informations, sous la forme de plusieurs nombres ajoutés à la suite de la commande elle-même:

- D'abord, on donne un numéro à notre personnage; comme ça, quand on voudra le faire bouger, l'animer ou vérifier s'il entre en collision avec un autre, on pourra dire à Petit Computer de quel personnage il s'agit.

- Ensuite, le numéro que porte son image dans la bibliothèque d'images de Petit Computer; comme on l'a vu plus haut, il s'agit ici du numéro 100.

- Puis on dit à Petit Computer quelles couleurs il doit utiliser pour dessiner ce personnage. Les couleurs sont rassemblées en 16 palettes, comme la palette d'un peintre sur laquelle se trouvent différentes couleurs. Tu peux voir ces palettes à la page 55 du manuel de Petit Computer, qui donne l'image ci-dessous:

- Chaque ligne de cette image correspond à une "palette", qui contient 16 couleurs. Les 16 palettes sont numérotées de 0 à 9 puis de A à F (on appelle ça une notation "hexadécimale"). Dans chaque palette, les 16 couleurs sont aussi numérotées de 0 à 9 puis de A à F. La palette n°4 nous semble pas mal pour notre sorcier, donc on va commencer avec celle-là. Libre à toi, bien sûr, de tester d'autres palettes en changeant ce paramètre de la commande SPSET...

- La valeur suivante peut être égale à 0 ou à 1: si elle est égale à 1, ça veut dire qu'on veut que le petit personnage soit inversé horizontalement, c'est-à-dire qu'on veut le dessiner comme s'il s'agissait de son reflet dans un miroir (à l'écran, on verra juste le personnage, pas le numéro 100; on ne l'a laissé ici que pour que l'inversion dans le miroir apparaisse clairement!):

- Si cette valeur est égale à 0, on garde l'image telle qu'elle était dessinée à la base.

- Même principe pour la valeur suivante, mais pour une inversion verticale (0 si on ne change pas l'image, 1 si on en prend une symétrie verticale):

- Le dernier paramètre qu'il faut passer à la commande SPSET permet à Petit Computer, s'il doit dessiner plusieurs personnages au même endroit, de savoir lequel doit être devant et lequel doit être derrière : cette valeur doit être égale à 0, 1, 2 ou 3, 0 correspondant au personnage le plus en avant (le plus proche de toi) et 3 à celui qui est derrière tous les autres (le plus éloigné):

Si on ne veut inverser le personnage ni horizontalement ni verticalement, on peut donc écrire la commande comme ceci:

. SPSET 0, 100, 4, 0, 0, 0

Reste à dire à Petit Computer à quel endroit de l'écran il doit dessiner notre sorcier. Ceci se fait à l'aide de la commande SPOFS, suivie des 3 paramètres suivants:

- Le numéro du personnage dont on parle (ici, 0, puisque c'est le numéro qu'on lui a donné quand on l'a créé avec la commande SPSET juste ici au-dessus).

- Sa coordonnée en x. Rappelle-toi la figure du premier chapitre: pour la commande LOCATE, on donnait la position en comptant des carreaux de 8 pixels sur 8 pixels à partir du bord supérieur gauche de l'écran. Ici, on doit donner les valeurs en pixels. Vu que la largeur totale de l'écran est de 256 pixels, si je veux placer mon personnage au centre de l'écran, je dis à Petit Computer de le placer en x = 128 (la moitié de 256).

- Sa coordonnée en y: vu que la hauteur totale de l'écran est de 192 pixels, le milieu de celui-ci correspondra à une valeur de Y = 96.

La commande pour placer notre personnage est donc:

. SPOFS 0, 128, 96

(En réalité, Petit Computer utilise les coordonnées ci-dessus pour placer le coin supérieur gauche du personnage; c'est donc le coin supérieur gauche de celui-ci qui sera centré avec cette commande. Si tu veux qu'il soit mieux centré, introduis plutôt SPOFS 0, 120, 88.)

Voilà. Résumons-nous, notre premier programme est:

. ACLS :CLEAR

. SPSET 0, 100, 4, 0, 0, 0

. SPOFS 0, 128, 96

Une fois que tu l'as tapé, clique sur le bouton orange "RUN" dans le bas de l'écran inférieur, puis sur le bouton "RUN" qui se trouve dans le haut de ce même écran inférieur, puis sur "Enter":

Et voilà, tu as dessiné ton premier personnage de jeu sur ta DS! :-)

2. Faire bouger le personnage

Pages laissées intentionnellement blanches (extrait gratuit).

Table of Contents

Titre

Profil des auteurs

Table

1. Installation et démarrage de Petit Computer

2. Premier programme: Affichage et animation d'un personnage

1. Afficher un personnage

2. Faire bouger le personnage