Ajouter un layer (calque)
Notre jeu serait certainement meilleur avec des objets supplémentaires. Le problème, c'est que le Tiled Background à de grande chances d'être sélectionné sans qu'on le veuille, pour éviter ça, nous allons le verrouiller, et le rendre impossible à sélectionner (rassurez-vous, c'est réversible à tout moment). Nous allons avoir recours aux layers.
Un layout peut être constitué de plusieurs layers, Permettant de grouper les objets, ainsi que choisir comment ces derniers vont se superposer. Les layers sont des calques, posés les uns sur les autres, chacun ayant des objets collés dessus. De plus, les layer peuvent être cachés, verrouillés, voir d'autre effets intéressants tel que la parallaxe (défilement différentiel, que l'on retrouve dans plusieurs jeux, tel Shadow Of The Beast), ou bien des effets visuels. Dans notre cas, on veut que les objets apparaissent tous au dessus du Tile Background, on va donc créer un nouveau layer par dessus celui-ci.
Pour gérer les layer, cliquez sur l'onglet Layers, qui est généralement à côté de la barre de Projet (Project bar):
Vous devriez voir le calque 0 (Layer 0) dans la liste (C2 compte à partir de zéro, car il fonctionne mieux comme ça dans la programmation). Cliquez sur l'icône crayon et renommez-le (rename it) en arrière-plan (Background), car il est notre calque de fond. Maintenant, cliquez sur l'icône verte "Ajouter" ('add') pour ajouter un nouveau calque pour nos autres objets. Appelons ce calque Main. Enfin, si vous cliquez sur la petite icône de cadenas à côté de Background, il sera verrouillé (locked). Cela signifie que vous ne serez pas en mesure de choisir quelque chose sur ce calque. C'est très pratique pour notre tiled background (carrelage de fond), qu'il est facile de sélectionner accidentellement et n'aura pas besoin d'être touché à nouveau. Toutefois, si vous devez apporter des modifications, il vous suffit de cliquer à nouveau sur le cadenas pour déverrouiller (unlock) le calque.
Les cases à cocher vous permettent également de masquer les layers dans l'éditeur, mais nous n'en avons pas besoin tout de suite. Votre barre des calques devrait ressembler à ceci:
Maintenant, assurez-vous que le layer "Main" est sélectionné dans la barre des calques. Ceci est important - le calque sélectionné est le calque actif. Tous les nouveaux objets insérés sont insérés dans le layer actif, s'il n'est pas sélectionné, nous allons insérons accidentellement dans un mauvais layer. Le layer actif est affiché dans la barre d'état, et apparaît également dans une info-bulle lorsque vous placez un nouvel objet - ça vaut la peine de garder un œil dessus.
Ajoutons des "tiles"
Le pack Jungle Platformer a un tileset ("quadrillage de textures"), dans le fichier Tiles\Tiles.png. Importons-le en tant que Sprite pour l'utiliser comme des tuiles.
Comme vous l'avez fait pour Tiled Background, double-cliquez dans le layout pour insérer un nouvel objet. Cette fois, choisissez Sprite. Le curseur de la souris se transforme à nouveau en réticule. Cliquez à n'importe quel endroit au centre de l'écran.
L'éditeur d'image s'ouvre alors, mais avec quelques fenêtres supplémentaires, parce que les Sprites peuvent être animées. Cependant, nous n'avons pas d'animation pour cet élément - sa vitesse sera 0. Nous avons des tuiles dans chaque image (frame) de l'animation. De la sorte, nous pouvons changer quelle tuile sera affichée en changeant le frame de l'animation.
Faites un clic droit sur un espace dans le panneau Animation Frames au bas de la fenêtre et choisissez Import sprite strip.... Ceci nous permet de découper une grille d'images en animations, ce qui fonctionne également avec une chartes de tuiles.
Une boîte de dialogue apparaît. Choisissez le fichier Tiles\Tiles.png du pack de sprites. Construct 2 doit alors connaître le nombre de tuiles présentes dans l'image. Vous remarquerez que Tiles.png est une grille de tuiles de 12 x 12. Entrez 12 et 12 et cliquez OK.
Donnez un moment à Construct 2 pour qu'il découpe les tuiles. Vous devriez avoir désormais les 144 tuiles importées en tant que frames d'animation! Nous n'aurons toutefois pas besoin du premier frame (lequel est vide), alors faites un click droit sur celui-ci et sélectionner delete.
Vous voudrez peut-être redimensionner la fenêtre Animation Frames de manière à obtenir un meilleur aperçu de vos tuiles. Aussi, vous pouvez faire un clic droit dans l'espace et changer la vue des miniatures à Large si vous préférez des miniatures plus grandes.
Par défaut, la vitesse de l'animation est de 5, ce qui signifie que les tuiles changent continuellement d'apparence. Nous voulons que les tuiles demeurent sur leur frame actuel, alors assurons-nous que leur vitesse d'animation est de 0. Sélectionnez l'animation Default dans la fenêtre Animations.
La Barre de propriétés montre désormais les propriétés de l'animation. Inscrivez 0 à la propriété Speed.
Désormais les tuiles ne changeront plus leur image - elles resteront sur le même frame. Fermez l'éditeur d'image en cliquant le bouton X de l'une des trois fenêtres flottantes. La tuile de votre Sprite devrait désormais apparaître dans le layout!
Alors qu'elle est sélectionnée, changez son nom de Sprite à Tile dans la Barre de Propriétés. C'est toujours une bonne idée de donner un nom approprié à vos objets.
Créer un paysage à partir de tuiles
Remarquez que l'objet sprite possède la propriété Initial frame. Nous pouvons l'utiliser pour changer la tuile actuelle. Sélectionnez l'objet Tile et modifiez la frame initiale à 1:
Remarquez que l'image change pour refléter la tuile dans la frame de l'animation 1. Voici comment nous pouvons établir différentes tuiles à travers le niveau.
Maintenez Control et glissez-déposez la tuile. Vous allez créer un nouvel objet tuile. Répétez l'opération pour avoir 3 tuiles dans une ligne. Sélectionnez celle du milieu et mettez sa frame initiale à 10. Faites la même chose pour celle de droite, mais fixez sa frame initiale à 13. Vous devriez maintenant avoir quelque chose comme cela :
Si vous vous demandez comment revérifier quel numéro de frame correspond à quelle tuile, double-cliquez sur l'objet tuile. L'éditeur d'image revient alors avec la fenêtre d'animation où vous pouvez vérifier. Rappelez-vous que vous pouvez control glisser une tuile et cela crée une autre tuile du même type, donc vous n'avez pas besoin de continuer à taper dans les frames initiales.
Activer l'alignement à la grille
Cela va devenir prise de tête si nous devons aligner toutes ces tuiles à la main! Vous pouvez activer une grille pour vous faciliter la tache. Dans le ribbon, cliquez View et activez Snap to Grid. La taille de la grille par défaut de 32x32 est bien. Nos tuiles ont une taille de 128x128, ce qui est un multiple de 32. Cela facilite la possibilité d'emboîter les tuiles ensemble tout en donnant toujours une certaine liberté de positionnement.
Essayez de faire glisser les tuiles maintenant. Vous devriez vous rendre compte qu'elles s'alignent à une grille de 32x32. Maintenant cela devrait être facile d'emboîter les trois tuiles ensemble.