JeuWeb - Crée ton jeu par navigateur
[étape 2] RPG tactique isométrique -> déplacement du joueur - 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 2] RPG tactique isométrique -> déplacement du joueur (/showthread.php?tid=2487)

[étape 2] RPG tactique isométrique -> déplacement du joueur - X-ZoD - 26-02-2008

aller on attache sa ceinture c'est reparti pour un tour ^^
pour ceux qui ont suivi la phase 1 de ce tuto en plusieurs etape, vous savez deja comment va se derouler le tuto (commentaire, exemples en image, etc ..)
pour les autres .. je supose que vous etes la par curiosite ... bha prenez place ^^


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

Déplacement du joueur

niveau : facile mais requiert un minimum de conaissance en algorithme sinon les plsu fragile risquent de se perdrent
Outils : un outil de debug de js poru verifier constement que vosu coder corectement et ne faites pa de merde, la console d'erreur de ff fera tres bien l'affaire


deplacement simple d'une image (teleportation)
on va commencer doucement et faire deplacer une image sur la droite histoire de comprendre comment ca marche

-le principe
beacoup de personne se demande comment on fait pour deplacer le personnage ainsi avec ce minimum de fluidité.
je me suis moi meme posé la question il y a 2 ans en voyant le jeu de notre ancien membre Dr Night qui portait le titre de "phpore" (je ne sais pas si vous vous en rapler)... du coup on regarde la source javascript et on fuit Big Grin (c'est ce qui se passe dans 70% des cas Big Grin
Apretez vous a faire le meme effet sur les visiteurs de votre site Wink

on va decortiquer le principe de la teleportation deja (utilisé dans 99.9% de jeux php que j'ai croisé sur le net jusqu'a aujourd'hui)
alors on sait qu'une image peut avoir des attributs css du genr margin-top ou margin-left (jusque la rien d'interdit)
si on modifie ces atributs forcement la position de l'image n'est plus la meme .. n'est ce pas ?(h)

actuellement la methode la plsu utilisé fait que les joueurs cliquent sur un bouton et on change les atributs de cette image pour montrer que le personnage s'est déplacé.:ninga:

Code PHP :
<?php 

<div id="img" style="margin-left:10px">ICI VOTRE IMAGE</div>

<a href="#" onclick="document.getElementById('img').style.marginLeft = '50px'; return false">bouge tes fesses</a>

nous ce qu'on essai de faire dans un premier temps c'est donner "l'autorisation" au personnage de bouger... et de le regarder se deplacer
mais comment lui dire que tu es ici maintenant et que dans un instant tu es la bas.
alors voila ce qu'on va faire .. on va lui donner un compte a rebours au bout duquel il se deplacera (il changera ses atributs css)
en javascript la fonction s'appelle setTimeout

comment elle fonctionne ?
voici son prototype (sa definition)
Citation :setTimeout('fonction_javascript a effectuer', dans_cb_de_temps);

on petit exemple ?
ouvrez une page et mettez y
Code :
<script>
setTimeout('alert("2 secondes se seont ecoulés");', 2000);
</script>

en principe la fonction alert vous ouvre une pseudo popup d'alert en vous afichant le texte "2 secondes se seont ecoulés"

on va se servir de cette fonction pour dire a notre image de se deplacer dans le temps

on reprend la citation plu haut et on la modifie comme ceci

Code PHP :
<?php 

<div id="img" style="margin-left:10px">ICI VOTRE IMAGE</div>

<a href="#" onclick="setTimeout('document.getElementById(\'img\').style.marginLeft = \'50px\'', 2000); return false">bouge tes fesses</a>

voila votre image se teleporte sur la droite au bout de 2 secondes ...
maintenant on attaque la partie qui vous interesse le plus Wink


deplacement simple d'une image (fluide)
C'est la que le niveau minimum algo+js est requis ...
pourquoi ? car on va faire du recursif en javascript
(je vois deja certains sourirent en se disant qu'ils pensent avoir capté le truc ^^) <= vous avez bien raison ^^
bon alors c'est quoi une fonction recursif ?
une fonction non recursive est une fonction normal .. dans laquelle on apelle d'autre fonctions
une recursive est une fonction qui se rapelle elle meme (donc tourne en boucle)
:heuuu:
on va proceder avec un exemple simple ... la fonction compter ^^
Code PHP :
<?php 

function compter($de, $jusqua)

{

     echo '$de='.$de.' et on veux arriver à $jusqua('.$jusqua.')<br>';

     if($de < $jusqua)

     {

        echo '-> $de('.$de.') est inferieur a $jusqua('.$jusqua.') alors on augmente la valeur de $de et on rapelle la fonction<br><br>';

        $de++;

        compter ($de, $jusqua); // c'est ici que la recursive se fait

       // mais ne coyez pas que ca continue a l'infinie , car le $de augmente a chaque fois grace au $de++;

     }else{

         echo 'je suis le dernier apelle de la fonction et enfin $de a attein $jusqua';

     }

}



compter (0, 10);

donc ici en gros on apelle la fonction en lui disant que le premier parametre c'est 1 et qu'on veut arriver a 10;
alors la fonction va verifier si $de (variable contenant le chiffre 1) est inferieur a $jusqua (variable contenant le 10)
si ce n'est pas le cas il va apeler une fonction qui va continuer le traitement... mais on ne va pas creer 10 fonctions, alors on va tout simplement rapler la meme fonction en lui passant les nouveaus parametre => nouveaux car entre temps $de n'est plus egale a 1 mais a 2, et ainsi de suite
ne vous embrouyé pas avec le fait que ce soit la meme fonction ... vous n'avez qu'à vous dire qu'il apelle une autre fonction mais qui a le meme code Wink

bon si vous avez compris tout ca on va faire la meme chose mai au lieu de compter on va deplacer l'image
et ce ne sera pas du php mais du javascript

Code PHP :
<?php 

<script>

function deplacer_image(jusqua)

{

     // on recupere la valeur du margin left de limage

     var marginLeft = document.getElementById('img').style.marginLeft;

     // le probleme c'est qu'elle renvoi pas un nombre mais du texte sous forme "42px", donc on va recuper les chiffre et virer les px avec la fonction split de javascript (qui permet de diviser une frase) dans un tableau (parec ke la fonction split renvoi un tableau)

     var tab = marginLeft.split("px");

     // et maintenant on reupere la vrai valeur qui se trouve dans notre tableau

     marginLeft = parseInt(tab[0]); // dans le cas present il renvoi 10

     // la focniton parseInt est obligatoire pour que l'adition ensuite adition deux nombre sinon il va les concatener

     if(marginLeft < jusqua)

     {

       marginLeft = marginLeft+1;

       // on met a jour le style de l'image poru le "teleporter" <-- lol

       document.getElementById('img').style.marginLeft = marginLeft+'px';

          setTimeout('deplacer_image(jusqua);', 25);

     }

}

</script>

<div id="img" style="margin-left:10px">ICI VOTRE IMAGE</div>

<a href="#" onclick="deplacer_image(50); return false">bouge tes fesses</a>



et voila nous avons une jolie image qui bouge

<< Topic de débat >>