Le système de GUI d’unity…Une grande « arnaque » !

Lourd, indigeste, mal optimisé, il donne un code difficilement évolutif sur des projets complexes. Pour les besoin de mon projet actuel, le manque d’optimisation du système de GUI natif nous oblige à l’abandonner.

Mais au profit de quoi ? Je pense que le meilleur remplaçant ne peux être que Ngui. Multi plateforme (webplayer, android, ios…), souple, complet et peu gourmand en ressources.

A ce propos, Aren Mook, le (génial?) développeur de Ngui vient d’être embauché par Unity pour travailler sur le nouveau système de GUI de ces derniers. Apparemment, il souhaite aussi développer un outil pour convertir le code ngui vers ce nouveau système  (qui à mon avis, n’est pas encore là…). Donc Ngui me semble presque une obligation dans des projets d’envergure.

En revanche, il n’est pas évident à adopter rapidement, et surtout encore moins à remplacer dans du code existant. Bref, même si l’apprentissage n’apparaît pas des plus difficiles, il n’empêche qu’il diffère complètement du GUI natif d’unity dans son principe. Je vais expliquer ici sur mon blog, les étapes d’apprentissage qui me paraissent les plus évidentes pour cette bibliothèque.

Pour cette première partie, on va simplement afficher du texte avec une fonte perso. Un petit rituel à connaître.

On va utiliser une police bien torturée pour vraiment voir ce que cela peut donner dans ce cas-là : 28 days Later sur dafont.com

Lancez unity sur un nouveau projet, importez le package Ngui (version gratuite ou payante – j’utilise la payante).

Supprimez la « Main Camera » de la scène.

Allez dans le menu NGUI -> Create a New Ui

Une fenêtre s’ouvre avec un onglet. Pour plus de facilité d’accès à celui-ci dans votre projet, glissez-le à côté de l’inspector. Cliquez sur « Create Your UI ». Des composants se sont ajoutés dans la scène (UI Root, une Camera, etc…).

Avant de créer une fonte pour Ngui, il va falloir générer deux fichiers. Un fichier image contenant tous les caractères utiles au format de notre police, plus un fichier texte qui définit pour chaque caractère la zone et les coordonnées de l’image à utiliser.

Pour cette opération on va utiliser Bitmap Font Generator (pour windows, mac utilisez bmGlyph par exemple).

 

Une fois celui-ci téléchargé, lancez le. Allez dans Options -> Font settings

Dans « Add font File », chargez le fichier 28 Days Later.ttf. Ensuite, dans « Font », choisissez « 28 Days Later ».

Dans « Size(px) », choisissez la taille de police souhaitée. On va par exemple lui donner 42px.

Vous devriez obtenir la grille de caractères suivante :

En fonction des besoins, on peut cliquer sur un caractère pour le désactiver lors de l’export, ou l’activer. Exemple, le caractère  ne nous sert à rien, on clique dessus pour le désactiver.

 

Ensuite, allez dans Options -> Export options

Pour « Bit depth » choisissez 32. Pour le format, choisissez .png.

Dans « Presets« , sélectionnez « White text with alpha »

Pour Width et Height, il faut optimiser au maximum. Pour avoir un aperçu de l’image et vérifier que tous les caractères y sont bien contenus, allez dans Options-> Visualize.

Si des caractères ne contiennent pas dans un seule image (ex: 1/2 dans la fenêtre), retournez dans Options -> Export options, et changez la largeur et la hauteur (multiple de deux). Rentrez 256 pour les deux.

On va pouvoir exporter nos fichiers : Options -> Save bitmap font as… , créez un dossier « 28 days later » dans le dossier « Assets » de votre projet unity, et donnez le nom de « 28 days later 42 » aux fichiers.

Allez dans le dossier contenant ces fichiers. Changez l’extension du fichier « 28 days later 42.fnt » en .txt.

Renommez « 28 days later 42_0.png » en « 28 days later 42.png » (le _0 est ajouté au nom en cas d’export contenant plusieurs images).

Maintenant, on va créer la « UIFont » Ngui. Dans Unity, allez dans NGUI ->Font Maker.

Faites glisser les deux fichiers générés précédemment dans les fenêtres adéquates.

Donnez le nom « 28 days later 42px »

Cliquez sur « Create a Font without an Atlas » (l’Atlas sera expliqué dans un prochain tuto).

 

Sélectionnez les deux fichiers générés (material & prefab) et glissez-les dans le dossier « 28 days later » pour tout centraliser (facultatif évidemment).

Ensuite, allez dans NGUI -> Create a Widget. Une fenêtre s’ouvre (que vous pouvez aussi glisser à côté de l’inspector).

Dans « Font », utilisez l’UIFont 28 days later 42px. Vérifiez que « Add To » pointe vers « Panel » créé au début du tuto, et cliquez dessus.

Voilà notre texte !

On va maintenant le changer pour tester. Cliquez sur Label, et dans le champ texte de l’inspector, entrez « [000000]Le GUI[-] Unity est [c80000]mort[-]« . A l’aide de ces balises, on peut donner de la couleur au texte très facilement !

On peut ajouter aussi des effets, comme une ombre au texte. Tout se fait sans compilation, dans la fenêtre de rendu !

A bientôt pour un prochain tuto sur Ngui 😉