Projet Interfaces Homme-Machine Demi-valeur 16874 Année 2002-2003 Sujet 4 : Jeu en réseau en Java / Swing Auteur : Thomas JGENTI I072545 http://jgenti.free.fr/cnam
Table de matières Table de matières...2 Problématique...3 Choix...3 Définition de l ergonomie...3 Dessin de l interface...4 Réalisation...5 Interface graphique...6 Dialogue réseau...6 Exécution et comportement...7 Annexes :...9 2
Problématique Le sujet suppose la réalisation d un jeu avec au moins deux joueurs ayant chacun une interface graphique individuelle sur des machines distantes. Ce jeu doit être écrit en langage Java. Choix Outre l aspect de l interface graphique, qui nous intéresse, ce projet comporte deux volets suivants : Communication réseau Algorithme du jeu Afin de se concentrer sur la partie essentielle de ce projet, qui est l interface graphique, le choix avait été porté sur un jeu a deux joueurs, ce qui simplifie la partie communication, et dont la partie algorithmique est réduite, favorisant l interaction des utilisateurs. Le choix fut donc l un des jeux proposes dans le sujet : Othello. Ce jeu, lorsqu il est joué entre deux joueurs humains, ne nécessite pas de vérifications de règles très complexes, comme c est le cas des échecs. La contrepartie de ce choix, l interface utilisateur est plus simple que celle d un jeu d échecs, mais reste cependant très similaire. La technologie Java étant imposée par le sujet, le choix technologique pour la couche de communication fut d utiliser les sockets Java fournies en standard. Swing fut naturellement choisi pour l interface utilisateur. Définition de l ergonomie Le souci principal est de rendre l utilisation la plus simple et la plus intuitive que possible. On doit définir une interface graphique, ainsi qu un modèle de comportement, qui soient naturels. La faisabilité du projet dépendait d abord du modèle de communication réseau. Un modèle classique client-serveur fut choisi, avec la volonté de le rendre le plus transparent que possible visà-vis de l utilisateur final. Ainsi les joueurs doivent pouvoir lancer le même programme ayant la même interface utilisateur sur leurs machines respectives. La seule contrainte pour le deuxième joueur est d indiquer le nom de la machine sur laquelle le premier joueur a lance le jeu. L interface graphique pour ce genre de programmes (jeux) doit être conçue autour du tableau de jeu, en évitant des boutons conventionnels et autres widgets standard, rendant ainsi le jeu plus attractif et naturel. Si on rappelle le principe du jeu Othello : le tableau est compose de 64 cases identiques ranges 8 par 8. Le jeu réel comporte des pièces rondes ayant un coté noir et l autre blanc, que l on pose dans les cases et que l on retourne au cours du jeu. Le but étant de remplir un maximum de cases avec la couleur du joueur. 3
L interface qui semble alors évidente consiste a dessiner un tableau vide (avec 4 pièces au départ du jeu) et positionner ensuite les pièces a l aide de la souris directement dans les cases. Pour plus de confort il est souhaitable de montrer une pièce «fantôme» sous le pointeur de la souris, lorsque le joueur déplace la souris a travers le tableau. Ceci servira de «curseur» naturel plus voyant et ludique. Il peut être intéressant d agrémenter ces interactions d effets spéciaux lorsqu on positionne la pièce et lorsque les autres pièces se retournent. Un fonctionnement au clavier n est pas envisage, car il ne serait pas susceptible de séduire les joueurs. L interface doit également fournir au joueur les indications suivantes : Quelle couleur le joueur joue Si c est son tour de jouer ou d attendre la main Quels sont les scores en cours Il doit aussi être informe de : L abandon de l autre joueur La victoire ou la défaite à la fin de la partie Confirmation si le joueur a décidé de quitter la partie Confirmation si le joueur veut-il ou non recommencer une nouvelle partie Un dernier point important : l interface ne doit pas être surchargée d éléments de façon a distraire l attention et les couleurs ne doivent pas surtout pas être violentes pour préserver les yeux. En effet ce jeu demande de la concentration et le tableau doit pouvoir être regardé longtemps sans gêne visuelle! Dessin de l interface Dans sa version de base l interface se compose de trois zones : Tableau de jeu Informations Contrôle Il a été décide de positionner ces zones dans une fenêtre principale de manière suivante (figure 1) : le tableau carre au milieu, la zone d informations au dessus et les boutons de contrôle en dessous. Dans une version plus élaborée il est possible d envisager une barre de menu standard avec les fonctionnalités avancées. 4
infos Informations Tableau de jeu Boutons de controle exit Figure 1. La figure 2 montre l aspect final de cette interface (capture d écran sous Windows) : Figure 2. Réalisation Le programme Reversi comporte 6 classes (dont une nested) : Classe Reversi GameCore Rôle Interface graphique, interactions haut niveau Gestion des règles du jeu, partie algorithmique 5
ComSession ComServer ComClient ComThread Gestion des communications réseau Communication en mode serveur Communication en mode client Thread séparé de lecture des sockets (partie de Reversi) La figure 3 de la page suivante montre le diagramme des classes. JFrame MouseListener extends Reversi implements 1 ComSession 0..1 ComServer ComClient nested 1 0..1 ComThread 1 GameCore Figure 3 Diagramme de classes Interface graphique La classe principale Reversi est elle-même dérivée de JFrame. Tous les composants de l interface sont crées dynamiquement par le programme. Pour leur positionnement on utilise le BorderLayout avec le tableau au centre et les deux autres zones au nord et au sud. Le tableau utilise un JPanel séparé qui positionne les cases avec le GridLayout(8,8). Les cases ne sont pas des boutons, mais de JLabel avec des icônes JPG correspondantes. 3 icônes sont possibles : Vide, Blanc, Noir. Le dessin des bordures fait partie des icônes. Chaque JLabel est identifie par un nom qui renseigne sur sa position dans le tableau : IJ. Tous les JLabel possèdent un MouseListener qui assure l interaction avec la souris. Sur la figure 2 on remarque une pièce blanche isolée. Il s agit d une position temporaire. La souris se trouvait en ce moment au dessus de la case en question et n a pas été prise par la capture de l image. Afin d avertir l utilisateur de certains événements (abandon, confirmation) on utilise les dialogues standard de JOptionPane. Dialogue réseau 6
Le modèle client-serveur transparent est implémente de manière suivante : L instance du programme lancée en premier devient serveur et attend le lancement du client distant. Une fois le client lance, la communication s établit et les deux IHM s initialisent. La classe ComSession encapsule tout le traitement et fournit deux méthodes universelles : sendmessage et receivemessage. Cette dernière attend le message sur la socket et bloque ainsi l exécution. Cela peut être très gênant, car l interface graphique pendant ce temps n est pas rafraîchie et les événements (clicks de souris) ne sont pas traitées immédiatement, d où peuvent surgir les effets de bord indésirables. Pour cette raison, la classe ComThread a été créée. Elle lance une boucle de lecture dans un fil d exécution séparé et n empêche pas le déroulement du programme. En contrepartie il a fallu prévoir un verrou qui bloque certaines requêtes lorsque le programme est en attende de l autre joueur. Exécution et comportement Le jeu doit être lance de manière suivante : Sur la machine au nom d andromeda on lance : java Reversi On obtient alors un message : Waiting for another player Sur une autre machine on lance alors le même exécutable : java Reversi andromeda Qui affiche d abord : Make sure the first player is already online. Puis, si tout va bien: Connection OK Alors les deux fenêtres apparaissent simultanément. Le premier joue les noirs par convention, le second joue les blancs et commence. Lorsque le joueur blanc a pose sa pièce et si la pièce est valide, le programme le prie de patienter et désactive son tableau de jeu interactif. Les données sont envoyées au second joueur, qui à son tour a la main A tout moment les joueurs peuvent abandonner la partie. Alors le programme prévient l autre joueur et quitte ensuite l exécution. Lorsque le jeu est termine, les joueurs peuvent recommencer la partie ou quitter. 7
8
Annexes : En annexes vous trouverez les listings du code source avec des commentaires, ainsi qu une disquette contenant le programme compile, les images nécessaires a l exécution, les sources Java et le présent document au format word. Le programme et les sources sont également disponibles sur mon site Internet : http://jgenti.free.fr/cnam 9