Accueil logo MakeYourGame gachetteG gachetteD paddleG paddleH paddleD paddleB buttonG buttonH buttonD buttonB

Découvrez Mirror, solution multiplayer pour Unity

Unity

Accélérez votre développement !

14 min Intermédiaire

Mirror est une solution high level pour Unity, permettant de faire des jeux vidéos de type multiplayer . Le fait que son API soit simple et rapide à prendre en main, en fait un choix très indiqué pour créer ce genre de jeu vidéo. D'autant que depuis déjà un certain temps Unity ne propose plus rien pour gérer le multiplayer ... En effet UNET est depuis déjà un petit moment déprécié et abandonné.

Dans le domaine du multiplayer et jusqu'ici nous avons sur makeyourgame, priorisé l'utilisation de Photon . Mais ce dernier est plus adapté aux jeux en WAN et non en LAN !

Et c'est bien ici que Mirror tire sa force  https://makeyourgame.fun/sceditor/emoticons/smile.png . En effet il est très simple avec Mirror de faire du multiplayer en LAN (Local Area Network). De plus il est totalement gratuit et opensource ... quoi de mieux ?

Dans ce tutoriel nous allons faire une première scène de prise en main rapide du package Mirror, aussi ne vous attendez pas au dernier jeu de ouf multiplayer de l'année !

Il est indispensable d'avoir les bases de Unity et C# pour pouvoir suivre ce tutoriel. Vous êtes débutant en création de jeux vidéo avec Unity ? Préférez nos Ateliers sur la prise en main de Unity .

Installer Mirror

Tout d'abord il vous faut ouvrir un nouveau projet Unity afin de pouvoir ensuite intégrer le package Mirror. Placez vous dans la scène par default SampleScene.

Si vous souhaitez vous pouvez bien sûr nommer la scène comme vous voulez !

https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/mirrornewproject-5f4516ffe694f.png

Ensuite partez sur l'Asset Store pour intégrer le package Mirror à votre projet.  Téléchargez le package depuis le Package Manager directement depuis l'éditeur de Unity.
https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/mirrorpackagemanager-5f4517aaa5105.png
Cliquez sur Download, puis import et prenez le temps d'observer ce qui va être ajouté et dans quels dossiers... En effet si par la suite vous deviez, pour une raison ou une autre enlever Mirror, il vous faudra bien savoir ce qu'il faut supprimer, non ?
https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/importmirrorpackage-5f45181a42024.png
Désormais Mirror est intégré à votre projet ... tout peut alors commencer  https://makeyourgame.fun/sceditor/emoticons/smile.png !

Ajouter le NetworkManager

Afin de pouvoir prendre en charge la couche multiplayer, il faut tout d'abord ajouter le fameux NetworkManager. C'est lui qui va gérer une bonne partie de la gestion multiplayer. Ainsi créez un nouveau Empty GameObject dans la hierarchy et ajoutez lui le composant NetWork Manager.
https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/mirroraddonecomponent-5f4518e772bd4.png
Automatiquement cela ajoute de fait 2 autres composants tout aussi indispensables :
  • Telepathy Transport: gestion de la communication entre les devices connectés
  • NetworkManager HUD: permet d'avoir rapidement une interface de connexion (il est bien sûr possible de customiser cela)
https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/mirroronecompo3compo-5f45194b3bb7d.png
Si vous lancez votre scène, en appuyant sur le bouton play vous devriez voir le HUD en question, simple, certes, mais fonctionnel. Cela suffira très bien dans le cadre de ce tutoriel, mais sachez qu'il est possible bien sûr de faire mieux en terme de design !
https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/mirrorhudbasic-5f451a239e015.png
Notez qu'en cliquant sur :
  • Host (server + client) : l'instance du jeu sera à la fois hôte et serveur (LAN de fait)
  • Client: l'instance du jeu sera un client (sur localhost, donc bien LAN)
  • Server Only: l'instance du jeu sera uniquement le serveur et servira donc à relayer les messages à tous les clients

Synchroniser les mouvements des joueurs

Comme tout jeu multiplayer qui se respecte, si un joueur bouge sur son écran , les autres joueurs doivent en être avertis, afin de mettre à jour leurs écrans. Grâce à notre première mise en place, nous somme déjà en partie prêts, mais il va falloir maintenant ajouter un Player ainsi que de nouveaux composants de type Mirror.

Ajoutons donc un cube (3D GameObject) afin de visualiser notre joueur, renommez le en Player. Nous allons par la suite lui ajouter un script C# de mouvement. Ajoutez lui un composant RigidBody car c'est par la physique que nous allons le déplacer ensuite.

Encore une fois, ce tutoriel a juste vocation à vous apporter une première prise en main de Mirror. Si vous souhaitez aller plus loin, n'hésitez pas à claper le tuto, et plus vous serez nombreux.ses et plus vous aurez de chance qu'un tutoriel et/ou Atelier dédiés sortent.

Afin que notre Player puisse être pris en charge par notre Network Manager, il faut ajouter un composant Network Identity et Network Transform

Le premier composant permettant d'identifier de manière unique sur le réseau CE player et pas celui d'un autre joueur. Le second quant à lui est responsable de synchroniser la position/rotation du Player sur le réseau ...et donc sur tous les autres écrans.

Il faut donc maintenant ajouter un script de mouvement pour que l'on puisse enfin faire notre test. Ajouter le script MovePlayer.cs suivant à notre GameObject Player:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Mirror;//import indispensable !!
 
public class MovePlayer : NetworkBehaviour 
{
    [SerializeField]
    private float speed; //vitesse de déplacement
 
    void FixedUpdate () 
    {
        if(this.isLocalPlayer) 
        {
            float hMove = Input.GetAxis("Horizontal"); 
            GetComponent<Rigidbody>().velocity = new Vector3(hMove * speed, 0.0f,0.0f); // uniquement sur axe X
        }
    }
}

Prenons le temps de comprendre ce que va faire ce script avant de tester.

Si vous avez déjà suivi nos tutos Photon ou Unet sur Youtube, vous ne devriez pas avoir trop de mal à comprendre ce script  https://makeyourgame.fun/sceditor/emoticons/smile.png

Notez déjà que la classe étend NetworkBehaviour et non MonoBehaviour ... cas typique pour que par exemple on puisse avoir accès à l'information centrale de ce script qui est:

this.isLocalPlayer

Cette propriété permet de savoir si c'est bien le bon Player qui est contrôlé par cet écran, et ainsi d'éviter de bouger TOUS les autres joueurs quand j'appuie sur la touche de déplacement  https://makeyourgame.fun/sceditor/emoticons/angel.png .

Ainsi quand on appuie sur les touches du clavier horizontales, le player (notre cube 3D et non celui du copain connecté sur un autre écran) va se déplacer sur l'axe X.

Au final si vous avez ajouté les bons composants et le script à notre cube, notre Player devrait disposer des composants suivants.

https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/mirrorfinalprefabcomponents-5f45a0800a964.png

C'est tout bon, reste plus qu'à tester avec deux instances ! 

Mais avant ça pensez à faire de notre cube, un prefab. Puis supprimer dans la hierarchy, l'instance du cube.

Retrouvez notre Atelier sur le prefab workflow de Unity.

Tester Mirror

Le principe du test consiste à vérifier qu'en bougeant le cube, sur un écran (une instance du jeu), puis un autre (autre instance du jeu), le mouvement d'un des joueurs est bien mis à jour !

Afin que Mirror puisse instancier notre prefab au démarrage de notre "jeu", nous allons devoir renseigner le slot "Player Prefab" au composant Network Manager.

https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/mirrorassignprefab-5f45a1823876f.png

Comme la coche "Auto Create Player" est cochée, Mirror créera directement de manière automatique, une instance de notre prefab Player. Il ne reste plus qu'à réaliser un build.

Allez dans File => Build Settings. Puis cliquez sur Player Settings.

https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/mirrorbuildsettings-5f45a2581a4ec.png

Passez l'application en "Windowed" afin d'éviter le full screen dont vous ne sauriez sortir car nous n'avons aucun moyen de quitter l'application.

Puis ouvrez de nouveau la fenêtre de Build Settings. Ajoutez la scène en cours.

Add Open Scenes 

Normalement vous êtes en target "Standalone" ! Cliquez sur Build And Run pour réaliser un build puis lancer directement une première instance du "jeu".

https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/mirrorbuild-5f45a323ea06f.png

Si tout se déroule correctement le jeu va se lancer automatiquement. Vous retrouvez alors l'écran du HUD présenté plus haut dans ce tutoriel.

Si le jeu ne se lance pas, retrouvez le simplement dans vos fichiers et double-cliquez dessus (.exe pour Windows, .app sous Mac ...).

Sur la première lancée choisissez "Host" pour que cette instance soit à la fois serveur ET client.

https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/mirrorlancerserveur-5f45a59418144.png

Puisque le serveur LAN est maintenant allumé, lancez une seconde instance simplement depuis votre éditeur Unity. Cette fois-ci choisissez Client pour rejoindre, via le réseau localhost, le serveur de la première instance.

https://makeyourgame.fun//upload/users/alto/tutoriels/Mirror/mirrorrejoindreserveur-5f45a5c43ab2f.png

Les 2 cubes sont bien présents, un par instance de jeu, donc un par joueur en fait  https://makeyourgame.fun/sceditor/emoticons/smile.png ! Excellent on voit déjà sur tous les écrans, le bon nombre de joueurs.

Lancez voir une troisième instance du jeu avec votre build ... et vous devriez observer 3 cubes, sur les 3 écrans  https://makeyourgame.fun/sceditor/emoticons/tongue.png

Pour terminer ce test cliquez dans le jeu 1, bougez le player avec les flèches horizontales du clavier et observez que sur l'autre écran votre player bouge aussi !

Félicitations ! Vous avez réussi la synchronisation de la position (induit rotation mais non testé ici) sur le réseau LAN grâce à Mirror.

N'hésitez pas à cliquer sur le clap ci-dessous pour nous faire savoir que vous voulez plus de contenu sur Mirror avec Unity afin d'apprendre à  réaliser des jeux multiplayers.

A très vite  https://makeyourgame.fun/sceditor/emoticons/wink.png

Retrouvez le projet sur Github .
Vues: 232

Connectez-vous pour applaudir applause logo 4 claps

Validation du Tutoriel

Veuillez vous connecter ou créer un compte pour pouvoir valider ce tutoriel et ainsi gagner stardust et XP !

Vous aimerez aussi...

Blog et Tutoriels

×