Logo Makeyourgame
Accueil Les formations Créer un jeu Les ateliers Les tutoriels Blog Loterie
Logo Makeyourgame
Les formations Les financements Les exercices La certification Unity
Logo Makeyourgame
Mes objectifs Les jeux Les ressources Le glossaire
Logo Makeyourgame
Les tutos Les tutos Youtube

Créer une Map #Noobland #Gdevelop #1 : NoCode

pictureProfil_Lyxyz
Ecrit par Lyxyz
Catégorie NoCode
Mis à jour le 02/09/2020
Créer une Map  #Noobland  #Gdevelop #1

Dans ce tutoriel nous allons voir comment on créer une map avec Tiled et comment l'intégrer dans Gdevelop

9 min Débutant

Bonjour à toutes et à tous, MakeuseGameuse et MakeurGameur,

Lors de la lecture de la doc que je vous invite à lire ICI, je me suis aperçu que chaque écran que l'utilisateur verra,sera à créer. C'est à dire écran de démarrage, menu principal, écran des crédits, ...

Il y a beaucoup d'information à retenir pour bien prendre en main Gdevelop, et je vous avoue, je ne suis pas là pour vous faire des tutos sur comment faire un écran de démarrage (sauf si vous me le demandez), mais bel et bien pour faire quelque chose.

Vous êtes prêts ??

Et bien figurez-vous que ce n'est pas encore prêt .....

Je pensais qu'avec Gdevelop tout était intégré, mais non ou presque !! https://makeyourgame.fun/sceditor/emoticons/cwy.png

Tuto Installation Gdevelop c'est ICI

Il y a bien un outil pour faire des maps sous Gdevelop mais je n'ai pas trouvé cela intuitif.

Il est important de préparer son espace de travail, c'est à dire :

                                                                                   
  • Créer le dossier où vous enregistrerez tous vos projets ;
  •                                                                                                                          
  • Créer les sous-dossiers (sons, images, écran, ressources, personnages, ...),  libre à vous de choisir le nom des dossiers ;
  •                                                                                                                          
  • Enregistrer votre projet dans un dossier des destinations que vous trouverez facilement, par exemple C://Utilisateur/NomdevotreOrdinateur/Bureau/Gdevelop/Assets/SONS
  •                                                                                

Une fois cela fait, pour créer la map, nous allons utiliser un logiciel Open Source "Tiled"

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/ecrantitretiled-5e9c813a88523.png

Cliquez sur "Download at Itch.io"

Sur la nouvelle page, défiler vers la bas jusqu'à apercevoir "Download", cliquez dessus.

Une fenêtre va apparaître qui vous demande si vous voulez soutenir le projet, libre à vous de les soutenir ou non.

Si vous voulez les soutenir ultérieurement, cliquez sur "No Thanks".

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/pagedownloadtiledun-5e9c817666946.png

Télécharger le bon logiciel selon votre système d'exploitation. Pour ma part j'ai pris "Tiled Installer for Windows en 24MB, V1.3.3" étant sous Windows 10. A l'heure ou j'écris ces lignes c'est la Version 1.3.3.

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/pagedowloadtileddeux-5e9c835302912.png

Télécharger le et installer le. 

TUTO INSTALLATION TILED

Mais ce n'est encore fini https://makeyourgame.fun/sceditor/emoticons/wink.png.

On aura besoins d'assets pour créer notre map.

Cette fois-ci il faut aller sur ce site ICI

Il se peut que votre navigateur reconnaisse le site comme "Dangereux" ou "Frauduleux". Appuyez sur "Détails" et continuez sur le site.Je suis désolé, j'ai omis de vous faire un imprime écran et mon navigateur a enregistré le fait que j'ai accepté que ce site ne soit plus considéré comme tel.

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/ecrantitreopengameart-5e9c83948a126.png

Dans la barre de recherche tapez "LPC" comme "LIberated Pixel Cup" sous licence CC BY-SA 3.0 et GPLv3. Je vous invite à vous renseigner sur ces normes afin de connaître les droits et utilisations de propriétés libre ou privés ici.

Je vous conseil de toujours cités les auteurs de vos ressources, exemples : 

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/citationauteurs-5e9ec9f400de3.png

Libre à vous de choisir ce qu'il vous plait et ce dont vous avez besoin pour votre projet.

Pour ma part j'ai pris les Assets suivant :

                                                                                 
  • [LPC] Plant repack,
  •                                                                                                                        
  • LPC Base Assets (Sprites & Map Tiles),
  •                                                                                                                        
  • LPC Tiles Atlas2,
  •                                                                                                                        
  • LPC Tile Atlas,
  •                                                                                                                        
  • [LPC] Terrains Repack.
  •                                                                              

Ne téléchargez que les assets pour la construction de la map. Pour les personnages et PNJ cela fera l'objet d'un autre tuto.

Une fois les assets téléchargés, il est temps de les mettre en place dans Tiled.

N'oubliez pas de placer les assets de map dans les dossiers ou sous-dossiers prévus. 

Dézippez les et vous vous trouverez avec cela :

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/assetsdezipper-5e9c843473e57.png

Ouvrez Tiled.

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/ecrancreationtiled-5e9c846447613.png

Cliquez sur "Nouvelle Carte" et mettez les mêmes paramètres qui s'affiche à l'image précédente, soit :

                                                                                 
  • Orthogonale
  •                                                                                                                        
  • CSV
  •                                                                                                                        
  • En bas à droite
  •                                                                                                                        
  • Taille de la carte --> Largeur : 32 tiles ; Hauteur : 32 tiles 
  •                                                                                                                        
  • Taille des éléments --> Largeur : 32 pixels ; Hauteur : 32 pixels
  •                                                                              

Vous aurez une map de 1024x1024 pixels.

Ne changez pas "Taille des éléments" car si j'ai bien compris, cela corresponds à la taille des éléments que nous allons incruster (personnage, décors, ...) dans Gdevelop. Ceci dit vous pouvez changer la "Taille de la carte" si vous voulez une map plus grande et plus complète.

Faites "Enregistrer sous ..." et enregistrer le projet dans le dossier que vous avez créé. Vous vous retrouverez avec cette fenêtre une fois le projet enregistrer.

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/ecrannouveauprojetecrantitre-5e9c84ac86b48.png

Insérer les Assets téléchargés et décompressés :

                                                                          
  • En les faisant glisser dans "Jeux de Tuiles" (fenêtre en bas à droite),
  •                                                                                                                 
  • Nouveau Tileset --> Source "Rechercher" --> rechercher votre image "PNG" --> valider,
  •                                                                                                                 
  • Laissez les valeurs par défauts et faites "Enregistrer sous" et enregistrer le dans le dossier convenu, ici image --> Map --> Map01.
  •                                                                  

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/ecrannouveauprojetajouttileset-5e9c85af38126.png

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/ecrannouveauprojettilesetajoute-5e9c85f40a269.png

Libre à vous de faire des essais pour bien comprendre.

Pour faire une bonne map en tant que Noob je vous conseil :D'éviter les symétrie car la nature n'est pas symétrique par défauts sauf par la main de l'Homme (exemple : les arbres ne sont pas alignés naturellement)Attention aux angles (mais ça on apprend vite en faisant des essais)Bien définir les calques. Chaque calque doit correspondre à un élément car si on mélange tout on peut avoir des problèmes d'agencement).De plus, les calques ont des priorités d'apparition comme Photoshop, pour ceux qui connaissent. Si vous ne comprenez pas, appuyez sur "L'Oeil" à côté des calques et vous verrez par vous mêmes, Sauvegardez souvent.

Une fois la Map crée (et faites pas la même que moi, soyez créatif), il faut maintenant la sauvegarder. Faite attention à la taille d'exportation pour Gdevelop. Voici ma Map et je serai heureux et super content (cela voudra dire que j'ai été pédagogue) que vous me partagez les vôtres, comme ça on pourra voir les points à améliorer ou à abandonner.

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/mapfinidanstiled-5e9c8648b6a79.png

Enregistrer votre map au format TMX et ensuite exporter votre map au format PNG.

Lors de l'export de l'image, il est possible de tenir compte du zoom initial lors de l'enregistrement et lors de l'importation de Gdevelop.

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/tiledexporterenpng-5e9c867ddd8b7.png

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/exportimagetiled-5e9c86a9ce322.png

Prochaine étape, insérer la map dans Gdevelop.

Ouvrez Gdevelop et créer un nouveau Projet et enregistrer le dans le dossier de destination voulu, exemple C://Utilisateurs/NomdevotreOrdinateur/Bureau/Gdevelop/Game/RPG_Game.json

Le fichier sera enregistré en ".json".

Une fois enregistré vous tomberez sur la fenêtre suivante :

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/ouvertureprojetgdevelop-5e9ca8157eae8.png

Dans "Scène", qui se situe sur la fenêtre de gauche, cliquez sur "Cliquez pour ajouter une scène" et renommer la comme vous le voulez de façon à vous retrouver facilement.

Dans l'exemple, je l'ai renommé "Map01" (Cliquez sur les trois points 

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/troispoints-5e9ca97450a48.png

 et "Rename";) ).

Une fois renommé cliquez sur "Map01" et vous vous retrouverez avec cette interface :

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/interfacesceneobjet-5e9cad117ba27.png

Dans "New Object" situé a droite de votre écran, faites un clic droit et allez sur "Add a new object" et choisissez "Sprite".

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/ajoutmapsprite-5e9cb04e625d2.png

Cliquez sur "Appliquez une animation +"

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/ajoutmapspritesuite-5e9cb1e272ea9.png

Cliquez sur " + Ajouter" pour mettre  la map crée dans Tiled.

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/ajoutmapspritesuitedeux-5e9cb2807914b.png

Vous voici avec ceci :

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/mapajoutedansgdevelopbis-5e9cba3a80a1b.png

Renommez votre map. Dans l'exemple je l'ai renommé "Zone01".

Faites glisser la map dans la fenêtre du milieu et positionner votre map.

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/mapajoutegdevelop-5e9cbb035918f.png

C'est normal si votre map est plus grande que l'encadrement du milieu.

N'oubliez pas d'enregistrer votre projet.

Vous pouvez appuyer sur 

https://makeyourgame.fun//upload/users/Lyxyz/nouveaudossier/boutonapercu-5e9cbb6073417.png

pour avoir un ordre d'idée de ce que cela donnera en plein écran.

Et voilà, vous savez maintenant créer une map dans Tiled et comment l'intégrer dans Gdevelop.

Vous pouvez maintenant allez sur le Tuto suivant, Creér

Vues: 2973

Licence:



Validation du Tutoriel

Veuillez vous connecter ou créer un compte pour pouvoir valider ce tutoriel et ainsi gagner de l'expérience (XP) !

Vous aimerez aussi...

Blog et Tutoriels