Nous recherchions une solution efficace pour gérer les interfaces de nos projets. Je suis tombé sur NGUI dans le Unity Store. Après pas mal d’heures d’utilisation petit bilan.
Nous recherchions une solution efficace pour gérer les interfaces de nos projets. Je suis tombé sur NGUI dans le Unity Store. Après pas mal d’heures d’utilisation petit bilan.
Fonctionnalités
NGUI est un plug-in qui permet de réaliser des interfaces en se basant sur plusieurs fonctionnalités bien plus poussées que la GUI intégrée dans Unity.
Les interfaces sur des plans 3D sont directement customisable dans la scène. Le point fort principal de NGUI est d’utiliser dans plans 3D en limitant le nombre de draw call au strict minimum. Chaque élément d’interface est un GameObject classique sur lequel les scripts de NGUI sont déjà placés. Pour un texte on se retrouve avec un Script UILabel, pour un slider on a 3 GameObjects (un conteneur, un pour le fond et un pour la partie qui scale). Ce fonctionnement permet de customiser relativement facilement tous les composants en ajoutant ses propres scripts. Tous les éléments de l’interface sont déplaçables directement dans la scène en utilisant les transforms des Gameobject de l’interface. On voit le résultat dans la fenêtre Game directement sans avoir besoin de lancer le jeu.
La gestion des textures se fait sous forme d’atlas de sprites. Lorsque l’on souhaite utiliser des textures pour l’interface il faut les placer dans un Atlas de texture (ou dans plusieurs si on veut du SD et du HD par exemple) . Les sprites sont ensuite utilisables pour tous les composants de l’interface. La gestion des tiles ou des scales sont gérés directement par NGUI. Ce fonctionnement est simple et pratique, il permet de limiter les éléments dans l’Inspector et la duplication de textures. Par contre on se retrouve rapidement avec un atlas très grand (4K*4K) qui ne passe pas forcément sur toutes les plate-formes.
La gestion des polices se fait comme pour une texture. Les polices s’importent en utilisant BMFont puis une fenêtre fournie par NGUI pour importer la texture dans Unity. Cela permet des les intégrer ensuite dans un Atlas du projet et de les utiliser dans les éléments de NGUI. L’avantage est d’avoir des polices qui peuvent être redimensionnées directement à la bonne taille dans l’interface sans avoir besoin de gérer des polices dynamiques, gros avantage sur mobile.
On peut retenir aussi le clipping (masquer une partie d’un panel) qui est géré directement dans les panels. J’ai eu quelques soucis avec des widgets qui ont disparu à cause d’un clipping capricieux mais un reboot de Unity a corrigé le problème. Les ancres (Anchors) sont également extrêmement utiles pour placer des interfaces par rapport à un côté ou angle de l’écran. On peut ainsi avoir une interface qui s’adapte facilement aux différentes résolutions d’écrans.
La présence de nombreux exemples dans le package de NGUI (qu’on peut retrouver ici) permet de regarder un peu comment fonctionne le tout. Les tutoriaux vidéo sont utiles aussi, bien qu’un peu rapides…
Bilan et conseils
Au final, NGUI permet de gagner énormément de temps sur la création d’interfaces. Après avoir réalisé un projet complet de Casual game multi plateformes je peux dire que ce plug-in permet réellement de faire ce qu’il avance avec des interfaces dynamiques et rapides. J’ai cependant rencontré quelques petits soucis au cours de son utilisation.
Les puissances de deux(POT). Je pensais pouvoir m’affranchir de l’utilisation des POT dans mes interfaces en passant par un atlas mais il n’en est rien. J’ai eu la mauvaise surprise de voir toute mon interface ruinée après un passage sur Android. Après quelques manip pour remettre tous mes sprites en puissance de 2 tout est revenu dans l’ordre. J’ai également découvert un peu tard les Atlas de référence qui permettent de passer du HD au SD sans trop de problèmes (voir le tuto ici) . Je testerai cette fonctionnalité sur nos prochains projets.
J’ai également découvert que le mariage de sprite et de textures classiques n’était pas très heureux. NGUI permet d’afficher dans l’interface des textures classiques en utilisant le widget Simple Texture en plus des sprites. C’est très pratique pour afficher des images qui ne sont pas dans l’atlas mais les profondeurs sont assez mal gérées. Je n’ai pas trouvé de solution pour afficher sprite/texture/sprite les uns sur les autres. Nous avons dû nous résoudre à ne pas afficher de sprite au dessus de textures.
Au fil de mon utilisation je me suis tourné vers un fonctionnement “full prefab” pour les GUI. Chaque partie de GUI est un prefab qui est instancié au moment ou nous en avons besoin. Chaque préfab contient sa propre GUI avec sa caméra et ses ancres. Elle contient également le script nécessaire à son exécution de manière indépendante. Chaque élément de la GUI est complétée avec le bon contenu au moment de son instanciation en allant modifier les composants de la GUI, par exemple :
panel.transform.FindChild("text").gameObject.GetComponent().text = "blabla";
Cela permet d’avoir des temps de chargement de scène plus courts et de n’afficher les GUI qu’au bon moment. On retrouve le même fonctionnement pour un écran de pause par exemple ou pour les menus. J’utilise donc les scripts de NGUI en collaboration avec des script créés spécifiquement pour chaque partie de GUI du jeu et utilisant le modèle du jeu.
Pour conclure NGUI est un excellent investissement (90€ au moment ou j’écris ces lignes). A la fois pratique et très customisable le plug-in nous a permis de gagner beaucoup de temps et de performance sur les interfaces. Il n’est pas exempt de tout reproche avec une gestion parfois un peu complexe de la profondeur ou des polices mais pour un travail d’indépendant c’est une belle réussite. Je ne serais pas surpris de voir la prochaine version des GUI de Unity s’inspirer grandement de ce genre de fonctionnement.
ARTICLE SIMILAIRE: Utiliser les évènements C# dans Unity
VOUS CHERCHEZ UN PARTENAIRE POUR RÉALISER UN JEU VIDÉO ? VOUS AVEZ UN PROJET D’APPLICATION LUDIQUE ? CONTACTEZ-NOUS!
Fonctionnalités
NGUI est un plug-in qui permet de réaliser des interfaces en se basant sur plusieurs fonctionnalités bien plus poussées que la GUI intégrée dans Unity.
Les interfaces sur des plans 3D sont directement customisable dans la scène. Le point fort principal de NGUI est d’utiliser dans plans 3D en limitant le nombre de draw call au strict minimum. Chaque élément d’interface est un GameObject classique sur lequel les scripts de NGUI sont déjà placés. Pour un texte on se retrouve avec un Script UILabel, pour un slider on a 3 GameObjects (un conteneur, un pour le fond et un pour la partie qui scale). Ce fonctionnement permet de customiser relativement facilement tous les composants en ajoutant ses propres scripts. Tous les éléments de l’interface sont déplaçables directement dans la scène en utilisant les transforms des Gameobject de l’interface. On voit le résultat dans la fenêtre Game directement sans avoir besoin de lancer le jeu.
La gestion des textures se fait sous forme d’atlas de sprites. Lorsque l’on souhaite utiliser des textures pour l’interface il faut les placer dans un Atlas de texture (ou dans plusieurs si on veut du SD et du HD par exemple) . Les sprites sont ensuite utilisables pour tous les composants de l’interface. La gestion des tiles ou des scales sont gérés directement par NGUI. Ce fonctionnement est simple et pratique, il permet de limiter les éléments dans l’Inspector et la duplication de textures. Par contre on se retrouve rapidement avec un atlas très grand (4K*4K) qui ne passe pas forcément sur toutes les plate-formes.
La gestion des polices se fait comme pour une texture. Les polices s’importent en utilisant BMFont puis une fenêtre fournie par NGUI pour importer la texture dans Unity. Cela permet des les intégrer ensuite dans un Atlas du projet et de les utiliser dans les éléments de NGUI. L’avantage est d’avoir des polices qui peuvent être redimensionnées directement à la bonne taille dans l’interface sans avoir besoin de gérer des polices dynamiques, gros avantage sur mobile.
On peut retenir aussi le clipping (masquer une partie d’un panel) qui est géré directement dans les panels. J’ai eu quelques soucis avec des widgets qui ont disparu à cause d’un clipping capricieux mais un reboot de Unity a corrigé le problème. Les ancres (Anchors) sont également extrêmement utiles pour placer des interfaces par rapport à un côté ou angle de l’écran. On peut ainsi avoir une interface qui s’adapte facilement aux différentes résolutions d’écrans.
La présence de nombreux exemples dans le package de NGUI (qu’on peut retrouver ici) permet de regarder un peu comment fonctionne le tout. Les tutoriaux vidéo sont utiles aussi, bien qu’un peu rapides…
Bilan et conseils
Au final, NGUI permet de gagner énormément de temps sur la création d’interfaces. Après avoir réalisé un projet complet de Casual game multi plateformes je peux dire que ce plug-in permet réellement de faire ce qu’il avance avec des interfaces dynamiques et rapides. J’ai cependant rencontré quelques petits soucis au cours de son utilisation.
Les puissances de deux(POT). Je pensais pouvoir m’affranchir de l’utilisation des POT dans mes interfaces en passant par un atlas mais il n’en est rien. J’ai eu la mauvaise surprise de voir toute mon interface ruinée après un passage sur Android. Après quelques manip pour remettre tous mes sprites en puissance de 2 tout est revenu dans l’ordre. J’ai également découvert un peu tard les Atlas de référence qui permettent de passer du HD au SD sans trop de problèmes (voir le tuto ici) . Je testerai cette fonctionnalité sur nos prochains projets.
J’ai également découvert que le mariage de sprite et de textures classiques n’était pas très heureux. NGUI permet d’afficher dans l’interface des textures classiques en utilisant le widget Simple Texture en plus des sprites. C’est très pratique pour afficher des images qui ne sont pas dans l’atlas mais les profondeurs sont assez mal gérées. Je n’ai pas trouvé de solution pour afficher sprite/texture/sprite les uns sur les autres. Nous avons dû nous résoudre à ne pas afficher de sprite au dessus de textures.
Au fil de mon utilisation je me suis tourné vers un fonctionnement “full prefab” pour les GUI. Chaque partie de GUI est un prefab qui est instancié au moment ou nous en avons besoin. Chaque préfab contient sa propre GUI avec sa caméra et ses ancres. Elle contient également le script nécessaire à son exécution de manière indépendante. Chaque élément de la GUI est complétée avec le bon contenu au moment de son instanciation en allant modifier les composants de la GUI, par exemple :
panel.transform.FindChild("text").gameObject.GetComponent().text = "blabla";
Cela permet d’avoir des temps de chargement de scène plus courts et de n’afficher les GUI qu’au bon moment. On retrouve le même fonctionnement pour un écran de pause par exemple ou pour les menus. J’utilise donc les scripts de NGUI en collaboration avec des script créés spécifiquement pour chaque partie de GUI du jeu et utilisant le modèle du jeu.
Pour conclure NGUI est un excellent investissement (90€ au moment ou j’écris ces lignes). A la fois pratique et très customisable le plug-in nous a permis de gagner beaucoup de temps et de performance sur les interfaces. Il n’est pas exempt de tout reproche avec une gestion parfois un peu complexe de la profondeur ou des polices mais pour un travail d’indépendant c’est une belle réussite. Je ne serais pas surpris de voir la prochaine version des GUI de Unity s’inspirer grandement de ce genre de fonctionnement.
Une réponse