Forums Développement Multimédia

Aller au contenu

- - - - -

[Tuto - Metroïd]Platformer Javascript

CODE TUTO Javascript platformer jeux

2 réponses à ce sujet

#1 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7010 messages

Posté 24 December 2016 - 16:39 PM

Bonjour,

Tout d'abord, bonnes fêtes :)

Comme il est d'usage d'apporter un petit cadeau, un moteur de jeux de plateforme en javascript ça vous tente ?

Image attachée: metroid.jpg

Image attachée: metroid-debug.jpg

Avec quelques ajouts, le moteur devrait finir par convenir à pas mal de jeu à base tuiles, avec plusieurs rendus et placement de caméra possibles. Mais pour le moment je suis parti d'une base de Metroïd que j'ai trouvé sur la toile pour ne pas perdre de temps avec la map et les assets, et j'ai construit mon moteur autour, ça sera donc de la plateforme ^_^

Pas grand chose à dire de plus, chaque ligne de code est commentée, c'est en cours de développement, c'est fait pour le fun sans but commercial ni professionnel, c'est gratuit et vous pouvez en faire ce que vous voulez (tant que vous ne le vendez pas).

Si vous trouvez des bugs, avez des pistes d'optimisation ou voulez participer, n'hésitez pas ;)
Vous avez la source, il vous suffit de tester vos modifs, si ça marche proposez-les ici :P

Reste à vous donner quelques clés de base pour la prise en main.

La page HTML doit contenir le code suivant :

<div id="game">
         <script src="js/game.js"></script>
</div>

Ensuite le moteur se débrouille tout seul pour créer et charger dans cette balise ce dont il à besoin.

Tout le jeu moteur est dans le dossier "js" :

settings.js :
Pour le moment pas grand chose mais c'est ici qu'il faudra placer tous les paramètres généraux qui n'entrent pas logiquement dans les maps (résolution, musiques, bruitages, interface, ...).

game.js :
Initialisation du jeu :
  • charge les scripts du moteur,
  • charge les spritesheets
  • crée les éléments HTML,
  • initialise la gestion de l'audio,
  • construit le premier level,
  • contrôle les mises à jour (level, rendu graphique, debug, ...).
buildlevel.js :
Construit le level d'après la map.
  • charge la map
  • initialise l'objet "appData"
  • liste les animations
  • crée l'écran d'affichage (screen)
  • génère le monde (world)
L'objet "appData" contient tous les paramètres du level, le moteur y fait référence dès qu'il a besoin d'une information.

Concernant le cœur de l'appli (core) tout est commenté directement dans les fichiers.
Par contre il peut être utile de dire quelques mots sur le dossier "entities".

Tous les objets du jeu sont des entités, il y a donc une classe "core/entity.js" qui décrit le comportement général de tous les objets. Chaque objet en hérite et la spécialise en y ajoutant ses propres comportements (qui s’appuient généralement sur les méthodes de "core/entity.js" mais pas toujours). Pour ajouter de nouveaux "acteurs" à votre jeu il suffit donc de coder un objet qui hérite de "core/entity.js". C'est ce que vous trouverez dans le dossier "entites", des portes, ennemis, items, missiles, plateformes, et joueur.

Si tout va bien vous n'aurez normalement pas à toucher au cœur du moteur pour faire un jeu, les trois fichiers JS au dessus suffisent pour le paramétrage, la map est en Json, et les objets sont dans le dossier "entities".

Voilà, c'est un début :)

Have fun !
Passez de bonnes fêtes.

PS : J'oubliai... utilisez la touche D pour afficher le débug, la touche CTRL pour viser, la touche ESPACE pour tirer, et la touche C pour ouvrir la porte (si vous avez trouvé la clé..... ).

Fichier(s) joint(s)



#2 archiroc

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 259 messages

Posté 26 December 2016 - 17:54 PM

Merci Mister !

C'est Cool... C'est Gentil... Et c'est METROID !!! :smile: :smile: :smile:

Bonne fête à toi et tous ceux qui passent ici là de temps à autre.
( bon... je continue mes essais avec Starling avant de voir si fô Javaliser l'AS3 )

A bientôt.....

#3 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7010 messages

Posté 07 January 2017 - 18:13 PM

Je pense m'attaquer à la version du moteur pour les JDR dans le mois qui viens, si certains ont besoin d'info n'hésitez pas.




Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP