Réalisation d'une bibliothèque de menus jeux vidéo en JOGLdeptinfo.unice.fr/twiki/pub/Linfo/JournauxDeBord/... · Qu'est-ce qu'un menu dans les jeux vidéo? Objectifs Introduction

Réalisation d'une bibliothèque de menus

�jeux vidéo� en JOGLTravail d'Étude

Jean-Michael Legait Michèle Reynier Nicolas Bussière

Université de Nice-Sophia Antipolis

29 Juin 2005

IntroductionPossibilités o�ertes

StructureExtensibilité

FacilitéTutoriel

Conclusion

Michèle Reynier, Jean-Michael Legait, Nicolas Bussière Menu JOGL



FacilitéTutoriel

Conclusion

Plan

1 Introduction

2 Possibilités o�ertes

3 Structure

4 Extensibilité

5 Facilité

6 Tutoriel

7 Conclusion




FacilitéTutoriel

Conclusion

Plan

1 Introduction


3 Structure

4 Extensibilité

5 Facilité

6 Tutoriel

7 Conclusion




FacilitéTutoriel

Conclusion

Plan

1 Introduction


3 Structure

4 Extensibilité

5 Facilité

6 Tutoriel

7 Conclusion




FacilitéTutoriel

Conclusion

Plan

1 Introduction


3 Structure

4 Extensibilité

5 Facilité

6 Tutoriel

7 Conclusion




FacilitéTutoriel

Conclusion

Plan

1 Introduction


3 Structure

4 Extensibilité

5 Facilité

6 Tutoriel

7 Conclusion




FacilitéTutoriel

Conclusion

Plan

1 Introduction


3 Structure

4 Extensibilité

5 Facilité

6 Tutoriel

7 Conclusion




FacilitéTutoriel

Conclusion

Plan

1 Introduction


3 Structure

4 Extensibilité

5 Facilité

6 Tutoriel

7 Conclusion




FacilitéTutoriel

Conclusion

Qu'est-ce qu'un menu dans les jeux vidéo ?Objectifs

Introduction

Sujet

�Au travers de l'étude de la librairie jogl(openGL depuis Java), les élèvesdevront réaliser une bibliothèque pour présenter des menus interactifs �àla sauce jeux vidéo�...�

Pourquoi avoir choisi ce sujet ?

aspect graphique,

phase de conception.




FacilitéTutoriel

Conclusion


Introduction

Sujet

�Au travers de l'étude de la librairie jogl(openGL depuis Java), les élèvesdevront réaliser une bibliothèque pour présenter des menus interactifs �àla sauce jeux vidéo�...�

Pourquoi avoir choisi ce sujet ?

aspect graphique,

phase de conception.




FacilitéTutoriel

Conclusion


IntroductionQu'est-ce qu'un menu dans les jeux vidéo ?

interface utilisateur

permet de faire des choix

permet de faire des réglages

navigation entre di�érents écrans

contient di�érentes entrées :boutonscases à cocher/checkboxcurseurs/slidermenus déroulant/combo box...




FacilitéTutoriel

Conclusion


Introduction

Un menu simple : World Of Warcraft




FacilitéTutoriel

Conclusion


Introduction

Une disposition plus élaborée : Trackmania Sunrise




FacilitéTutoriel

Conclusion


Introduction

Des curseurs : GTR




FacilitéTutoriel

Conclusion


Introduction

Cases à cocher et menus déroulants : Age of Empire




FacilitéTutoriel

Conclusion


Objectif Priorité

Fonctionnement dans une application 3D existante très hauteFacilité d'utilisation très hautePropagation des événements très hauteExtensibilité très hauteNavigation très hauteFonds hautePolices moyenneE�ets visuels de navigation moyenneDiversité des entrées moyennePositionnement moyenneTransitions faibleE�ets 3D très faible




FacilitéTutoriel

Conclusion

Ajout d'un élémentApparencePositionnement d'entrées dans un menuGestion des événements

Possibilités o�ertes

Ajout du menu dans une application 3D existante.

Ajout au menu :

d'une entréeadaptation de la taille dumenuenvoi d'une exception

d'un sous-menucréation d'un nouveauboutoncréation d'une liaisonbouton/sous-menu




FacilitéTutoriel

Conclusion


Possibilités o�ertesApparence

Le programmeur peut personnaliserl'apparence de son menu avec :

la police

le fondcouleurdégradétexture




FacilitéTutoriel

Conclusion



Le programmeur peut personnaliserl'apparence de son menu avec :

la police

le fondcouleurdégradétexture




FacilitéTutoriel

Conclusion



Style par défaut

Le style par défaut pour :

la police

la couleur du fond

la couleur du texte




FacilitéTutoriel

Conclusion


Possibilités o�ertesPositionnement

La position des entrées dans le menu

2 types fournis :

un positionnement absolu

un positionnement centré




FacilitéTutoriel

Conclusion




2 types fournis :






FacilitéTutoriel

Conclusion




2 types fournis :






FacilitéTutoriel

Conclusion


Possibilités o�ertesGestion des événements

Navigation

La navigation dans le menu avec :

le clavierles �èchesESPACE, et CTRLENTERESC

la souris

L'envoi des événements




FacilitéTutoriel

Conclusion


Possibilités o�ertesGestion des événements

Apparence

Le changement d'apparence provoqué par :

les �èches du clavier et le survole de la souris

la touche ENTER et le clic souris




FacilitéTutoriel

Conclusion

Structure




FacilitéTutoriel

Conclusion

Structure




FacilitéTutoriel

Conclusion

Structure




FacilitéTutoriel

Conclusion

Structure




FacilitéTutoriel

Conclusion

Structure




FacilitéTutoriel

Conclusion

Structure




FacilitéTutoriel

Conclusion

Structure




FacilitéTutoriel

Conclusion

Structure




FacilitéTutoriel

Conclusion

Structure




FacilitéTutoriel

Conclusion

Créer de nouveaux stylesCréer de nouveaux positionneursCréer de nouvelles entées

ExtensibilitéCréer de nouveaux styles

Augmenter les possibilités deGLStyleBasic

nouvelles implémentations deGLTextenouvelles implémentations deGLFond

Etendre GLStyleBasic




FacilitéTutoriel

Conclusion


ExtensibilitéCréer de nouveaux positionneurs

nouvelles implémentations deGLPositionneur




FacilitéTutoriel

Conclusion


ExtensibilitéCréer de nouvelles entrées

étendre GLBouton




FacilitéTutoriel

Conclusion

MenuBoutonÉvénementStyle

Facilité - Création des composants

ConstructeursGLBouton b1 = new GLBouton("b1");

GLMenu menu = new GLMenu("menu");




FacilitéTutoriel

Conclusion


Facilité - Création des composants

ConstructeursGLBouton b1 = new GLBouton("b1");

GLMenu menu = new GLMenu("menu");




FacilitéTutoriel

Conclusion


Menu

Création d'un menu - Détail des constructeursnew GLMenu(String label);

new GLMenu(String label, GLPositionneur p);

new GLMenu(String label, GLPositionneurMenu p);

new GLMenu(String label, GLStyle s);

new GLMenu(String label, GLStyle s, GLPostionneurMenu m);

new GLMenu(String label, GLPositionneur p,

GLPostionneurMenu m);

new GLMenu(String label, GLPositionneur p, GLStyle s);

new GLMenu(String label, GLPositionneur p,

GLStyle s, GLPostionneurMenu m);




FacilitéTutoriel

Conclusion


Bouton

Création d'un bouton - Détail des constructeursnew GLBouton(String label);

new GLBouton(String label, GLStyle s);




FacilitéTutoriel

Conclusion


Événement

Inspiration Swing et Awt : relation écouteur écouté

On peut ajouter à chaque composant un ou plusieurs :

MouseListener

MouseMotionListener

KeyListener

ActionListener




FacilitéTutoriel

Conclusion


Événement



MouseListener

MouseMotionListener

KeyListener

ActionListener

pour les événements souris simple




FacilitéTutoriel

Conclusion


Événement



MouseListener

MouseMotionListener

KeyListener

ActionListener

pour les événement souris associés à un déplacement




FacilitéTutoriel

Conclusion


Événement



MouseListener

MouseMotionListener

KeyListener

ActionListener

pour les événements clavier




FacilitéTutoriel

Conclusion


Événement



MouseListener

MouseMotionListener

KeyListener

ActionListener

regroupe les événements clavier et souris




FacilitéTutoriel

Conclusion


Style

creation d'un stylenew GLStyleBasic();

new GLStyleBasic(GLTexte texte);

new GLStyleBasic(GLFond fond);

Style par défaut

Si aucun style n'est demandé, notre système utilise un style prédé�ni.Une fois un style choisi, il devient le nouveau style par défaut. Celapermet de faciliter la création de menu, une même texture étant souventréutilisé.




FacilitéTutoriel

Conclusion

Tutoriel

But de ce tutoriel

Au travers ce bref tutoriel nous allons vous détailler la création d'unmenu simple permettant de controller un cube tournant dans l'espace.Ce tutoriel a permet d'obtenir quelques-une

Base de ce tutoriel

Nous nous sommes inspiré d'un cube déjà existantProjet ESSI2 JOGL (Janvier 2005)

deXavier Cremaschi, Julien Hazebrouck, Stevens Lion, Damien Mandrioli et

Jean-Guilhem Rouel


http://miageprojet.unice.fr/twiki/bin/view/Projets/Objet3D



FacilitéTutoriel

Conclusion

Squelette du tutoriel

import fr.unice.blr.menuJOGL.*;

public class Tutoriel implements GLEventsListener {

// on commence par declarer un GLMenu principal

private static GLMenu menuPrincipal;

/*

* [...] Code du cube

* implementation de GLEventsListener

*/

public static void main(String[] args) {

menu = new GLMenu("menu principal");

}

}Michèle Reynier, Jean-Michael Legait, Nicolas Bussière Menu JOGL



FacilitéTutoriel

Conclusion

Création d'un premier bouton (main)

GLBouton quitter = new GLBouton("Quitter");

// on gere les evenements comme en Swing ...

quitter.addActionListener(new ActionListener() {

public void actionPerformed(ActionEvent e) {

animator.stop();

System.exit(0);

}});

try{ // on ajoute le bouton au menu

menuPrincipal.ajouteGLBouton(quitter);

} catch(GLBoutonExistantException e) {

System.err.println("bouton " + e.donneGLBouton() +

" existant !");

}




FacilitéTutoriel

Conclusion

Hierachie de menu : ajout d'un sous-menu (main)

// On cree d'abord le sous-menu

GLMenu couleurs = new GLMenu("Couleurs");

// Puis quelques boutons

GLBouton couleursChaudes = new GLBouton("Couleurs chaudes");

GLBouton couleursFroides = new GLBouton("Couleurs froides");

// On ajoute des ecouteurs comme precedement

// On ajoute les boutons au menu couleurs dans un try ... catch

/* On ajoute le nouveau menu au menu principal,

* la gestion d'evenement est automatique :

* le sous-menu s'affichera lors d'un clique sur le

* bouton associe (cree automatiquement)

*/

menuPrincipal.ajouteGLMenu(couleurs);




FacilitéTutoriel

Conclusion

Initialisation du système de menu (main)

/* [...] */

Frame f = new Frame("Tutoriel");

GLCanvas c = GLDrawableFactory.getFactory().createGLCanvas(

new GLCapabilities());

menuPrincipal.changeMenuVisible(menuPrincipal);

c.addKeyListener(menuPrincipal.donneKeyListener());

c.addMouseListener(menuPrincipal.donneMouseListener());

c.addMouseMotionListener(menuPrincipal.donneMouseMotionListener());

f.add(c);

f.setVisible(true);

c.requestFocus(); // pour que Java sache qui gere le clavier




FacilitéTutoriel

Conclusion

A�chage du menu (display)

display(GLDrawable d) {

/* Dessin du cube */

/* on demande au menu de s'afficher

* apres le cube, pour qu'il apparaisse

* par dessus */

menuPrincipal.dessineGLMenu(d);

}




FacilitéTutoriel

Conclusion

Utilisation de textures (main)

/* On cr\'ee les differents fond a partir de texture

* representee par des URL */

GLFond fondMenu = new GLFondTexture(new URL("fondMenu.png"));

GLFond fondBouton = new GLFondTexture(new URL("fondBouton.png"));

// On cree ensuite des style compose des fonds precedents

GLStyle styleMenus = new GLStyleBasic(fondMenu);

GLStyle styleBoutons = new GLStyleBasic(fondBouton);

/* [...]

* On peut ensuite specifier un style lors de la creation

* des composants */

menuPrincipal = new GLMenu("Menu principal", styleMenus);

GLBouton quitter = new GLBouton("Quitter", styleBoutons);

/* ce style devient alors le style par defaut, il n'est

* pas necessaire de le repeter pour chaque composant. */Michèle Reynier, Jean-Michael Legait, Nicolas Bussière Menu JOGL



FacilitéTutoriel

Conclusion

Objectifs atteints

Objectif Priorité Réalisé

Fonctionnement dans une application très hauteFacilité d'utilisation très hautePropagation des événements très hauteExtensibilité très hauteNavigation très hauteFonds hautePolices moyenneE�ets visuels de navigation moyenneDiversité de entrées moyennePositionnement moyenneTransitions faibleE�ets 3D très faible




FacilitéTutoriel

Conclusion

Objectifs atteints

Conclusion

Débuts di�ciles :

aucun cours sur OpenGL,

JOGL est tout nouveau, donc aucune API.

Construire une API est très instructifs car il faut :

ré�échir aux besoins futurs(Extensibilité),

se mettre à la place de l'utilisateur de l'API(Simplicité),

Nous n'avons pu réaliser tous nos objectifs. Cependant, il est possible decréer un menu tout à fait correct.




FacilitéTutoriel

Conclusion

Objectifs atteints

Conclusion











FacilitéTutoriel

Conclusion

Objectifs atteints

Conclusion









Documents

Réalisation d'une bibliothèque de menus jeux vidéo en JOGLdeptinfo.unice.fr/twiki/pub/Linfo/JournauxDeBord/... · Qu'est-ce qu'un menu dans les jeux vidéo? Objectifs Introduction