Comment réaliser un jeu ? Partie 1

Bonjour tout le monde !

Je vais ESSAYER de vous expliquer comment créer un jeu en entier... Je dis "Essayer" car moi même j'ai du mal à y arriver !!

En fait, cela me permettra également de m'autocritiquer... et si jamais ça ne marche pas (c'est à dire que si j'arrive pas à mes fins) cela servira d'exemple pour certains ! A savoir ce qu'il ne faut pas faire !

Commençons par le commencement !

Etape 1 : Avoir quelques outils ! Un papier et un stylo devrait faire l'affaire ! Sinon, vous n'avez qu'à utiliser word et vos doigts !
Je vous conseille d'écrire vos étapes une par une. (Voir résultat plus bas).

Etape 2 : Avoir une petite idée dans la tête du jeu qu'on veut réaliser. Déjà, le titre du jeu ! (en général, on n'en sait rien !!! C'est pour ça qu'on attend la fin du jeu pour définir du titre de ce premier !... Actuellement, je voterai pour un nom assez simple du genre : "Jeu 1" Ensuite, il existe plusieurs type de jeu ; Plate-formes, RPG, Combat, Aventure, Etc etc... Pour les différents types de jeux, je vous redirige vers ce site : http://fr.wikipedia.org/wiki/Type_de_jeu_vid%C3%A9o
(nb : laissez tomber les jeux en 3D, ici on parle uniquement de 2D ou au pire des cas de la Fausse 3D !! )
Pour mon exemple, j'ai oté pour un jeu de plate-formes.

Etape 3 : Dessiner votre stage sur une feuille. (faites juste un croquis) Exemple :


Ensuite, relever le nombre d'ennemis que vous avez dessiné sur votre croquis. Dans l'exemple précédent, il y en a 7 avec le boss. Répéter l'opération autant de fois que vous le souhaitez. (En fonction du nombre de stage que vous voulez). Puis indiqué le nombre total d'ennemis.

Etape 4 : Faites les sprites de vos ennemis en vous inspirant de votre croquis.








Etape 5 : Réaliser le stage. Pour ma part, je sépare un stage en 3 parties, la première qui est le premier plan, la deuxième partie n'est autre que l'arrière plan, et enfin la troisième est ce que j'appelle les décors qui bougent, (genre une plateforme qui sert d'ascenseur).

Si on tiens compte de mon croquis, il y a quelques décors qui bougent. Les voici en images.



Maintenant passons au premier plan. Ce qu'il faut retenir, c'est qu'il doit s'agir de tuiles et non de décors à proprement parlé !
Qu'est-ce que j'entends par tuiles ? En fait c'est super simple, une tuile est une image faisant 8x8, ou 16x16 ou 32x32 ou etc etc pixels. L'avantage d'une tuile c'est qu'en les superposant, on doit pouvoir former une plateforme de longue taille ou un bloc plus gros ou autres... voyez vous même par mon exemple ci-dessous. (nb : j'ai fait des tuiles de 32x32 pixels).



nb : ce n'est pas parce que l'objet semble plus petit que 32x32 pixels que c'est le cas, (par exemple l'angle des tuyau ci-dessus) dites vous bien qu'en fait, il s'agit d'un objet faisant 32x32 pixels sauf qu'on à pas exploité toute la surface !

Maintenant, passons à la dernière étapes ; l'arrière plan. Là par contre, aucune restriction... laissez libre à votre imagination. La taille des objets dépend de ce dont vous avez besoin.



Etape 6 : Réaliser votre application sous Multimédia Fusion.

Ouvrez Multimédia Fusion 2, faites fichier - nouveau. Cliquez droit sur "Application 1*" puis faites "renommer". Renommez votre fichier comme bon vous semble (pour ma part, je vais faire un jeu sur megaman, du coup, je l'appellerai "Megaman" )



Sauvegardez votre application en cliquant sur l'icone de la disquette en dessous de "Fichier" ; (extension du fichier *.mfa).

Maintenant cliquer droit sur "Scène 1" et faites "Renommer". Appelez-le ; "Stage 1".

Par défaut, votre fenêtre d'application fait 640x480 pixels. Je vous conseil de laissez ce format. Je vous expliquerai plus tard comment le changer.

Par contre, une chose que vous devez savoir, c'est que votre stage lui sera 10 fois plus grand que ce petit rectangle de 640x480 pixel !! Mais par défaut, Multimédia Fusion met la taille de la "vignette" (votre stage 1) à la taille de la fenêtre de votre application. Pour y remédier, il suffit de cliquer sur les dimensions de votre "vignette" et de rentrer les valeurs manuellement.



Pour mon stage, j'ai pris une "vignette" de 3880 / 2880.

Maintenant, on va arranger notre "vignette". Cliquez sur le numéro ("Num") 1 à gauche de votre vignette (voir image précédente). Avant de se lancer dans un puzzle délirant je vous conseille d'afficher votre grille qui va vous permettre de mieux placer vos tuiles. Faites Voir - Montrer la grille. Ensuite vérifié que votre grille fait bien 32x32. Faites Voir - Configuration de la grille. Vérifié la taille (32x32) si c'est bon, faites "ok", sinon changez les valeurs et validez ! Un dernier truc avant de commencer. Faites Voir - Aimenter sur la grille. Je n'ai encore jamais testé cette option, mais théoriquement, ca devrait vous permettre de positionner vos tuiles plus facilement.

Bien, nous pouvons commencer !!!

- L'arrière plan !

Commencez par cliquer droit sur votre "vignette" et faites "Insérer objet". Sélectionnez "Décor rapide" ; votre souris ce change en pointeur. Indiquez lui l'endroit sur la vignette où vous souhaitez insérer votre décor.

J'ai décidé de le mettre tout en haut à gauche ! Dans l'angle quoi !

Sur votre vignette, sélectionnez votre "décor rapide" pour voir ses propriétés s'afficher en bas à gauche.



Sélectionnez le type qui va être "motif". Puis cliquez sur "Edition".

Là une fenêtre s'ouvre. Faites "Ctrl+o" puis allez cherchez votre arrière plan. Une fois choisit, une autre fenêtre s'ouvre ; "Option d'importations".

Cochez la case "Importer la sélection", puis cliquez sur le bouton "Select" pour sélectionner l'image que vous allez importer (Pour ma part, ca sera le ciel).

Nb : cela doit etre l'image qui sera la plus en arrière dans votre jeu. (imaginez que le jeu est en 3D).



Ensuite, choisissez votre couleur transparente. Pour celà, cliquez sur le bouton "Choisir" et sélectionnez votre couleur transparente. Pour ma part, ca sera le rose. Puis validez par "ok".

Votre image sélectionné apparait enfin en tant qu'objet "décor rapide". Mais vous pouvez constater qu'il y a du transparent en débordement. Cela peut être gênant. On va donc rogner le transparent. Pour cela, cliquez sur l'icône en forme de carré avec des flèches à ses cotés qui sont pointés vers le carré.



Vous avez maintenant un "décor rapide" parfait (c'est à dire sans débordement transparent). Terminez par "ok".

Vous revenez à votre "vignette" et vous vous apercevez que votre "décor rapide" est devenu votre image (dans mon exemple, un ciel étoilé). Sélectionnez votre "décor rapide" puis dans les propriétés, cliquez sur l'icône "taille/position" en forme de carré avec des flèches.



Indiquez dans "Taille" la "Largeur" ainsi que la "Hauteur" de votre "Vignette" (pour ma part c'est du 3880 par 2880). Votre "décor rapide" prend maintenant toute votre "vignette", et vous pouvez voir dans la liste de gauche, votre "décor rapide" que vous venez de créer.

Remarque : votre image se multiplie en fonction de la taille de votre "décor rapide" contrairement à un simple "décor" (par "rapide" ) qui lui serait étendu. Ce qui est bien pour répéter plusieurs fois une même image à l'infini (d'où l'utilité des tuiles).

Va peut être falloir créer d'autre "décor rapide" du coup, je vous conseille de le renommer comme on l'a fait précédemment. Pour ma part, je vais l'appeller "Ciel étoilé".



Maintenant que vous avez fini avec votre arrière plan de base, il n'est plus nécessaire de le toucher, ni de le modifier, ni de le repositionner. Je vous conseil donc de le bloquer (c'est à dire que vous ne pourrez plus rien faire avec ! Ca fera parti de votre "vignette"). Pour cela cliquez droit sur votre "décor rapide"... heu non, je veux dire sur votre "Ciel étoilé" puis faites "Verrouiller".



Sauvegarder le tout !

Pour ma part, je vais rajouter un autre "Décor rapide" en bas de ma "vignette" (le crépuscule avec en fond une île et la mer... voir image arrière plan. Vous pouvez en faire de même).

Maintenant, avant de continuer l'arrière plan, on va mettre le premier plan principale (à savoir les plateformes et les obstacles IMMOBILE) pour définir un peu notre surface de jeux. (bin ouais, imaginez que vous mettiez d'abord un cocotier puis après, lorsque vous mettrez les plateformes vous vous rendrez compte que le cocotier flotte dans l'air... ca serait bête hein ! ).

Sur ce, procédez comme précédemment.

Des fois, il vous faudra déplacer quelques objets pour faire apparaitre ce que vous voulez voir. Pour déverrouiller un objet "verrouillé", comme le cas de mon "Ciel étoilé", il suffit de maintenir les touches Ctrl+Shift et de cliquer sur l'objet "verrouillé".

Ensuite, il se peut que vous ne vouliez pas répéter l'image à l'infini mais bien avoir juste un bloc (comme par exemple le tuyau dans la partie "tuiles" de premier plan. (voir image pour le premier plan)). Dans ce cas là, cliquez droit sur votre vignette, puis faites "Insérer objet". Là aller chercher "Décor". Pour changer le motif de "Décor", double cliquez dessus l'objet "Décor". Ensuite procédez comme précédemment.

Si vous deviez insérer un "Décor" (je dis bien un "Décor" et non un "Décor rapide" !!!! ) que vous avez déjà mis dans votre vignette, il n'est pas nécessaire de répéter l'opération. Il vous suffit de sélectionner votre "Décor" puis de faire un simple copier/coller à savoir ctrl+c pour copier puis Ctrl+v pour coller.

Pourquoi on ne peut pas faire ça avec un "Décor rapide" ?
En fait si, c'est faisable, dans le cas ou votre deuxième "Décor rapide" aura la même taille que la première que vous avez copiée. En d'autres terme, si vous modifié votre copie, cela aura des répercutions sur l'originale. Pour éviter cela, il faut "cloner" votre original. En faisant celà, les modifications que vous apporterez sur l'un n'affectera pas l'autre.

Dans votre "vignette", cliquez droit sur votre objet "Décor rapide" que vous voulez cloner, puis faites "Cloner". Validez par "ok". Ensuite, bouger et transformez à votre guise votre nouveau "Décor rapide" que vous venez de créer.

Voici ce que vous devez obtenir à ce stade. (J'ai essayé de suivre mon croquis de base mais en le modifiant légèrement).


nb : je n'ai pas pu avoir tout le stage au complet dans la capture d'écran...dsl

Etape 7 : Réaliser ses obstacles et ses plateformes.

Maintenant que nos tuiles principales ont été posées, on va les configurer de tel sortes que ces tuiles soit plus que de simple image. En effet, maintenant on va leur donner la fonction de plate forme ou d'obstacle suivant les cas.

Avant de continuer, je vous invite à créer un dossier dans votre application. Pour cela, faites clic droit sur "Stage 1" puis choisissez "Nouveau dossier".



Renommez le "Obstacles".

Maintenant vous allez faire un glisser de tous les objets "Décor" et "Décor rapide" qui pourrait être un obstacle ou une plateforme.



(Dans mon exemple, "Ciel étoilé" et "Crépuscule" ne sont en aucun cas des obstacles ou des plateformes, ils devront rester en dehors du dossier "Obstacles".

Maintenant on va définir tous les objets dans le dossier "Obstacles" comme étant réellement des obstacles. Pour cela, sélectionnez le premier objet dans le dossier, ensuite, dans les propriétés, cliquez sur l'icône en forme de flèche ("Option du runtime"), puis mettez la valeur "Obstacle" pour le "Type d'obstacles".



Faites de même pour tous les autres Objets présent dans le dossier "Obstacles".
Pensez à sauvegarder régulièrement.

Maintenant, vous pouvez continuer à dessiner votre stage avec les outils vu précédemment à savoir "Décor" et "Décor rapide".

Résultat finale actuel : (ce que vous devez écrire sur votre feuille ou bien sur votre fichier word)

Titre du jeu (et de votre fichier) : Jeu 1,
Type du jeu : Plate-formes,
Croquis des stages : Voir images,
Nombre total d'ennemis : 7 (dans notre exemple),
Sprites des ennemis : Voir images,
Tuiles et backgrounds du stage : Voir images,
Elaboration du background : Savoir utiliser l'objet "Décor" et "Décor rapide" de Multimédia Fusion 2.
- Objet "Décor" : Cliquer droit sur votre vignette, puis faites "Insérer objet". Sélectionner "Décor".
- Objet "Décor rapide" : Cliquer droit sur votre vignette, puis faites "Insérer objet". Sélectinner "Décor rapide".

La différence entre les deux : "Décor" est un bloc impossible à changer de taille après (sous peine de voir son image aggrandir et se pixéliser après). "Décor rapide" est également un bloc mais avec la possibilité de changer de taille après. L'objet conservera son image d'origine et le multipliera autant de fois qu'il le faut.

Exemple :

"Décor" et "Décor rapide" avant d'être étiré.


"Décor" et "Décor rapide" après être étiré.

Certains ce foutront de ma Gu%@# mais je compte surtout sur ce qui me diront plus tard... merci !

Allé, CIAO !