Difficulté:
Salut à tous !
J'ai réalisé il y a peu de temps un p'tit effet sympa 2d, à savoir la surbrillance animé des textures2d. J'ai parcouru les forums et j'ai rien trouvé sur ça, pour Unity.
Si vous voulez plus de détails, vous pouvez vous rendre à cette adresse:
http://addyosmani.com/blog/shinetime/
En gros c'est ça, comme un effet de brillance présent dans pas mal de jeux, surtout les jeux oldschool. Je vais vous détailler la procédure, les ressources nécessaires, ainsi qu'un exemple (et une démo si vous êtes sage
).Vous pouvez retrouver le lien de mini tutoriel sur mon site en bas de page.
Le principe:
Le meilleur moyen de réaliser un tel effet, c'est de se servir d'un shader particulier, et de coupler ça à l'animation UV tiling d'une texture. Pour ceux qui ne savent pas, vous avez la doc, et plein d'exemple qui traitent de ce sujet.
http://docs.unity3d.com/Documentation/C ... erial.html
Le shader va prendre 2 textures, et utiliser le channel alpha pour découper l'image selon une autre, comme un masque.
Exemple:
Pré-requis:
- Shader:
http://cayou-prod.com/unity/AlphaTest-Diffuse.shader
- Exemples de textures:
La texture qui représente le reflet:
http://cayou-prod.com/images/shine2D.png
L'image de base:
http://cayou-prod.com/images/title.png
- Script:
http://cayou-prod.com/unity/Shine2DAnimation.cs
- HOTween. Si vous voulez utiliser mon code, il vous faudra HOTween, mais il ne me sert juste qu'à faire varier la variable de tiling, rien de plus. C'est juste pour des raisons pratiques.
http://www.holoville.com/hotween/download.html
Bien entendu, ces ressources sont libres
Utilisation:
Passons à la mise en pratique !
Créez deux planes 2d dans votre scène, l'un devant l'autre. Le plus près va recevoir notre shader spécial, ainsi que notre script Shine2DAnimation. Le second plane, derrière sera juste un plane avec un shader transparent, contenant l'image de base, notre titre.
Voilà à quoi ça doit ressembler pour l'instant:
Une fois les paramètres des planes changés comme expliqué (le fond avec la texture title en transparent/diffuse, et celui de devant avec la texture Shine2D et le shader Transparent/cutout/AlphaTest), voilà le résultat:
(ouvrez l'image dans un autre onglet pour l'avoir en entier)
Vous pouvez attribuer donc pour l'image en avant plan la texture du titre en première texture, et le Shine2D en seconde.
Vous appliquez le script sur le plane au 1er plan. Là vous pouvez paramétrer différentes valeurs, loop ou non, le temps entre chaque loop, le temps de l'animation.
Enfin la valeur min et max du tiling. Perso j'ai mis -1 et 0.6. Ça va dépendre sans doute de vos images, mais il faut que ça soit assez grand pour que le reflet sorte de l'image.
Une fois fait, il suffit de rajouter une lumière devant, en spotlight, pour rendre la texture du 1er plan plus lumineuse. Et vous pouvez lancer
Voici le résultat:
http://cayou-prod.com/unity/ShineExampl ... layer.html
Voici le package du projet, pour les fainéants
http://cayou-prod.com/unity/ShineExampl ... itypackage
N'hésitez pas à poser des questions, j'ai fais ça rapidos, il se pourrait que j'ai oublié des éléments importants.
Merci !
http://cayou-prod.com/?p=192&lang=fr
