Sujet: Réaliser un effet brillant animé sur des textures 2d.

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

     

    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/Components/class-Material.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/ShineExample/WebPlayer/WebPlayer.html
    Voici le package du projet, pour les fainéants ^^ http://cayou-prod.com/unity/ShineExample/ShineExample.unitypackage

    N’hésitez pas à poser des questions, j’ai fais ça rapidos, il se pourrait que j’ai oublié des éléments importants. Merci !