Noméca

La mécanique est notre amie, aimons la aussi! le blog de viveleltsi.

Archive pour la catégorie ‘Canvas’

DaDjinn c'est le Fluor de toit!

DaDjinn c'est le Fluor de toit!

1. Introduction

Il y a des indices qui ne trompent pas, lorsque vous commencez à faire un jeu vidéo juste pour le fun et pour meubler votre temps libre, c’est que vos études sont vraiment la glande. Celle-ci ne sont pas du tout dans le domaine de l’informatique et c’est important de le préciser. Je suis donc un amateur autodidacte qui code (comme un pied). Mais cela ne m’empêche pas de trouver intéressant de partager mon expérience avec vous, les ignorants du codes pour recevoir fleurs et bijoux, et vous autres, habitué des boucles et des conditions pour recevoir conseils et insultes.

2. Motivations

Je ne pense pas que j’avais consciemment prévu de faire ce que j’ai commencé, c’est plus un concours de circonstance. Au début, il n’était question que d’essayer de faire quelques chose avec la technologie HTML5 et Canvas, et de fil en aiguille ça s’est développé jusqu’à devenir un bordel infâme un “moteur” plus ou moins évolué.

Quant au motivations d’en parler, il s’agît comme déjà dit de récolter avis et conseils ainsi que peut-être enrichir les lecteurs d’une expérience sur ces technologies encore peu exploitées (du moins je trouve).

3. At the beginning

1

Première étape

C’est assez stupide de commencer de raconter le début lorsque les premières version n’existent plus, mais je vais imager mes propos à base de mauvaise retouche photo.

Donc l’idée de base était de faire un moteur 2D, vue de dessus avec un personnage centré sur le centre de l’image. Vu mes talents de graphiste, vous excuserez les bouses de pixel qui me servent de ressources graphique. Au début il fallait donc créer une map, y mettre un personnage sous forme de point, et gérer le déplacement du personnage (en fait c’est la map qui bouge, si vous avez suivi le concept un peu).

Pour gérer le déplacement, il n’y a pas de miracle, le canvas fonctionne comme une zone de dessin, donc on affiche une image, puis x temps après on efface tout et on en affiche une autre en gérant les modifications. Tout cela fait rapidement, on obtient l’illusion du mouvement (je viens d’inventer le film \o/).

Ensuite j’ai décidé de me pencher sur la map en elle même. J’avais vu dans le développement d’un jeu par Notch pour une concours quelconque (48 de codage non-stop machin chose) l’utilisation d’une image où chaque pixel est un tile de la map. Ne voulant pas m’amuser à créer des tableaux en code ou coder un mappeur pour le moment, j’ai décidé que c’était une solution assez rapide. Donc j’ai décidé d’utiliser la même technique. Initialement la map faisait 20 tiles x 20 tiles les tiles étant du 20×20px. Et sachant que le canvas faisait 500×500px j’avais une carte plus petite que le canvas.

J’ai décidé par la suite de “normaliser” mes map en 25×25 tiles (qui restent du 20×20px). J’ai donc fait des images de 25×25px où chaque pixel représente un tile de la map. Ne voulait pas m’embêter j’ai décidé d’utiliser la valeur RGB pour définir de quels tiles il s’agissait. Mais avant de continuer je vais vous montrer l’image de la map sous forme de pixel, ainsi que la map avec les tiles générée par celle-ci (les deux armes ne proviennent pas de la pixel map) et l’image regroupant les tiles de map:

Map pixel pour la génération de la map

Map pixel pour la génération de la map

Map généré par la map pixel

Map généré par la map pixel

Tile de la map

Tile de la map

Pour générer la Map j’utilise la couleur donnée en RGB par la Map pixel, j’ai utilisé la façon suivante (que je ne kiff pas..) R = coordonnée en x, G = coordonnée en y, B = élément de contraste uniquement utilisé pour y voir quelque chose quand je map sur mon programme de dessin. D’où l’aspect bleuté de la Map pixel sachant que j’utilise pour le moment que du 0 ou 1 rouge et 0 à 8 vert.. donc pas des masses (sur 256).

Bref, c’est assez moche mais ça fonctionne. Je me suis promis de faire un autre système à l’occasion.

Je vais peut-être juste préciser comment j’analyse la Map pixel, j’utilise une fonction du canvas assez simple : getImageData qui traduit une image en tableau explicitant RGB et Alpha, sous forme :

tableau[0] = R du premier pixel, [1] G du premier pixel, [2] B du premier pixel, [3] Alpha (transparence) du premier pixel, [4] R du deuxième pixel, etc, etc. C’est donc un tableau à une seule dimension, mais on peut facilement le changer en tableau à deux dimensions pour que cela soit plus facilement manipulable.

La dernière étape de ce commencement était d’y introduire le personnage, c’est donc ce que j’ai fait avec cette image baveuse:

perso

Rien de difficile ici, on charge la tile, on l’affiche au centre et on est content.

Ensuite il a fallu gérer son orientation (en fonction du curseur de la souris), pour cela j’ai récupéré une fonction qui captait la position de la souris (pas spécialement dur, mais j’avais la flème) et je l’ai intégré dans ma boucle d’itération entre deux images. Ce qui fait que la position est actualisé avant l’affichage du personnage. Avec un brin de trigo, on arrive facilement à savoir l’angle à donner au personnage. (Note pour ceux qui tente de le faire, attention aux cas critiques où la tangente vaut infini et n’oublier pas que deux angles déphasé de Pi ont la même tangente.

La fonction translate() et rotate() permet de center l’origine du canvas et de le tourner pour afficher le personnage avec l’inclinaison voulue.

Map avec personnage et son orientation

Map avec personnage et son orientation

Voila pour ces premiers pas, lorsque j’en étais là, ce n’était encore pour moi qu’un délire pour occuper mon temps libre. Ce n’était rien de plus qu’une démo technique du peu de ce que j’arrive à faire. Ah oui, sachant que je voulais faire un cône de vision pour le personnage (à cause de l’idée que me donnait ce “jeu” à ce moment là, mais j’en reparlerai dans le prochain billet) le fichier html s’appelait grâce à mon énorme imagination cone.html .

4. And so what?

la suite bientôt et au programme :

  • Gestion du cône de vision
  • Gestion de l’ombre “angle mort des murs”
  • Armes, sexe et rock’n'roll!