[étape 1] RPG tactique isométrique -> création de la map

[X-ZoD]

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

Video Youtube

mais pas trop ressemblant quand meme

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

Sommaire

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

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_e...exagonales

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)

creer un carré avec les dimensions de votre choix
dans mon cas ca va etre du 40x40

on tourne a 45°

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

Bon forcement apres vous apliquez les couleurs qui vous plaisent ou les textures ... pour ma part j'ai obtenu ceci

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

L'astuce c'est de surposer deux exemplaires de tiles l'une par dessus l'autre pour obtenir ceci

On gomme les traces de la tile placé derriere comme sur le l'image suivante

et on trace 3 trais verticaux qui relient les extrémités de facon a delimiter les face de notre pavé.

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

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>

?>

[X-ZoD]

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)