Salut à toi jeune MMI! Aujourd’hui, j’ai l’honneur d’initier un nouveau sujet qui te passionne: Les jeux vidéo! Alors, comme toi, je suis un grand fan de jeux vidéo, surtout pour glander en cours de Comm’ les créer

jeux video

Mais je t’entends déjà d’ici, alors que cet article n’est même pas encore écrit:

“Comment je peux faire un jeu vidéo alors que je sais juste faire des sites web?”

Alors laisse moi te répondre avec ce même argument: Tu sais faire des sites web! Donc tu sais coder en JavaScript, et ça c’est magique

En effet, il existe beaucoup de frameworks JavaScript pour aider à faire des jeux vidéo. Et comme on est cool sur ce blog, je vais te faire une petite liste pour que tu puisses faire le jeu que tu as toujours voulu faire. Mais attention, mettons nous d’accord sur quelques règles qualitatives :

  • Le framework doit être GRATUIT (parce qu’on n’est que de petits étudiants sans le sous)
  • Je ne parlerai que de frameworks sur lesquels j’ai déjà posé mes doigts (comme ça je sais à peu près de quoi je parle)
  • Les jeux terminés doivent être compatibles HTML5 (pour que tu puisses les mettre dans ton super site)

Logo Phaser

Phaser

*Tourne la tête sur le côté* Avancez le premier challenger!!

Tada! Dis bonjour au premier framework, j’ai nommé Phaser (le seul qui ne porte pas “JS” après son nom, et c’est notable dans le monde du JavaScript)

Alors pourquoi je le propose en premier? Il y a plusieurs raisons à ça:

  • C’est le framework 100% web et gratuit le plus populaire, et ça c’est déjà un gros avantage pour Phaser! Grâce à sa notoriété, il possède déjà une communauté très active. Et qui dit communauté, dit de l’aide sur les forums et des tutos sur Youtube! :)
  • Phaser est très généreux en documentation : tu auras le choix entre des démos pour une utilisation précise (ex: faire une boucle de sprite pour animer le jeu) et une doc’ plus technique pour les fonctions et autres.

A ce stade tu te demandes probablement :

« Ouais, mais ce framework est fait pour quels types de jeux ? »

Eh bien il est principalement axé jeux 2D, essentiellement des platefomer. A toi de réaliser le meilleur entre Metroid, Castelvania, Megaman et Mario du coup!

 

Logo CraftyJS

CraftyJS

Et on passe au suivant avec le non-moins bon CraftyJS

CraftyJS est très proche de Phaser, du moins sur le papier.. Et par là, j’entends que tu peux juste faire du 2D! Mais sinon la logique de développement est différente (et si t’aimes bien le dév’, là tu devrais commencer à sourire)!  

En effet, elle se rapporte plus à des langages plus communément utilisés pour faire des jeux vidéo (C#, C++ et les autres). En effet, là tu vas coder ton jeu avec des objets et des propriétés pré-préparées (ce qui est cool et plus simple)

Par ailleurs, il faut savoir que CraftyJS est un vieux pépé qui date d’au moins 2013. Malgré tout, il est toujours suivi par ses créateurs qui ont fait une mise à jour le 8 Novembre 2015 (toujours vivant ce pépé! ^^).
Et puis, être vieux ça a l’avantage d’avoir une grosse doc’ un peu partout sur internet, et c’est donc au milieu de 300 pages Google que tu pourras t’amuser à faire au moins autant de tuto avant de créer ton propre jeu 2D!

Jogo Three.JS

Three.JS

Three.JS, Three.JS, Three.JS…
Lui c’est un gros morceau. Et oui, c’est un framework pour les jeux 3D ! Et, comme je suis maso, je me suis intéressé de près à Three.JS. Il utilise, entre autre, du WebGL, du SVG, du Canvas et de la CSS3D! Alors oui, je sors tous les noms en brut pour que tu puisses te la péter un peu, mais en vrai c’est pas si fou
Le WebGL c’est ce qui fait la 3D sur internet, le SVG c’est pour pouvoir avoir des images vectoriels, le Canvas c’est pour intégrer le jeu dans ta page web et la CSS3D c’est pour compenser les lacunes de WebGL (y en a pas beaucoup, mais suffisamment pour être content de la CSS3D ).

Mais ce qui est extraordinaire c’est que tu peux manipuler et gérer toutes ces technologies ultra compliqués juste avec du JavaScript !! *danse de la joie* ~(~) (~)~ \( )/

Je n’ai pas trouvé beaucoup de jeux sous Three.JS, mais ils en donnent quelques exemples dont un fait par Disney donc bon.. Y a respect!  

tout ce qu'est sur internet est vrai

 

Logo Superpowers

Superpowers

Tu te souviens de ma règle de rester sur du JavaScript? Et bah je vais faire une petite entorse à cette règle pour celui-ci. Mais ne t’inquiète pas! On reste sur quelque chose de très similaire (un sur-ensemble pour être précis) puisqu’il s’agit de TypeScript (c’est comme le JavaScript, vraiment ^^).
Alors, lui c’est mon petit préféré, je te l’avoue. Non content de savoir faire de la 2D et du 3D, Superpowers est un logiciel (et là c’est réellement un .exe) créé par des français et sorti le 21 Janvier 2016 en open source. Alors je t’entends à nouveau râler:

“Oui, bah t’abuses, c’est ni du JS, ni un framework pour faire des jeux web!”

Et là encore, tu as tort ( du moins, c’est faux pour Superpowers ) ! Et oui, l’un des énormes avantages qu’offre Superpowers c’est d’exporter ton jeu en JavaScript/HTML5 et, donc, d’être complètement compatible sur navigateur web et smartphone !

Et pour ce qui est de son ancienneté, ne te fais pas de soucis non plus, la communauté qui s’est créée est extrêmement active et les dév’ du logiciel font des streams-tuto toutes les semaines, en plus d’une doc, là encore, très très fournie et des tutos qui commencent à sortir partout sur internet

Et je m’arrête là pour cette liste. Alors, comme pour toutes les choses dans le web, je n’ai pas été exhaustif, il en existe des milliers d’autres! Mais j’ai fait le tour des plus connus, avec la meilleure doc’ et, surtout, avec les 2 plus grandes manières de penser et appréhender du code de jeux vidéo tout en restant sur du langage JavaScript.

 

Et parce que j’aime donner du bonus ( c’est un peu comme le petit sucre sous la langue avant d’aller au lit ), voici quelques liens pour t’aider à choisir un autre framework ou plus d’informations

the end

J’espère que cet article t’auras plus en tout cas, et n’hésite pas à laisser un commentaire, partager et venir me montrer ton super jeu web!
Des zoubis <3

Maintenant je peux faire des #jeuxvideo avec du #JS grâce à cet article!Click to Tweet
Du JV au JS : Comment faire des jeux vidéo JavaScript
4.4 (88.57%) 7 votes

Ce qui pourrait également t'intéresser ...

5 réflexions sur “ Du JV au JS : Comment faire des jeux vidéo JavaScript ”

    1. Salut et merci pour le compliment
      Pour ce qu’est de Pixi.JS, je connaissais pas du tout. Mais comme j’ai dit j’ai pas voulu être exhaustif et j’ai mis en avant les plus connu avec des méthodes de prog’ variée.
      Là (du rapide coup d’oeil que j’ai jeté) ça m’a l’air de ressembler à Phaser rapidement (avec du développement par phase pré-programmé) Du coup mon article tien encore la route! o/

  1. Désolé de poster là, mais impossible de parcourir les pages dans les différentes catégories, lorsqu’on clique sur page suivante ou directement sur le chiffre l’url change bien mais le contenu reste le même que la 1ère page.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir