/ Game

Unity | Créez un menu d'accueil de jeu sur android et iOS de A à Z

Partie I : Création de l'interface et menu d'accueil

Ayant eu à mes débuts des difficultés à trouver un cours gratuit sur le développement d'un menu home pour mon jeu mobile complet, je me suis décidé à partager avec vous le mien. L'écran d'accueil de votre jeu est la vitrine de celui-ci. Plus elle sera attirante et plus le joueur aura envie de lancer une partie. Aujourd'hui cela est possible et de façon pas trop compliqué, ou en tout cas grâce à certains outils.

Nous allons nous intéresser au moteur Unity, il va nous permettre de créer un environnement 2D et de manipuler celui-ci. Unity est un superbe moteur graphique permettant de développer des jeux aussi bien 2D que 3D. Voyez par vous même :

⚠️ Pré-requis

Je ne vais pas faire ici un cours sur Unity ou sur le C# mais simplement faire quelques rappels de temps à autre sur certaines fonctions. Le C# utilisé dans ce tutoriel étant vraiment simple, il n'est pas obligatoire de maitriser ce langage surtout si vous avez de l'expérience dans d'autres langages objet.
Voici les tutoriels officiels de l'interface Unity et sur les bases du C#

Je pars du principe qu'Unity est installé sur votre machine. Nous aborderons android/iOS et l'export à la fin du tutoriel.

Ce que vous obtiendrez en fin de tuto

mobile_game_tuto_sosnoob.com-2

Package de départ et dépôt github

Dépôt github

Le dépôt github du projet ce trouve à cette adresse., n'hésitez pas à le forker, partager ou modifier. 😄

Starter Kit

Voici le lien vers le package de départ de ce tuto, il contient les images et scripts nécessaires à la réalisation de ce projet.

Développons 🎮

Création du projet

Ouvrez Unity, créez votre projet et nommez le comme vous le souhaitez. Switcher sur 2D et ne sélectionnez aucune asset.

project_creation_sosnoob.com

  • Une fois votre projet ouvert et sauvegardé, exécutez le starter kit StarterKit.unitypackage.
  • Validez l'importation de tous les éléments.

La scène

Qu'est-ce qu'une scène ?

Une scène est tout simplement l'espace dans lequel va se dérouler un niveau de votre jeu ou une "page" de votre jeu. Elle contiendra tous les éléments de ce niveau (ou page), dont les images, boutons, scripts, etc.

Création de votre première scène

Dans un premier temps, nous allons créer la scène dans laquelle se trouvera notre Menu d'accueil qui redirigera vers celle du premier niveau de jeu. Pour ce faire allez dans File > New Scene et nommez votre scène Menu. Enregistrez la scène dans le dossier _scene du dossier que vous avez téléchargé.

new_scene_sosnoob.com

Réglage de la plateforme de destination

Il est important avant de commencer à créer nos éléments de switcher vers android (au moins ce sera fait). Pour faire cela, rien de plus simple ! Aller dans File > Build Settings, dans la liste Platform, sélectionnez Android puis cliquez sur Switch Platform.

Voilà vous avez configuré la plateforme ciblé du projet ! 😁

Ajoût de la scène aux réglages de build

Une autres choses importantes à faire : l'ajoût de votre scène dans Scenes In Build. Cette liste dans laquelle vous ajouterez vos scènes à chaque fois que vous les crérez, vous permettra de régler l'odre dans lequel le jeu va charger les scènes. Dans notre cas nous souhaitons que la scène Menu soit la première chargée par Unity.

Pour y parvenir changez la valeur 1 à côté de la scène par 0 pour signifier que nous souhaitons charger celle-ci en première.

Le background

Nous allons mettre maintenant en place le fond de notre interface d'accueil. Faites un glisser/déposer de l'image Assets/Sprites/BG/background.jpg vers la scène Menu. Renommez l'image BG.

background_tuto_mobile_game_sosnoob.com

Le Canvas

Faites un clic droit sous la scène, sélectionnez UI puis Canvas. Renommez Canvas en UI (pour faire référence aux éléments d'UI qu'il va contenir). Ce Canvas dans Unity va nous permettre d'englober plusieurs de nos éléments de menu :

  • Les boutons
  • Les textes
  • Les images

SosNoob.com canvas creation

Nous allons maintenant configurer le canvas. Cliquez sur votre canvas UI, l'inspector va s'ouvrir à droite d'Unity. Réglez les paramètres comme ceci :

canvas_config_sosnoob.com

Ensuite n'oubliez pas de glisser/déposer la Main Camera à l'emplacement Render Camera du canvas dans l'inspector.
Ne vous inquiétez pas, je vous expliquerait l'intérêt de chaque paramètre plus bas.😉

canvas_camera_sosnoob-1

Le paramètre Render Mode réglé sur Screen Space - Camera, ainsi que l'ajout de notre caméra au canvas va nous permettre de redimensionner le canvas à la taille de la caméra (premier élément de votre scène).

Les paramètres que nous avont modifiés :

Paramètre Utilité
Render Mode Adapte le canvas à la caméra
UI Scale Mode Adapte le canvas à la résolution du device
Screen Match Mode Replace les éléments du canvas en fonction de la hauteur/largeur
Match Le ratio d'adaptation

N'oubliez pas qu'en cas de questions, des icones aide sont disponibles à côté de chaque paramètre, vous redirigeant ainsi vers la page d'aide d'Unity.

Le titre

Le titre est une simple image créée sous photoshop, je vous l'ai mise dans le dossier assets :

  • Allez dans Assets/Sprites/UI/Text/logo_Super_sosnoob_1.png.
  • Glisser/Déposser l'image dans la zone de travail Scene.
  • Placez l'image dans l'élément Canvas UI dans votre scène Menu.
  • Redimensionnez là à votre guise.

Les boutons

Nous allons maintenant créer les boutons nous permettant d'interagir avec le jeu, c'est-à-dire : lancer le jeu et changer de personnage.

  • Clic droit dans votre scène et sélectionnez UI > Button, renommez le btnPlay.
  • Dupliquez le bouton et renommez le btnCharacters.
  • Déplacez les boutons dans le canvas UI que l'on a créé tout à l'heure s'il ne sont pas dedans.

buttons_sosnoob.com

Script C# d'intéraction

Nous allons avoir besoin d'un script C# pour rediriger lors d'un clic sur btnPlay vers la scène du premier niveau de jeu.

  • Faites un clic droit dans votre scène, puis Create empty, renommez le MENUCTRL.
  • Cliquez dessus et dans l'inspector faites add component.
  • Sélectionnez New Script et nommez le MenuCtrl.

script_menu_manager_sosnoob.com

Nous venons de créer un objet MENUCTRL qui représente notre script MenuCtrl.
Votre script est maintenant disponible dans le dossier Assets, allez-y et double cliquez sur le script.

Voici le script qui va nous permettre de switcher entre les scènes en fonction du bouton :

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class MenuCtrl : MonoBehaviour {

    public void LoadScene(string sceneName)
    {
        SceneManager.LoadScene(sceneName);
    }

}

Explications

Dans un premier temps vous remarquerez que j'ai chargé une nouvelle bibliothèque using UnityEngine.SceneManagement. Cette bibliothèque va nous permettre d'utiliser un certain nombre de méthodes de manipulation des scènes : la méthode LoadScene.

La fonction LoadScene prend en paramètre le nom d'une scène. Elle va nous permettre de charger la scène que l'on désire. Dans notre cas nous allons régler le bouton btnPlay pour exécuter cette fonction et lancer le premier niveau de jeu. Rien de bien compliqué jusque là ! 😄

Réglages du bouton Play

Il nous reste maintenant plus qu'à ajouter notre script au bouton btnPlay :

  • Cliquez sur le bouton btnPlay puis accédez à l'inspector.
  • Cliquez sur le bouton + de la petite fenêtre On Click () de l'inspector.
  • Glisser/déposer l'objet MENUCTRL de la scène vers le champ None Object.
  • Sélectionnez la fonction LoadScene.
  • Ajouter au champ vide la valeur GamePlay (le nom de notre futur première scène de jeu).

script_menu_btnPlay_sosnoob.com

Design des boutons

Il est temps d'améliorer le visuel de notre interface, vous l'attendiez hein 😜 ! Je vous avais demandé de télécharger un package de départ en tout début de projet. Bien, il est temps de s'en servir mes petits gars. 😈

buttons_preview_sosnoob.com

Sprite sheet

Une sprite sheet est un condensé d'images avec un à plusieurs éléments décrivant un mouvement. Le but sera de découper cette sprite sheet pour avoir nos images séparées et les utiliser dans nos animations.

  • Allez dans le dossier Assets/Sprites/UI/Buttons/Button.
  • Cliquez sur la sprite sheet et observez l'inspector.
  • Dans l'inspector changez le Sprite Mode en Multiple puis faites Apply.

Sprite Manager

Bon, on a notre sprite sheet maintenant, mais comment va-t-on la découper ? Grâce au Sprite Editor. Cet outil d'Unity va nous permettre très rapidement d'isoler chacune de nos images.

  • Cliquez sur Sprite Editor dans l'inspector de la sprite sheet.
  • Dans la fenêtre du Sprite Editor cliquez sur Slice.
  • Cliquez ensuite sur Apply.

Voilà fermez le Sprite Editor et observez vos images séparées 😄 !

Attribution des images

Occupons nous d'ajouter les images aux boutons :

  • Cliquez sur btnPlay et aller à l'inspector.
  • Glisser/déposer le bouton n°5 vers le champ Source Image de l'inspector.
  • Plus bas glisser/déposser le bouton n°6 vers le champ Taget Graphic.
  • Appuyez sur Set Native Size.

Nous avons appliqué l'image n°5 au bouton btnPlay, puis nous avons ajouté l'image n°6 du bouton dans l'état "appuyé".

Je sais que les boutons sont gros et moche, il nous faudra seulement les redimensionner dans l'espace de travail Scene. Inspirez vous du résultat finale.

Faites de même avec le bouton btnCharacters et appliquez lui les même images.

Les textes

Nos jolis boutons sont maintenant construits, il nous faut leur ajouter du texte :

  • Cliquez sur le bouton btnPlay dans votre scène et appuyez sur le petit triangle déroulant.
  • Renommez l'élément texte txt_play.
  • Changez la police d'écriture via le champ font dans l'inspector par Assets/Fonts/Raleway-Bold.ttf.

Voici mes réglages dans l'inspector de l'élément texte :

btnPlay_txt_sosnoob.com

Faites maintenant de même avec le bouton btnCharacters.

Héro du menu d'acueil

Création du héro

Pour avoir une belle interface d'accueil il nous manque le héro de notre jeu :

  • Accédez à Assets/Sprites/Actors/Players/Hero.
  • Glissez/Dépossez l'image walk_0 dans l'espace de travail Scene.
  • Renommez l'image dans votre scène Menu -> gif_player.
  • Accédez à l'inspector de l'image et changez la valeur Order in Layer par 2.
  • Placez l'image juste au-dessus des boutons.

hero_creation_sosnoob.com

J'ai changé l'ordre de superposition des éléments affichés pour que le héro soit au premier plan (un peu comme sur photoshop).

L'animation du héro

SosNoob.com hero animation

Vous allez réaliser votre première animation sous Unity OUUAiis 😆 ! Ce sera vraiment très simple à mettre en place :

  • Cliquez sur votre élément hero gif_player.
  • Cliquez sur l'onglet Animation.
  • Faites Create (bouton sur le volet droit).
  • Nommez l'animation walk.
  • Sélectionnez toutes les images walk (de 0 à 5).
  • Déposez-les dans la timeline du volet Animation.
  • Réglez le Samples sur 13.
  • Appuyez sur lecture dans le volet d'animation.

hero_animation_sosnoob.com

Nous avons dans un premier temps créé l'animation du hero et déposé toutes les frames qui constitueront l'animation du personnage dans la timeline. Ensuite, nous avons réglé la valeur Samples qui correspond à la vitesse à laquelle va se jouer l'animation sur 13. Vous pouvez essayer d'autre vitesse mais 13 est très correcte.

Création de la scène GamePlay

Nous pouvons maintenant créer notre scène GamePlay, que nous développerons dans la partie 2 de ce tutoriel.

  • Cliquez sur File > New Scene nommez la scène GamePlay et enregistrez là dans Assets/_Scenes.

Test du menu d'accueil

Voilà, l'étape finale les amis ! Nous allons voir si tout ce que vous avez mis en place va fonctionner :

En haut au centre de votre fenêtre Unity appuyez sur le bouton lecture. La scène Menu devrait se jouer, vous devriez voir votre personnage courir et pouvoir appuyer sur les boutons.

Vous remarquerez que lorsque vous appuyez sur le bouton Play, vous atterrissez sur un écran bleu. C'est normal ! En effet n'oubliez pas que le bouton Play est relié à la fonction LoadScene et va donc vous rediriger vers la scène que nous lui avons indiquée (dans le champ On Click) Gameplay. Donc rien de plus normal puisque cette scène est encore vide.

Conclusion

Félicitations, vous venez de terminer la création de l'interface d'accueil de votre jeu ! 🎮
N'histez pas à me faire des retours sur l'article en lui même, pour des recommandations et/ou même pour un merci !

Voici le lien vers le tuto terminé, je vous recommande cependant de le réaliser vous-même. Ainsi vous serez capable de créer n'importe quel type de menu de jeu une fois le cours acquis !

Zakaria Rachedi

Zakaria Rachedi

Apprendre sans oublier, c'est impossible. Alors, pourquoi ne pas immortaliser ses connaissances et en profiter pour les partager, tel a été mon souhait lors de la création de sosnoob.

Read More