HTML5Labs - Home. HTML5 Platformer: portage complet du jeu XNA vers <canvas> grâce à EaselJS - David Rousset - HTML5 & Gaming Technical Evangelist. Après quelques heures passées sur le clavier à coder en JavaScript, j’ai finalement complètement porté l’exemple de jeu Platformer issu des samples XNA 4.0 vers HTML5/Canvas à l’aide du framework EaselJS. Vous trouverez dans cet article le jeu en lui-même ainsi qu’un petit retour d’expérience sur les parties qui m’ont fait me poser le plus de questions. Si vous cherchez à savoir comment fonctionne le jeu en interne, le mieux est de tout simplement en lire le code.
Il est disponible au téléchargement à la fin de cet article. Avant de rentrer dans le vif du sujet, j’aimerais attirer votre attention sur mes motivations principales à l’écriture de ce jeu. Je cherchais tout simplement à mieux apprendre JavaScript en écrivant du code purement JS (sans aucune forme de dépendance avec le DOM). Vous pouvez jouer au jeu directement au sein de cette iframe (avec les flèches droite et gauche & W pour sauter). Et je suis ensuite allé plus loin avec le même jeu à travers 3 autres articles : David. Presentation. Samuel Ronce, WebCreative5 26 Novembre 2012 LyonJS Création d'un jeu avec CanvasEngine Structure d'une scène Propriétés et méthodes de la scène Appel de la scène canvas.Scene.call("MyScene"); Créer un élément Groupe d'éléments Rafraichissement Extend var canvas = CE.defines("canvas_id"). extend(Animation). ready(function() { canvas.Scene.call("MyScene"); }); Timeline Easing name : Un Sprite animé Image composée de 4 animations de 5 séquences Largeur : 250px Hauteur : 200px Animation Code dans la méthode "ready".
Var canvas = CE.defines("canvas_id"). extend(Input). ready(function() { canvas.Scene.call("MyScene"); }); Gestion du clavier Code dans la méthode "ready". Aperçu de la manette Gestion de la manette Code dans la méthode "ready" reprenant le code précédent. Code dans la méthode "render". this.gamepad.update(); stage.refresh(); Test de la manette Level Design Préparation Penser à charger le fichier JS pour Tiled Map Editor Etendre Canvas Engine Charger une carte.
World Wide Web Consortium (W3C) HTML5 Introduction. The WebKit Open Source Project. Tutoriels HTML, HTML5, CSS, CSS3, standards du web. Tiled Map Editor. EaselJS | Javascript/HTML5 Canvas. Recent Updates Follow @CreateJS November 2014 Updates in preparation for next release (coming soon).New class model, with big performance increases October 2014 Lots of bug fixes and pull requests.New 'Extras' folder in GitHub with useful tools and classes July 2014 Major overhaul of Graphics to include a useful command pattern, and a big performance increase.Added Graphics.store() / unstore() The Story Why we built EaselJS About EaselJS EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas.
Featured Projects Community Show & Tell. Ion Drift A port of the Flash game Ion Drift, b10b was able to build a CreateJS version in less than a day that hit target framerates on even the lowest devices, and outperformed ports to other libraries. By b10b b10b. Canvas Engine : create HTML5 games. HTML5 Boilerplate. Jeux HTML5 avec Canvas et SVG. Au sommaire : - Canvas et SVG : 2 façons de dessiner à l’écran - Les librairies et les outils utiles - Les frameworks de jeux - Les tutoriaux pour démarrer - Des exemples de réalisations en ligne et des retours d’expérience Je passe mon temps ces derniers temps à expliquer en boucle comment faire des jeux en HTML5 à des étudiants, des passionnées, des professionnels voire même à des profs.
Plutôt que garder cela en petit comité, je me suis donc dit qu’il serait plus intelligent de structurer tout cela et d’en faire un billet sur mon blog. Il est donc basé sur ma propre expérience. Mais au fait pourquoi faire des jeux en HTML5 ? Tout simplement parce qu’aujourd’hui, on peut vraiment se servir du HTML5 pour faire du multiplateformes : pour les machines de bureau bien sûr (avec IE9/IE10, Firefox, Chrome, Opera & Safari), pour les tablettes ou téléphone iOS & Android et pour finir pour Windows 8 qui vous accueille désormais à bras ouvert ! Canvas et SVG : 2 façons de dessiner à l’écran David.