[RPG-MAKER.FR] Oniromancie: tout l'univers de RPG Maker en français - Tutoriels - [Construct]Créer un jeu de plate-forme basique

Oniromancie: Tutoriels - [Construct]Créer un jeu de plate-forme basique


Découvrir
RPG Maker

RM 95
RM 2000/2003
RM XP
RM VX/VX Ace

Apprendre
RPG Maker

Guides
Tutoriels
Astuces
Making-of


Comment ça marche?

Aëdemphia
Par Sylvanor

Fighting Robots Quest
Par Boulon

Geex
Par roys

Inexistence
Par Falco

La Légende d'Ibabou
Par Zaitan

Nylu
Par NanakyTim

Sarcia
Par Kaëlar

Super Mario RPG - Lost Souls
Par Omegabowser

News: Game design: ouvrir son jeu aux (...) / News: Des jeux et des screens / News: Alex 2019 : tests et nominations (...) / Jeux: Wendy Whedon / Sorties: Wendy Whedon /

Chat  

Bienvenue
visiteur !




publicité RPG Maker!

Statistiques

Liste des
membres


Contact

Mentions légales

142 connectés actuellement

10206618 visiteurs
depuis l'ouverture

1511 visiteurs
aujourd'hui

Groupe Facebook

Barre de séparation

Partenaires






TOP
GAMEMAKING


Les 5 plus
visités

Akademiya RPG Maker

Alex d'Or

Blog of Chaos17

BloGecko

ConsoleFun

Au hasard

Alex d'Or

Lumen

ConsoleFun

Les deux derniers

Zarok

Akademiya RPG Maker

Nos autres partenaires

Devenir
partenaire


Barre de séparation

Un site du réseau
War Paradise

Annuaires référenceurs




[Construct]Créer un jeu de plate-forme basique
Ecrit par Naked-Snake

Voici donc un guide rapide pour s'exercer sur Construct en créant une base de jeu de plate-forme.

Les étapes décrites dans ce guide ont été réalisées avec Construct Classic, mais devraient à priori être fonctionnelles avec Construct 2.
Voici également les fichiers dont vous aurez besoin lors de ce guide (vous trouverez également dans l'archive le fichier .cap final).

Avant de commencer, vous aurez besoin de télécharger cette archive, contenant le fichier .cap du tutoriel terminé, ainsi queles fichiers image dont vous aurez besoin.

La première étape après avoir lancé Construct est de créer un nouveau projet, direction le bouton "Fichier" => "New" => "New Direct-X game".


image


Vous devriez ensuite obtenir ceci à l'écran :


Spoiler (cliquez pour afficher)




Un petit descriptif rapide des parties les plus importantes de l'interface :


Spoiler (cliquez pour afficher)




Nous allons dans un premier temps activer la grille afin de placer et d'arranger nos éléments un peu plus facilement. Sélectionnez l'onglet "Layout" de la fenêtre d'outils, puis cliquez sur le bouton "Toggle grid", puis cochez les cases "Snap-to moving" et "Snap-to resizing".
Réglez ensuite la grille comme bon vous semble en cliquant sur le bouton "Edit grid"; une taille de 16x16 pixels est un bon compromis.


image


Il est temps d'ajouter notre premier objet qui fera office de hitbox pour le personnage du joueur, double-cliquez sur votre layout, puis choisissez l'objet "Sprite".


image


Il est convenable de séparer hitbox (qui va gérer tous les déplacements et les collisions), et sprite contenant les animations du personnage (qui sera repositionné sur la hitbox en permanence).
Cliquez sur votre layout pour placer le sprite. Un éditeur d'image apparaît, chargez l'image "Player_Hitbox.png" (fournie dans l'archive).

La couleur de fond devrait être transparente, si ce n'est pas le cas, sélectionnez la avec la baguette magique, puis supprimez là.
Vérifions ensuite si le centre de l'image se trouve effectivement au centre. Pour cela cliquez sur l'icône représentant une petite cible rouge, puis, remplacez les valeurs X et Y par 8 si ces dernières sont différentes. Ainsi, le centre de notre image sera placé correctement (ceci est important dans la mesure où nous allons déplacer le sprite contenant l'animation de notre personnage sur le point d'origine de la hitbox).


image


Assignons ensuite un comportement de type "platform" à notre hitbox. Sélectionnez votre hitbox dans votre layout, puis, dans la partie "Properties" de l'interface, développez la section "Behaviors", cliquez sur "Add", puis, dans la liste, sélectionnez "Platform".

Vous pouvez également en profiter pour changer le nom du sprite dans la partie "Properties".


image


Voici la fonction de chaque option :

Floor acceleration : La puissance de l'accélération lorsque le personnage commencera à bouger. Plus elle est importante, plus le personnage atteindra sa vitesse maximale rapidement.
Floor deceleration : Même chose, mais intervient lorsque le personnage arrête de se déplacer, c'est le temps qu'il mettra à s'arrêter complètement. Plus la valeur est élevée, plus le personnage ralentira rapidement.
Max floor speed : La vitesse maximale que pourra atteindre le personnage en étant au sol.
Air acceleration : La puissance de l'accélération lorsque le personnage commencera à bouger dans les airs. Plus elle est importante, plus le personnage atteindra sa vitesse horizontale maximale rapidement.
Air deceleration : La puissance de la décélération lorsque le personnage stopera son déplacement horizontal lorsque qu'il est dans les airs.
Max air speed : La vitesse horizontale maximale du personnage lorsqu'il est dans les airs.
Max fall : La vitesse maximale de chute.
Jump strength : La puissance du saut, ou sa hauteur maximale.
Jump sustain time : La variation de hauteur qu'il sera possible d'avoir en laissant la touche de saut appuyée (utile si on veut donner au joueur la possibilité d'ajuster ses sauts avec précision).
Fall gravity : Il s'agit de la puissance de la gravité, plus la valeur est élevée, plus l'accélération du personnage sera importante lorsqu'il chutera, il atteindra ainsi sa vitesse maximale de chute plus rapidement.
Jump gravity : La puissance de la gravité lorsque le personnage est en train de sauter (attention, il faut bien différencier saut et chute). Influe sur la hauteur maximale du saut.
Avoir deux valeurs de gravité différentes (chute et saut), peut paraitre étrange, mais cela permet de gérer de manière très précise certains déplacements complexes, comme par exemple un personnage qui tiendrait un parapluie, qui lui permetrait de chuter moins vite.
Jump sustain gravity : La puissance de la gravité lorsque le joueur prolonge son saut en maintenant la touche enfoncée (uniquement dans le cas où la valeur dans "Jump sustain time" est supérieure à zéro).
Gravity direction : Comme son nom l'indique, permet de décider dans quelle direction la gravité s'applique (permet de créer un effet à la VVVVVV par exemple).
Inverse control : Permet d'inverser la gauche et la droite pour le joueur, peut être utile dans certains cas assez rares.
Allow bunny hop : Permet au personnage de resauter immédiatement après avoir touché le sol lorsque l'on maintient la touche de saut enfoncée.
Allow down button : Donne la possibilité de passer au travers les plate-formes en appuyant simultanément sur la touche bas et la touche de saut.
Auto rotate: Permet de retourner de 180° l'angle de l'objet lorsqu'il change de direction (très utile lorsque combine à l'option "Auto mirror" dans les options de l'objet, qui permet de retourner horizontalement l'apparence de l'objet en question, économisant ainsi la création de graphismes supplémentaires).

Choisissez les réglages qui vous conviennent (n'hésitez pas à tester votre scène pour voir les changements effectués).

Décochez les options Allow bunny hop et Allow down button, puis cochez Auto rotate. Notre hitbox devrait donc se tourner vers la gauche lorsque l'on se déplace vers la gauche. Si vous testez votre scène, vous verrez que si vous déplacez la hitbox vers la gauche, cette dernière quitte le sol un court instant. Ceci est normal, c'est tout simplement parce que l'option Auto rotate ne "retourne" pas le sprite, mais le tourne vers la gauche (le sprite de la hitbox est donc renversé, et pas inversé).
Pour régler ce problème, il faut cocher l'option Auto mirror dans la rubrique "Angle" des propriétés du sprite.


image


Ajoutez également un objet de type "Tiled Background" à votre layout, remplissez l'image de n'importe quelle couleur lorsque l'éditeur d'image s'ouvre, validez, puis cochez l'option "Solid" et "Platform" dans ses propriétés. Vous pouvez lui donner une couleur unie. Placez le et redimensionnez le ensuite comme sur l'image, afin de créer un sol sur lequel déplacer votre personnage.


image


Par défaut, la touche de saut est la touche majuscule gauche. Nous allons modifier les contrôles pour que la touche espace corresponde au saut. Il faut pour cela accéder aux propriétés de l'application; cliquez en dehors du layout, puis, dans la fenêtre des propriétés, cliquez sur "Properties", descendez tout en bas de la fenêtre, et modifiez la touche de saut (vous pouvez très bien choisir autre chose que la touche espace).


image


Maintenant que tous les déplacements sont configurés, il ne reste plus qu'à ajouter l'animation du personnage. Nous allons donc ajouter un second sprite qui sera déplacé sur la hitbox à chaque frame, et qui prendra également la direction de cette dernière.
Ajoutons donc un nouveau sprite dans notre layout. Lorsque l'éditeur d'image s'affiche, laissez le tout tel quel, et fermez le en sauvegardant les changements (si vous déselectionnez votre sprite par inadvertance et n'arrivez pas à le retrouvez, vous pouvez le sélectionner en cliquant sur sa miniature dans la liste des objets).
Renommez votre sprite ("Player_Anim" par exemple), puis, dans la fenêtre d'animation à droite de l'écran, sélectionnez l'angle 0 (droite) de l'animation "Default", et dans la fenêtre des frames (juste en dessous), faites un clic droit, et sélectionnez "Import frames".


image


Chargez l'image "Player.png" fournie avec ce tutoriel, et réglez la largeur et la hauteur des tiles à 16, puis cliquez sur "Cut into tiles", et ensuite sur "Import".


image


De nouvelles frames sont apparues dans l'animation pour l'angle 0. Supprimez les deux premières qui sont inutiles (une frame vide et une autre qui contient notre image de départ qui ne nous sert plus à rien), en faisant un clic droit sur les frames, puis "Remove frames".
Si votre sprite est trop gros, ou trop petit, redimensionnez-le en 16*16 à l'aide des propriétés du sprite ("Width" et "Height").
Nous avons donc maintenant toutes nos frames dans une seule et même animation. Il va maintenant falloir créer une animation lorsque le personnage est immobile, une autre lorsqu'il marche, une lorsqu'il saute, et une dernière lorsqu'il tombe.
Sélectionnez l'animation "Default", et renommez la en "Stand" à l'aide de la fenêtre des propriétés à gauche.
Faites ensuite un clic droit dans la fenêtre "Animator" (n'oubliez pas de sélectionnez le sprite de votre animation), et sélectionnez la seule option disponible "Add new animation". Puis renommez la en "Walk". Faites de même pour l'animation "Jump" et "Fall". Vous devriez obtenir ceci :



image


Nous allons ensuite devoir répartir les frames dans les animations correspondantes.
Réorganisez les frames dans chaque animation comme sur cette image :


image


Activez également l'option "Auto mirror" pour notre sprite contenant les animations.
Nous n'avons pas besoin de définir l'angle 180° (gauche) pour chaque animation, puisque nous avons configuré le jeu pour qu'il inverse lui même chaque frame lorsque le personnage regardera vers la gauche.


Occupons nous maintenant des events qui vont animer notre sprite.
Ouvrez l'event sheet de votre layout, et double cliquez n'importe où à l'intérieur; sélectionnez "System", puis, dans l'onglet "System", choisissez "Always".
Un nouvel événement apparaît dans l'event sheet. Ajoutons maintenant une action à cet événement. Cliquez sur "New action", puis sélectionnez le sprite contenant les animations ("Player_Anim dans mon cas), puis dans l'onglet "Size & position" choisissez "Set position to another object", puis sélectionnez la hitbox, cliquez ensuite sur "Finish". Cela aura pour effet de déplacer l'animation sur la hitbox à chaque frame durant le jeu.
Notre première option s'ajoute à l'événement. Ajoutons une seconde action; sélectionnez à nouveau le sprite contenant les animations, puis dans l'onglet "Angle", double-cliquez sur "Set Angle". Cliquez dans le champ, puis, double-cliquez sur l'icône de la hitbox en bas de la fenêtre. Choisissez "Get angle" tout en haut de la liste. Validez ensuite le tout. Nous avons donc rendu l'angle de l'animation égal à l'angle de la hitbox (nous avons donc orienté l'animation de la même manière que la hitbox).
Vous devriez obtenir ceci :


image


Ce premier event va donc repositionner l'animation sur la hitbox et la réorienter correctement, et ce à chaque frame.
Il faut maintenant créer les événements qui serviront à jouer les animations du sprite.
Ajoutez un nouvel événement, sélectionnez la hitbox, puis cliquez sur l'onglet "Platform" en haut de la liste. Puis choisissez "Is on ground".
Faites un clic droit sur l'événement qui vient de se créer, et sélectionnez "Insert sub-event", sélectionnez les mêmes options que précédemment, mais choisissez "Is walking" cette fois.
Un nouvel événement s'imbrique dans le précédent. A la suite de l'événement que vous venez juste de créer (toujours imbriqué dans le premier donc, ajoutez en un autre, sélectionnez "System", puis dans l'onglet "Special conditions", choisissez "Else".
Ajoutez ensuite des événements pour avoir un résultat correspondant à l'image suivante :


image


Ajoutez ensuite les actions jouant les animations correspondantes (nouvelle action, sélectionnez le sprite contenant les animations, puis, dans l'onglet "Animation" sélectionnez "Set animation", n'oubliez pas les guillemets lorsque vous entrez le nom de l'animation.
Vous devriez obtenir ceci :


image


Cette série d'événement procède par ordre logique pour savoir quelle animation jouer (il faut aussi savoir que les événements sont lus de haut en bas, ça n'a pas beaucoup d'importance dans le cas présent, mais peut en avoir beaucoup plus dans des enchainements d'événements plus complexes).
On vérifie tout d'abord si le personnage est au sol, si c'est le cas, on vérifie ensuite s'il se déplace, si cette condition est remplie, on joue l'animation de marche, si elle n'est pas remplie, c'est que le personnage ne se déplace pas, alors on joue l'animation du personnage à l'arrêt.
On vérifie ensuite si le personnage saute, si c'est le cas, on joue l'animation de saut, puis on vérifie s'il tombe, si c'est le cas, on joue l'animation de chute.

Si vous lancez votre jeu, vous vous rendrez compte que l'animation de marche de votre personnage se joue beaucoup trop vite. Pour régler ce problème, cliquez sur l'angle 0 de l'animation de marche du personnage, puis réglez sa vitesse dans la fenêtre des propriétés (une vitesse de 12 semble donner de bons résultats).


image


Il ne reste plus qu'à masquer la hitbox en cochant l'option "Invisible on start" dans la partie "Appearance" des propriétés de l'objet.



Vous voilà maintenant avec une bonne base de jeu de plate-forme, vous pouvez par exemple ajouter des visuels aux plate-formes.

Avec ce tutoriel, vous devriez maintenant avoir en main quelques éléments de base (en particulier sur son fonctionnement), afin de vous lancer dans l'apprentissage plus approfondi du logiciel.


Limit the fox - posté le 16/10/2011 à 17:14:17. (14 messages postés)

Déprimé toussa

Merci pour ce tuto , tu peux être certain que je l'utiliserais :) .

Étant donné que je suis un fan de jeux de plate-formes ,et que je compte en démarrer un ,je m'en vais donc télécharger Construct ;) .

lol


Tata Monos - posté le 17/10/2011 à 07:45:41. (56891 messages postés) - misteroniro

Vive le making libre

2.5 Mo juste pour placer un carré qui saute et une plate forme en bas. Je trouve ça bien lourd pour un truc simple pour l'exe en compilation.

Sur mmf, un seul masque plus la plate forme, c'est 500Ko.

Ceci dit pas mal de petite option lié au mouvement plate forme dans construct, comme le flip automatique pour inverser l'image automatiquement et divers chose.

Pixner|Offgame | Le comptoire des clikeurs


Tampaxor - posté le 19/10/2011 à 14:31:05. (10274 messages postés)

Et la différence entre MMF et Construct, c'est que l'un est payant et l'autre non.

Chaîne Youtube | Twitter | Facebook | Blog | Fruity Loops, nouvelles bases | Fruity Loops, les VST | SoC | Flickr


Tata Monos - posté le 19/10/2011 à 16:09:45. (56891 messages postés) - misteroniro

Vive le making libre

Je me fous de savoir si c'est gratos ou pas. Je vois une différence qui est énorme et je me pose la question si c'est l'exe de base de construct qui "lourd" et ensuite les pictures les sons ect sont un poids normale on va dire, ou si tout es plus lourd et que deux sprites passe l'exe à 5mo et qu'on se retrouve avec un simple jeu correcte de l'ordre de 150 Mo par exemple ! au lieu de 20 chez la concurrence par exemple pour les mêmes fonctions ! Je ne pense pas et j’espère pour ce logiciel ! J'imagine que c'est l’interprète python qui fait ça.

Pixner|Offgame | Le comptoire des clikeurs


Azaki - posté le 28/12/2011 à 23:12:47. (13139 messages postés)

Nazi Nietzschéen

Très bon tutoriel. J'avais tenté de faire 2/3 trucs avec ce logiciel sans tutoriel, et ce n'était pas sans mal, on va dire.

Merci en tout cas, j'espère qu'il y en aura d'autres.

DeviantArt || My Anime List || Fan de Zeus81, de Kp! et de Karel|| Découvrez Kévin Kelly ! || Mother 4 || Fan de Zim(s) et d'Omenides, dit "le porteur de don et d'espoir" || Nietzsche ta mère. || "Azaki qui modère. J'aime bien. Ça fait un peu white Omenides Nietzschéen. " - Ephy || "En fait, la production d'Indinera, c'est le penchant RM de la littérature fantastique pour adolescentes qu'on a vu fleurir ces dernières années dans les supermarchés." - Åvygeil


vegapomme27 - posté le 03/03/2015 à 09:35:43. (30 messages postés)

Je me suis offert une licence de Contruct 2 (100 balles, c'est pas donné) qui me satisfait beaucoup. J'adore ce logiciel qui permet de prototyper pas mal d'idées en 2d. Je n'ai jamais tenté l'export sur mobiles etc mais c'est vraiment cool une fois qu'on a pris le coup de main.

http://vegamukiwa.tumblr.com/

Suite à de nombreux abus, le post en invités a été désactivé. Veuillez vous inscrire si vous souhaitez participer à la conversation.

Haut de page

Merci de ne pas reproduire le contenu de ce site sans autorisation.
Contacter l'équipe - Mentions légales

Plan du site:

Communauté: Accueil | News | Forum | Flash-news | Sorties | Chat | Commentaires | Galerie | Blogs | Articles perso | Screen de la semaine | Palmarès | Livre d'or | Recherche | Interviews | OST | L'Annuaire | Divers
Apprendre: Le Wiki | Tutoriels | Guides | Gaming-Live | Tests | Making-of
Télécharger: Programmes | Scripts | Packs de ressources | Midis | Eléments séparés | Sprites
Jeux: Index jeux séparés | Top Classiques | Top Originaux | Les autres | Collection Oniro | RPG Maker 95 | RPG Maker 2000 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker VX Ace | RPG Maker MV | Autres | Jeux complets | Proposer
Hébergés: Aëdemphia | Fighting Robots Quest | Geex | Inexistence | La Légende d'Ibabou | Nylu | Sarcia | Super Mario RPG - Lost Souls
Ressources RPG Maker 2000/2003: Chipsets | Charsets | Panoramas | Backdrops | Facesets | Battle anims | Battle charsets | Monstres | Systems | Templates
Ressources RPG Maker XP: Tilesets | Autotiles | Characters | Battlers | Window skins | Icônes | Transitions | Fogs | Templates
Ressources RPG Maker VX: Tilesets | Charsets | Facesets | Systèmes
Ressources RPG Maker MV: Tilesets | Characters | Faces | Systèmes | Title | Battlebacks | Animations | SV/Ennemis