background preloader

Jeux HTML5 avec Canvas et SVG

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. 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 ! Par ailleurs, la performance des moteurs JavaScript modernes et l’accélération matérielle pour booster l’affichage via le GPU permet désormais d’envisager le scénario de jeu vidéo sereinement. Canvas et SVG : 2 façons de dessiner à l’écran Graphismes

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

Intégrer et charger une image dans mon programme [Résolu] [quote:c233="big_ben3333"]Si j'ai bien compris la syntaxe, si j'ajoute ces ligne dans mon programme, au moment de la compilation le fichier C:test.bmp sera ajouté au .exe généré. Et ensuite quand je lancerai mon programme, le bmp sera extrait dans D:mydirtest.bmp et ensuite je pourrais y accéder.[/quote]Tout a fait ... [quote:c233="big_ben3333"]Reste à le supprimer proprement à la fermeture du programme ou c'est automatique ?[/quote]Non , il n'y à pas d'automatisme, il faut le faire soit-meme. [quote:c233="big_ben3333"]Par contre, dans l'exemple, quel est l'intérêt de la variable $b ?? Pour infos, il existe aussi la possibilité d'inclure des icones dans les ressources de votre executable, mais pour cela, il vous faut utiliser _AutoIt3Wrapper.exe pour compiler votre exe.Si vous utiliser Scite, alors pas de problème => ctrl+F7Voici les élément dont vous avez besoin :[code]#Region Compiler directives section#AutoIt3Wrapper_Res_Icon_Add=. Sleep(3000)

Tutoriels HTML, HTML5, CSS, CSS3, standards du web October 2011 Let's get started on a simple 2D character. There are a lot of resources and tutorial out there on character creation and animation - most of which written by and for artists and animators. I will try and break in down to simple elements and easy to follow steps. Note:Some of the techniques used in this tutorial have been covered in earlier post. It's time to start getting creative. Note: When working from a sketch, scribble or concept drawing it's helpful to import the bitmap image into a new layer at the bottom of your stack and work on top (Layer/ Add Layer or SHIFT+CTRL+N). In order to make it easier to animate the character later grouping elements and assigning better pivot points is really helpful. This concludes the creation process. I hope you enjoyed the tutorial so far. Get the source art (svg file) of this tutorial for USD 5.00(only includes the main character created in the tutorial plus the 'king scene')

HTML5 Introduction Autocomplétion avec jQuery et MySQL | chez Syl - Développement web Je vais vous expliquer comment faire facilement un système d’autocomplétion avec jQuery. Les données seront stockées en base de données. Tout d’abord, pour ne pas réinventer la roue, je vous propose d’utiliser un plugin jQuery d’autocomplétion (site web). Je le préfère à celui de jQuery UI qui lui est en revanche plus populaire. Nous allons donc utiliser celui du premier lien. Mise en place On n’oublie pas de charger jQuery : Vous créez ensuite votre input le plus simple du monde : Et vous appelez le plugin dessus : On lui indique quel fichier appeler en Ajax, ce dernier va se charger de récupérer la valeur entrée par l’utilisateur (contenue dans $_GET['q']), de se connecter à la base de données, faire la requête SQL et d’afficher d’éventuels résultats. Voici le PHP : Si vous avez des attentes particulières, regardez du côté des options du plugin. Démo Voilà, ce n’est pas plus compliqué que ça, j’ai mis en ligne une démo pour vous montrer ce que ça donne.

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

Tutoriel Motion Design Gratuit HomeTutoriels En quelques minutes, des trucs et astuces pour améliorer votre workflow !... Pour apprendre tous les secrets du logiciel de compositing de référence !... Pour bien débuter la 3d, il faut évidemment commencer par les bases !... Pour pousser plus loin toutes les fonctions de l’incroyable logiciel Cinema 4D!... Chose promise, chose due, aujourd’hui j̵ « Attends… quoi? Fragments of Iceland from Lea et Nicolas Features Copyright 2011 Kola Blog Garanti sans sucre ni aspartame !

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. Vous pouvez jouer au jeu directement au sein de cette iframe (avec les flèches droite et gauche & W pour sauter). Vous pouvez également jouer au jeu dans une fenêtre séparée en suivant ce lien : HTML5 Platformer Note 1: ce jeu a d'abord été publié en septembre 2011 avec EaselJS 0.3.2 et a été mis à jour pour EaselJS 0.4. Note 2: ce jeu a été testé avec succès sous IE9/10, Chrome 17, Firefox 11, IE9 sur Windows Phone et sous iPad 2. - Are We Fast Yet? David

Related: