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 un personnage et l'intégrer dans Gdevelop #NoobLand #Gdevelop #2 : NoCode

pictureProfil_Lyxyz
Ecrit par Lyxyz
Catégorie NoCode
Mis à jour le 11/05/2020
Créer un personnage et l'intégrer dans Gdevelop  #NoobLand #Gdevelop #2

Nous allons voir dans ce tuto comment créer un personnage, l'intégrer dans Gdevelop et le faire se déplacer dans un environnement créer au préalable.

6 min Débutant

Bonjour à toutes et à tous, MakeuseGameuse et MakeurGameur,

On vas voir comment créer et intégrer un personnage.

Vous avez pu voir dans les assets de Open Game Art qu'on peut trouver des images de personnage.

C'est ce genre d'image qui nous intéresse :

https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/lpcfemalelight-5ea828901dc68.png

Chaque ligne représente une action "In Game" du personnage.

Comme vous l'avez remarqué, il manque les habits. On peut aussi trouver ce genre d'image :

https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/magefalldownsheetcopy-5ea8289fe8c38.png

Cependant cela limitera les possibilité de mouvement du personnage ou du PNJ.

Pour gagner du temps et vous éviter de "jouer à la poupée" en habillant un par un, éléments par éléments (habits, armure, arme, ...) le personnage sur des logiciels comme GIMP ou Tiled, je vous invite à aller sur ce site ICI

https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/creationpersogourav-5ea828b2d0c08.png
 

On retrouve la même image vue précédemment. Nous allons personnaliser notre personnage sans passer par la superposition de calques.

Maintenant à vous d'essayer les différents "Skins" à votre Gauche. Comme le dit l'adage "c'est en forgeant que l'on devient forgeron".

Allez hop au travail !! https://makeyourgame.fun/sceditor/emoticons/tongue.png https://makeyourgame.fun/sceditor/emoticons/grin.png

Et surtout, partagez vos créations sur notre DISCORD  que l'on puisse voir ensemble ce que vous avez fait. (#vos-créations).

N'oubliez pas, ici je vous montre la "Facilité", le mieux est de faire vous même, pixels par pixels, sur GIMP ou Paint par exemple, vos propres créations et vos propres personnalisations.  Chaque outils que je vous présente comportent des limitations d'utilisations. Vous ne trouverez pas tout ce que vous voulez. Et puis quand on a passé plusieurs heures à s'embêter à faire une "ARMURE DE LA MORT QUI TUE" que personne a, on est fier de notre travail et fier de nous. Alors soyez patient, créatif et "Don't Give Up" !!

Une fois votre personnage fini, aller en bas de la page pour télécharger le fichier "Save Result As PNG". N'oubliez pas d'enregistrer et de renommer votre image en ajoutant l'extension ".png" à la fin sinon vous vous retrouverez avec un fichier blanc.

https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/personnage-5ea828bb31019.png
 

C'est pas encore fini, COCO  https://makeyourgame.fun/sceditor/emoticons/smile.png !!!

Souvenez-vous que chaque image du personnage dans votre PNG est de taille suivante "64x64 pixels" et "Sans Espacement".

Dans la version 4 de Gdevelop on pouvait diviser l'image PNG du personnage en plusieurs images de 64x64 pixels, mais cette fonctionnalité n'existe plus dans la version 5, allez savoir pourquoi. Nous utiliserons donc ce site ICI pour diviser l'image.

https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/spritecutter-5ea84ab51db3a.png

Une fois votre image uploader, défilez vers le bas jusqu'à atteindre "Cutting Method" et suivez les instructions de l'image suivante. 

https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/spritecuttercut-5ea84ebb4a691.png

Nous avons choisi de couper l'image par une taille défini qui est de 64(Width)x64(Height) pixels. Une fois que vous avez appuyer sur "Cut!", votre image sera découpé en plusieurs petite image. Défilez vers le bas pour appuyez sur "Download frames as ZIP" comme l'illustre l'image suivante :

https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/downloadframeszip-5ea84ae020b63.png

Une fois le ZIP télécharger, mettez le fichier dans le dossier créer pour l'occasion par exemple C://User/NomdevotreOrdinateurs/Bureau/Gdevelop/Assets/Personnage et décompresser le. Vous vous retrouverez avec cela (si vous n'avez pas le même affichage que dans l'exemple, cliquez sur l'icone en bas à droite) :

https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/dezippage-5ea8575a66068.png
Supprimer toutes les images noir, pour avoir cela au final :

https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/noirsupprimer-5ea85ba081590.png
Vous pouvez voir un dossier "Personnage qui marche", j'ai sélectionné les images "Tile104" jusqu'à "Tile151" inclus, car ceux sont les images qui nous intéresse pour la suite.

Cela correspond à la ligne 9 à 12 inclus avant division en pixels de l'image.

https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/ligne-5ea85d5a28329.png

Nous approchons du but   https://makeyourgame.fun/sceditor/emoticons/grin.png . Ouvrons notre projet Gdevelop pour y intégrer notre personnage dans la map que nous avons créer.

Une fois le projet ouvert, ajouter votre personnage comme vous l'avez fait pour la Map

https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/ajoutpersoter-5eaad21f33015.png

Vous pouvez maintenant intégrer le personnage dans l'écran centrale et le faire se déplacer sans les animations.

Pour cela appuyer sur le bouton aperçu 

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

une fenêtre vas apparaître et avec les flèches directionnelles de votre clavier vous pouvez le déplacer. Dans le prochain tuto je vous expliquerai comment l'animer lors des déplacements avec le tracking de la caméra sur le personnage.  D'ici là, portez vous bien et amusez-vous à essayer et bidouiller.

Si vous ne voyez pas votre personnage lors de l'insertion dans l'écran centrale, vous devez regarder dans les propriétés le chiffre inscrit dans "Order" et voir dans quel calque se trouve votre objet. Regardez les exemples suivant :
Exemple : - Propriété Map ( "Z Order" = 1) :
https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/proprietesmap-5eaae635d8d02.png
- Propriété Personnage ( "Z Order" = 2) :
https://makeyourgame.fun//upload/users/Lyxyz/Creerunperso/proprieteperso-5eaae6cb038cc.png

Plus le chiffre de "Z Order" sera élevé, plus l'objet sera en premier plan. Attention aussi à prendre en compte les Calques ou "Layers" qui définissent aussi l'ordre d'apparition. Encore une fois, le mieux est de faire des test pour comprendre comment ça fonctionne.

PS: Ne bidouillez pas sur votre projet principal car il y a de enregistrements automatique. Recréer un projet vierge et bidouillez le.

Et voilà, vous savez maintenant comment créer un personnage et l'intégrer dans Gdevelop.  https://makeyourgame.fun/sceditor/emoticons/grin.png Next Step c'est ici (en cours de rédaction)

Vues: 3603

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