SVG et unity

Si vous souhaitez faire un projet 2D le plus light possible, pour un projet mobile par exemple. Le point sur lequel vous pouvez le plus intervenir est les ressources. On peut jouer à plusieurs niveaux, mais aujourd’hui je vous propose de voir comment améliorer largement le poids des images avec le format SVG.

Dans un projet 3D, j’aurais conseillé d’utiliser du png comme tout le monde. Gérant la transparence et ayant un poids relativement faible par rapport à d’autres formats. Cependant pour un projet 2D on peut se permettre d’utiliser du SVG. Sous Unity pour ce faire il faut utiliser le plug-in SVG Importer.

SVG c’est quoi ?

Selon Dico du Net : « Le langage SVG est un standard du W3C qui permet de décrire des ensembles graphiques en deux dimensions à l’aide du langage XML »

Pour faire simple, au lieu de retenir en mémoire chaque pixel de l’image dont les pixels transparents, on ne retient que la manière de dessiner les différents éléments. C’est une manière totalement différente de faire une image. Ainsi le poids ne sera pas déterminé par chaque pixel mais par une suite d’instructions géométriques.

En plus du poids, le fichier SVG a un second point fort, c’est le scalabilité. On peut mettre à n’importe quelle échelle l’image sans avoir de glitch.

 

Il y a des contreparties, la première étant qu’au lieu de consommer de la mémoire, on va utiliser du calcul. Même si le calcul n’est pas impacté tant que ça, si votre image est extrêmement complexe ça pourrait le devenir, mais il y a assez peu de chance.

La deuxième est la création. Tous les éditeurs d’images ne gèrent pas ce format et il n’est pas possible de convertir n’importe quelle image vers ce format non plus. Cependant, les logiciels potrace et autotrace peuvent être utilisés pour faire la conversion entre les formats BMP et PNM et le format SVG pour les images en noir et blanc, dans le cas d’images très simples.

 

Création d’un SVG

Si vous utilisez Illustrator

Vous pouvez créer votre image, et enregistrer sous :

Vérifier que les configurations sont bonne pour SVG importer.

Si vous n’avez pas illustrator, il existe de plus en plus d’éditeurs supportant ce format, et quelques versions en ligne comme :

  • http://editor.method.ac/
  • http://www.clker.com/inc/svgedit/svg-editor.html

 

Pourquoi SVG Importer ?

<iframe style= »width: 600px; height: 130px; border: 0px; » src= »https://api.assetstore.unity3d.com/affiliate/embed/package/38258/widget-wide?aid=1011lK7T » width= »600″ height= »130″></iframe></span>

J’ai pu tester SVG importer sur plusieurs projets et ait vu certains bugs se corriger. Par exemple sur un de mes jeux TracePath. Dans mon cas c’était un gain en calcul, la gestion de png était assez lourde, et le SVG me permet aussi de changer de couleur facilement une même image. Un même modèle pouvait ainsi se changer directement depuis des configurations dans le code. Le nombre de ressources a ainsi drastiquement chuté.

Pour ma part mes besoins étaient donc relativement simple, pas d’effets, pas de gestion complexe d’image.

Dans les projets de démos qu’ils proposent, vous avez une bonne partie de ce qu’il est possible de faire.

Curves Demo

C’est un peu la démo par défaut de SVG Importer. Ici on suit un train parmi plusieurs décors pour nous permettre qu’on puisse utiliser plusieurs couches et que tout reste très fluide.

Hologram Demo

Surement ma démo préférée, cette scène montre qu’on peut utiliser des SVG même dans des scènes 3D. Au lieu d’avoir un modèle compliqué avec une animation assez lourde. Ici c’est simplement des morceaux de SVG qui vont bouger les uns par rapport aux autres.

Infinite Scene Demo

Un effet relativement simple, mais qui permet de voir qu’on peut zoomer à l’infinie sans aucun glitch. En réalité vous avez 3 images, la première est celle à partir de laquelle on va zoomer. Une fois arriver à la 2ème en plein écran, on revient enfaite sur la première. La 3ème image permettant juste de faire l’illusion de l’image suivante.

 

Effets sur les images

La lib est assez complète, elle propose plusieurs effets. Je n’ai pas particulièrement eu besoin, mais qui sont indispensable pour certains projets

Un effet de flou (l’image bouge relativement vite)

Un effet de transparence en dégradé.

 

Facilité d’utilisation

Bon tout ça c’est beau, mais comment on fait pour l’utiliser concrètement ?

Dans le cas courant où je l’utilise, on va mettre de côté tous les effets, et on va simplement glisser un SVG dans les assets.

Celui-ci a quelques propriétés, si on voulait s’amuser, en général je laisse par défaut.

 

Et depuis les assets, je glisse le SVG dans la scène… et c’est tout

 

La couleur du carré est transparente, pourquoi ? Parce que le cas le plus compliqué que j’étais utilisé permettait de changer la couleur selon l’humeur depuis le code, de cette manière je pouvais changer le background en gardant les formes et effets du SVG. L’astuce est relativement simple, j’ajoute un petit script sur l’image avec ce genre de fonction

    private void RefreshTileColor()
    {
        if (!Selectable)
            Background.color = colorManager.NoSelectableColor;
        else if (Selected &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; IsLastSelected)
            Background.color = colorManager.LastSelectedColor;
        else if (Selected)
            Background.color = colorManager.GetColor(selectedX);
        else
            Background.color = colorManager.UnselectedColor;
    }

Donc aucune complexité, mise à part le fait de créer/générer des SVG.

Bug connu, et contournement?

Cela fait bientôt un an que je travaille avec cette librairie et j’ai rencontré quelques bugs, comme n’importe quelle librairie. Au cas où vous tomberiez dessus, je vous propose de voir comment je les ai esquivés.

 

1) Parfois le rendu n’était plus fait dans l’éditeur, mais n’impactait pas le rendu finale. Le problème ne semble plus exister depuis un moment.

Solution, l’ajout d’un SVG à la racine des components même en invisible, forçait l’actualisation. Mais comme je notais le rendu finale reste bon donc c’est plus du confort.

 

2) Il est possible qu’une fois importé SVG Importer, il ne soit pas possible d’y glisser des fichiers SVG.

Solution, il suffit de relancer unity.

 

Bref une librairie que je recommande

<iframe style= »width: 600px; height: 130px; border: 0px; » src= »https://api.assetstore.unity3d.com/affiliate/embed/package/38258/widget-wide?aid=1011lK7T » width= »600″ height= »130″></iframe></span>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *