Bonjour !

On continue sur la lancée Ngui !

Pour vous faire réviser, avant toute chose, créez une UIFont avec cette célèbre police, Ubuntu. Utilisez Ubuntu-M.ttf avec une taille de 30px.

Une fois fait, créez une nouvelle scène. Dans « Assets », créez un dossier « GUI files », puis dans celui-ci, un dossier « Font » contenant le fichier txt et png pour la police Ubuntu.

Ensuite, créez un dossier « Textures » dans « Assets », et placez-y les trois images suivantes :

Normalement, vous devriez obtenir ceci dans « Project » :

On va maintenant commencer la création de notre interface. Allez dans NGUI -> Create a New  UI

Dans « Layer », choisissez « Add Layer… », créez un calque « NGUI » et sélectionnez-le dans l’UI Tool. Ensuite cliquez sur « Create Your UI« .

On va ensuite créer un « Atlas ». Un Atlas est une sorte de package qui comprend des sources pour notre GUI. Le but des Atlas est de regrouper toutes ces sources dans un minimum de fichiers afin d’optimiser les drawcalls entre autre.

Pour ouvrir la fenêtre de création d’Atlas, on va utiliser NGUI -> Atlas Maker. Faites glisser l’onglet à côté de l’Inspector. Donnez le nom « Atlas tuto », et dans Project, sélectionnez, en gardant shift appuyé, les trois textures. Dans l’Atlas Maker, vous devez voir ces textures dans « Sprites« . Ensuite, cliquez sur « Create ».

Trois fichiers sont crées : 1 material, l’Atlas et la texture regroupant les trois textures du tuto. Déplacez-les dans un dossier « GUI files/Atlas ».

 

Maintenant, allez dans NGUI -> Create a Widget. Dans « Atlas », prenez l’« Atlas tuto », dans Template choisissez « Sprite », et dans Sprite, « icon more ». Ensuite cliquez sur « Add To ». Si tout est bon, vous voyez le bouton plus sur la scène.

Maintenant, on va ajouter une police dans notre Atlas. Facile, NGUI -> Font Maker.

Récupérez les fichiers comme expliqué dans le tuto précédent, donnez le nom « Ubuntu 30px » et dans « Atlas », sélectionnez l’Atlas précédent.

Ensuite, cliquez sur « Create the Font« .

Quelques dixièmes de seconde de calcul, et Ngui ajoute le fichier image de la police avec les autres images de l’Atlas dans une seule texture ! C’est une des forces de Ngui !

Placez l’UIFont « Ubuntu 30px » dans le dossier « Font ».

Ensuite, dans « Widget Tool » (NGUI -> Create a Widget), dans « Template » choisissez « Label »,  « Atlas » l’Atlas tuto, et « Font » Ubuntu 30px.

Vérifiez qu’« Add To » pointe bien sur Panel, et cliquez dessus.
Une fois le Label dans la scène, changez le texte par « Texte d’exemple [ff9c00]Ngui[-] ».

Vous devriez obtenir ceci :

Changez la position en Y du label afin d’obtenir ceci :

On va créer un « fond » au sprite +. Allez dans « Widget Tool ». Vérifiez que l’« Atlas tuto » et « Ubutun 30px » y sont définis.

Choisissez dans « Template » « Sliced Sprite« , ensuite « gui background » comme Sprite. Vérifiez qu’« Add To » pointe bien sur Panel, et cliquez dessus.

Le Sprite apparait dans la scène. On va changer ses dimensions. Dans l’Inspector, changer le Scale du « SlicedSprite » en X à 250.

Le résultat n’est pas terrible, normal, la texture est déformée dans sa totalité, donc les arrondis sont altérés. Pour corriger cela, il faut sélectionner l’« Atlas tuto », le Sprite « gui background » dans l’Inspector.

Dans « Border », saisissez 20 pour les 4 champs. On vient de définir les bordures du Sprite qui ne doivent pas être déformées.

Le résultat est maintenant correct :

Pour laisser apparaître le Sprite sur le fond, il faut définir la valeur « Depth » du « SlicedSprite » à -1. Vous imaginez facilement que ce système de profondeur est beaucoup plus pratique que le GUI.depth d’Unity !

Résultat :

Ce Sprite « + » est bien joli, mais il ne sert à rien…Donc il nous faut le même en bouton. Supprimez-le, allez  dans « Widget Tool ».

Dans « Template », sélectionnez « Button », Background « icon more » et cliquez sur « Add To ».Dans « Hierarchy », dépliez l’arborescence du bouton « Button ».

Celui-ci est composé de deux éléments que l’on connaît déjà !

« Background » qui est un SlicedSprite et « Label » qui est donc un Label.

Dans « Background », allez dans l’Inspector et donnez un Scale en X et Y de 80.

Dans « Label« , Supprimez tout le texte.

Retournez sur « Button », Dans « Box Collider » (Utile pour détecter le curseur) donnez un Size en X et Y de 80. Dans « UIButton », donnez la couleur blanche pour « Hover ».

Avec Ctrl + D, dupliquez le bouton. Donnez le nom de « Button more » et « Button less » à ces deux boutons.

Dans « Button less », dépliez l’arborescence, sélectionnez « Background » et changez le Sprite par la texture avec le moins.

Déplacez les deux boutons l’un à côté de l’autre. Lancez la scène, et survolez les boutons pour les tester. Génial, ça marche.

Remarquez le nombre de Draw Calls : 1 !!

Dans le prochain tuto, on va ajouter un peu de code pour vous expliquer comment gérer les événements avec Ngui.