Apprendre à utiliser un Tilemap en créant un jeu de plate-forme !

2
  • 5 favoris

Taggé

Fichiers attachés

Les fichiers suivants ont été attachés à ce tutoriel:

Statistiques

4,704 visites, 6,023 vues

Outils

Partager

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Les tilemap c'est la vie.

Une vois que vous maîtrisez les tilemap, votre vie va devenir meilleure, le ciel deviendra bleu, le cancer n'existera plus..

Tilemap

1. Le Tilemap, c'est quoi ?

Un Tilemap est,comme son nom l'indique, une feuille divisée en carrés. Chaque carré peut être utilisé séparément, un peu comme un Sprite.

Dans Construct 2, la fenêtre Tilemap est situé à droite de l'onglet "Object". Elle restera grisée tant que vous n'aurez pas ajouté un Objet Tilemap.

2.Comment se servir des Tilemap

Les Tilemap sont généralement utilisé pour des background ou créer le sol dans les RPG (vu du dessus). L'idée ici est de vous expliquer que l'on peut utiliser les Tilemap pour bien plus. Notre exemple sera sur une base de jeu 8bits, parce que c'est plus simple.

Mon premier Tilemap

1. Se préparer

Photoshop, Gimp ou n'importe, je recommande juste de travailler avec une grille. Et vu que nous somme dans du graphisme pixel rétro, une grille de 16x16px dans un document en: 80 x 160px fera l'affaire.

Taille du document: 80px*160px (or any multiplier of 16px)

Grille: 16px*16px

Type de fichier: png

Vous pouvez dessiner dedans. Ou alors juste prendre le fichier que je vous propose ! (Un bonbon au premier qui trouve l'origine des sprites)

2. Importer dans Construct 2

Sur Construct 2: New object > General > Tilemap (double clic sur le Layout ou dans l'onglet Object, clic droit > AddNew Object).

Ignorez le tilemap par défaut et chargez celui que vous venez de faire. Avant de fermer la fenêtre d’édition d'image, vous devez indiquer la taille de la grille. Cela se fait dans Properties panel sur la gauche.

Entrez 16x16 vu que nous avons travaillé sur une base de 16x16.

Le Tilemap s'adapte automatiquement à la taille choisie.

Créer son jeu

1. Faites les choses bien

Dans l'onglet Object, Renommez l'objet Tilemap en Plateforme, comme premier Layer.

Vous pouvez créer un nouveau calque situé en dessous de Plateforme, New Layer,et le remplir en noir. Cela se fait, après avoir cliqué sur le calque, dans Layer properties à gauche. Mettez Background Color en (0, 0, 0) et Transparent sur No. (Si vous ne voyez aucun changement, mettez le calque Plateforme en transparent). ce nouveau calque s’appelle Background.

Enfin, allez dans View dans le Main menu, Cochez la case Snape to grid et entrez 16x16 dans les cases à sa droite.

2. Les choses deviennent sérieuses

Cliquez sur Platform layeret dans l'onglet Tilemap puis sélectionnez l'outil Pencil Tile.

Cliquez une première vois sur le carré que vous voulez utiliser, et vous pouvez maintenant "dessiner" votre jeu !

Astuce: Le clic droit permet d'effacer un carré

Vous pouvez ajouter votre personnage. Je vous suggère d'aller faire un tour sur How to make a Platform game Page 3 si vous ne savez pas comment faire. (pas d’inquiétude, un capx est dispo dans ce tuto)

Parce que nous sommes dans un jeu style rétro, je vous propose ces paramètres pour un Platform Behavior .

Max Speed: 76

Acceleration: 1000

Deceleration: 1000

Jump strenght: 351

Gravity: 1000

Max Fall Speed: 200

3. Behaviors

Allez dans l'onglet Object, Clic droit sur le Tilemap Plateforme > Behavior... > Add > Solid

Vous pouvez testez votre jeu ! Oui oui, c'est tout ... Tout vos carrés venant du Tilemap seront solid !! Magique !

4. Plus de truc "plateforme"

Mince ! Cette plateforme est trop haute ! Aucun soucis...

Vous avez plusieurs solution à ce problème, mais vous allez choisir de créer une plateforme "Jump-Thru"

Ajouter un nouveau Tilemap Object et choisissez le même fichier. N'oubliez pas de donner la taille de carré, 16x16.

Renommez l'objet en jumpthru et ajouté le Behavior Jump-thru.

Allez dans l'onglet Tilemap, et dessinez ! (Si vous ne voyez pas vos changements, cliquez une fois sur le Layout)

Et voila ! Vous avez compris le truc ?

Créez un nouveau calque au dessus et renommez le Decoration. Répétez l’étape précédente: ajouter New Object > Tilemap > Choisissez le fichier, Tile size 16x16. Et vous pourrez ajouter des arbres et statues !

Lave et piques? La même chose ! Ajoutez juste la condition que vous souhaitez (mort instantanée... ou pas)

Conseils

- Nous avons utilisé le même fichier pour tout. Bien entendu, vous pouvez utiliser des fichiers différents.

- Ne faites pas l'erreur d'ajouter le même sprite pour de la "Decoration" et du "Solid". Cette erreur est malheureusement trop souvent faite, et ça pourrit un jeu. On ne sait jamais ou l'on peut marcher, ce qui fait mal ou pas.

- Contenez vous. Je sais que les Tilemap viennent de changer votre vie, mais restez humble.

- Laissez un commentaire ! Ça fait toujours plaisir !

Note: Le fichier Capx est légèrement différent, mais tout pareil, les bases sont les mêmes donc pas d’inquiétude !

Construct 2, je t'aime, sérieusement !

.CAPX
  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!