2D shader

Questions à propos du scripting Shader.
Avatar de l’utilisateur
Syneor
Messages : 22
Inscription : 09 Déc 2014 11:35

2D shader

Message par Syneor » 13 Mars 2015 09:22

Bonjour,

Je créé un nouveau topic dans cette section, bien que je ne soit pas sûr que cela soit la bonne.

J'ai un projet qui me tiens a coeur, celui de créer en monde ouvert, des planètes en 2D, ou le joueurs pourras ce balader dans l'espace, pour voyager d'une planète a l'autre par exemple.
En imaginant un système de gravité... etc bref.

Je suis tombé sur des vidéos de planètes en 2D avec des effets juste, grandioses, je rêverais de pouvoir les reproduires pour les avoir dans mon projet, et de pourquoi pas créé mes propres effets.. mais voila ou cela cloche, je suis un débutant, je ne comprends pas comment il a fais.

J'ai vu dans une description qu'il a écrit: "Just simple unity (2D) space effect (3 quads and 3 shaders)"

Et dans la dernière vidéo, il a laissé un lien vers cela: https://www.shadertoy.com/view/lssGWj

Voici les vidéos, ou vous pouvez voir les effets en questions:

https://www.youtube.com/watch?v=U1gjaVJ ... 1gjaVJzul0[/youtube]

https://www.youtube.com/watch?v=iIeOlxS ... IeOlxSN5VY[/youtube]

https://www.youtube.com/watch?v=fmlFQra ... mlFQraOuZo[/youtube]

https://www.youtube.com/watch?v=3X2iezF ... X2iezFDEBQ[/youtube]


S'il vous plait, quelqu'un pourrait-il m'expliquer comment faire ?

Avatar de l’utilisateur
boubouk50
ModoGenereux
ModoGenereux
Messages : 5402
Inscription : 28 Avr 2014 11:57
Localisation : Toulouse

Re: 2D shader

Message par boubouk50 » 13 Mars 2015 10:32

Pour l'espace qui défile, je vois 1 texture dupliquée 3 fois en addition qui défile à 3 vitesses.
Tu commences par une texture qui défile -> translation des UVs en fonction du temps
Tu recommences la même chose mais en scalant les UVs pour que le texture apparaisse plus petite avec une translation plus lente pour simuler un 2e plan que tu additionnes au premier.
La même encore plus petite et lente.
"Ce n'est pas en améliorant la bougie, que l'on a inventé l'ampoule, c'est en marchant longtemps."
Nétiquette du forum
Savoir faire une recherche
Apprendre la programmation

Avatar de l’utilisateur
Syneor
Messages : 22
Inscription : 09 Déc 2014 11:35

Re: 2D shader

Message par Syneor » 13 Mars 2015 11:37

Merci pour votre réponse, mais je m'en excuse, je ne comprends pas grand chose. (Je débute tout juste).

Es-ce que je pourrais créer le même effet de fond comme cela, mais a travers les déplacements du joueur (étant donné que je cherche a créé un univers ouvert, ou le joueur pourra ce déplacer librement). Si oui, pourriez-vous s'il vous plait, m'expliquer de la manière la plus simple possible, en prenant en compte que je débute sur unity?

Avatar de l’utilisateur
boubouk50
ModoGenereux
ModoGenereux
Messages : 5402
Inscription : 28 Avr 2014 11:57
Localisation : Toulouse

Re: 2D shader

Message par boubouk50 » 13 Mars 2015 12:14

Pour visualiser ce que tu dois faire:
Ouvre une image d'espace dans Photoshop (donc fond noir, étoiles claires).
Duplique ce calque par dessus, diminue sa taille par deux, mets la en mode de fusion Éclaircir.
Sélectionne le premier calque (donc le plus gros donc le plus près), et translate le avec la flèche directionnelle.
Tu verras ainsi apparaître 2 plans. Le lointain (qui ne bouge pas) et le proche qui bouge, qui crée un effet de profondeur.
Dans l'idée, plus les étoiles sont proches plus elles bougent vite (comme dans une voiture, le premier plan est rapide, les montagnes au loin sont lentes), et les différentes vitesses liées au différentes tailles des étoiles simulent ainsi la profondeur. C'est le même principe pour n'importe quel scroller 2D.

Pour le shader, il suffit de recréer cela, avec un paramètre extérieur: le déplacement.
Le déplacement de ton perso (ou autre) active les translations.

Tu as donc:
Une image de premier plan qui translate à une vitesse X*déplacement.
Une image de second plan qui translate à une vitesse Y*déplacement, avec Y<X
Une image d'arrière plan qui translate à une vitesse Z*déplacement, avec Z<Y
Ces trois images sont additionnées au final pour qu'elles se superposent et le tour est joué.
"Ce n'est pas en améliorant la bougie, que l'on a inventé l'ampoule, c'est en marchant longtemps."
Nétiquette du forum
Savoir faire une recherche
Apprendre la programmation

Avatar de l’utilisateur
Syneor
Messages : 22
Inscription : 09 Déc 2014 11:35

Re: 2D shader

Message par Syneor » 14 Mars 2015 07:26

Merci pour votre réponse.

J'avais compris par rapport au fonctionnement du scroller, mais ce que je ne comprends pas c'est comment l'appliquer?
Lorsque vous dites: "Une image de premier plan qui translate à une vitesse X* déplacement."

Cela est a coder ?
Ou cela est un effet a ajouter via un nouveau composent ou quelque chose comme ca?

Pourriez vous svp m'expliquer en détails comment procéder?

Avatar de l’utilisateur
boubouk50
ModoGenereux
ModoGenereux
Messages : 5402
Inscription : 28 Avr 2014 11:57
Localisation : Toulouse

Re: 2D shader

Message par boubouk50 » 16 Mars 2015 10:55

Ah oui, il faut tout coder dans ton shader. Mais ce n'est rien de bien compliqué.
Pour ce qui est d'expliquer comment un shader fonctionne, par contre, je te conseille te chercher un peu sur la toile, il y a tout ce qu'il faut.
Par exemple.
"Ce n'est pas en améliorant la bougie, que l'on a inventé l'ampoule, c'est en marchant longtemps."
Nétiquette du forum
Savoir faire une recherche
Apprendre la programmation

Répondre

Revenir vers « les Shaders »