JeuWeb - Crée ton jeu par navigateur
Batiments semi-transparents - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : Batiments semi-transparents (/showthread.php?tid=4560)

Pages : 1 2 3

Batiments semi-transparents - NicoMSEvent - 28-01-2010

Salut tout le monde!

En fait, j'ai un besoin assez particulier. J'aimerais créer des batiments a moitié transparents (genre pour entrer dans une ville : porte de rubis, porte d'emeraude, ...).
Je me demandais comment vous feriez pour donner à des murs un aspect a moitié transparents (brillant?).

J'ai une petite idée, mais je ne sais pas si je part dans la bonne direction : utiliser plusieurs calques(un par mur), et appliquer une "transparence 50%" sur chaque calque.

Il y a p-e une technique plus simple pour donner un aspect transparent/pierre précieuse?

j'ai déja fait un essai (que je trouve moyennement réussi) avec un pont : (opacité 80% si mes souvenirs sont bons)
[Image: screen_arche.JPG]

RE: Batiments semi-transparents - khiguard - 28-01-2010

Ca dépend, c'est pour rentre les mur transparent pour que l'on vois les joueurs derrière ou bien simplement transparent?

Si c'est simplement transparent, je te conseil d'utiliser le format png 32bit avec de l'alpha pour tes images, j'ai remarquer que c'était moins lourd pour les navigateurs d'utiliser déjà des images avec transparente qu'utiliser les filtre transparent du navigateur.

@+

RE: Batiments semi-transparents - NicoMSEvent - 28-01-2010

en fait, ce que je souhaite, ce n'est pas de la transparence pour voir les personnage a travers, c'est juste des "tuiles" que je crée, qui sont censée représenter des batiments bien précis dans mon jeu et qui auraient des murs en peirre précieuse. Par exemple, l'entrée d'une ville constitué d'un batiment qui se nomme : la porte de rubis, qui serait faite en rubis (rouge transparent). Le but qu'elle soit transparente est de donner a ce batiment un aspect plus réel (dans l'idée ou mes contruction sont dans ces matériaux nobles), un peu comme le pont de diamant que j'ai montré dans mon premier post.
Je n'utilise pas de filtre coté navigateur (ou alors le moins possible, juste pour certains effets, comme mes menus a gauche et a droite), le png transparent j'essaye d'éviter pcq ça pese bcp plus lourd que le gif (surtout que je n'utilise pas le canal alpha, juste 100% transparent ou rien), et pour le jpg, c'est aussi bcp plus léger que le png (15k en jpg contre 180k en png). Donc, le png est p-e un format libre, et bien dans certain cas, mais je préfère m'en passer quand je peux :-p

RE: Batiments semi-transparents - Antyoz - 28-01-2010

C´est tres simple tu fais ta porte de rubis normalement, et lorsque tu vas save a la fin tu bouges le curseur "transfert" du dossier porte rubis vers la transparence que tu veux. lol bien sur sans fond derriere lol. Je parle sous photoshop mais il doit y avoir la meme fonction sous gimp.

Oui moi aussi j evite le png a cause du poid... surtout que maintenant ie7 et 8 prennent la transparence donc plus de soucis coté navigateur...!! Et pour quelques % qui utilisent ie6 bah tampis... Smile

J adore ton effet de lens flar...!! sur le pont. mortel !!

A mon avis pour faire des objets un peu féerique en jouant sur les couleurs type arc en ciel, les reflets et la transparence et tout, c´est un peu plus complexe que juste bouger un curseur de transparence... il faut save en transparence 80% puis retravailler dessus en rajoutant des paties moins tranparentes des reflets etc... pour avoir un bon resultat final.

RE: Batiments semi-transparents - My Hotel - 28-01-2010

Hum, c'est bien le pont sur le Pollimage? Si c'est le cas, la représentation est comme je me l'imaginais.
Sinon, pour la transparence, effectivement j'utilise aussi la transparence dans le navigateur, car à un moment on va pas assurer la compatibilité avec des navigateurs d'un autre âge. Surtout qu'ils doivent être encore moins utilisés par le public des jeux web.

Bye

RE: Batiments semi-transparents - NicoMSEvent - 29-01-2010

@antyoz : merci pour l'astuce, j'essaierai... l'effet Lenz est un classique de Gimp (2 clics pour afficher ça ^^) j'ai encore a peu pres 30% des visiteurs sont IE qui ont IE6 (ça représente 15% des visiteurs au total, quand meme!) je vais faire quelques essais, et reposter ici mes petites créations :p

@my hotel : oui oui, c'est bien ce pont là... j'apprécie le fait que tu l'ai imaginé comme ça Big Grin

RE: Batiments semi-transparents - khiguard - 29-01-2010

Citation :pcq ça pese bcp plus lourd que le gif
Attention que ce n'est pas exacte. Le png 32bit est forcément plus lourd que le gif (qui ne gère que 256 couleur). Si tu enregistre ton png en 8 bit, c'est équivalent en taille.

Bon, ben il te reste plus que l'opacité en css alors Smile

Mais comme je l'ais dis, utiliser l'opacité en css est plus lourd pour le navigateur que des images qui gèrent l'alpha, après cela, c'est une question de choix Smile Gérer une carte avec plusieurs centaines de tuiles avec l'opacité est extrême lourd.

Sinon il existe google frame pour les utilisateurs de IE6.
@+

RE: Batiments semi-transparents - NicoMSEvent - 29-01-2010

Donc, je reviens a la charge avec un premier essai.

Mon constat, il me semble que ça ressemble plus a du marbre qu'a du rubis. (je devrait ajouter des petites étoiles de scintillement un peu partout?)
[Image: D23_test1.gif]

Sinon, j'aurais aimé a terme avoir deux grosses sources d'eau en haut des tour, de sorte a avoir de belles cascades (qui n'empiètent pas sur la porte).
-> gif animé
L'eau va peut-etre masquer les imperfections de ce dessin? Comment diable je pourrais encore faire ça, moi ^^

Edit : changmeent du lien vers l'image pour garder l'historique

RE: Batiments semi-transparents - NicoMSEvent - 29-01-2010

tiens, antyoz, tu as viré ton commentaire?
Citation :Antyoz a répondu à une discussion auquel vous vous êtes abonné sur JeuWeb (JeuPHP) - Crée ton jeu par navigateur. Cette discussion est nommée Batiments semi-transparents.

Voici une partie du message :
--
Lol... horreur humanum est...!! passes moi le psd de tes 2 tours je vais voir ce que je peux faire..... (lisez la discussion pour en savoir plus)

Je ne travaille pas avec des photoshop (ni gimp sur ce coup ci), seulement paint ^^ (*fan pixel art inside*)

je suis parti de ce fichier ci :
[Image: C1.bmp]
et j'ai collé des morceaux de texture (colorisée grace a gimp) uniquement avec paint

ma méthode : http://ma-soiree.be/tuto_terrain.html

si quelqu'un est partant pour un coup de main(ou une idée?), je ne suis pas contre Smile

ps : je viens de me rendre compte que j'ai ma texture sur mon lieu de travail, et que je n'ai pas pris le soin de la sauver sur ma clé usb, donc je ne peux pas la récupérer avant lundi Undecided

RE: Batiments semi-transparents - Aleskweb - 30-01-2010

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).


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


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 Wink