Bonjour à tous !

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

Maintenant que nos avons créer notre look, il faut bien l’utiliser. Et comme dit précédemment, c’est le but des layouts. Ces derniers peuvent être créés en XML ou en C++, au choix. Dans cet article, je vais vous montrer comment le faire dans les deux langages, en terminant dans les deux cas avec un code C++ dans lequel on a des variables vers les éléments de notre GUI. On peut faire les deux, et personnellement j’ai commencé par faire mes premières pages en C++, avant de les recopier en XML. C’est pas optimal, c’est même plus une perte de temps qu’autre chose, mais j’avais besoin de comprendre comment ça marchait, et le confort du C++ qui nous permet de voir les méthodes disponibles est vraiment appréciable pour découvrir le tout, en plus du fait que j’aime ce langage. Mais revenons à la création de layout, en commençant par la version C++ :

	// Layout Root node
	Node* m_pNode = static_cast<Node*>(graphicManager->CreateGUIRootNode());

	// Première barre de vie
	Objet* m_pBarre1 = static_cast<Objet*>(graphicManager->CreateObjFromLook(m_pNode, "MonLook", "barreDeVie1"));
	m_pBarre1->SetPosition( UVector2( UDim(0.1f, 0.f), UDim(0.05f, 0.f) ) );
	m_pBarre1->SetSize( UVector2( UDim(0.35f, 0.f), UDim(0.1f, 0.f) ) );

	// Deuxième barre de vie
	Objet* m_pBarre2 = static_cast<Objet*>(graphicManager->CreateObjFromLook(m_pNode, "MonLook", "barreDeVie2"));
	m_pBarre2->SetPosition( UVector2( UDim(0.55f, 0.f), UDim(0.05f, 0.f) ) );
	m_pBarre2->SetSize( UVector2( UDim(0.35f, 0.f), UDim(0.1f, 0.f) ) );

On voit que pour appeler les différents objets du look, on a besoin du nom du look « MonLook », puis du nom de l’objet. Quand au type de l’objet dont je vous ai parlé plus haut, vous voyez aussi qu’il est utilisé dans le C++, les objets étant récupérés dans des variables en rapport avec ce type. Comme vous pouvez le voir, on peut réutiliser plusieurs fois le même objet, du moment que vous lui donnez des noms différents. J’ai décalé les barres de vie du haut de l’écran pour qu’elle n’y soit pas collées, et j’ai laissé 10% de décalage à gauche, à droite, et entre les deux. Et petite précision, je ne travaille presque qu’avec les scales, et non les offsets. La raison est simple, comme ça même en changeant de résolution, on garde la même intercace Wink . Les images sont « stretchées », donc il faut faire attention à ne pas prendre des images trop petites à la base.
La version XML est quand à elle composée d’un fichier XML, logique, mais aussi d’un fichier C++, qui nous permet de récupérer des pointeurs vers les objets créés dans le XML, pour travailler avec eux dans notre code. La voici :

<Layout>
	<position scaleX = "0" offsetX = "0" scaleY = "0" offsetY = "0" />
	<taille scaleX = "0.9" offsetX = "0" scaleY = "1" offsetY = "0" />
	<enfant type = "maBarreDeVie" look = "MonLook" name = "barreDeVie1">
		<position scaleX = "0.1" offsetX = "0" scaleY = "0.05" offsetY = "0" />
		<taille scaleX = "0.35" offsetX = "0" scaleY = "0.1" offsetY = "0" />
	</enfant>
	<enfant type = "maBarreDeVie" look = "MonLook" name = "barreDeVie2">
		<position scaleX = "0.55" offsetX = "0" scaleY = "0.05" offsetY = "0" />
		<taille scaleX = "0.35" offsetX = "0" scaleY = "0.1" offsetY = "0" />
	</enfant>
</Layout>
	// Layout Root node
	Node* m_pNode = static_cast<Node*>(graphicManager->CreateGUIRootNodeFromLayout("MonLayout.XML"));

	// Première barre de vie
	Objet* m_pBarre1 = static_cast<Objet*>(m_pNode->GetChild("barreDeVie1"));

	// Deuxième barre de vie
	Objet* m_pBarre2 = static_cast<Objet*>(m_pNode->GetChild("barreDeVie2"));

On voit que le code C++ est plus compact, vu que la majorité des infos sont contenues dans le XML. Et pour finir cet article, voici un petit exemple d’utilisation des variables obtenues : on va mettre la barreDeVie1 à 50% . Dans les deux cas, le code est le même, vu qu’on a au final fait la même chose de deux façons différentes !

	( static_cast<Image*>(m_pBarre2->GetChild("BARREmaBarreDeVie")) )->SetSize( UVector2( UDim(0.5f, 0.f), UDim(1f, 0.f) ) );

On récupère donc l’enfant correspondant, qu’on convertit dans le bon format, puis on lui change la taille. Voilà, vois savez maintenant créer une interface d’un bout à l’autre ! Enfin, à condition d’avoir les sprites à la base Razz . Mais peur le peu d’entre vous que je n’ai toujours pas perdu et qui arrive à suivre, il y a sûrement une question qui reste en suspens : quel format choisir pour les layouts, XML ou C++ ? Ca tombe bien, mon article demain visera justement à répondre à cette question. Je vous retrouve donc dans 24 heures Wink .
XOXO.