JeuWeb - Crée ton jeu par navigateur
[étape 1] RPG tactique isométrique -> création de la map - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [étape 1] RPG tactique isométrique -> création de la map (/showthread.php?tid=2345)

[étape 1] RPG tactique isométrique -> création de la map - X-ZoD - 04-02-2008

Prologue
Cela faisait bien longtemps que je n'avais pas tapé de tuto sur jeu php ^^
les plus anciens du forum doivent se souvenir de ces "tutos" plus ou moins pouris ^^
... les mois passent et je continue de m'améliorer meme si je ne me considère pas comme ayant un niveau élevé en php pour le moment .. je susi encore en phase de découverte et je ne fais que vous faire profiter du peu de conaissance acquis jusqu'à ce jour (date de ce post).
Aussi j'attends de ceux qui en savent plus que moi qu'il me recorigent si besoin, je n'en serait que moins con et pour ca je leur en remercis (^^)

j'espere mener ce tuto jusqu'au bout et vous permettre d'obtenir quelque chose qui ressemblera plus ou moins à ca
Citation :Video Youtube
mais pas trop ressemblant quand meme Smile

ce tuto est plutot long donc je vais le diviser en plusieurs parties.

Sommaire
Citation :
  1. Création de la map
  2. Déplacement du joueur
  3. Interaction map-joueur
  4. Interaction joueur-joueur

Je ne vais pas reprendre les bases necessaires pour suivre correctement ce tuto, aussi je mettrais en debut de chaque tuto une echelle de difficulté vous permettant de savoir si vous devez bloquer plus ou moins beaucoup de tenter pour vous pencher sur l'etape en question.
Il ne s'agit pas d'une echelle de difficulté de code proprement dite mais vise plutot a signaler au lecteur (vous donc) si ce sera fastidieux ou pas (en compreension, recherches, temps etc ...) car le code en lui même n'a rien de compliqué si l'on est curieux Wink

P.S
j'ecris ce tuto pendant mes pauses entre deux bugs histoire de me changer les idées ^^ (mdr)
donc ne vous inquitez pas si parfois le tuto est pas fini .. je precise a la fin si il y a une suite qui arrive bientot ou si l'étape est terminée

Création de la map

niveau : facile
Outils : 2 ou 3 de vos neuronnes

Création d'une simple tile
ne réinventons pas la roue, un excélent tuto àdéjà été tapé par harparine disponible sur le wiki à cette adresse

http://wiki.jeuweb.org/tutoprog:3d_iso_et_tuiles_hexagonales

Vous y trouverez la methode pas à pas pour creer une tile isometrique à partir d'un simple carré.
Si je suis les lignes de son tuto pas a pas on obtient facilementl e resultat suivant (je reprends les points importants pour les fainaiants)
Citation :creer un carré avec les dimensions de votre choix
dans mon cas ca va etre du 40x40
[Image: tuto_tile_1.gif]
on tourne a 45°
[Image: tuto_tile_2.gif]
on reduit la hauteur de l'image (sans garder les proportion) de moitié; attention une fois l'image tourné aux 45° elle ne garde pas la même taille .. dans mon cas par exemple je suis passé de 40x40(de base) à 51x51 (apres rotation) et donc du coup en reduisant de moitié je doit obtenir une hauteur de 25px
[Image: tuto_tile_3.gif]
Bon forcement apres vous apliquez les couleurs qui vous plaisent ou les textures ... pour ma part j'ai obtenu ceci
[Image: herbe.gif]


Tile en perspective (OPTIONELLE)
bon c'est cool on a fait une tile iso ... apres personnelement je pousse le vice de fake 3D jusqu'au bout donc je vais lui donner une perspective qui nous en raproche un peu plus en rajoutant des 2 facades a notre tile ... de facon a ce qu'elle ai un peu l'aperence d'un pavé.
Cette partie est optionelle ... donc a vous de voir si ca vou interesse ou pas .... c'est pas plus compliqué que la premeire partie ... donc c'est juste une question de gout

Citation :L'astuce c'est de surposer deux exemplaires de tiles l'une par dessus l'autre pour obtenir ceci
[Image: tuto_tile_4.gif]
On gomme les traces de la tile placé derriere comme sur le l'image suivante
[Image: tuto_tile_5.gif]
et on trace 3 trais verticaux qui relient les extrémités de facon a delimiter les face de notre pavé.
[Image: tuto_tile_6.gif]
Comme dit plus haut vous apliquez les couleurs et textures de votre choix et c'es la que l'on est content d'avoir passer 30 minutes sur ce tuto
[Image: herbe_bas.gif] [Image: riviere_verticale.gif]

Bon bha ca c'est fait ...on enchaine sur l'assemblage de ces éléments pour faire une map... c'est la que l'on va toucher au code


Assemblage des tiles
Bon je vous que les math moi c'est pas mon fort .. surtout quand il faut relire les calculs faits par quelqu'un d'autre....
Harparine a su nous donner les calculs exacts dans l'etape 2 de son tuto mais je sais pas pourquoi ca rentrait pas ... alors bon peut etre que j'aurai du me pencher plus de 3 minutes sur ses formules ... mais j'ai un reel soucis avec les math
enfin bref ... je vous donne ma facon (peut etre bourin) d'assembler les tiles.

je vais vous expliquer théoriquement ma facon de procéder avant de vous faire part du code en lui-même.
je place ma tile en fonction de l'espace disponible autour
c'est a dire qu'elle est positioné en fonction de la marge entre elle et le bord de son conteneur (<td>, <div>, etc ..)
le plus simple pour le moment reste la div

nous avons donc une <div></div> dans laquelle nous allons placer chacune de nos tiles toutes par rapport a la bordure gauche et top de la div. ainsi nous pouvons placer nos tiles où bon nous semble dans cette div.


je vous donne un exemple tout bete pour comprendre ou je veux en venir:
Code PHP :
<?

<div>

    <img src="test.gif" style="margin-top:0px; margin-left:0px;">

//cette image sera placée a 0 pixels du bord haut et idem pour le bord droit ... doncon va le retrouver dans le coin en haut a gauche

    <img src="test.gif" style="margin-top:50px; margin-left:50px">

//en revanche ici il y aura 50 pixels de distance qui séparent l'image des bordures haut et droite ... donc elle ne sera pas dans le coin mais un peu plus au centre

</div>

?>

je ne peux pas être plus explicite ^^

on va tout de meme rajouter deux atributs au style des images pour qu'elle puissent se superposer sans trop de soucis...
Citation :; float:left; position:absolute;
pour plus d'info .... direction google (pas le temps de faire un cours aprofondi.

bon on va attaquer la derniere partie de ce tuto (ouf)
il va faloir placer les tiles les unes apres les autres en tenant bien compte des coordonnées des précedentes ..

les tiles vont etres placées en losange(on fait de l'iso ou pas ?)
donc on va commencé par placé la premiere au centre de la div et ensuite on passe a la ligne suivante (on en place 2) puis ligne suivante (on en place 3), etc ...
Important
il faut bien prendre en compte les dimension de la tile avec laquelle nous allons travailler.. l'exemple qui va suivre a ete fait avec une tile de 44x23. Pour ceux qui ont fait des tiles en perspectives (optionelle) ne tenez pas compte de la taille de l'image mais uniquement de la surface isometrique [Image: herbe.gif]

Nous allons donc commencer par fixer les positions de bases de la premiere tile(c'est par rapport a elles que lespositions des autres tiles seront deduites).
c'est parti ..
Citation :notez sur un brouillons vos position de bases ...
nous on part de
margin-left:176px;
margin-top:0px;
et les dimension de vos tiles
44x23
en l'occurence notre premiere tile sera collé au bord haut du div (0px) et sera a 176pixels du bords gauche ...donc assez eloigné...

on va appliquer tout ca à notre première image
Code PHP :
<?php 

<div>

    <img src="img/tiles/herbe_bas.gif" style="margin-left:176px; margin-top:0px; float:left; position:absolute;">

</div>

ca c'est fait
maintenant comment savoir où va t'on placer la deuxieme tile ?(censé etre en bas a gauche de la premiere)

bha un peu de math et de logique (bha ouais sinon c'est pas drole)
c'est comme si il falait deplacer la premiere tile en bas a gauche
mais le sommet de cette tile doit toucher la pointe gauche de son ancien emplacement
donc en gros on la deplace vers le bas de moitié... et sur la gauche de moitié aussi
donc on prend la moitié de la hauteur de la tile (23/2 = 11 par arrondie)
et on la rajoute au margin top
0+11= 11 ^^
meme chause pour le margin left
on prend la moitié de la largeur (44/2=22)
et on la soustrait au margin left (puisque que l'on se deplace sur la gauche)
176-22=154
les positions de notre nouvelle tile sera donc margin-top:11px et margin-left:154px

si on veut une tile sur la droite on rajoute la moitié de la largeur plutot que de la soustraire Wink

donc au final pour placer 3 tiles le code ressemblera a
Code PHP :
<?php 

<div>

    <img src="img/tiles/herbe_bas.gif" style="margin-left:176px; margin-top:0px; float:left; position:absolute;">

    <img src="img/tiles/herbe_bas.gif" style="margin-left:154px; margin-top:11px; float:left; position:absolute;">

    <img src="img/tiles/herbe_bas.gif" style="margin-left:198px; margin-top:11px; float:left; position:absolute;">

</div>

alors heureux ?Big Grin
vous venez d'alligner 3 cases de votre premiere map isometrique
a vous de vous amuser avec maintenant (bha non les coco vais pas vous pondre tout le code non plus Big Grin)

Citation :au final ...
[Image: level_0-0.gif] [Image: level_0-1.gif]
[Image: level_1-1.gif] [Image: level_1-2.gif]
[Image: level_1-3.gif] [Image: level_-1-4.gif]
[Image: level_1-4.gif]

voilou c'est fini ... alors c'était si dur que ca ?
le post d'aide se trouve par ici
http://www.jeuweb.org/board/showthread.php?tid=3273

avec un peu de chances des modifications interviendront dans ce tuto
je ne pense pas passer aux étapes suivante si je n'ai pas de retour sur cette premiere etape

je rapelle tout de meme que je peux prendre rdv sur l'irc si besoin bonne journee a tous.

<< Topic du débat >>

RE: RPG tactique isométrique [ étape 1->création de la map ] - X-ZoD - 05-02-2008

aller un petit up pour signaler que j'ai fini les edit et donc que cette premiere version du tuto est finie ... pas de retour pour ce tuto = pas de suites ^^ (logique non)