Celà fait longtemps que je veux réaliser un jeu du royaume, c'est à dire un jeu où l'on gère un domaine quelconque (oui, c'est le nom originel de ce genre de jeux). Eh bon, après environ 25 ans, me voilà à l'ouvrage.

mercredi 21 mars 2012

Afficher les villes

Bon. Il est temps de passer à la vitesse supérieure : Les villes.

Pour commencer, j'ai créé une image de ville toute simple, faite de petits cubes avec des portes : Ça peut représenter assez facilement une ville antique sous les pays chauds, genre mésopotamie, ce qui est très pratique puisque c'est là qu'elles sont sensé être apparues.

J'appelle cette image "ville.svg".

Maintenant, dans la partie "mod" du script, j'ajoute deux villes :

Eeeeeeet... le couper_coller via la souris n'est pas pris en compte par google-blogger. Ça fait rien, ils feront comme Apple et diront que c'est une inovation quand ils l'ajouteront). Heureusement, reste  CTRL+C (j'ai eu peur que ça ne fonctionne pas, après tout on est sous Linux).


// Ville préplacées
var ville_position = new Array();
var ville_nom = new Array();

ville_position[1] = "5*3";
ville_nom[1] = "Ville 1";

ville_position[2] = "6*13";
ville_nom[2] = "Ville 2";


Dans la variable "ville_position", je mets la position comme pour les rivières, c'est le plus simple.
Dans "ville_nom", je mets le nom de la ville.

Pour l'afficher sur la carte, un petit coup de

// Afficher les villes préplacée.

if (ville_position.indexOf(fleuve_element) != -1)
{
var ncase = "ville.svg";
case4[i3+"*"+j3] = document.createElement("img");
case4[i3+"*"+j3].src=mod+"/terrain/"+ncase;
case4[i3+"*"+j3].setAttribute('width',taille_case);
//case4[i3+"*"+j3].setAttribute('height',taille_case_vertical);
case4[i3+"*"+j3].setAttribute('id','case4['+i3+'*'+j3+']');
document.getElementById('ratsodie').appendChild(case4[i3+"*"+j3]);
case4[i3+"*"+j3].style.position = 'absolute';
case4[i3+"*"+j3].style.bottom = i2 + 'px';
case4[i3+"*"+j3].style.left = j2 + 'px';
case4[i3+"*"+j3].style.zIndex = j4+1;
}


Bref, même chose que d'habitude.

Jusque là, ça baigne, même si j'avais commencé par mélanger les case2, 3 et 4 (sinon, ça ne serait pas drôle), et bien sûr j'avais oublié de créer un tableau vide "case4" d'abord. Grr.


Prochains grands travaux : Afficher le nom de la ville au dessus de l'image.

Vous les voyez, les deux petites villes ?
Bon, ben j'ai réussi à télécharger l'image via Firefox (c'est vexant, mais quand ça veut...)


samedi 17 mars 2012

Optimisation des images

Plus j'avance, plus je me dis que l'utilisation de graphismes vectoriels pour les images lourdes et fréquentes (par exemple, les forêts) est une mauvaise idée.

Celà ne semble apporter qu'une bonne réaction au zoom, mais pour le reste les navigateurs souffrent comme c'est pas permis. Et comme il semble impossible à un javascript de modifier quoi que ce soit dans l'affichage d'une image SVG externe (genre, les couleurs), ça me fait une carte de plus en plus lourde, qui me fait planter la plupart des navigateurs.
Quand Firefox est le meilleur navigateur, c'est qu'il y a vraiment un problème...

Avant de voir s'il y a lieu de passer au bitmap (et l'absence de programme capable de gérer convenablement la transparence des PNG), j'ai commencé à voir si je ne pouvais pas améliorer l'affichage.

J'ai commencé par optimiser les scripts SVG. Une simple image peut ainsi passer de près de 500 ko à moins de 5 en virant le verbiage d'écureuil sous acide d'Inkscape. Le seul problème est qu'il faut penser à chaque fois à l'empêcher de sauvegarder en "svg inkscape" après toute nouvelle image.

'sont fous ces mecs là.

Ensuite, j'irai jeter un oeil à la transformation svg->bitmap avec mise en cache directement par le navigateur, dont j'ai entendu parler. Si ça marche vraiment, celà pourraît résoudre mon problème.

samedi 3 mars 2012

Ordre d'affichage des arbres

Ratsodie, pour afficher les forêts, divise chaque case en neuf, et met, nous l'avons vu, quelques arbres dans chaque case s'il y a lieu.

J'ai donc réalisé neuf images de forêts, chacune équipée d'arbres au niveau d'un neuvième de la taille d'une case de terrain. Ensuite, dans le code, une boucle de 1 à 9 affichait chaque morceau de forêt.

Mon problème est que je n'ai pas trop réfléchi, et j'ai fait s'afficher les morceaux de forêt dans cet ordre :

 1 - 4 - 7
 2 - 5 - 8
 3 - 6 - 9

Si vous avez lu ma dernière bafouille, vous pouvez vous rendre compte : Les arbres situés à l'est s'affichent par dessus ceux à l'ouest, C'est assez peu visible sur les images du blog, mais celles du jeu sont plus grandes, et là ça saute aux yeux.

Pour réparer, j'ai été au plus simple : Plutôt que modifier le code afin de lui faire afficher les images dans un autre ordre, ce qui s'avérait pour moi assez compliqué (contrairement au terrain, il n'y a qu'une seule boucle pour les forêts), j'ai simplement renommé les images de forêts afin de les faires coïncider avec l'ordre d'affichage souhaité.

En clair, les images ouest sont passées à l'est et vice-versa : 1, 2 et 3 sont devenues 7, 8 et 9, et inversement.

jeudi 1 mars 2012

L'ordre d'affichage des cases

Pour afficher les cases de la carte, Ratsodie s'y prend ainsi :


Boucle de 1 à nombre_de_lignes_de_la_carte
     Boucle de 1 à nombre_de_colonnes_de_la_carte
          Affichage de la case.
     Fin de boucle des colonnes
Fin de boucle des lignes

En clair, le jeu place la case Nord-Ouest, puis chaque case de la même ligne vers l'est.
Arrivé en bout de ligne, il recommence avec la ligne suivante, jusqu'à la dernière case de la carte, c'est à dire la case Sud-Est.

Le problème est l'index de profondeur : Chaque fois que le navigateur affiche une image, il la place par dessus les précédentes.
Celà peu paraître anodin, mais puisque Ratsodie affiche ses cases d'ouest en est, celà signifie que les cases situées à l'est sont au dessus des cases à l'ouest.

Bien sur, celà veut également dire que les cases au sud sont au dessus des cases au nord, mais ça c'est bien, puisqu'en 3D isométrique le sud est sensé être plus près du joueur : Normal donc qu'une case au sud puisse, éventuellement, en cacher une autre au nord.

Par contre, l'ouest est sensé être plus près du joueur que l'est. Donc si une case en cache sa voisine de l'ouest, ça ne va pas paraître visuellement confortable (en gros, l'effet 3D est détruit).

En quoi une case peut-elle cacher sa voisine ? Il y a déjà plusieurs possibilités dans Ratsodie à son niveau actuel de développement :

- Les forets dépassent des cases.
- Le fond des mers est plus bas que le niveau des cases.
- La partie "souterraine" des cases est également plus bas.

Exemple : Si on laisse Ratsodie afficher ses cases d'ouest en est, on va voir la partie souterraine des cases s'afficher par dessus la case immédiatement à l'ouest, alors qu'elle devrait être cachée par celle-ci.

J'avais trouvé la solution, que je connaissais déjà en partie à vrai dire : Le z-index.

En clair, chaque fois qu'un navigateur affiche quelque chose, il lui attribue un indice de profondeur (le z-index). Z, parce que que X pour la largeur, Y pour la hauteur et... Z pour la profondeur. Simpleme convention en géométrie.

Or, chaque nouvel objet affiché a un z-index supérieur au précédent (de 1, j'imagine).

Et vous savez quoi ? Le Z-index est un attribut comme les autres, et on peut donc dire au navigateur de donner un z-index différent à un objet qu'on veut afficher, exactement comme on peut le forcer à lui donner une taille ou un emplacement différent.

Je commence par calculer le z-index de la case que je veux afficher :

var j4 = (i*table_c)+(table_c-j);

En clair, pour chaque case, :

- Je prends le numéro de la ligne en cours (ici, i).
- Je multiplie ce numéro par le nombre de colonnes de la carte.
- Je prends encore le nombre de colonnes de la carte (ici, j).
- Et je lui enlève le numéro de la colonne en cours.
- J'ajoute les deux résultats.
- Ça me donne le z-index de la case en cours

Celà me donne des cases avec un z-index ressemblant à ceci :

4  -  3  -  2  -  1
8  -  7  -  6  -  5

De cette manière, les cases les plus lointaines (Est et Nord) ont bien un z-index inférieur à leurs voisines de l'Ouest et du Sud, et seront donc affichées en dessous.
Celà permet aux arbres de ne pas être coupés par la case juste au dessus, par exemple.

Ensuite, évidemment, j'ajoute le code suivant à la partie affichant l'image :

            case1[i3+"*"+j3].style.zIndex = j4;

L'image créée le sera donc avec un attribut de style "zindex" de valeur "j4", qui a été calculée juste avant.