IHM » History » Version 2

« Previous - Version 2/3 (diff) - Next » - Current version
Alejandro Motta Cano, 03/23/2015 10:53 PM


IHM

Pour compléter notre simulation nous avons décidé de lui ajouter une IHM assez simple mais permettant à l’utilisateur de s’y retrouver et de pouvoir modifier des options par exemple. L’Ihm n’est autre qu’un menu qui permet à l’utilisateur de lancer la simulation et de modifier des options de jeu. Nous avions au départ décidé d’utiliser une librairie C , la SDL. Une libraire C est un pack de fonction ,prête à être utilisé, qui à été crée dans le but d’effectuer certaines tâches précises. Dans notre cas La SDL pouvait parfaitement gérer notre interface utilisateur et avait l’avantage d’être « simple » à utiliser et de permettre de créer des menus assez rapidement.

Après réflexion, nous nous sommes rendu compte que Raydium incluait lui aussi la possibilité de créer des interfaces et que rajouter une librairie C en plus dans notre projet serait inutile et superflu ( sachant que Raydium peut faire la même chose).

Pour réaliser ce menu, nous avons utiliser les fonctions liées au GUI de Raydium. Gui signifie Graphical User Interface, interface graphique de l’utilisateur traduit en français, ce qui signifie en terme général l’interface qui va permettre à l’utilisateur de gérer le logiciel.

Le GUI de Raydium permet de crée des menus de façon simple en utilisant un thème pour les différents éléments du menu. Ce thème est sous la forme d’un fichier avec une extension .gui, il est possible de créer son propre thème, mais pour des raisons de temps et de manque de compétence graphique, nous avons utilisé le thème de base fournis avec Raydium, à savoir le fichier theme-raydium2.gui.

theme-raydium2.gui

Voici ce que contient le fichier theme. Ce sont les différents sprites des layouts (éléments du menu) utilisés. On peut y voir des boutons, des « conteneurs de texte », etc..

Voici la démarche de la création du GUI. Nous sommes parties sur une interface simple avec trois boutons, un lançant la simulation, un permettant de modifier des options du jeu et l’autre quittant la simulation.

Premièrement, il faut utiliser la fonction :

raydium_gui_theme_load(« theme-raydium2.gui");

Cette fonction prends en argument un nom de fichier , ce dernier doit être un fichier thème (.gui), et l’utilise pour gérer l’affichage des différents éléments du menu.

Ensuite nous avons créer une fonction heart() qui choisis entre l’affichage du gui ou la simulation. Pour la GUI, cette fonction va lancer build_gui() qui choisit quelle GUI construire et afficher. Nous avons définis différentes gui pour différents moments , une pour les options, une pour l’écran d’accueil et une autre pour le lancement de l’application.

Qu’importe la GUI, la suite va être presque la même. Il faut pour afficher une interface construire la gui que l’on veut, avec une fonction comme celle ci :

Premier screen shoot :: fonction build_gui_menu

Cette fonction va créer une nouvelle « sous fenêtre » avec la ligne 1°. Il faut savoir que la création de GUI sous Radium se base sur les coordonnées. A chaque création d’élément, il faut leur donner une position et une taille. Ensuite la fonction va créer une sorte de conteneur de layout( élément de menu) avec la ligne 2°. Les paramètres sont la taille et les coordonnées comme dit ci-dessus mais aussi un nom de bouton, un text qui s’affiche avec la méthode gettext(« texte ») et une fonction lié au bouton. Cette dernière fonctionne comme une fonction onClick en java, c’est à dire qu’elle va se lancer dès que l’on va cliquer sur le bouton.

Ensuite il va falloir afficher le GUI, cela ce passe comme pendant la simulation. Il faut utiliser une fonction comme celle ci

Deuxième screen shoot ::fonction gui_start()

Cette fonction permet de rendre visible le gui crée précédemment s’il ne l’est pas déjà. Ensuite il faut simplement utilisé la même fonction que la simulation, c’est à dire :

raydium_callback(&displayGui);

Cette dernière va appelé en boucle l’affichage du gui. Nous obtenons donc un menu simple et rapide d’utilisation.

guiStart.png (3.74 KB) Kevin Jabaud, 03/24/2015 12:08 AM

guiMenu.png (10.1 KB) Kevin Jabaud, 03/24/2015 12:08 AM