[GUI] Création d’un look

Bonjour à tous !

Dans le cadre du dossier consacrer à la création de GUI, voici donc le troisième article.

Maintenant qu’on sait ce que c’est qu’un imageset et qu’on connait le système de positionnement, on va pouvoir s’attaquer aux choses sérieuses ! On va commencer par supposer qu’on à un imageset avec tous pleins de sprites pour faire ce qu’on veut, comme par exemple une simple barre de vie . Et on va faire ça en XML, parce que c’est comme ça que c’est fait dans CeGUI, et j’expliquerai un autre jour l’avantage de ceci. On commence donc par créer l’objet :

<objet name = "maBarreDeVie" type = "objet">
</objet>

Cet objet sera logiquement le parent de tout objet placé à l’intérieur. On va y placer deux images, récupérées sur l’imageset (qu’on appellera « monImageset.imageset », nommées « backgroundBarreDeVie » et « barreDeVie ». Concernant le type de l’objet, ce n’est pas nécessaire de l’indiqué dans CeGUI, mais dans la GUI Cyanide si, donc je le met par habitude, et plus loin vous verrez une de ses utilités.

<objet name = "maBarreDeVie">
	<enfant typ e= "image" name = "BGmaBarreDeVie">
		<image imageset = "monImageset.imageset" value = "backgroundBarreDeVie" />
	</enfant>
	<enfant type = "image" name = "BARREmaBarreDeVie">
		<image imageset = "monImageset.imageset" value = "barreDeVie" />
	</enfant>
</objet>

Voilà, on a choisi les images, maintenant on va utiliser notre sytème UDim vu plus haut pour les placer correctement, de sorte que la vie soit représentée à 90%.

<objet name = "maBarreDeVie">
	<enfant type = "image" name = "BGmaBarreDeVie">
		<image imageset = "monImageset.imageset" value = "backgroundBarreDeVie" />
		<position scaleX = "0" offsetX = "0" scaleY = "0" offsetY = "0" />
		<taille scaleX = "1" offsetX = "0" scaleY = "1" offsetY = "0" />
	</enfant>
	<enfant type = "image" name = "BARREmaBarreDeVie">
		<image imageset = "monImageset.imageset" value = "barreDeVie" />
		<position scaleX = "0" offsetX = "0" scaleY = "0" offsetY = "0" />
		<taille scaleX = "0.9" offsetX = "0" scaleY = "1" offsetY = "0" />
	</enfant>
</objet>

On va maintenant rajouter du texte sur la barre, indiquant le pourcentage, juste pour le style, et pour montrer un peu plus l’utilisation des UDim.

<objet name = "maBarreDeVie">
	<enfant type = "image" name = "BGmaBarreDeVie">
		<image imageset = "monImageset.imageset" value = "backgroundBarreDeVie" />
		<position scaleX = "0" offsetX = "0" scaleY = "0" offsetY = "0" />
		<taille scaleX = "1" offsetX = "0" scaleY = "1" offsetY = "0" />
	</enfant>
	<enfant type = "image" name = "BARREmaBarreDeVie">
		<image imageset = "monImageset.imageset" value = "barreDeVie" />
		<position scaleX = "0" offsetX = "0" scaleY = "0" offsetY = "0" />
		<taille scaleX = "0.9" offsetX = "0" scaleY = "1" offsetY = "0" />
	</enfant>
	<enfant type = "text" name = "monText">
		<text value = "90/100" />
		<couleur value = "noir" />
		<position scaleX = "0.45" offsetX = "0" scaleY = "0.1" offsetY = "0" />
		<taille scaleX = "0.1" offsetX = "0" scaleY = "0.8" offsetY = "0" />
	</enfant>
</objet>

Et pour finir, on va rajouter l’architecture XML :

<?xml version = "1.0" ?>
<Look name = "MonLook">
	<objet name = "maBarreDeVie">
		<enfant type = "image" name = "BGmaBarreDeVie">
			<image imageset = "monImageset.imageset" value = "backgroundBarreDeVie" />
			<position scaleX = "0" offsetX = "0" scaleY = "0" offsetY = "0" />
			<taille scaleX = "1" offsetX = "0" scaleY = "1" offsetY = "0" />
		</enfant>
		<enfant type = "image" name = "BARREmaBarreDeVie">
			<image imageset = "monImageset.imageset" value = "barreDeVie" />
			<position scaleX = "0" offsetX = "0" scaleY = "0" offsetY = "0" />
			<taille scaleX = "0.9" offsetX = "0" scaleY = "1" offsetY = "0" />
		</enfant>
		<enfant type = "text" name = "monText">
			<text value = "90/100" />
			<couleur value = "noir" />
			<position scaleX = "0.45" offsetX = "0" scaleY = "0.1" offsetY = "0" />
			<taille scaleX = "0.1" offsetX = "0" scaleY = "0.8" offsetY = "0" />
		</enfant>
	</objet>
</Look>

Tadam ! Ensuite il y a différents type d’éléments de base, tels que les boutons. Ces derniers doivent notamment définir des états (Désactivé, Normal, Survolé, Appuyé), mais tout se fait dans le même principe, donc avec cet exemple, je pense que n’importe qui pourrait s’en sortir pour tout utiliser derrière. Enfin il faut quand même que je précise une dernière chose. Le fichier XML est analysé de haut en bas. L’objet placé le plus en bas sera du coup toujours affiché par DESSUS l’objet le plus en haut.

Une fois le look créé, ne reste plus qu’à l’utiliser dans un layout. Et pour savoir comment faire, on se retrouve demain pour parler de la création de layout.

XOXO.