mardi 12 juillet 2011
jeudi 30 décembre 2010
vendredi 3 décembre 2010
Tutoriel PHP: se promener dans un paysage 2D
Aujourd'hui, je change un peu mes habitudes en écrivant moi-même un petit tutoriel en PHP.
Attention, pour le réaliser, vous devrez bien sûr déjà bien maîtriser le langage. Pour cela, il y a des cours très bien faits ici.
Dans ce tutorial, nous allons donc réaliser une petite carte, comme on pourrait en trouver sur un site de jeu de rôle par navigateur.
Nous verrons ensuite comment nous y déplacer.
1) Création des images.
Dans notre exemple, nous irons au plus simples: il y aura deux sortes de configuration de terrain: de l'herbe et du béton. Ouvrez donc n'importe quel éditeur d'image et réalisez deux carrés de 3X3cm à 72 dpi. Un sera vert et l'autre gris. Enregistrez les en PNG dans un sous-dossier de votre "site".
Bon après, vous pouvez vous amuser à dessiner des fleurs ou la texture du béton, moi je vous explique le principe.
2) Base de données
Nos images sont prêtes et vous êtes devant votre éditeur de code, nous pouvons commencer. Mais avant cela, vous devez comprendre la manière dont nous allons afficher la carte.
Avant d'afficher quoi que ce soit, nous devons savoir où nous nous trouvons. Et en informatique, pour modéliser un système spatial, que ce soit en 2D ou en 3D, il n'y à pas 36000 solutions: cela se résume en deux lettres.
X et Y.
Nous allons d'abord devoir dire au serveur à quelles coordonnées se trouve la camera, afin qu'il sache quelle partie de la carte nous envoyer. Créons donc une nouvelle table qui contiendras les informations sur la camera. Cette table contiendras 4 champs: ID (en primaire et auto-incrémentation), X, Y et Name.
C'est fait? Bon, ajoutez manuellement une entrée qui se présentera de la sorte:
ID: 1
X:10
Y:10
Name: Camera
Le serveur saura donc que pour le moment, la camera se trouve en X10 Y10.
Il va maintenant falloir créer une nouvelle table qui, elle, contiendras les données de la carte en elle même:
-ID
-X
-Y
-Type (savoir quel genre de terrain on a affaire)
-Url (ici, nous mettrons l'image à afficher, donc du vert pour de l'herbe et du gris pour le béton)
Voilà ensuite vous remplissez quelques cases aux alentours des coordonnées de la caméra.
(Vous pouvez aussi réfléchir à un code tout fait qui va vous remplir des zones de cartes directement, j'y viendrai si vous avez trop de difficulté).
Affichage de la map:
Il n'y à plus qu'à afficher !
Nous allons construire la carte en prenant la camera pour centre, et en affichant 5 cases à la ronde. Pour cela nous utiliserons deux boucles for imbriquées l'une dans l'autre. Une se chargera d'afficher les X et l'autre les Y.
Bon ca peut vous sembler incompréhensible, donc retenez ceci: la carte va s'afficher un peu à la manière d'une imprimante papier qui sort une feuille: on affiche la rangée, on va à la ligne, on affiche celle du dessous et ainsi de suite.
Voici le code pour ceux qui n'auraient pas encore compris:
for($y=$position_joueur['Y']-5;$y<=$position_joueur['Y']+5;$y++) { //première boucle for, celle qui vas à la ligne
for($x=$position_joueur['X']-5;$x<=$position_joueur['X']+5;$x++) { //deuxième boucle: celle qui "imprime"
$query = mysql_query("SELECT * FROM coord_map WHERE X='".$x."' AND Y='".$y."'");
$result = mysql_fetch_array($query);
?>
(<)img src="http://www.blogger.com/pictures/map/water/%3C?%20echo%20$result['Url'];?%3E" width="60" height="60" /> // pensez bien à modifier la balise image, j'ai du mettre un (<) pour pas faire planter le blog
}
?>
Voilà Voilà, si tout va bien, votre carte se construira, ensuite pour s'y déplacer, vous n'avez plus qu'à ajouter 4 boutons directionnels qui feront bouger la position de la caméra =)
Bon c'est mon premier tuto, donc soyez indulgents si vous ne comprenez pas certains passage, ou que cela manque de précision, n'hésitez pas à me le signaler pour que je détaille et/ou corrige!
A bientôt.
vendredi 15 octobre 2010
Inscription à :
Messages (Atom)
