Noméca

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

Archive pour juin 2013

1. Commentaires

Je tiens à remercier les gens qui ont “laché leurs coms” dans l’article précédent et qui m’ont donner des liens et conseils utile. Pour répondre à une des questions : Non le code n’est pas disponible pour le moment car bien trop laid à mon goût. Mais je suis disponible pour en parler par mail, prévenez moi dans les commentaires que vous m’avez écris, mon compte wefrag est lié à une ancienne boite. Et je pense mettre le code à disposition dès que je fournirais une démo online (car de toute façon, javascript oblige, il sera déjà à disposition donc autant bien le présenter).

2.Fais tourné le cône de vision et l’ombre projetée

Première chose à savoir, c’est comment je compte faire pour n’afficher que ce que le personnage “voit” selon sa ligne de vue et les obstacles. La réflexion est la suivante :

“J’affiche tout et je noircis ce que je ne vois pas”

Pour cela, je créer un masque, une image de la même taille que l’affichage et chaque pixel noir sera un pixel caché alors que chaque pixel blanc sera un pixel dans le champs de vision du personnage.

J’ai décidé d’utiliser le canvas pour cela. Donc je dessine un fond noir sur le canvas, puis j’y dessine le cône de vision (qui est un triangle pour le moment, mais cela sera facilement changeable par la suite) en blanc. Celui-ci dépends de l’angle du personnage qui lui même dépendant de la position du curseur. On récupère la position du curseur, on y fait un peu de trigo, on y intègre le FOV (qui est paramétrable) et on est partit.

L’étape suivante et d’analyser les tiles de la map, donc avec des boucles on analyse les différentes tiles utilisé, et on regarde leurs propriété (définit lors du chargement de la map) et si la tile ne laisse pas passer la vue on doit gérer l’ombre de cette tile.

Pour ce faire, voici le raisonnement. On dessine une forme  dont un des segments est un côté du tile et puis on tire des segments des extrémités du premier segment jusqu’au bord du canvas selon l’angle entre le joueur et les extrémités. Le schéma devrait vous permettre de me décrypté.

Exemple de l'ombre d'une tile (projetant deux segments)

Exemple de l'ombre d'une tile (projetant deux segments)

Donc ici on voit bien le segment 1-2 et 3-4 qui sont aligné avec le centre du personnage et qui font la première forme à remplir en noir (forme verte). Même raisonnement pour la seconde arête qui donne la forme rose.

J’effectue cela pour les 4 faces et pour toutes les tiles qui empêche la vision. Cela à plusieurs inconvénients:

- Utilisation de beaucoup de ressource, non pas à cause du nombre de boucle mais du nombre de dessin de projection d’ombre.

- Pas optimisé. J’ai prévu de changer la façon de faire pour faire une seule projection d’ombre par tile et pourquoi pas un algorithme pour regarder s’il y a des murs alignés de tile afin de diminuer le nombre d’affichage d’ombre différentes.

- Fonctionne à condition que la forme soit un carré.

Ensuite je récupère le tout sous forme de tableau grâce à la fonction qui va bien: “getImageData()” ( Cette fonction a déjà été décrite dans l’article précédent (pour ceux du fond qui dorment) ) et je met ce tableau de côté. J’affiche ensuite la carte, je récupère la carte affiché sous forme de tableau, et je compare chaque pixel au tableau des ombres, si le pixel du tableau des ombres est noir, je noircis le pixel du tableau de la map. Puis j’affiche la map.

Contrairement à ce que je pensais cette opération qui est une boucle assez longue (500*500 pixels) ne provoque pas de ralentissement. Et je réfléchis à intégrer une notion de lumière des pièces avec la même démarche.

3. Collisions : Isabelle s’est cognée contre les murs

La gestion des collisions est un sujet très récurent, et je ne la trouve pas spécialement intéressante. En très rapide voici comment j’ai fait. Lorsque je calcul le déplacement du personnage je regarde si la position d’arrivé se trouve dans une tile qui accepte le déplacement. Un peu comme avec le test pour savoir si la vision peut passer à travers une tile. Si cela ne va pas, j’empêche le déplacement, si cela va, le personnage se déplace.

Très simple, pas de notion de géométrie mais très limité aussi. Je considère mon personnage comme un point et du coup ses épaules, son armes (que j’intégrerai dans les prochains chapitres), etc passent à travers les murs. Une amélioration prévue sera de considérer le personnage comme un rectangle ou une forme plus compliqué, il y a assez de théorie online sur les collisions pour que cela soit faisable.

4. Vidéo

J’ai tenté de faire une vidéo, c’est ma première fois, et comme toutes les premières fois on ne sait pas trop ce qu’on fait et ça fini bien trop vite:

YouTube Preview Image

5. Was noch?

- Intégration d’arme, avec leurs caractéristiques.

- Gestion de l’inventaire

- Gestion du curseur

- Gestion des tirs et de la balistique

- Gestion du son visuel (Si vous êtes sages)

Et ce, dans une ambiance bon enfant sans sang ni insulte.. pas encore.

Petit tease cadeau:

mob