NESMaker - Démarrage Rapide MODULE PLATEFORME (Tutoriel en français)

dale_coop

Moderator
Staff member
Platformula.png


INTRO

J'ai préparé ce tutorial basique pour aider les personnes qui ont suivi les vidéos tutorielles de Joe, et qui auraient besoin d'un complément écrit, des précisions sur certains points :
http://nesmakers.com/viewtopic.php?f=27&t=638

Dans ses vidéos, Joe montre plus de détails que ce que j'explique ici. Je vous conseille donc vivement de regarder les vidéos correspondantes à chacun des sujets, pour voir les manipulations.


DEMARRER UN NOUVEAU PROJET

Exécuter NESMaker_xxx.exe. Puis, choisir le menu "File > New". Une boite de dialogue s'ouvre alors:

2018_08_31_00_04_04_New_Project_Options.png


Pour la création de votre nouveau projet, vous avez le choix entre plusieurs options :
- Use Existing Tilesets : votre projet utlisera directement les images se trouvant dans le dossier "GraphicAssets".
- Create Blank Tilesets : votre projet utlisera des images vierges qui seront placées dans le dossier "GraphicAssets\<NomDeVotreProjet>". Les images situées directement dans le dossier "GraphicAssets" ne seront pas impactées par vos modifications.
- Create Default Tilesets : votre projet utlisera une copie des images de "GraphicAssets" qui seront placées dans le dossier "GraphicAssets\<NomDeVotreProjet>". Les images situées directement dans le dossier "GraphicAssets" ne seront pas impactées par vos modifications.
Si vous avez choisi une des 2 dernières options, vous devez indiquer un nom de dossier pour créer le dossier "GraphicAssets\<NomDeVotreProjet>".
Je vous conseille de choisir "Create Blank Tilesets", pour partir avec des images vierges que vous pourrez modifier à loisir.

Vous pouvez également indiquer le module que vous souhaitez utiliser pour ce projet.

Pour l'exemple de ce tutorial, choisir "Create Blank Tilesets", saisir par exemple "JEU002" (un dossier "JEU002" sera créé dans le dossier "GraphicAssets". Toutes les images nécessaire pour votre jeu seront situées dans le dossier "GraphicAssets\JEU002").
Et selectionner le module "Platform_Module.MOD".

Une fois votre nouveau projet démarré, il faut l'enregistrer.
Pour cela, choisir "File > Save". Votre projet n'ayant jamais été enregistré auparavant, une boite de dialogue s'affiche vous demandant où enregistrer le fichier de votre projet (l'extension d'un projet est .MST). Par convention, il est recommandé donner le même nom à votre fichier projet qu'à votre dossier projet précédemment créé.

Je vous conseille de le placer dans le sous-dossier "Projects" se trouvant à la racine du dossier NESMaker (et de prendre l'habitude d'enregistrez tous vos projets dedans, c'est plus simple pour les retrouver et pour les sauvegardes).

Dans le cadre de notre tutorial, enregistrer "JEU002.MST", par exemple dans le dossier "Projects".



PARAMETRAGE INITIAL DU PROJET

Le projet est créé, tous les scripts associés au module choisi ont été paramétrés. Il n'y normalement pas besoin de revenir sur ce paramétrage...
Cependant, je conseille tout de même d'ouvrir le paramétrage du project pour vérifier que tout est en ordre.
Pour cela, sous le menu "Project", choisir "Project Settings", vérifier que :
- Dans les onglets "Projects Labels" et "Scripts settings", les listes sont bien renseignés (non vides).
- Et dans l'onglet "Emulator", vous pouvez spécifier un autre emulateur NES que celui natif à l'éditeur.
Je conseille de télécharger l'emulateur FCEUX, de le dezipper quelque part et dans ce cas, de renseigner dans cet onglet les informations comme suivent :

2018_08_31_00_38_29_Project_Settings_Emulator.png

Emulator : chemin d'accès à l'applicaiton fceux.exe (parcourrir et sélectionner là où vous l'avez installé).
Working Folder: chemin d'accès au dossier (et rom) du jeu qui sera généré, cliquer sur le bouton parcourir et sélectionner le fichier "game.nes" se trouvant dans le dossier "GameEngineData" (pour ma part, j'utilise un chemin relatif, qui me permet de déplacer/renommer aisément mon dossier NESMaker, sans avoir à reconfigurer cet onglet).
Parameters: "game.nes" (renseigné automatiquement lorsque vous sélectionner le Working Folder).



INFOS DU PROJET

Choisir maintenant "Project > Infos", dans la fenêtre qui s'ouvre et cocher la case "Skip start screen", et UNIQUEMENT cela, ne rien toucher d'autre.
Pour l'instant, notre jeu n'aura pas de Start Screen et il démarrera directement dans le jeu (le Player dans un écran). Si vous ne cochez pas cette case, vous aurez un écran gris lorsque vous lancerez le jeu (qui est en fait le Start Screen non paramètre). Nous reviendrons sur l'écran de démarrage (Start Screen) en fin de tutoriel.



PALETTES ET GROUPES DE PALETTES

Maintenant que le paramétrage de base est effectué, nous allons pouvoir créer nos différents éléments de jeu (Palettes de couleurs, Player, Tiles pour composer nos écrans Monstres,…).

Paramétrage des Palettes :
Avant de pouvoir s'attaquer au écrans et à notre Player, nous devons créer au moins une palette de couleurs et un groupe de palettes.
Les palettes de couleurs seront utilisées pour créer vos differents sprites (votre Player, les monstres), et Tiles (les éléments pour vos écrans).

Dans l'arborescence de NESMaker, sélectionner "Palettes > Palette Groups", faire un clic-droit et choisir "New palette group".

00_New_palette_group.png


Un petit [+] s'affiche maintenant au niveau des Palette Groups, vous permettant d'accéder à votre nouveau groupe de palettes (vous pouvez lui donner un autre nom si vous le desirez, par exemple "Niveau 1")

Ensuite, déplier l'élément "Palettes" pour faire apparaitre toutes les palettes utilisables (pour les tiles).
Sélectionner la première palette et renommer la en "Niveau 1 Palette" par exemple, ensuite faire un clic-droit sur cette palette et l'assigner au groupe de palette "Niveau 1 ".

2018_08_31_00_30_54_Palettes_Niveau_1.png


Chaque élément du jeu peut être associé 2 palettes (sauf les Tiles qui en ont 4). Chaque palette contient 3 couleurs + 1 couleur commune à toutes les palettes, qui sert à la transparence des sprites et est aussi la couleur de base des écrans. Par défaut, on utilise le noir en couleur de base, mais il est possible d'utiliser celle qu'on veut (d'ailleurs dans ce tutorial, nous utiliserons un bleu ciel).



PIXEL EDITOR - PLAYER[

Pour pouvoir créer vos éléments de jeu Player, Tiles, Monstres, … vous devez d'abord modifier les tilesets, des images (bmp) contenant les graphismes qui seront utlilsés pour vos éléments de jeu (actuellement ils sont vides). Pour créer/modifier ces tilesets, nous allons ouvrir le "Pixel Editor".

Utilisation du Pixel Editor :
Dans l'arborescence, sélectionner le "Pixel Editor". C'est ici qu'on dessinera les graphismes.
On retrouve sur la gauche nos palettes (par défaut, il sélectionne automatiquement la premiere palette du premier groupe de palettes): les 4 (sub) palettes de couleurs de votre "Niveau 1 Palette" sont affichées ici, vous pouvez modifier, assigner d'autres couleurs pour vos 4 sub-palettes de votre palette.

A noter, que toute modification de couleurs effectuée sur vos palettes est valable dans tout le projet, pas uniquement dans le Pixel Editor.
Je choisis les couleurs pour mes sub-palettes sur un clic-droit, dans chaque case couleur.

Les tilesets pour la NES sont representés par 4 couleurs indexées (représentées par noir, rouge, vert, bleu, que j'appellera "RGB" durant tout ce tutorial), chaque personnage, monstre, brique, bloc, sol, … doit être enregistré avec ces 4 couleurs dans les fichiers tileset BMP, sinon cela ne fonctionnera pas. Nous allons donc devoir dessiner, modifier les couleurs de nos images pour qu'il n'y ait que ces 4 couleurs.
Pour plus de facilité le Pixel Editor, vous permet de passer d'un affichage "couleurs RGB" à "couleurs de la palette sélectionnée" en cliquant sur les boutons situés dans la barre d'outils.


Maintenant créons notre "Player" :
Appuyer sur le bouton Ouvrir ("Load a BMP file") et aller chercher le fichier "GameObjectTiles.bmp" se trouvant dans le dossier "GraphicAssets\<NomDeVotreProjet>" (dans mon cas dans "GraphicAssets\JEU002").
Ceci est le fichier pour notre Player. Nous allons y dessiner notre héro.

Le Player est un élément de jeu constitué de blocs de 8x8 pixels. En fonction de vos idées, vous pouvez choisir de réaliser un héro qui fait 8x8 ou 16x8 ou 16x16 ou … ces blocs seront assemblés pour créer le Player.
Mais pour l'instant, nous devons dessiner ces blocs.

Afficher la grille en appuyant sur le bouton [8].
Pour commencer à dessiner, utliser les boutons situés dans la barre d'outils (crayon, rectangle,...). Cliquer sur le bouton correspondant à la couleur avec laquelle vous voulez dessiner (toujours dans la barre d'outils en haut!).
Je vous conseille de laisser le premier bloc vide en haut à gauche (noir), ensuite dessiner un petit personnage sur 1 ou plusieurs blocs.


Des boutons permettent de basculer d'un affichage "couleurs RGB" à "couleurs de la palette sélectionnée".

REMARQUE: Pour ce tutoriel, j'utiliserai les fichiers d'exemple fournis dans le dossier "BetaAssets"... j'ouvre l'image dans Pixel Editor, à l'aide de la souris, je selectionne toute l'image je fais CTRL+C pour copier. J'ouvre mon "GameObjectTiles.bmp" et je place le curseur de la souris en haut à gauche et je fais CTRL+V pour coller.

Voilà, il ne reste plus qu'à cliquer sur le bouton "Enregistrer" (la première disquette à gauche dans la barre d'outils).
(note: il est également possible de créer ses images dans Paint/Photoshop et faire du coller/coller).



GAME OBJECT - PLAYER

Maintenant, dans "Games Objects", sélectionner "Player".
Voici l'élément Player du jeu. Par défaut, il n'est pas paramétré.

Commencer par lui donner la taille désirée. Dans mon exemple, je choisis 2 par 2 (blocs).
Ensuite, on choisit 2 palettes différentes pour le Player, parmi la liste des palettes accessibles (le player, les monstres et les items se partagent la même liste de palettes).
On va sélectionner "MonsterPalette0" et "MonsterPalette1", que l'on va renommer respectivement en "PlayerPalette 1" et "GameObjectPalette1" ".
Puis choisir quelques couleurs à nos palettes (clic droit sur chaque case couleur).
Voilà qui est fait.

2018_08_31_00_18_16_Player_dialog.png


Si votre tileset n'apparait pas en haut à droite, c'est qu'il ne s'est pas encore rafraîchit… Patienter 2 ou 3 secondes, ensuite dans l'arborescence, cliquer ailleurs, par exemple sur "Overworld", puis revenir sur "Player"… cela devrait se rafraîchir (1 ou 2 allez retour sont parfois nécessaires :p)

Nous allons déclarer les animations pour notre Player, nous aurons besoin de 9 animations correspondant aux à notre player lorsqu'il est immobile, il marche ou il saute, et ce dans les 2 directions (droite et gauche).

Pour cela cliquer sur le bouton "Manage Animations". C'est dans cette boite de dialogue que les différentes animations sont déclarées.
Par défaut, il y a déjà une animation "DefaultAnimation" (obligatoire d'en avoir au moins une), la renommer en "Immobile_droite", et ajouter les 8 suivantes en cliquant sur le bouton "Add".
Puis sélectionner CHAQUE animation et renommer en "Immobile_gauche", "Marche_droite", "Marche_gauche", "Saute_droite" et "Saute_gauche".

2018_08_31_00_15_12_Manage_Animations.png


Une fois les différentes animations déclarées, fermer la fenêtre. Nous allons maintenant pour chacune d'elles créer l'animation du sprite (mettre les images).

Sur la partie gauche de la fenêtre de votre Player, une petite liste déroulante vous indique quelle animation est en cours de modification :
- Sélectionner l'animation "Immobile_droite" dans la liste déroulante sur la partie gauche. Nous allons juste utiliser 1 frame d'animation, donc laisser Frame Count à "1" et sélectionner "Frame 1"
Dans la partie centrale, pour chaque bloc composant le Player, indiquer le Tileset à utiliser (en sélectionnant dans la fenêtre située en haut à droite). Vous pouvez également assigner une sub-palette (différente ou la meme) à chaque bloc.

- Maintenant, comme notre animation "immobile gauche" sera la même que "immobile droite" (présente notre Player vu de face), je vais utiliser copier/coller de frame.
Donc cliquer sur le bouton "Copy frame".

- Puis sélectionner l'animation "immobile gauche", de même, laisser Frame Count à "1", sélectionner "Frame 1" et cliquer sur le bouton "Paste Frame" puis "Flip Frame", cela reprend la frame que vous aviez copiée (de "Immobile_droite") et la retourne horizontalement.

- Sélectionner l'animation "Marche_droite" dans la liste déroulante sur la partie gauche. Nous allons utiliser ici 4 frames d'animation, donc laisser Frame Count à "4" et commencer par sélectionner "Frame 1".
Dans la partie centrale, pour chaque bloc composant le Player, indiquer le Tileset à utiliser pour cette frame. Vous pouvez également assigner une sub-palette (différente ou la meme) à chaque bloc.
Sélectionner la "Frame 2", et indiquer le Tileset à utiliser pour cette frame. Idem pour "Frame 3" et "Frame 4", de sorte à avoir une petite animation sur 4 frames, lorsque le Player marche.

- Ensuite vous pouvez paramétrer votre animation "Marche_gauche", en effectuant des copier/coller/retourner de chaqune des frames de "Marche_droite".

- Et pour l'animation "Saute_gauche", 1 frame devraité également suffire, indiquer le tile correspondant. Et copy/paste/flip pour "saute_droite".

Une fois toutes vos animations créées, nous devons les associer au différentes directions du player en fonction du type de mouvement.


Passons aux propriétés du Player :
Cliquer sur "Object Details", ette boite de dialogue sert à paramétrer les objets de jeu (ici, le Player. Mais vous retrouverez la meme interface lorsqu'on sera sur les monstres ou les items à collecter).

- L'onglet "Animations" affiche l'ensemble des types d'animations (comprendre ici "de mouvements") qu'aura le Player.
Par défaut, il y a déjà un type d'animations "Default".

Dans notre exemple, le Player aura pour types d'animations : "Immobile", "Marche" et "Saute".

Sélectionner le type d'animations "Default" et le renommer en "Immobile" à l'aide du bouton "Rename".
A l'aide du bouton "Ajouter", ajouter les types d'animations "Marche" et "Saute".

Maintenant pour chacun des 3 types d'animations, nous devons indiquer quelle animation de frames utiliser.
Selectionner "Immobile" puis sur la partie droite, indiquer :
- "Immobile_droite" lorsque le Player se dirige vers "Down"
- "Immobile_droite" lorsque le Player se dirige vers "Down Right"
- "Immobile_droite" lorsque le Player se dirige vers "Right"
- "Immobile_droite" lorsque le Player se dirige vers "Up Right"
et
- "Immobile_gauche" lorsque le Player se dirige vers "Up"
- "Immobile_gauche" lorsque le Player se dirige vers "Up Left"
- "Immobile_gauche" lorsque le Player se dirige vers "Left"
- "Immobile_gauche" lorsque le Player se dirige vers "Down Left"
Sélectionner maintenant "Marche" puis sur la partie droite, indiquer :
- "Marche_droite" lorsque le Player se dirige vers "Down"
- "Marche_droite" lorsque le Player se dirige vers "Down Right"
- "Marche_droite" lorsque le Player se dirige vers "Right"
- "Marche_droite" lorsque le Player se dirige vers "Up Right"
et
- "Marche_gauche" lorsque le Player se dirige vers "Up"
- "Marche_gauche" lorsque le Player se dirige vers "Up Left"
- "Marche_gauche" lorsque le Player se dirige vers "Left"
- "Marche_gauche" lorsque le Player se dirige vers "Down Left"
Sélectionner maintenant "Saute" puis sur la partie droite, indiquer :
- "Saute_droite" lorsque le Player se dirige vers "Down"
- "Saute_droite" lorsque le Player se dirige vers "Down Right"
- "Saute_droite" lorsque le Player se dirige vers "Right"
- "Saute_droite" lorsque le Player se dirige vers "Up Right"
et
- "Saute_gauche" lorsque le Player se dirige vers "Up"
- "Saute_gauche" lorsque le Player se dirige vers "Up Left"
- "Saute_gauche" lorsque le Player se dirige vers "Left"
- "Saute_gauche" lorsque le Player se dirige vers "Down Left"

2018_08_31_00_20_56_Monster_Animation_Info_0.png

Je pense que vous avez compris le principe : lorsque le player utilise le type d'animations immobile, on utilise des animations de frames differentes en fonctions de la direction.


- Dans l'onglet "Details", vous devez commencer par cocher le type "Player" (parceque notre élémént est un player), ainsi que "PERSISTENT" (c'est objet sera toujours chargé en mémoire, quelque soit l'écran du jeu).

2018_08_31_00_23_16_Monster_Animation_Info_Detail.png

Ceci est très important, si vous ne cochez pas ces 2 cases, vous ne verrez pas votre Player lorsque jeu démarrera.

Vous pouvez également renseigner ici son niveau de santé "Health" à "1" par exemple (si 0, alors votre Player ne meurt jamais)
Vous DEVEZ renseigner sa vitesse de déplacement "Speed" ainsi que son "accélération", dans mon exemple, j'ai mis une vitesse de "40" et une accélération de "20". (Je vous laisse modifier ces valeurs par la suite, si vous voulez tester).
Le reste on ne touche pas pour l'instant.


Maintenant, nous allons assigner les types d'animations, aux états du Player.

- L'onglet "Actions", permet habituelllement de paramétrer une suite d'actions, en commençant par l'action 0.
Dans le cas des monstres, cela permet de définir un comportement, une suite d'actions qui peuvent être enchaînées, leur IA. Cependant dans le cas du Player, c'est un peu différent.

Voici le comportement par défaut pour le Module Plateforme :
L'action 0 : c'est l'état du Player immobile (lorsque le joueur ne touche pas les contrôles de déplacement).
L'action 1 : c'est l'état du Player en mouvement
L'action 2 : c'est l'état du Player lorsqu'il saute
Pour chacun de ces états, il est possible de définir l'animation à utiliser, la vitesse de celle-ci, et si on doit changer d'état lorsqu'elle se termine.

2018_08_31_00_24_01_Monster_Animation_Info_Step0.png

Sélectionner l'Action step "0" et dans "Animation Type" choisir "Immobile"


Sélectionner l'Action step "1" et dans "Animation Type" choisir "Marche". Et sélectionner une vitesse d'animation, pour notre exemple, nous choisirons "4".


Sélectionner l'Action step "2" et dans "Animation Type" choisir "Saute".


- L'onglet "Bounding box" permet de définir la zone de collision avec le Player. La plupart du temps, il suffit de definir un rectangle à l'intérieur de notre Player.

2018_08_31_00_26_26_Monster_Animation_Info_Bounding.png


Voilà pour le Player !



TILES - PIXEL EDITOR

Pour réaliser les écrans, il nous faut créer quelques ASSETS / Tiles (des briques, des blocs, …).

Dans le Pixel Editor, ouvrir le tileset "BckCHR_00.bmp" se trouvant dans votre dossier "GraphicAssets\<NomDeVotreProjet>".
Celui-ci est le 1er de vos tilesets utilisables pour vos créer vos Assets / tiles.

Informations: Il y a 6 tilesets (par Bank). A savoir que dans NESMaker, chaque écran ne peux accéder qu'à 1 tileset à la fois. Donc bien reflechir pour l'organisation des Tiles. Mais à noter que chaque écran a accès à des Tiles spéciales ("Screen special tiles") dont les tilessets sont beaucoup plus petits mais aussi plus nombreux (10 "Screen tilesets" par Bank).

Les Tiles sont composés de blocs de 16x16 pixels. Commencer donc par cliquer sur le bouton [16] de la barre d'outils, pour afficher les différents blocs possibles.
Sélectionner la couleur à utiliser (toujours dans la barre d'outils).
Et dessiner le Tile.

A noter que le premier block (16x16) est le tile "vide" par defaut. Lorsqu'on affiche un écran vierge, par défaut, c'est ce bloc qui recouvre tout l'écran.
Donc pour le cas de notre tutorial Plateforme, il est judicieux de modifier ce 1er bloc pour en faire, le "ciel".

Je dessine donc mes blocs, briques, dans des blocs différents.

2018_08_31_00_31_22_Pixel_Editor_Tiles.png


REMARQUE: Pour ce tutoriel, j'utiliserai les fichiers d'exemple fournis dans le dossier "BetaAssets"... j'ouvre l'image dans Pixel Editor, à l'aide de la souris, je selectionne toute l'image je fais CTRL+C pour copier. J'ouvre mon "BckCHR_00.bmp" et je place le curseur de la souris en haut à gauche et je fais CTRL+V pour coller.

Une fois terminé, ne pas oublier d'enregistrer le fichier Tileset (la 1ère petite disquette).



TILES - ASSETS

Dans l'arborescence de NESMaker, sélectionner maintenant "Graphics Banks > Graphics Bank 1 > Assets".
Ceci est la fenêtre de Tile. Par defaut, pour créer un nouveau tile, il suffit de se placer sur "Assets" dans l'arborescence.

Tout comme le Player précedemment, on commence par choisir la taille du Tile que l'on veut créer.
Dans mon exemple, je vais créer un Tile solide constitué d'1 unique bloc, que je vais appeler "Nv1 Brique" (en lieu et place de "New Asset").
Sur la partie gauche de la fenêtre, ma palette "Niveau 1" est déjà sélectionnée (je pourrais en choisir un autre, ici, si j'en avais paramétré d'autres). Je sélectionne quelle sub-palette (jeu de couleurs) je veux utiliser pour ma "Nv1 Brique".

Dans la liste déroulante en haut à gauche, j'indique quel type de collision je souhaite pour CHACUN des blocs qui constituent le Tile que je suis en train de réaliser.
Dans le cas d'un Tile pour le sol/mur, choisir "1 - Solid".

2018_08_31_12_24_47_Brique_solid.png


Note: pour modifier ce Tile, il faut déplier "Assets" dans l'arborescence et selectionner le tile "Nv1 Brique".
Je créer les autres assets dont j'ai besoins... je fais un "ciel" avec le tile vide, en "Null - Walkable 0".

Créer le Tile en cliquant sur "Save New".

Voilà, j'ai deux tiles pour dessiner mon écran de jeu.



ECRAN - OVERWORLD

Nous allons maintenant indiquer dans quel écran le Player devra se trouver lorsque le jeu commence.
Cliquer sur "Overworld", s'affiche l'ensemble des écrans à notre disposition pour le jeu (en fait il y en plus, car nous avons accès à 3 "banks" d'écrans, ainsi qu'à l'Underworld).

Sélectionner un écran, par exemple l'écran 1,1 (on commence toujours à compter horizontalement, puis verticalement… et à partir de 0. Donc ici, sélectionner l'écran à l'intersection de la deuxième colonne et de la deuxième ligne). Double-cliquer dessus pour l'ouvrir, il est bleu (il affiche en réalité, le tile 0 vide qui a actuellement la couleur de base, commune à toutes les palettes)

Vous avez maintenant accès aux différents Assets / Tiles, que vous pouvez utiliser pour dessiner sur votre écran.

Notes : Vous pouvez passer d'un écran à un autre adjacent (écran au-dessus, au-dessous, écran à droite ou celui à gauche) à l'aide des touches de direction de votre clavier.
Une petite zone fantôme autour de l'écran en cours (1 colonne/ligne), vous permet de visualiser comment sont placés les Assets/Tiles dans les écrans adjacents. Vous pouvez ainsi mieux évaluer les collisions aux changement d'écran.

2018_08_31_00_45_19_Screen_2.png

Je mets quelques brique pour composer mon sol et mes murs ou plateformes si besoin.
(possibilité t'utiliser les touches CTRL et SHIFT du clavier pour décaler le tile par rapport au curseur)

Sur cet écran, au dessus du sol, faire un clic-droit et choisir "Place Player" pour indiquer où démarrer notre jeu.



HUD

Dernière étape avant de pouvoir tester…

Definir le HUD :
Le HUD est la partie qui sert à afficher des informations durant le jeu (le score, la santé, le nombre de vies,…). Bien que tous les jeux n'affichent pas forcément de HUD, NESMaker a besoin que ce HUD soit paramétré ! (même si pas utilisé)
Sélectionner "HUD & Boxes", puis dans le premier onglet "HUD", définir à l'aide de la souris une zone pour le HUD.
Par exemple, classique:
2 lignes sur toute la hauteur et cliquer sur le bouton "HUD Area" pour definir la zone.
Ensuite sélectionner le reste de la zone, et je clique sur le bouton "Playable Area".


]A noter !!! il faut impérativement que la zone de HUD fasse 2 lignes minimum (sinon bug…)

CF Partie plus détaillée concernant le HUD (notamment pour les TEXT-BOX) dans le tutorial Adventure : http://nesmakers.com/viewtopic.php?p=4323#p4323



EXPORT et TEST

Nous allons essayer de lancer le jeu pour vérifier que notre Player s'affiche bien, sur notre écran :
Dans le menu "Test", sélectionner "Export & Test"… cela va lancer la compilation des scripts et paramètres du projet et générer le fichier game.nes ROM. La fenêtre de ligne de commmandes s'affiche...

05_Compile_et_TEST.png


Et normalement "Appuyer sur une touche pour continuer".
(si des des erreurs, un message s'affichera et le détail des erreurs sera cette fenêtre de ligne de commandes)

Normalement, si vous avez suivi ce tutoriel à la lettre, le jeu doit se lancer, zapper le Start Screen et arriver directement sur notre écran avec notre Player.

2018_08_31_12_35_28_FCEUX_2_2_3_game.png




INPUT SCRIPTS - SCRIPTS POUR LES CONTROLES

On se rend vite compte en jouant avec la manette (ou au clavier), que le Player ne bouge pas :p Va falloir lui ajouter des scripts de mouvements, qui se déclencheront lors de l'appui sur les boutons.
NESMaker fournit de base des scripts permettant le mouvement de notre player (ils viennent avec le "AdventureModule"). Tous les scripts se trouvent dans le dossier "GameEngineData\Routines\UserScripts\PlatformGame_Base", rangés dans des sous dossier. Nous allons utiliser certains de ces scripts.

De retour dans NESMaker, déplier "Scripts" et sélectionner "Inputs scripts". Puis dans la liste de droite, se déplacer jusqu'au dossier "UserScripts\BasicScripts\PlatformGame_Base\MovementScripts" et double-cliquer sur les fichiers "StartMovingPlayerLeft.asm", "StartMovingPlayerRight.asm", "StopMovingPlayerLeft.asm", "StopMovingPlayerRight.asm", "ChangeToWalkingAnimation.asm" et "ChangeToIdleAnimation.asm"

Et pour que notre Player puisse sauter, se déplacer jusqu'au dossier "UserScripts\BasicScripts\PlatformGame_Base\InputScripts" et double-cliquer sur les fichiers "playerJump.asm" et "varJumpRelease.asm".


2018_08_31_00_40_11_Inputs_Scripts_dans_arbo.png

Ils devraient disparaitre de la fenêtre de droite et vous devriez les retrouver sous "Input Scripts".



INPUT EDITOR - CONTROLES

Maintenant, aller dans "Input editor", cet écran permet d'assigner des scripts (input scripts) à des actions sur boutons, en fonction de l'écran en cours (Start Screen, dans le jeu, ou lorsque sur l'écran de fin, ...)

Dans la liste déroulante "Game State", sélectionner "MainGame" (c'est à dire en cours de jeu). Dans "Target", sélectionner "NULL" (toujours choisir NULL pour tous les scripts, car actuellement ce paramètre n'est pas pris en compte).
Dans "script to run", sélectionner le script "StartMovingPlayerLeft.asm", sélectionner (à l'aide de la souris) le bouton direction gauche sur la manette (un rectangle rouge apparait sur le bouton), et cliquer sur le bouton "Press-Hold-Release." (qui correspond à l'état du bouton "appui", "maintient appuyé", "relâché") pour qu'il affiche "Hold".
Ensuite cliquer que "Add Script" pour associer le script de mouvement à gauche lorsqu'on maintient du bouton bas de la manette pendant le jeu.
Une ligne apparait dans la liste des commandes de contrôles assignées.

Ensuite, sur le même principe associer :
- le script "StartMovingPlayerRight.asm" en choisissant "Hold" pour la direction droite.
- le script "StopMovingPlayeLeft.asm" (pour que le Player s'arrête lorsqu'on relâche le bouton) en choisissant "Release" pour la direction gauche
- le script "StopMovingPlayeRight.asm" (pour que le Player s'arrête lorsqu'on relâche le bouton) en choisissant "Release" pour la direction droite
Pour que l'animations du Player correspondent aux déplacements de celui-ci, nous devons également associer :
- le script "ChangeToWalkingAnimation.asm" en choisissant "Press" pour la direction gauche
- le script "ChangeToWalkingAnimation.asm" en choisissant "Press" pour la direction droite
- le script "ChangeToIdleAnimation.asm" en choisissant "Release" pour la direction gauche
- le script "ChangeToIdleAnimation.asm" en choisissant "Release" pour la direction droite

2018_08_31_00_43_05_Input_Editor.png

Et voilà, vous devriez avoir cela.

Ajoutons maintenant le bouton de saut, associer :
- "playerJump.asm" en choisissant "Hold" pour le bouton "A"
- "varJumpRelease.asm" en choisissant "Release" pour le bouton "A"

2018_08_31_00_54_23_Input_Editor_Player_Jump.png



Il n'y a plus qu'à tester... Menu "Test > Export & Test".
Voilà, votre player devrait maintenant pouvoir se déplacer, sauter et s'animer.
 

dale_coop

Moderator
Staff member
MORT DU PLAYER - GAME OBJECT

Maintenant, dans "Games Objects", sélectionner "Effect0".
Pour la mort du Player, le module Plateforme utilise l'objet de jeu "Effet0". Nous allons donc le paramétrer rapidement.
Note: Si, vous avez utilisés les fichiers de BetaAssets pour créer vos tilesets, votre "GameObjectTiles.bmp" devrait déjà contenir tout ce qu'il faut pour notre effet.

Commencer par lui donner la taille désirée. Dans mon exemple, je choisis 2 par 2 (blocs).
Et sélectionner les palettes "PlayerPalette 1" et "PlayerPalette 2".

Important : TOUS les éléments "Game Objects" utilisent les palettes du Player (dans mon exemple: "PlayerPalette 1" et "PlayerPalette 2"). Même si vous en sélectionner d'autres, lorsque le jeu se lancera, vos objets s'afficheront avec les coueleurs du Player.

Pas besoin d'animation spécifique ici, laisser "DefaultAnimation" avec un "Frame Count" à 1.
Ensuite, dans la partie centrale, indiquer le Tiles à utiliser (en sélectionnant dans la fenêtre située en haut à droite). Vous pouvez également assigner une ou l'autre des 2sub-palettes à chaque bloc.

2018_08_31_01_02_27_Mort_Player_dialog.png



Dans "Object Details"

- Pour l'onglet "Animations" ainsi que pour l'onglet "Details", laisser ce qui est définit par défaut.

- Dans l'onglet "Actions", sélectionner l'action step "0" et cocher la case "Ignore solid".

2018_08_31_01_01_52_Effect0_Mort_Player_Object_details.png


- Dans l'onglet "Bounding box", définir la zone, cela n'a ici pas trop d'importance.



Il n'y a plus qu'à tester... Menu "Test > Export & Test".
Voilà, votre player devrait maintenant avoir un effet (a la Super Mario Bros) lorsqu'il meurt.



TILES - BLOC SURPRISE

Nous allons voir comment créer un bloc qui, lorsque le player le frappe par dessous, donne un item. Dans cet exemple, il donnera une carotte.

Dans l'arborescence de NESMaker, sélectionner maintenant "Graphics Banks > Graphics Bank 1 > Assets".
Tout comme le Player précedemment, on commence par choisir la taille du Tile que l'on veut créer.
Dans mon exemple, je vais créer un Tile constitué d'1 unique bloc, que je vais appeler "Nv1 Surprise" (en lieu et place de "New Asset").
Sur la partie gauche de la fenêtre, ma palette "Niveau 1" est déjà sélectionnée (je pourrais en choisir un autre, ici, si j'en avais paramétré d'autres). Je sélectionne quelle sub-palette (jeu de couleurs) je veux utiliser pour ma "Nv1 Surprise".

Dans la liste déroulante en haut à gauche, choisir "9 - prizeBox".

2018_08_31_13_36_19_Tile_Prize_Box.png


Créer le Tile en cliquant sur "Save New".



SPECIAL TILES - BLOC

Lorsque le bloc surprise est frappé par le Player, il doit être remplacé par une tile bloc spéciale (representant un bloc désactivé).

Dans l'arborescence de NESMaker, sélectionner maintenant "Graphics Banks > Graphics Bank 1 > Special Tiles".
Sélectionner le premier élément correspondant aux blocs tiles "détruits", et indiquer quel image tile on veut utiliser.

2018_08_31_01_28_28_Special_Tiles_Cadeaubloc.png

Dans notre exemple, on prend le bloc sans le "!".



CAROTTE - GAME OBJECT

Pour notre bloc surprise, nous allons créer maintenant un item (une carotte).

Pour les tiles de type "prizebox", le module Plateforme utilise l'objet "Melee". Nous allons donc le paramétrer la carotte.
Note: Si, vous avez utilisés les fichiers de BetaAssets pour créer vos tilesets, votre "GameObjectTiles.bmp" devrait déjà contenir tout ce qu'il faut pour notre effet.

Commencer par lui donner la taille désirée. Dans mon exemple, je choisis 2 par 2 (blocs).
Et sélectionner les palettes "PlayerPalette 1" et "PlayerPalette 2".

Important : TOUS les éléments "Game Objects" utilisent les palettes du Player (dans mon exemple: "PlayerPalette 1" et "PlayerPalette 2"). Même si vous en sélectionner d'autres, lorsque le jeu se lancera, vos objets s'afficheront avec les coueleurs du Player.

Pour cet exemple, nous voulons que la carotte va flashe puis disparaisse "pouf!". Nous donc allons lui créer 2 animations: "Flash" et "Détruit".

Cliquer sur "Manage Animations", renommer l'animation "DefaultAnimation" en "Flash". Puis ajouter une autre aimation et la renommer en "Détruit".

2018_08_31_01_19_47_Manage_Animations_Carotte.png


Sélectionner l'animation "Flash" dans la liste déroulante à gauche, définir un "Frame Count" à 2.
Ensuite, séléctionner "Frame 1" et dans la partie centrale, indiquer le Tiles à utiliser (en sélectionnant dans la fenêtre située en haut à droite). Vous pouvez également assigner une ou l'autre des 2sub-palettes à chaque bloc.

2018_08_31_01_20_47_Pixel_Editor_Carrote1.png

Choisir les tiles pour la carottes orange (j'assigne la sub palette 1).

2018_08_31_01_20_31_Pixel_Editor_Carotte2.png

Puis la "Frame 2", la carotte toute jaune (j'assigne la sub palette 2).

Sélectionner l'animation "Déruit" dans la liste déroulante à gauche, définir un "Frame Count" à 4.
Ensuite, séléctionner "Frame 1" et dans la partie centrale, indiquer le Tiles à utiliser (en sélectionnant dans la fenêtre située en haut à droite). Vous pouvez également assigner une ou l'autre des 2sub-palettes à chaque bloc.
Choisir les tiles representant une petite explosion. Utiliser le meme tile en le retournant verticalement et/ou horizontalement.

2018_08_31_01_21_25_Pixe_Editor_Carotte_Detruite.png


Faire de même pour les 4 frames, avec les autres tiles pour le reste de l'animation (petite explosion "pouf!").


Dans "Object Settings" :

- Dans l'onglet "Animations", nous avons besoin de 2 types d'animations "Flashe" et "Détruit".
Selectionner CHACUN des deux Types d'animations et définir les animations correspondantes en fonction des directions

2018_08_31_01_22_33_Monster_Animation_Info_0.png

Vous devriez avoir ceci.

- Dans l'onglet "Details", tout laisser par défaut.

- Dans l'onglet "Actions", sélectionner l'Action step "0", assigner "Flash" à l'"Animation type". Ensuite, pour "End of Action" choisir "Advance", une valeur de "Timer" à "1" (par exemple) et une vitesse d'animation de "2".

2018_08_31_01_31_11_Monster_Animation_Info_2_0.png

La carotte va flasher rapidement pendant un court instant puis passer à l'étape suivante.

Sélectionner maintenant l'Action step "1", assigner "Détruit" à l'"Animation type". Et pour "End of Animation" choisir "DestroyMe", une vitesse d'animation de "3" et cocher les cases "Ignore Gravity" ainsi que "No Player Collision".

2018_08_31_01_25_14_Monster_Animation_Info_2_1.png


- L'onglet "Bounding box", définir un rectangle pour la carotte (pas d'importance ici).
2018_08_31_01_27_23_Monster_Animation_Info_3_bounding.png


Valider en appuyant sur le bouton "Close".



TILES - BLOC 1 SENS

Nous allons maintenant créer un bloc que le Player ne peut traverser que dans 1 sens (Dans le cas, du module plateforme, il faut comprendre que le player peut monter dessus, en se mettant dessous et en sautant)

Dans l'arborescence de NESMaker, sélectionner maintenant "Graphics Banks > Graphics Bank 1 > Assets".
Tout comme le Player précedemment, on commence par choisir la taille du Tile que l'on veut créer.
Dans mon exemple, je vais créer un Tile constitué d'1 unique bloc, que je vais appeler "Nv1 Bloc1Sens" (en lieu et place de "New Asset").
Sur la partie gauche de la fenêtre, ma palette "Niveau 1" est déjà sélectionnée (je pourrais en choisir un autre, ici, si j'en avais paramétré d'autres). Je sélectionne quelle sub-palette (jeu de couleurs) je veux utiliser pour ma "Nv1 Bloc1Sens".

Dans la liste déroulante en haut à gauche, choisir "8 - One Way Plateform".

2018_08_31_01_33_25_Tile_Bloc_1way_Up.png


Créer le Tile en cliquant sur "Save New".



ECRANS

Dans l'arborescence de NESMaker, sélectionner "Overworld, et double-cliquer sur l'écran de jeu et compléter l'écran avec quelques bloc 1 sens et bloc surprises en hauteur, sous lequels le Player pourra venir tapper.

2018_08_31_01_34_48_Screen1.png



De nouveau, il ne reste plus qu'à tester... Menu "Test > Export & Test".
Voilà, votre player peut maintenant frapper sous les blocs surprise et une carotte en sort.
 

dale_coop

Moderator
Staff member
Dans ce tutorial, nous allons créer un objet invisible qui lancera des boules de feu au-dessus de lui (boules de feu qui monteront en l'air, puis redescenderont sous l'action de la gravité).

OBJECT LANCEUR BOULES DE FEU

Dans l'arborescence de NESMaker, sélectionner maintenant "Game Object > Effect 1".
(petite note ici, nous pourrions choisir n'importe quel objet non utilisé... voir même créer un monstre --un monstre est un objet classique qui a juste la particularité de pouvoir utiliser d'autres palettes que celle du player--)

Tout comme le Player et les Tiles précedemment, on commence par choisir la taille de l'objet que l'on veut créer.

Si votre tileset n'apparait pas en haut à droite, c'est qu'il ne s'est pas encore rafraichit… Patienter 2 ou 3 secondes, ensuite dans l'arborescence de NESmaker, cliquer sur "Overworld", puis revenez sur "Effect 1"… cela devrait se rafraichir (1 ou 2 allez retour sont parfois necessaires :p)

On crée un objet constitué de 1x1 blocs, que l'on renommera "LanceurBoulesFeu" (en lieu et place de "Effect 1").
Sur la partie gauche de la fenêtre, on va sélectionner "PlayerPalette1" et "GameObjectPalette1" (Même si en realité nous n'en auront pas besoin ici, car notre objet sera transparent)
Cliquer sur le bouton "Save" pour mettre à jour dans l'arborescence.

Ensuite, dans la partie centrale, pour chaque bloc composant l'objet/le monstre, sélectionner le Tileset à utililiser (en haut à droite).

2018_09_07_12_38_44_Genere_Boules_Feu_dialog.png

Ici, un tile vide fera l'affaire.


Passons aux propriétés :

Cliquer ensuite sur "Object Details", cette boite de dialogue sert à paramétrer les objets de jeu, c'est exactement la même fenêtre que pour le Player précédemment.

- Le premier onglet "Animations" sert à à paramétrer les différentes animations en fonction du type de mouvement.

02_Player_2.png

On va laisser les valeurs par défaut.

- Dans l'onglet "Details", aucune modification n'est nécessaire (notre objet est immobile, invisible et n'est pas vraiment un monstre)

- L'onglet "Actions", permet de paramétrer l'elements à faire une suite d'actions, en commençant par l'étape 0.
On va programmer les actions de l'objet.

L'étape 0 est toujours exécutée.
Par chaque étape, on indique quelle "animation type" utiliser, ici on va laisser à "Default" (car nous n'avons pas préparé d'animation pour l'objet).
Ensuite, on indique quelle "Action" doit être réalisée par l'objet/le monstre à cette étape, par exemple : se déplacer dans une des 8 directions, s'arrêter, se déplacer de gauche à droite, etc… (on pourra évidemment coder et ajouter ses propres actions pour enrichir les possibilités)
Le "Timer" permet d'indiquer combien de temps va durer cette étape. "0" correspond à une durée aléatoire (différente à chaque fois), "1" est un temps très court, cela correspond à peu près à 1/2 seconde, "2" à 1 secondes, … "15" est le max.
Le "End of Action" se déclenche à la fin du Timer :
- "loop" cette étape ne s'arrête pas (l'objet/le monstre continue son action indéfiniment)
- "Advance" passe à l'étape suivante
- "Repeat" recommence l'étape en cours
- "GoToFirst" retourne à l'étape "0"
- "GoToLast" va à la derniere étape (la "7")
- "GoToPrevious" retourne à l'étape précédente
- "DestroyMe" l'objet/le monstre meurt/disparait
- "Restart Game" le jeu redémarre au début
- "Win Game" le jeu est fini (gagné, l'écran de fin s'affiche)
Le "End of Animation", propose la même chose, sauf qu'elle ne prend pas en compte le Timer, mais se déclenche à la fin de l'animation de l'objet/du monstre

Pour mon exemple, l'objet va simplement ne rien faire (attendre - null) pendant une durée aléatoire (0), (Advance) puis va lancer un projectile boule de feu et (GoToFirst) il recommence au début.

Pour cela, sélectionner l'action step "0", cocher les cases "Ignore gravity" (qui permet à l'objet de rester à l'endroit où il est posé, car non soumis à la gravité) et "No player collision" (qui permet au player de ne jamais entrer en collision avec l'objet. Idem pour les armes du player), et pour "End Action" choisir "Advance") :

2018_08_31_01_42_11_Monster_Animation_Info_Genere_Feu_Actions_Step0.png

(si vous souhaitez une durée déterminée pendant laquelle il attend, il suffir de modifier la valeur de "Timer")

Et sélectionner l'action step "1", choisir "9 - produce fireball" pour Action, cocher de nouveau les cases "Ignore gravity" et "No player collision", et pour "End Action" choisir "GoToFirst") :

2018_09_07_11_25_56_Monster_Animation_Info_Genere_Feu_Actions_Step_1.png


- L'onglet "Bounding box" permet de définir la zone de collision avec l'objet. La plupart du temps, il suffit de definir un rectangle à l'intérieur de notre objet.
Ici, definir une bounding box (par principe) mais elle ne sera pas utilisée.

Valider en appuyant sur le bouton "Close".

Nous allons maintenant créer la boule de feu... que notre objet lancera.



BOULE DE FEU

Dans l'arborescence de NESMaker, sélectionner maintenant "Game Object > Effect 2".
(note: lorsque le script "9 - produce fireball" est exécuté, c'est l'objet "Effect 2" qui est créé).

Tout comme le Player et les Tiles précedemment, on commence par choisir la taille de l'objet que l'on veut créer.

Si votre tileset n'apparait pas en haut à droite, c'est qu'il ne s'est pas encore rafraichit… Patienter 2 ou 3 secondes, ensuite dans l'arborescence de NESmaker, cliquer sur "Overworld", puis revenez sur "Effect 2"… cela devrait se rafraichir (1 ou 2 allez retour sont parfois necessaires :p)

On crée un objet constitué de 1x1 blocs, que l'on renommera "BouleDeFeu" (en lieu et place de "Effect 2").
Sur la partie gauche de la fenêtre, on va sélectionner "PlayerPalette1" et "GameObjectPalette1", nous allons utiliser la sub-palette2 (="GameObjectPalette1").
Cliquer sur le bouton "Save" pour mettre à jour dans l'arborescence.

Ensuite, dans la partie centrale, pour chaque bloc composant la boule de feu, sélectionner le Tileset à utililiser (en haut à droite).

Nous allons créer une petite animation, sélectionner un "Frame count" à "2", et copier / coller la "frame 1" dans la "frame 2" (en la retournant "Flip V" et "Flip H"), cela fera une petite animation.


2018_09_07_12_12_06_Boule_Feu_object.png

Voilà qui est fait.


Passons aux propriétés :

Cliquer ensuite sur "Object Details", cette boite de dialogue sert à paramétrer les objets de jeu, c'est exactement la même fenêtre que pour le Player précédemment.

- Le premier onglet "Animations" sert à à paramétrer les différentes animations en fonction du type de mouvement.

02_Player_2.png

On va laisser les valeurs par défaut.

- Dans l'onglet "Details", notre boule de feu sera un "monster weapon", cocher la case correspondante. Et sélectionner "DestroyMe" pour "Edge Object Reaction" (pour que la boule de feu soit détruite lorsqu'elle touche le bord de l'écran, en retombant).

2018_08_31_01_47_25_Monster_Animation_Info_Genere_Feu_Details.png

Laisser les autres valeurs par défaut (les boules de feu générées ont leur propre physique)

- L'onglet "Actions", sélectionner l'action step "0", cocher la case "Ignore Solids" et defnir une vitesse d'animation à "1".

2018_08_31_01_48_37_Monster_Animation_Info_Boule_Feu_Actions_Step0.png


- L'onglet "Bounding box" permet de définir la zone de collision avec l'objet. Definir un rectangle pour la boule de feu.

Valider en appuyant sur le bouton "Close".
Voilà


Avant de pouvoir l'utiliser dans un écran, il nous faut un groupe de monstre (car on ne peut pas utiliser d'objet dans un écran s'il n'y a pas de Groupe de Monstres assigné).



GROUPES DE MONSTRES

Pour pouvoir être utlisés dans nos écrans, les monstres doivent être ajoutés dans des groupes. Nous en auront besoin pour nos écrans.
Créons un groupe pour y mettre le(s) monstre(s) que l'on va créer.

Sélectionner "Monster Graphics Banks > Graphics Bank 0 > Monster Groups", la fenêtre de création de Groupe de monstres s'affiche.
Chaque groupe est composé de 1 à 4 monstres (A noter que chaque écran ne peut afficher qu'un groupe de monstres à la fois).

Donner un nom au groupe, par exemple "Nv1 Monstres".

2018_08_31_01_50_15_Add_Group_Nv1_Monstres.png


Si l'on avait déjà créés des monstres, on aurait pu ici, à l'aide des listes déroulantes, sélectionner les différents monstres qui composent votre groupe (vous pouvez choisir parmi les 8 Tilesets).

Une fois terminé, enregistrer le groupe.

Une fois créé, le groupe apparaît sous "Monster Groups" dans l'arborescence.


Nous allons en profiter pour créer un petit monstre...



MONSTRE SLIME - PIXEL EDITOR

Nous allons maintenant créer un monstre.
Sélectionner le Pixel Editor, et ouvrir le fichier "Monster_0_00.bmp" se trouvant dans votre dossier "GraphicAssets\<NomDeVotreProjet>".
Celui-ci est le 1er de vos tilesets utilisables pour vos créer vos Monstres.

Informations: Il y a 8 tilesets (par Bank, vous avez à 2 Banks à votre disposition).

Les monstres sont composés de block de 8x8 pixels. Commencer donc par cliquer sur le bouton [8] de la barre d'outils, pour afficher les différents blocs possibles.
Sélectionner la couleur à utiliser (toujours dans la barre d'outils). Et dessiner votre monstre.

REMARQUE: Pour ce tutoriel, comme à chaque fois, j'utiliserai les fichiers d'exemple fournis dans le dossier "BetaAssets"... j'ouvre l'image dans Pixel Editor, à l'aide de la souris, je selectionne toute l'image je fais CTRL+C pour copier. J'ouvre mon "Monster_0_00.bmp" et je place le curseur de la souris en haut à gauche et je fais CTRL+V pour coller.

Une fois terminé, enregistrer le fichier Tileset.



MONSTRE SLIME

Dans l'arborescence de NESMaker, sélectionner maintenant "Monster Graphics Banks > Graphics Bank 0 > Monsters".
Ceci est la fenêtre de Monstre. Par defaut, pour créer un nouveau Monstre, il suffit de se placer sur "Monsters" dans l'arborescence (de la même façon que pour les "Tiles").

Tout comme le Player et les Tiles précedemment, on commence par choisir la taille du Monstre que l'on veut créer.

Si votre tileset n'apparait pas en haut à droite, c'est qu'il ne s'est pas encore rafraichit… Patienter 2 ou 3 secondes, ensuite dans l'arborescence de NESmaker, cliquer sur "Overworld", puis revenez sur "Monsters"… cela devrait se rafraichir (1 ou 2 allez retour sont parfois necessaires :p)

Dans ce tutorial, nous allons créer un Monstre constitué de 1x1 blocs, que l'on appelerera "Slime" (en lieu et place de "New Monster").
Sur la partie gauche de la fenêtre, on va sélectionner "MonsterPalette2" et "MonsterPalette3" qui ne sont pas utilisées, que l'on va renommer respectivement en "Monstre Palette 1" et "Monstre Palette 2", par exemple.
(Même si en realité nous n'en auront pas besoin ici, car notre monstre sera transparent)

Ensuite, dans la partie centrale, pour chaque bloc composant le monstre, sélectionner le Tileset à utililiser (en haut à droite).
Je choisis un des tiles slime.

2018_08_31_07_22_24_Monstre_SLim_dialog.png


Enfin, créer le Monstre en cliquant sur "Save New" (Je vous conseille d'enregistrer le monstre rapidement, pour ne pas risquer de tout perdre bêtement en cliquant malencontreusement ailleurs dans l'arborescence de NESMaker).

Une fois créé, le monstre apparaît sous "Monstres" dans l'arborescence.
Le re-selectionner pour le modifier.

Nous allons créer une petite animation, sélectionner un "Frame count" à "2", et pour la "frame 2" je vais utiliser l'autre tile slime.

Passons aux propriétés du Monstre :

- L'onglet "Animations", nous laisserons les valeurs par défaut.

- L'onglet "Details", cocher le type "Monstre" (parce que notre slime est un monstre).

2018_08_31_07_23_38_Monster_Animation_Info_Details.png


Laisser "1" pour "Health". Vous DEVEZ également renseigner sa vitesse de déplacement "Speed" ainsi que son "accélération", dans mon exemple, j'ai mis une vitesse de "25" et une acceleration de "20". (Je vous laisse modifier ces valeurs par la suite, si vous voulez tester).
Pour "Solid Object Reaction" et "Edge Object Reaction", qui correspondent à la réaction du Monstre lorsqu'il se heurte respectivement un objet solide ou le bord de l'écran, nous allons séléctionner "Reverse Direction". Ainsi lorsque le monstre, il fera demi-tour (si "NULL", le monstre reste bloqué immobile à la collision. Si "Destroy Me", le monstre meurt/disparait).

- Dans l'onglet "Actions", sélectionner l'action step "0", choisir "4 - Move LR" pour Action (déplacement droite/gauche), définir une vitesse d'animation de "4" et cocher la case "Jum On Kills", qui permet de tuer le monstre en lui sautant dessus !

2018_08_31_07_24_27_Monster_Animation_Info_actio_Step0.png

Votre écran devrait ressembler à cela.

- L'onglet "Bounding box" permet de définir la zone de collision avec l'objet. Definir à l'intéreiur du slime.

Valider en appuyant sur le bouton "Close".
Voilà, notre monstre slime est pret.

Nous allons l'ajouter à un groupe de monstre maintenant (dans "Monster Graphics Banks > Graphics Bank 0 > Monster Groups", sélectionner le groupe "Nv1 Monstres", ajouter le slime en monstre 1 par exemple et cliquer sur "Save" pour enregistrer).



ECRAN - OVERWORLD

Dans "Overworld", séléectionner l'écran dans lequel mettre notre "LanceurBoulesFeu".

Ensuite, cliquer sur bouton "Screen Infos", puis dans l'onglet "Day Monsters" (les monstres de jour).
Dans la liste déroulante "Day monster group", sélectionner le group de monstres que vous souhaitez utiliser (pour notre exemple, le groupe "Nv1 Monstres")

2018_09_07_12_46_19_Screen_Details.png

Valider la fenêtre en cliquant sur le bouton "OK".

Sur l'écran, faire un clic droit à l'endroit désiré (par exemple en bas de notre trou) et choisir "Place Monster 1 > LanceurBoulesFeu".


Un petit carré noir (votre objet invisible) devrait apparaitre à cet endroit.

Puis toujours sur le même écran, choisir un endroit où placer votre monstre "slime" (sur la passerelle ou sur le sol, par exemple), faire un clic droit et sélectionner "Place Monster 2 > Slime".


Il n'y a plus qu'à tester tout ça... Menu "Test > Export & Test".
Normalement, vous devriez avoir un monstre slime, sur lequel vous devez sauter pour le tuer.
Ainsi qu'une boule de feu, sortant du trou, vous empêchant votre player de traverser aisément (et le blesser si collision).
 

dale_coop

Moderator
Staff member
Revenons un peu sur le HUD plus en détail. Nous allons voir comment ajouter à notre jeu, le score.



HUD

Dans l’arborescence de NESMaker, sélectionner "HUD & Boxes". La fenêtre de paramétrage des zones s'affiche.

Les zones



C'est ici que l'on définit :
- "HUD Area": la zone de HUD (zone dans laquelle s'affichera les éléments du HUD). Remarque important, elle doit faire au moins 2 lignes de haut (sinon bug)
- "Playable Area": la zone de jeu, dans laquelle le Player peut évoluer. Lorsque le Player quitte cette zone, il passe à l'écran suivant.
- "Textbox Area": la zone d'affichage des boites de texte (dialogues, etc... une des grosses nouveautés de la version 4.0.6)
- "Monster Spawn Area": la zone dans laquelle apparaîtront les monstres qui sont paramétrés pour apparaître de façon aléatoire (le bouton "Rand", for "random/aléatoire", dans "Edit Monster Placement Details" sur l'écran).
- "Other Area": une autre zone qui ne semble pas servir pour l'instant.

Pour votre jeu, il est indispensables de définir les 2 premières zones "HUD Area", "Playable Area"(les autres seront nécessaires, respectivement si vous utiliser les textbox et les monstres position aléatoire dans votre jeu). Prenez l'habitude de le faire dès le début de la mise en place de votre projet, comme ça vous serez tranquilles.

Les tiles

Cet onglet permet de définir les tiles (blocs de 8x8pixels) associés aux différents éléments utilisables pour composer votre HUD (tiles pour les différentes lettre de l'alphabet, pour les bordure de votre hud, le background, quelques icones,…).

REMARQUE: Pour ce tutoriel, comme à chaque fois, j'utiliserai les fichiers d'exemple fournis dans le dossier "BetaAssets"... j'ouvre l'image dans Pixel Editor, à l'aide de la souris, je sélectionne toute l'image je fais CTRL+C pour copier. J'ouvre mon "HudTiles.bmp" et je place le curseur de la souris en haut à gauche et je fais CTRL+V pour coller.

Et voilà, enregistrer le tilesets.

De retour dans "HUD & Boxes", dans l'onglet "TileSets", on notera qu'il n'est plus vide. Et normalement, tous les tiles sont est déjà paramétrés correctement.

2018_08_31_07_39_15_HUD_tileset.png


(vous pouvez vérifier en sélectionnant chaque élément de la liste de gauche pour voir/modifier le tile associé)


Les Assets

Pour composer le contenu du HUD, il est possible d’utiliser des Assets que l'on construit dans cet onglet.
C'est un ensemble de tiles. Cela permet de créer des mots complets, ou des blocs graphiques (ensemble d’icônes)…
Pour notre exemple, nous n'allons pas en créer.


Les variables du HUD

Cet onglet, vous donne accès aux différentes variables du HUD. Vous en avez 8 à votre disposition.
Pour le module Aventure, un certain nombre de ces variables sont déjà paramétrées: "MyHealth", "MyScore", "MyKeys", "MyMoney".
Si utilisées dans le HUD, elles permettent d'afficher la valeur correspondante.
Les variables "UserVar_X" sont inutilisées pour l'instant.
Sélectionner la variable "MyScore" et vérifier que la valeur initiale est bien "0".


Les éléments du HUD

L'onglet qui nous intéresse le plus, il permet de composer comme bon nous semble notre HUD.
Nous avons accès à 8 éléments possibles affichables. Pour chaque élément, vous pouvez choisir ce qu'il affichera (une chaîne de caractères, la valeur contenue dans une variable, un asset …)

Pour l'exemple de notre jeu, nous allons afficher le score (sous forme numérique à 6 chiffres).

- Sélectionner "Element 1" et choisissez le type "2:Text".
Dans "String", saisir la chaîne de caractères que l'on souhaite faire apparaître (Par exemple ici "SCORE"). Ensuite, modifier la position de l'élément dans le HUD, à l'aide des valeurs de "X" et "Y".

2018_08_31_07_40_13_HUD_Score.png


- Sélectionner maintenant "Element 3" (correspondant à la variable "myScore") et choisissez le type "3:Number".
définir la "Max value" à "6" (6 chiffres à afficher) et modifier la position de l'élément dans le HUD, à l'aide des valeurs de "X" et "Y".

2018_08_31_07_40_32_HUD_Score_012345.png


Si vous souhaitez afficher la santé (myHealth) ou une autre varibale, je vous suggère de jeter un oeil à mon autre post: http://nesmakers.com/viewtopic.php?p=4323#p4323

Voilà votre HUD est prêt

Il n'y a plus qu'à tester... via le menu "Test > Export & Test". Et constater qu'il s'affiche correctement.
Et si le Player tue un monstre (en lui sautant sur la tête), vous devriez voir le score augmenter.
 
Top Bottom