Batiments semi-transparents

[NicoMSEvent]

Je ne sais pas si sa peut t'aider mais j'aurais plus pensé a faire sur le div un OnMouseOver="transparence();"

Ou dans la fonction transparence avec Jquerry :
$("#tondiv").animate({'opacity':'50%'},500);

Comme sa dès que le gars passe la souris sur le div ou il y a ta porte par exemple, ben la porte se met en mode transparent et on voit les gars derrière. Reste a savoir si sa marche avec une image dans le div (normalement oui).

ce n'est pas ce que le cherche a faire, mais merci quand meme pour la suggestion (je m'en re-servirai pour l'exploration de donjons, ou de batiments )

Hs : Ton panel admin est interressant, pourrais tu m'expliquer comment il fonctionne car moi aussi j'ai plein de tuiles a mettre et c'est looooong

j'ai utilisé prototype et scriptaculous pour les fonctionnalités de modification de terrain. j'ai du "drag-drop" pour déposer mes tuiles. J'ai plusieurs menus regroupant les différentes sortes de tuiles

a la base, j'ai utilisé une image gif comme celle ci pour générer ma map (dans les grandes lignes), grande a un petit script qui entre en base de donnée chaque pixel, et associe la couleur à un type de terrain, puis j'ai affiné, j'ai ajouté des terrains et des villes grace à ma petite interface qui est visible sur la gauche de la capture d'écran. Je te laisserait bien un accès a l'interface, mais le problème est que les terrains sont quand meme assez long a faire, alors si tu casses tout (même sans faire exprès... ^^)

Ps: Je ne pense pas que le transparent soit l'idéal pour l'aspect "brillant" car on voit a travers, met plutot des "reflets" de lumière ou des halos. Et si je me souvient bien dans le livre "l'arche" reflète les rayons du soleil donc normalement on doit pas voir a travers

dans le livre, quand Ewilan est sur l'arche, elle voit quand meme les bateau en dessous, au travers
je vais essayer de mettre plus de rouge et moins de reflets blancs, ça passera p-e mieux

[Aleskweb]

Effectivement tu as raison, je viens de relire le passage.
Sinon, le rubis est d'un rouge plus net et pur, et les reflets ne sont pas 'blanc' mais varient entre les teintes de rouges et dis toi que les reflets ne sont pas un peut partout mais regroupés suivant l'orientation des faces.
.



Pour l'arche ce n'est pas évident, mais a telle une couleur? si c'est le cas suffirait de rajouter un calque de la couleur voulue et de le mettre en opacité 60 a 70%. Puis rajouter quelques halos pour faire les reflets désirés car même si elle est transparente je pense qu'elle doit briller .


Sinon a quoi te servent les frameworks pour l'interface admin, il suffit de faire un script ou l'on choisit la texture et on clicke sur la case ou l'on veut mettre la texture et sa update la bdd non?

[NicoMSEvent]

Effectivement tu as raison, je viens de relire le passage.
Sinon, le rubis est d'un rouge plus net et pur, et les reflets ne sont pas 'blanc' mais varient entre les teintes de rouges et dis toi que les reflets ne sont pas un peut partout mais regroupés suivant l'orientation des faces.

merci pour l'image, en tout cas, ça va me servir

Pour l'arche ce n'est pas évident, mais a telle une couleur? si c'est le cas suffirait de rajouter un calque de la couleur voulue et de le mettre en opacité 60 a 70%. Puis rajouter quelques halos pour faire les reflets désirés car même si elle est transparente je pense qu'elle doit briller .

L'arche n'a pas de couleur, mais a des reflets irisés. Le but est de la reconnaitre, et je pense que le but est atteint

Sinon a quoi te servent les frameworks pour l'interface admin, il suffit de faire un script ou l'on choisit la texture et on clicke sur la case ou l'on veut mettre la texture et sa update la bdd non?

les frameworks (ajax) me servent a plusieurs chose.
1° ajouter du drag-drop compatible avec tous les navigateurs (qui ont le javascript activé)
2° ajouter des effets graphiques
3° ajouter de l'ajax (je ne recharge pas toute la page, seulement ce qui change)

En effet, quand je lache l'image sur la bonne case, ça met a jour la bdd
j'avais envie d'avoir la fonctionnalité drag-drop, et pas juste une série de clic (c'est un peu une vitrine technologique... et puis je me fais plaisir en codant ça ^^)

[Aleskweb]

Ton arche ne pose pas du tout problème (a part la taille peut être ou l'ombre mais sa, sa représente peut etre plus d'inconvénients que d'avantages) mais sinon elle reste très belle avec son style arc en ciel (Bonne idée, car le transparent décompose la lumière). Pour la porte de rubis, hum tu devrais la décomposer en minimum 3 parties :
-Partie face a nous : rouge pur
-partie face au soleil (a droite?) : rouge clair-rose
-partie opposé soleil (a gauche?) : rouge terne

Peut etre que tu peu jouer un peu avec la saturation, mais je te conseille vivement de rajouter quelques petits halos pour les reflets. (Pas trop gros sinon c'est moche).


Par contre j'ai vu que tu as beaucoup avancé depuis la dernière fois que j'étais allé sur ton site. La page d'accueil est beaucoup mieux (Je me rappèle de cette épée ignoble en position fixed sur fond gris ><). Et puis ya plus les bug de déplacements etc ....

[Antyoz]

Oui j´ai virer mon post avant que tu y repondes...hein !! Car je devais me rendre en ville faire des paperasses donc du coup plus le temps et j ai suppr mon post.

[NicoMSEvent]

héhé, pas de soucis... tu peux dire que c'est une horreur aussi (les gouts et les couleurs hein! ^^)
Je ne le trouvais moi meme pas particulierement réussi. J'avais juste besoin d'avis et surtout de conseils pour améliorer ça. Je n'avais pas pensé à une composante noire qui donne un aspect transparent(je vais faire un test et le poster dès que j'ai un peu de temps)

[Aleskweb]

Alors ces test?
Tu as aussi parlé d'un script permettant de générer la map a partir d'une image. Je savais que dans le wiki il y en avait une mais il n'y a plus de wiki. J'ai lancé quelques recherches sur le fofo mais a part des liens mort je n'ai pas trouvé . Pourrais tu m'aider? Car l'interface admin, pas de problème je me débrouille mais la....

[NicoMSEvent]

pas encore eu le temps... p-e ce matin pour une nouvelle image

Pour le srcipt pour une carte, ça ressemble à ça (il faudra l'adapter pour ta base de donnée et pour ton image):

dsl si c'est indigeste, j'ai pas retravillé bcp le code, j'ai juste ajouté qq commentaires.

Code :

<?php
include('../../includes/auth.inc.php');
$iMicroTime=microtime_float();

/*********************************************/
/* Fonction: ImageCreateFromBMP              */
/* Author:   DHKold                          */
/* Contact:  admin@dhkold.com                */
/* Date:     The 15th of June 2005           */
/* Version:  2.0B                            */
/*********************************************/

function ImageCreateFromBMP($filename) //utilisation idem ImageCreateFromPNG
{
//Ouverture du fichier en mode binaire
   if (! $f1 = fopen($filename,"rb")) return FALSE;

//1 : Chargement des ent?tes FICHIER
   $FILE = unpack("vfile_type/Vfile_size/Vreserved/Vbitmap_offset", fread($f1,14));
   if ($FILE['file_type'] != 19778) return FALSE;

//2 : Chargement des ent?tes BMP
   $BMP = unpack('Vheader_size/Vwidth/Vheight/vplanes/vbits_per_pixel'.
                 '/Vcompression/Vsize_bitmap/Vhoriz_resolution'.
                 '/Vvert_resolution/Vcolors_used/Vcolors_important', fread($f1,40));
   $BMP['colors'] = pow(2,$BMP['bits_per_pixel']);
   if ($BMP['size_bitmap'] == 0) $BMP['size_bitmap'] = $FILE['file_size'] - $FILE['bitmap_offset'];
   $BMP['bytes_per_pixel'] = $BMP['bits_per_pixel']/8;
   $BMP['bytes_per_pixel2'] = ceil($BMP['bytes_per_pixel']);
   $BMP['decal'] = ($BMP['width']*$BMP['bytes_per_pixel']/4);
   $BMP['decal'] -= floor($BMP['width']*$BMP['bytes_per_pixel']/4);
   $BMP['decal'] = 4-(4*$BMP['decal']);
   if ($BMP['decal'] == 4) $BMP['decal'] = 0;

//3 : Chargement des couleurs de la palette
   $PALETTE = array();
   if ($BMP['colors'] < 16777216)
   {
    $PALETTE = unpack('V'.$BMP['colors'], fread($f1,$BMP['colors']*4));
   }

//4 : Cr?ation de l'image
   $IMG = fread($f1,$BMP['size_bitmap']);
   $VIDE = chr(0);

   $res = imagecreatetruecolor($BMP['width'],$BMP['height']);
   //$res = imagecreate($BMP['width'],$BMP['height']);
   $P = 0;
   $Y = $BMP['height']-1;
   while ($Y >= 0)
   {
    $X=0;
    while ($X < $BMP['width'])
    {
     if ($BMP['bits_per_pixel'] == 24)
        $COLOR = unpack("V",substr($IMG,$P,3).$VIDE);
     elseif ($BMP['bits_per_pixel'] == 16)
     {
        $COLOR = unpack("n",substr($IMG,$P,2));
        $COLOR[1] = $PALETTE[$COLOR[1]+1];
     }
     elseif ($BMP['bits_per_pixel'] == 8)
     {
        $COLOR = unpack("n",$VIDE.substr($IMG,$P,1));
        $COLOR[1] = $PALETTE[$COLOR[1]+1];
     }
     elseif ($BMP['bits_per_pixel'] == 4)
     {
        $COLOR = unpack("n",$VIDE.substr($IMG,floor($P),1));
        if (($P*2)%2 == 0) $COLOR[1] = ($COLOR[1] >> 4) ; else $COLOR[1] = ($COLOR[1] & 0x0F);
        $COLOR[1] = $PALETTE[$COLOR[1]+1];
     }
     elseif ($BMP['bits_per_pixel'] == 1)
     {
        $COLOR = unpack("n",$VIDE.substr($IMG,floor($P),1));
        if     (($P*8)%8 == 0) $COLOR[1] =  $COLOR[1]        >>7;
        elseif (($P*8)%8 == 1) $COLOR[1] = ($COLOR[1] & 0x40)>>6;
        elseif (($P*8)%8 == 2) $COLOR[1] = ($COLOR[1] & 0x20)>>5;
        elseif (($P*8)%8 == 3) $COLOR[1] = ($COLOR[1] & 0x10)>>4;
        elseif (($P*8)%8 == 4) $COLOR[1] = ($COLOR[1] & 0x8)>>3;
        elseif (($P*8)%8 == 5) $COLOR[1] = ($COLOR[1] & 0x4)>>2;
        elseif (($P*8)%8 == 6) $COLOR[1] = ($COLOR[1] & 0x2)>>1;
        elseif (($P*8)%8 == 7) $COLOR[1] = ($COLOR[1] & 0x1);
        $COLOR[1] = $PALETTE[$COLOR[1]+1];
     }
     else
        return FALSE;
     imagesetpixel($res,$X,$Y,$COLOR[1]);
     $X++;
     $P += $BMP['bytes_per_pixel'];
    }
    $Y--;
    $P+=$BMP['decal'];
   }

//Fermeture du fichier
   fclose($f1);

return $res;
}

//ici commence mon script

$size=getimagesize('gwendalavir.bmp');
$limb=0; //ici je définis les bornes (ligne de ... à ...), ce qui permet de limiter le chargement, et le dépassement des 30 secondes fatidiques (arret forcé du script par PHP)
$limh=$size[1];  // -> chargment en plusieurs fois

$im = ImageCreateFromBMP('gwendalavir.bmp');

$im2 = imagecreatetruecolor( $size[0],$size[1] );

//a partir d'ici je défini les couleurs que je vais utiliser (j'utilise une image en 16 couleurs ici, rien n'empeche d'en utiliser plus))
$black        = imagecolorallocate ($im, 0, 0, 0);
$ligthblue    = imagecolorallocate ($im, 0, 255, 255);

$green        = imagecolorallocate ($im, 0, 128, 0);
$ligthgreen    = imagecolorallocate ($im, 0, 255, 0);

$yellow        = imagecolorallocate ($im, 128, 128, 0);
$ligthyellow= imagecolorallocate ($im, 255, 255, 0);

$pink        = imagecolorallocate ($im, 255, 0, 255);

$grey        = imagecolorallocate ($im, 128, 128, 128);
$ligthgrey    = imagecolorallocate ($im, 192, 192, 192);
$white        = imagecolorallocate ($im, 255, 255, 255);
$blue        = imagecolorallocate ($im, 0, 0, 255);

$black2        = imagecolorallocate ($im2, 0, 0, 0);
$ligthblue2    = imagecolorallocate ($im2, 0, 255, 255);

$green2        = imagecolorallocate ($im2, 0, 128, 0);
$ligthgreen2= imagecolorallocate ($im2, 0, 255, 0);

$yellow2    = imagecolorallocate ($im2, 128, 128, 0);
$ligthyellow2=imagecolorallocate ($im2, 255, 255, 0);

$pink2        = imagecolorallocate ($im, 255, 0, 255);

$grey2        = imagecolorallocate ($im2, 128, 128, 128);
$ligthgrey2    = imagecolorallocate ($im2, 192, 192, 192);
$white2        = imagecolorallocate ($im2, 255, 255, 255);
$blue2        = imagecolorallocate ($im2, 0, 0, 255);

for($i=$limb;$i<$limh && $i<$size[0] && (microtime_float()-$iMicroTime)<57 ;$i++){
    for($j=($i%2?0:1);$j<$size[1] ;$j+=2){
        $color=imagecolorat ($im, $i, $j);
        switch($color){
            case $green: //pour chaque type de case (chaque couleur), j'associe ça à un certain terrain
                $color2=$green2;
                switch(LanceDe(1,10)){ //pour éviter les grandes zones d'un même terrain, je met au hazard quelques éléments d'autres types
                    case 1:$colorconv=2;break;
                    case 2:$colorconv=2;break;
                    case 3:$colorconv=2;break;
                    case 4:$colorconv=2;break;
                    case 5:$colorconv=2;break;
                    case 6:$colorconv=5;break;
                    case 7:$colorconv=5;break;
                    case 8:$colorconv=5;break;
                    case 9:$colorconv=5;break;
                    case 10:$colorconv=3;break;
                    default:
                        $colorconv=1;
                }
                break;
            case $ligthgreen:
                $color2=$ligthgreen2;
                switch(LanceDe(1,10)){
                    case 8:$colorconv=2;break;
                    case 9:$colorconv=2;break;
                    case 10:$colorconv=5;break;
                    default:
                        $colorconv=1;
                }
                break;
            case $ligthyellow:
                $color2=$ligthyellow2;
                switch(LanceDe(1,10)){
                    default:
                        $colorconv=211;
                }
                break;
            case $pink:
                $color2=$pink2;
                switch(LanceDe(1,10)){
                    case 10:$colorconv=80;break;
                    default:
                        $colorconv=10;
                }
                break;
            case $grey:
                $color2=$grey2;
                switch(LanceDe(1,10)){
                    case 5:$colorconv=2;break;
                    case 6:$colorconv=2;break;
                    case 7:$colorconv=5;break;
                    case 8:$colorconv=3;break;
                    case 9:$colorconv=3;break;
                    case 10:$colorconv=80;break;
                    default:
                        $colorconv=1;
                }
                break;
            case $ligthgrey:
                $color2=$ligthgrey2;
                switch(LanceDe(1,10)){
                    case 6:$colorconv=2;break;
                    case 7:$colorconv=3;break;
                    case 8:$colorconv=3;break;
                    case 9:$colorconv=80;break;
                    case 10:$colorconv=80;break;
                    default:
                        $colorconv=1;
                }
                break;
            case $blue:
            case $white:
                $color2=$white2;
                $colorconv=80;
                break;
            default:
                $color2=$blue2;
                $colorconv=6;
        }
        imagefilledrectangle($im2, $i, $j, $i, $j+2, $color2);
//ici je met ça en base de donnée
        RequestDB("INSERT monde2 (x,y,type_case) VALUES ('$i','$j','$colorconv');");
    }
}

if($_GET['img']==1){
    echo $i.'<br />';
    echo 'Fini! :-)<br />Temp total : ';
    echo (microtime_float()-$iMicroTime).'<br />';
}
else{
    header("Content-type: image/jpeg");
    imagejpeg($im2);
}
?>

[NicoMSEvent]

Voilà donc le deuxieme test... est-ce mieux? (étant donné que c'est une de mes création, jen e suis pas bon juge ^^)

[Aleskweb]

Merci pour le code je vais voir sa. Sinon c'est presque nickel (D'ailleurs le pont tu la oublié non?). Par contre, enlève le marron, et éclaircit un poil ! Et ensuite enjoy !:good: