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=2357)

Pages : 1 2 3 4 5 6 7 8 9 10 11 12 13


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

Salut à tous,
Voila j'ai bien aimé ce tuto., le seul problème étant la création de la map, très fastidieuse, pour cela j'ai fait un tout p'tit script (je sais même pas si on peut l'appeler comme ça) pour vous faciliter la vie, il vous vous faudra juste l'adapter, à la main, à vos envies :
Code PHP :
<?php
$largImg
= 44; // Largeur de votre image
$hautImg = 40; // Hauteur de votre image
$baseLeft = 5; // Distance de la gauche (optionnel)
$baseTop = 5; // Distance de la droite (optionnel)
$nbLigne = 4; // Nombre de ligne pour la map
$nbColonne = 4; // Nombre de colone pour la map
$url = "../images/herbe_bas.gif"; // Url de votre image

$derLeft = $baseLeft;
$derTop = $baseTop;
for (
$j=0;$j<$nbLigne;$j++){
for (
$i=0;$i<$nbColonne;$i++){
if (
$i == 0){
$margLeft = $derLeft;
}else{
$margLeft = $derLeft+$largImg;
}
$margTop = $derTop;
echo
'
<img src="'
.$url.'" style="margin-left:'.$margLeft.'px; margin-top:'.$margTop.'px; float:left; position:absolute;">
'
;
$derLeft = $margLeft;
}
$ancienTop = $derTop;
// Je ne peux pas vous expliquer le -9 :D
$derTop = $derTop + ($hautImg/2)-9;
// Le -1 non plus :)
$derLeft = $baseLeft-1;
for (
$k=0;$k<$nbColonne;$k++){
if (
$k == 0){
$margLeft = $derLeft + ($largImg/2);
}else{
$margLeft = $derLeft+$largImg;
}
$margTop = $derTop;
echo
'
<img src="'
.$url.'" style="margin-left:'.$margLeft.'px; margin-top:'.$margTop.'px; float:left; position:absolute;">
'
;
$derLeft = $margLeft;
}
$derTop = $ancienTop + ($largImg/2);
$derLeft = $baseLeft;
}
?>



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

Sympathique tuto et sympathique bout de code emaia qui marche impecablement, j'étais parti sur une map de type 2D en vue aérienne et finalement je vais peut-être me réorienter vers l'iso ça donne un bel aspect ^^


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

lol
ya encore du support sur mon tuto ? Big Grin
13 pages ...
incoming mon site de tutos sur les diferenets etchnologies sur lesquelles j'ai travaillé
c'est jsute que pour l'instant j'essai de sortir la beta de ma premiere version de mon rpg .. donc ca traine un peu


RE: [étape 1] RPG tactique isométrique -> création de la map - Pio154 - 31-07-2008

Sérieusement, je comprend pas comment vous faites Confused
Mais j'ai jamais dit que je n'y suis pas arrivé, au contraire !

Je ne vais pas allez dans le but de dire que vous êtes nul, parce que je suis nul :p (...) Mais, pourquoi avoir fait tant de calcule alors que vous pourriez avoir plus simple ?


Mon but n'est pas là pour vous faire la morale mais d'aider au maximum pour rendre un script le plus optimisé possible.


Mon script :
  • Pas beaucoup de ligne de code.
  • Que deux calculs pour la position des images. (X/Y) soit (L/H)
  • Quatre variables pour la configuration des positions.

Bref, maintenant nous allons voir du coter des variables :
  • $imageLargeur contient la largeur de l'image.
  • $leftOrigine est optionnel, mais pour le positionnement du cube.
  • $topOrigine est pareil que $leftOrigine sauf que la position top change.
  • $rajout est la hauteur d'une façade d'un cube. (bizarre, mais sa marche)
Code PHP :
<?php


$imageLargeur
= 60;
$leftOrigine = 600;
$topOrigine = 0;
$rajout = 15;


for (
$i = 1; $i <= 5; $i++)
{
for (
$j = 1; $j <= 8; $j++)
{
$left = ($leftOrigine - ($imageLargeur / 2) * $i) + ($imageLargeur / 2 * $j);
$top = ($topOrigine + $rajout * $i) + ($rajout * $j);

echo
'<img src="img/vierge1.png" style="position:absolute; ';
echo
'left:'.$left.'px; top:'.$top.'px;" />'."\n";
}
echo
"\n";
}


?>

Et pour terminé, je vous laisse regarder : http://www.pio154.eu/mapiso.php

Pour les objets dessus une case, je pencherai plutôt d'y mettre dans un array et de faire une troisième boucle etc ...
Bref, bonne journée !


RE: [étape 1] RPG tactique isométrique -> création de la map - Eluox - 31-07-2008

Sur que t'as map rend mieux :/

Ta super map a écrit :Not Found

The requested URL /mapiso.php was not found on this server.
Apache Server at www.pio154.eu Port 80

Cordialement,


RE: [étape 1] RPG tactique isométrique -> création de la map - Pio154 - 31-07-2008

Petit problème d'hébergeur à cause du cron, c'est de nouvelle fonctionnel.
F5 pour le cache ...