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.

dimanche 29 janvier 2012

Donc...

Donc, voilà où j'en suis à l'heure où je crée ce blog. J'essaierai de progresser un peu chaque semaine. Ça dépendra du temps qu'il me restera.

La prochaine fois, je pense ajouter les collines.


Les forêts - Affichage

Maintenant que nous avons réglé notre problème, voilà comment Ratsodie affiche ses bouts de bois.

D'abord, je crée un tableau :

kf = new Array();

Ensuite, juste après l'accolade fin de l'affichage des rivières, j'ajoute ceci :

if (foret[i][j]==1 && mer != 1)
{
for (var k=1;k<10;k++)
{
if (kf[k]==0)
{
ncase = "foret_"+k+".svg";
case3[i3+"*"+j3] = document.createElement("img");
case3[i3+"*"+j3].src=ncase;
case3[i3+"*"+j3].setAttribute('width',taille_case);
//case3[i3+"*"+j3].setAttribute('height',taille_case_vertical);
case3[i3+"*"+j3].setAttribute('id','case3['+i3+'*'+j3+']');
document.getElementById('ratsodie').appendChild(case3[i3+"*"+j3]);
case3[i3+"*"+j3].style.position = 'absolute';
case3[i3+"*"+j3].style.bottom = i2 + 'px';
case3[i3+"*"+j3].style.left = j2 + 'px';
case3[i3+"*"+j3].style.zIndex = j4+1;
foretoui=0;
}
}
}


Rien d'extraordinaire, comme vous le voyez. Je pense que la plus grande partie de ce code d'affichage d'image pourrait aller dans une fonction que les parties pour le terrain, les rivières et la forêt appelleraient en lui passant "ncase, i2, j2, i3, j3 et j4 (les coordonnées).

Je veux dire, dès que je saurais si on PEUT faire des fonctions en javascript...

À vrai dire, je ne sais pas s'il est vraiment utile de donner une variable différente à chaque image, et s'il ne serait pas plus simple d'appeler tout ça "image" plutôt que caseX[blablabla+"*"+blablabla], et point à la ligne. J'essaierai ça.

Le code commence par vérifier qu'il y a bien une forêt dans la case, mais pas la mer.

Ensuite, on fait une boucle pour les neuf parties de case.
Pour chacune, on vérifie que son kf est bien à 0 (si une autre partie de Ratsodie a mis cette valeur à 1, cela veut dire "pas de forêt ici")

Oh, et ne pas oublier :
Le tableau "kf" sert à indiquer s'il y a une forêt dans chaque sous-case (1 à 9).
Il faut donc le vider à chaque nouvelle case affichée. Or, apparemment, il n'existe pas de moyen simple pour vider un tableau (le javascript doit avoir été prévu pour des scripts de toute petite taille au début de sa carrière. Il n'est pas dit qu'on ait prévu qu'on puisse un jour avoir besoin de réutiliser un tableau).

Donc, je fais comme ça :

            for(var k2=0;k2<10;k2++) {kf[k2]=0;}

que j'ajoute juste juste au début de la boucle "J". Ça met toutes les valeurs du tableau à 0.

Dernier point :

kf[5]=1;
if (fleuve.indexOf(fleuve_element_n) != -1) {fleuve_voisin+=1;
kf[4]=1;}
if (fleuve.indexOf(fleuve_element_e) != -1) {fleuve_voisin+=2;
kf[8]=1;}
if (fleuve.indexOf(fleuve_element_s) != -1) {fleuve_voisin+=4;
kf[6]=1;}
if (fleuve.indexOf(fleuve_element_o) != -1) {fleuve_voisin+=8;
kf[2]=1;}

La partie ajoutée (au début du code affichant les fleuves) est en rouge.


En clair, quand il y a un fleuve dans la case, Ratsodie vérifie s'il y en a aussi un dans une case voisine afin de les joindre. Si tel est le cas, il ne peut pas y avoir de forêt dans la sous-case où va passer le cours d'eau, aussi Ratsodie passe-t'il la valeur de kf[numéro de la partie de case/forêt] à 1, ce qui sera vu lorsqu'il sera temps d'afficher la forêt comme un "pas d'arbres ici".

Et, bien entendu la case kf 5, qui est au centre, ne peut jamais avoir d'arbres s'il y a un fleuve dans la case, puisque tous les fleuves passent toujours par le centre de la case.



Une case qui dépasse

Si vous avez l'oeil, vous avez pu remarquer, dans la liste des bouts de forêt, que certaines images sont plus grandes que d'autres :


La numéro 7, par exemple, est visiblement plus haute.

En fait, c'est parce qu'un problème, auquel je n'avais pas pensé, m'est tombé sur le crâne.
J'avais, fort logiquement, commencé par afficher les images de manière tout à fait normale, en leur donnant des coordonnées. En clair, je mettais leurs coordonnées sur leur style LEFT et TOP. Gauche et Dessus.

Ça paraissait logique, jusqu'à ce que je comprenne que non, en fait.

Parce que, vous l'imaginez, une image a peu de raisons de dépasser sa case par le dessous, d'autant qu'il y a déjà un sous-sol inclu, et que Ratsodie affiche les cases plus au sud par dessus (il commence par le coin Nord-Ouest de la carte, puis fait chaque ligne l'une après l'autre jusqu'à arriver au coin Sud-Est).

Par contre, les raisons de dépasser par le dessus (le Nord, quoi) sont nombreuses. Le premier que j'ai vu fut la forêt : Si un arbre pousse tout en haut de la case, son sommet va, logiquement, dépasser le haut de la case.

Et cela sera la même chose avec les montagnes, les villes, etc.

Comment faire ?

Parce que le problème, voyez-vous, ce n'est pas qu'une image soit plus grande que la case où elle est sensée s'afficher. C'est que puisque Ratsodie affiche les images par leur haut ("style.top"), comme on fait habituellement, il va mettre le haut de l'image en haut de la case... et repousser tout le reste de l'image vers le bas.

Je ne sais pas si je suis bien clair, alors un petit dessin :


Dans le premier cas, vous voyez un petit damier de six cases.
Comme vous pouvez le constater, la case rose, ayant la même taille que ses voisines, s'insère parfaitement dans le damier.

Dans le second damier, vous pouvez voir que la case rose est plus haute. Mais comme Ratsodie l'affiche en l'alignant par le haut (style.top=coordonnée de l'image), l'image est repoussée vers le bas, ce qui n'est pas ce que je veux puisque c'est le sommet des arbres qui dépasse, pas leurs racines !

Moi, ce que je veux, c'est comme dans le troisième damier : Ratsodie aligne l'image sur ses voisines, mais par le bas ! Et ainsi, si quelque chose doit dépasser, ce sera par le haut.

La solution m'a tarabusté un petit peu, jusqu'à ce que je trouve ceci : On PEUT aligner une image par le bas. Au lieu de "style.top", on fait "style.bottom", et voilà.

C'est bête, mais encore fallait-il le savoir.



Les forêts - principe

Pour les forêts, deux choix possibles s'offraient à moi.

Tout d'abord, je pouvais créer un terrain "forêt" : Une case pouvait être une plaine déboisée OU une forêt, par exemple.

Mais il m'était également possible de considérer la forêt comme un ajout à la case, comme le cours d'eau.

C'est cette dernière solution que j'ai choisi. Non qu'elle soit forcément la meilleure (elle occupe plus de mémoire), mais parce qu'elle réduit le nombre de "terrains de base", et je préfère séparer les torchons et les serviettes.

La forêt est indiquée dans un tableau exactement comme le terrain de base :

foret1 = new Array("1","1","1","1","1","1","1","1","1","1","1","1");
foret2 = new Array("1","1","1","1","1","1","1","1","1","1","1","1");
foret3 = new Array("1","1","1","1","1","1","1","1","1","1","1","1");
foret4 = new Array("1","1","1","1","1","1","1","1","1","1","1","1");
foret5 = new Array("1","1","1","1","1","1","1","1","1","1","1","1");
foret6 = new Array("1","1","1","1","1","1","1","1","1","1","1","1");
foret7 = new Array("1","0","0","1","1","1","1","1","1","1","1","1");
foret8 = new Array("0","0","1","1","1","1","1","1","1","1","1","1");
foret9 = new Array("0","0","1","1","1","1","0","1","1","1","1","1");
foret10 = new Array("0","0","0","0","0","0","0","0","0","0","1","1");
foret11 = new Array("0","0","0","0","0","0","0","0","0","0","0","0");
foret12 = new Array("0","0","0","0","0","0","0","0","0","0","0","0");
foret = new Array(foret1,foret2,foret3,foret4,foret5,foret6,foret7,foret8,foret9,foret10,foret11,foret12);


Ensuite, je n'oublie pas un petit

case3 = new Array();

comme pour les cours d'eau.


Un autre problème, ennuyeux celui-là, m'apparu : La forêt, on la place par dessous ou par dessus la rivière ?

Non, parce que si la forêt est dessus, on ne va plus voir la rivière.
Et si elle est dessous, franchement, on aura l'air de quoi avec notre rivière volante ?

La solution que j'ai trouvé est toute simple, et à vrai dire j'y avais pensé au moment où de travaillais sur les cours d'eau (j'étudiais les deux en même temps).

Il s'agit de diviser chaque case en neuf parties. Parties purement virtuelles bien entendu.

Suivez-moi bien :
J'ai déjà dit que Ratsodie regarde non seulement s'il y a une rivière dans la case qu'il affiche, mais également s'il y en a dans les cases Nord, Est, Sud et Ouest. Il suffit de faire couler la rivière au centre de la carte, et on peut dès lors diviser toute case en neuf parties, dont la "croix centrale" peut être occupée par une rivière.

Restait à réaliser neuf cases affichant neuf bouts de forêt. Je ne me suis pas fatigué, et les neuf bois sont identiques à part leur emplacement sur la case :



Cours d'eau et océans

Pour ce qui est de la jonction des cours d'eau et de la mer (ou d'un lac), j'avais la possibilité de faire comme dans les jeux "Civilization", c'est à dire que lorsqu'une rivière arrive dans une case voisine de la mer, elle ne va pas plus loin et la rejoint via une embouchure quelconque.

J'ai personnellement voulu laisser le choix au créateur de carte de décider où le cours d'eau rejoint la mer. Cela permet, par exemple, de faire couler un fleuve non loin de l'océan : Si vous prenez une carte du monde, vous découvrirez qu'à l'échelle de la planète, beaucoup de cours d'eau coulent près d'une mer sans forcément s'y jeter : L'Amazone et le Pacifique, le Nil et la mer Rouge, etc.

Ce que j'ai fait est donc qu'un fleuve ne coule que vers la case où se trouve un autre fleuve. Pour rejoindre la mer, ou un lac, il suffit donc de le faire couler DANS la mer. Puis j'ai interdit à Ratsodie d'afficher un cours d'eau si la variable "mer" vaut 1, c'est à dire si la case en question est une étendue d'eau.

Cours d'eau


Pas de belle carte sans cours d'eau. Non seulement ils sont un embellissement graphique non négligeable, mais ils aident à se repérer et peuvent également être très utiles : La présence d'un fleuve a toujours été primordiale dans l'établissement de nouvelles villes.

Des cours d'eaux meublent tout de suite une carte.
Les cours d'eau sont affichés après le terrain de base. Eux aussi sont directement dans le javascript, pour la même raison que le terrain :

fleuve = new Array("1*3","2*3","3*3","3*4","5*4","5*5","6*5","7*5","8*5","8*6","8*7","8*8","8*9","9*9",
"10*9","3*10","3*9","4*4","4*9","5*9","6*9","6*8","6*7","6*6","3*11","3*12","2*11",
"4*11","4*7","4*8","5*1","5*2","5*3","4*2","1*4","1*5","1*6","1*7","1*8","2*6","2*1");

Il n'y a qu'un seul tableau, et il est monodimensionnel. Chaque élément du tableau indique une coordonnée de la carte (d'abord la ligne, puis la colonne, un asterisque - qui à ma grande suprise est un mot masculin. On apprend tous les jours - servant à les délimiter).

Par exemple, le premier élément est "1*3". Celà veut dire qu'il y a un cours d'eau ligne 1, colonne 3

On utilise pour l'instant les éléments suivants :

Seize éléments pour les cours d'eau.
Il est fort probable que j'en rajoute par la suite, ne serait-ce que pour les embouchures (estuaires, deltas, etc).

EDIT : J'ai renommé certains depuis la prise de cette image. Les images dont la valeur commence par un 0 ont perdu celui-ci (sinon, beh Ratsodie ne les trouve pas).


Le principe d'affichage, maintenant :

Chaque fois que Ratsodie affiche une case de terrain, il regarde s'il y a une entrée correspondante dans le tableau "fleuve" (cours d'eaux).

Si c'est le cas, il examine les six cases voisines Nord, Est, Sud, Ouest, et regarde s'il y a un cours d'eau dedans.
  • Nord vaut 1 point ;
  • Est vaut 2 points ;
  • Sud vaut 4 points ;
  • Ouest vaut 8 points ;
Ensuite, il fait l'addition, et le total est également le numéro de l'image de cours d'eau (riviere_X.svg, où X est un nombre), qu'il affiche par dessus le terrain.

Je commence donc par définir

case2 = new Array();
J'ignore si je peux reprendre le "case1" du terrain, simplement.


Puis, juste après le code affichant mon terrain, mais avant de refermer l'accolade, je fais ça :

var fleuve_element = i3+"*"+j3;
if (fleuve.indexOf(fleuve_element) != -1 && mer !=1)
{
var fleuve_element_n = (i3-1)+"*"+j3;
var fleuve_element_e = (i3)+"*"+(j3+1);
var fleuve_element_s = (i3+1)+"*"+j3;
var fleuve_element_o = (i3)+"*"+(j3-1);
var fleuve_voisin = 0;
  if (fleuve.indexOf(fleuve_element_n) != -1) {fleuve_voisin+=1;}
  if (fleuve.indexOf(fleuve_element_e) != -1) {fleuve_voisin+=2; }
  if (fleuve.indexOf(fleuve_element_s) != -1) {fleuve_voisin+=4; }
  if (fleuve.indexOf(fleuve_element_o) != -1) {fleuve_voisin+=8; }

var ncase = "riviere_"+fleuve_voisin+".svg";


case2[i3+"*"+j3] = document.createElement("img");
case2[i3+"*"+j3].src=ncase;
case2[i3+"*"+j3].setAttribute('width',taille_case);
//case2[i3+"*"+j3].setAttribute('height',taille_case_vertical);
case2[i3+"*"+j3].setAttribute('id','case2['+i3+'*'+j3+']');
document.getElementById('ratsodie').appendChild(case2[i3+"*"+j3]);
case2[i3+"*"+j3].style.position = 'absolute';
case2[i3+"*"+j3].style.bottom = i2 + 'px';
case2[i3+"*"+j3].style.left = j2 + 'px';
case2[i3+"*"+j3].style.zIndex = j4;

}

Ce qui devrait faire (si je ne me suis pas gouré dans le couper-coller) l'image au début de ce message.


Affichage de la carte

Maintenant qu'on a une carte, le principal soucis est : Comment l'afficher.
Après pas mal de tâtonnements, voilà où j'en étais, à peu près :


case1 = new Array();

for(var i=0 ; i < table_l ; i++)
{
for(var j=0 ; j < table_c ; j++)
{

var i2 = (table_l*taille_case/4)-i*(taille_case/4)+(j*(taille_case/4));
var j2 = 50+(j*taille_case-(j*taille_case)/2)+(i*taille_case/2);
var i3 = i+1;
var j3 = j+1;
var j4 = (i*table_l)+(table_c-j);

var mer=0;

// Afficher le sol

if (table[i][j]=="11") { ncase = "tempere_01.svg"; }
else if (table[i][j]=="01") { ncase = "mer_01.svg"; mer=1; }
else if (table[i][j]=="02") { ncase = "mer_02.svg"; mer=1; }
else if (table[i][j]=="03") { ncase = "mer_03.svg"; mer=1; }
else if (table[i][j]=="04") { ncase = "lac_01.svg"; mer=1; }
else if (table[i][j]=="05") { ncase = "lave_01.svg"; mer=1; }

case1[i3+"*"+j3] = document.createElement("img");
case1[i3+"*"+j3].src=ncase;
case1[i3+"*"+j3].setAttribute('width',taille_case);
//case1[i3+"*"+j3].setAttribute('height',taille_case_vertical);
case1[i3+"*"+j3].setAttribute('id','case1['+i3+'*'+j3+']');
document.getElementById('ratsodie').appendChild(case1[i3+"*"+j3]);
case1[i3+"*"+j3].style.position = 'absolute';
case1[i3+"*"+j3].style.bottom = i2 + 'px';
case1[i3+"*"+j3].style.left = j2 + 'px';
case1[i3+"*"+j3].style.zIndex = j4;


 }}



Comme je l'ai déjà écrit, ça (doit) donne(r) ça :

La variable "mer" est là pour indiquer à Ratsodie de ne pas y planter de choses comme des arbres. C'est juste une facilité quand on trace la carte des forets.

Codage de la carte



J'ai quelques vagues idées sur ce que je voudrais comme résultat d'une génération aléatoire de carte, mais pour le moment aucune idée sur la manière de programmer ça.

Donc, je me suis contenté d'une carte pré-créée.

Les données de la carte se trouvent directement dans le code JS. J'ignore encore comment faire lire (et filtrer) un fichier externe par javascript, donc voilà :

table1 = new Array("11","11","11","11","11","11","11","11","11","11","11","11");
table2 = new Array("11","11","11","11","11","11","11","11","11","11","11","11");
table3 = new Array("11","11","11","11","04","04","04","11","11","11","11","11");
table4 = new Array("11","11","11","04","04","11","11","11","11","11","11","11");
table5 = new Array("11","11","11","11","11","11","11","11","11","11","11","11");
table6 = new Array("11","11","11","11","11","11","11","11","11","11","11","11");
table7 = new Array("11","01","01","11","11","11","11","11","11","11","11","11");
table8 = new Array("01","01","11","11","11","11","11","11","11","11","11","11");
table9 = new Array("11","11","11","11","11","11","01","11","11","11","11","11");
table10 = new Array("11","01","01","01","01","01","01","01","01","01","11","11");
table11 = new Array("01","01","02","02","02","02","02","02","02","02","01","01");
table12 = new Array("01","02","02","02","02","03","03","03","03","02","02","02");


Je commence par entrer le terrain de base pour chaque carte. "11" signifie par exemple le sol, 03 l'océan, etc.
Je place chaque ligne dans un tableau séparé, parce que c'est plus lisible.


table = new Array(table1,table2,table3,table4,table5,table6,table7,table8,table9,table10,table11,table12);

var table_l=12;
var table_c=12;


Maintenant, j'indique le nombre de lignes de la carte ("table_l"), c'est à dire sa hauteur Nord-Sud, et le nombre de colonnes ("table_c"), c'est à dire sa largeur Est-Ouest, et je place chaque ligne de la carte dans une vaste table appelée Table (!), qui est donc un tableau multidimensionnel ("table" contient tous les "tableX", qui contiennent chacun les cases de leur ligne).

Mon principal problème ici est que je voudrais bien utiliser la variable "table_l" pour, à l'aide d'une boucle quelconque, genre "for", entrer toutes les lignes automatiquement dans Table sans avoir à faire ce long "new array" avec les "table1, table2, table3 ... tableN" dedans.
Imaginez-vous le bordel avec une carte de 200 lignes ?

Une idée ?




Outils de programmation

Ah oui, je vois que j'ai omis de préciser avec quoi je veux réaliser celà.

Ben, d'abord, pour me simplifier la tâche au maximum, c'est un jeu par navigateur. C'est à dire que c'est le navigateur internet (IE, Opera, Firefox, Safari... Ce que vous voulez) qui s'occupe de l'affichage.
Parce que c'est une grosse part de la programmation dont je n'ai pas à m'occuper. Réinventer la roue, j'aime pas trop.

Ensuite, c'est un jeu entièrement "côté client". C'est à dire que le serveur n'a pas besoin de faire tourner quelque code que ce soit.
Les avantages sont, pour moi, les suivants :
  1. C'est beaucoup plus facile à programmer ;
  2. Ça coûte moins cher, parce que les serveurs faut les louer ;
  3. Beaucoup moins de problèmes de sécurité, puisque le jeu ne sort pas de chez le joueur.
Les langages utilisés sont le javascript, parce qu'il est relativement simple et, au final, fait ce qu'on lui demande du moment qu'on ne cherche pas à réaliser un programme destiné à concurrencer World of Warcraft.
Qui plus est, il y a plein de gens qui l'utilisent, et la plupart des navigateurs internet sont maintenant munis d'une console d'erreurs qui permet de voir plus ou moins où on s'est trompé.

Je n'ai jamais utilisé de "framework", et honnêtement je n'ai pas l'intention de me lancer là dedans.

Pour mon codage, je le fais dans Geany, une sorte de super bloc-notes qu'on trouve sous Linux, mais j'imagine que l'équivalent doit se trouver sous Windows ou Mac.
J'aime bien Geany parce que, lui non plus, y fait pas chier. Il me met les numéros des lignes, me souligne les accolades ouvrantes et fermantes, et me colore différement les différents éléments du code (genre variables, mots-clés, etc.). À part ça, il y a un bouton "enregistrer" qui m'enregistre directement mon fichier sans m'em... nuyer avec un quelconque "projet", un bouton "ouvrir" quand je veux l'inverse, il comprend le CTRL-Z pour effacer ma dernière ânerie, la touche TAB fonctionne, et voilà tout.
Quand on a besoin de plus, c'est qu'on ne fait déjà plus dans ce genre de projets.

Pour réaliser mes dessins, hélas sous Linux c'est un peu la cata. Heureux les macosiens et windoziens qui ont Photoshop. Nous on a Gimp.
Fermons la parenthèse.

Pour réaliser des dessins vectoriels, qui sont après tout l'idéal quand on veut faire du dessin au trait et des aplats de couleur (les graphismes de Ratsodie sont en vectoriel, mais il peut utiliser n'importe format reconnu par les navigateurs. C'est juste que moi je les fais en vectoriel), j'utilise Inkscape.
Pas que je sois emballé, mais Illustrator sous Linux, on n'aura jamais faut pas rêver (ouais, je sais, il y a wine. L'émulateur qui officiellement n'en est pas un et cesse de fonctionner d'une version à l'autre. Merci du cadeau).
Inkscape permet de faire du vectoriel, donc. Il est encore très récent (ce qui, en mode "logiciel libre", signifie qu'il a moins de deux mille ans), et donc pour trouver la moitié des fonctions il faut essayer de trouver quel raccourci-clavier à trois touches la permet parce que le bouton ou même l'accès via le menu, ben même Livingstone le cherche encore.
Et ton "read the fucking manual", tu te l'enfonces dans la partie la plus intelligente de ton individu et tu y mets le feu. Tu l'as lu, ton manuel ?

Pour le reste, un navigateur pour tester et pour la console d'erreurs.


Terre et Mer

Ma première tâche fut de séparer la terre de la mer, comme toute divinité qui se respecte.

J'ai choisi de donner une épaisseur à mes cases, sans trop me soucier de ce qui serait affiché ou pas, pour deux raisons :

D'abord, pour ne pas trop compliquer et mon travail, et le code, pour un projet de grand débutant. Vouloir trop en faire dès le début est un moyen assez sûr de ne jamais obtenir quelque chose de jouable avant d'en être dégoûté et d'abandonner.
Beaucoup de projets ont terminé comme ça.

Ensuite, celà me permet de placer des cases plus basses, ou avec transparence (comme l'eau), sans me soucier d'avoir à ajouter un bord opaque pour les cases situées derrière. Du point de vue du code, le temps perdu à dessiner des parties de cases souvent invisibles pour le joueur (on ne voit pas le sous-sol lorsqu'il y a un terrain normal devant) est probablement assez bien rattrapé par l'absence de conditions programmées du genre "si je place tel type de case derrière tel autre type, est-ce-qu'on voit le sous-sol derrière, et si oui comme le dessine-t'on ?"

Terre et Mer

Pour commencer, j'ai réalisé quatre cases basiques : Une de terre et trois de mer (le lac est venu plus tard, mais le principe est identique).
C'est le terrain "de base" - tout le reste : Forêts, rivières, unités, villes... - viendra se placer par dessus, mais on ne peut avoir qu'un seul terrain de base par case.

Vous remarquerez que j'ai utilisé de la transparence pour l'eau : C'est un moyen simple de différencier la mer de la terre, qui elle est opaque. De plus, le fond de la mer est au même niveau que le point le plus bas du sous-sol de la terre, ce qui donne une bonne impression de profondeur à mon avis.

Je n'ai pas cherché non plus à multiplier les graphismes de côtes, avec des caps, des baies, des falaises, des plages ou je ne sais quoi : Si on y réfléchi, c'est assez "accessoire" et peut être ajouté plus tard.

En fait, tout ce dont l'absence ne gêne pas le jeu peut-être considéré comme accessoire, et être ajouté plus tard, selon l'humeur du moment, ce qui permet de se concentrer sur l'essentiel : Que le jeu fonctionne.

Isométrie, rejeton des enfers.

Voilà le premier jet :

Première carte du jeu
Isométrique :

Bon, je ne rentrerai pas dans le débat de savoir si c'est de l'iso 2D, de la 3D, voire de la 2.5D (y'a pas de raisons). Pour moi, c'est de l'isométrique, et de toutes façons la "vrai 3D" actuelle n'en sera plus dès qu'on voudra nous vendre une nouvelle technique. Et puis, comme on dit, la 3D sur écran plat...

Ceci dit, j'en ai bavé pour comprendre comment faire de l'iso. Celà me semblait une bonne idée, parce que visuellement la carte donne ainsi une bonne impression de profondeur, sans pour autant rendre les cases lointaines illisibles parce que, comme vous le savez, ce qui est loin apparaît plus petit.

Ça a été l'horreur. D'abord, je suis une brêle absolue en javascript. Ça ne devrait pas être permis d'être aussi mauvais. En fait, je n'avais pas la moindre idée de la manière de m'y prendre, et j'ai du comprendre comment placer les cases dans la bonne position.

En fait, si vous connaissez déjà la question, vous devez savoir qu'une case isométrique n'est pas limitée à la partie visible, en "diamant". C'est en fait une case parfaitement rectangulaire, invisible (transparence = 100%), où l'on dessine la partie visible, puis on place ces rectangles en "tuile", débordant les uns sur les autres afin de faire coïncider les parties visibles.

Isométrique
Une autre chose à ne pas oublier est que des cases isométriques sont alignées plus ou moins en diagonale (c'est ce qui donne l'impression de profondeur), et non pas verticalement ou horizontalement.
Quand on a jamais fait ça, ni réellement programmé quoi que ce soit en javascript, c'est l'horreur.






Lancement du projet Ratsodie

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.

J'ai donc décidé de commencer par concevoir une carte, à la "civilization", très classiquement.