1 SRC2 S4 IMD Flash et serveur xml socket Réalisation réalisation d'un jeu temps réel réseau flash/serveur xml socket (http://195.83.128.55/~fmeuzeret/flashtp1s3/indexv8.swf) Exercice 1 : rotation de la fusée du joueur 1. créez un clip fusee avec une occurrence sur la scène (fusee1) 2. en utilisant les script suivant, mettez en œuvre la rotation de la fusee sur elle-meme lors de l appuie sur les touches flèches GAUCHE et DROITE script 1 : récupération des touches claviers var keyleft = false; var keyright = false; stage.addeventlistener(keyboardevent.key_up,key_up); stage.addeventlistener(keyboardevent.key_down,key_down); function key_up(event:keyboardevent) switch (event.keycode) case 37 : keyleft = false; case 39 : keyright = false;
2 SRC2 S4 IMD function key_down(event:keyboardevent) switch (event.keycode) case 37 : keyleft = true; case 39 : keyright = true; script 2 : test et exploitation des touches claviers addeventlistener(event.enter_frame, deplace); function deplace(ev:event) if(keyright) trace(«tourne a droite!») ; if(keyleft) trace(«tourne a gauche!») ; touches claviers SPACE : 32 / UP : 38 / DOWN : 40 / A : 65. Exercice 2 : déplacement de la fusée du joueur 3. en utilisant le script suivant, mettez en œuvre le déplacement de la fusee lors de l appuie sur les touches flèches HAUT //vit represente la vitesse d'avancement de la fusee en nombre de pixels par image fusee1.x+=vit*math.sin(fusee1.rotation/180*math.pi); fusee1.y-=vit*math.cos(fusee1.rotation/180*math.pi); Exercice 3 : positionnement du tir 1. lors de l'appuis sur la touche SPACE, positionner le missile sur la fusee en lui donnant la meme direction que la fusee et gérer son déplacement. Exercice 4: socket serveur Sur le web, les applications flash ne peuvent pas communiquer directement entre 2 clients. Toutefois, pour pouvoir interragir entre 2 clients flash distincts, il existe plusieurs techniques. 1) Passer par des pages php appelées depuis les applis flash. Ces pages php (ou autres, asp, jsp,...) peuvent alors stocker des infos dans des fichiers textes ou dans des bases
3 SRC2 S4 IMD de données (mysql par exemple). Simple mais temps de réponse élévé. Utilisable pour des appli de chat ou jeux tour par tour par exemple. 2) Utiliser «flash communication server» (et flash remoting sur le client) (nous utiliserons amfphp à la place de flash communication server). Cette option permet d'interfacer facilement une appli flash client avec tout type de serveur (mysql, sql server,...). comme la premiere solution, elle a pour inconvenient d'avoir un temps de réponse assez élevé. 3) Passer par un serveur type xml socket (aquaserver, origano,...), chaque appli flash ouvre alors une connexion avec le serveur. Le serveur renvoyant immédiatement toutes infos émises par un client aux autres clients. Les temps de réponses sont minimisés ce qui permet d'envisager du jeu réseaux rapide. Gros inconvénient: il faut pouvoir installer un serveur xml socket sur le serveur!!! envois des informations vers le socket serveur 2. sans s'occuper de l'optimisation des transferts réseaux, envoyer les coordonnées de la fusée ainsi que son nom et son angle de rotation vers le socket serveur sous la forme : <xml> <player> <pseudo>toto</pseudo> <x1>281</x1> <y1>277</y1> <r1>40</r1> </player> </xml> pour cela prévoir une zone de saisie pour l'adresse du serveur, une zone de saisie pour le pseudo du joueur, un bouton pour lancer la connexion vers le serveur et une zone de texte dynamique pour afficher des informations de débuggage.
4 SRC2 S4 IMD Vous devez maintenant déclarer votre objet permettant la connexion vers votre socket serveur : var monserveur = new XMLSocket(); Vous devez maintenant déclarer l'événement qui se déclenchera lorsque la connexion sera établie : monserveur.addeventlistener(event.connect, bienconnect); function bienconnect(ev:event) trace(«connexion etablie) ;... Vous devez maintenant déclarer l'événement qui se déclenchera lorsque la connexion recevra des données provenant du serveur : monserveur.addeventlistener(dataevent.data, recuperation); function recuperation (ev:dataevent) trace(«reception :»+ev.data) ;... Déclarer l'évenement clique sur le bouton connexion : dans cet évenement vous devez vous connecter sur le socket serveur : monserveur.connect( ***ip du serveur**, ** port du service ** );... dans la fonction bienconnect() déclarer l'évènement EnterFrame sur la scene permettant de mettre en route le déplacement de la fusée monserveur.addeventlistener(event.connect, bienconnect); function bienconnect(ev:event) trace(«connexion etablie) ; addeventlistener(event.enter_frame, deplace);
5 SRC2 S4 IMD Attention cet événement a déjà été déclaré tout au début de l'exercice! Penser à supprimer cette première déclaration. Vous pouvez tester la bonne connexion au serveur : 1) lancer le serveur (aquaserveur) 2) taper sur ce serveur la commande «list» rien ne doit apparaître 3) compiler votre fla et lancer le 4) sur le serveur, taper la commande «list» l'ip de votre poste client doit apparaître. 5) Vous pouvez lancer plusieurs «client» de votre application et taper «list» sur le serveur la liste des ip des clients doit apparaître lancer régulièrement dans l'évènement ENTER_FRAME ( même si cela n'optimise pas le trafic réseau!) le flux xml contenant les informations de position de la fusee1 <xml> <player> <pseudo>toto</pseudo> <x1>281</x1> <y1>277</y1> <r1>40</r1> </player> </xml> var commande= new XML(«<xml><player>... </player></xml>»); monserveur.send(commande); Faire afficher dans la fenetre de debug (ou avec un trace) le flux reçu par votre application grace à l'évènement DataEvent.DATA. (trace(ev.data) par exemple) Tout ce qui est envoyé par la commande monserveur.send() est récupérer quelques millisecondes plus tard grace à l'évènement DataEvent.DATA qui reçoit ce flux en provenance du serveur. Et cela pour tout les clients connectés sur le serveur. Vous pouvez parser ce flux rentrant avec l'objet XML var monxml:xml = new XML (ev.data); var liste:xmllist = monxml.elements(); trace(liste.pseudo) ; // ou debug.text =liste.pseudo trace(liste.x1) ;... en fait vous recevez les info du deuxieme client mais aussi les votres. Pour exclure vos propres information vous pouvez mettre en place un simple test : var monxml:xml = new XML (ev.data); var liste:xmllist = monxml.elements(); if(liste.pseudo!=pseudo.text) debug.text=liste.pseudo+" "+liste.x1; pour faire un test vous pouvez dupliquer votre fla et le lancer 2 fois pour vérifier le bon fonctionnement
6 SRC2 S4 IMD Créer une deuxieme fusee (fusee2 qui peut etre une occurrence de fuseetype avec une surteinte) et en plus d'afficher les info dans la fenetre de debug, vous positionnez cette fusee avec les coordonnées reçues. Attention cette appli n'est ici conçu que pour 2 connectés simultanéments. vous pouvez faire des tests entre 2 ordinateurs différents. Dans ce cas attention au notion d'autorisation d'accès de flash ainsi que les rêgles de firewall de vos différents postes. Il reste à reproduire le tir d'une appli à l'autre. Exercice 5: développer une version à plus de 2 joueurs en gérant correctement les données XML reçues. Gérer les collisions tir/fusee, (voir methode HitTest vue au semstre 1) avec un systeme de point (ex barre de vie qui diminue lorsqu'on est touché, voir TP sur le son semestre 1).