際際滷

際際滷Share a Scribd company logo

HTML5 Spiele entwickeln mit ImpactJS

IndieOutpost
IndieOutpost

von Michel Wacker (http://twitter.com/starnut) Seitdem HTML5 als der heilige Gral der Web Entwicklung erkl辰rt wurde, werden die Rufe nach Plugin-freien Spielen, die auch auf Tablets laufen sollen, immer lauter. Engines schieen aus dem Boden wie Pilze, aber die wenigsten davon k旦nnen 端berzeugen. ImpactJS ist eine der vielversprechenderen und kommt u.a. mit einem m辰chtigen Level-Editor daher. Wie man Spiele mit ImpactJS entwickelt und wo die Engine und/oder HTML5 an seine Grenzen st旦t zeigt dieser Vortrag.

1 of 24
Download to read offline
HTML5 Spiele entwickeln mit ImpactJS 1. Indie Outpost Tre鍖en Michel Wacker 07.03.2013 @starnut
Good job, Adobe! :-/ http://files.myopera.com/edwardpiercy/blog/Firing-Squad-4.jpg
? http://www.indygear.com/images/props/grail/grail2.jpg
Performanz Mobile Audio JavaScript http://www.indygear.com/images/props/grail/grail2.jpg
Engines (Canvas/JS) und mehr ...
Engines (Canvas/JS)
HTML5 Spiele entwickeln mit ImpactJS
Details Entwickler: Dominic Szablewski Made in Hesse <3 Lizenz: einmalig $99
Features Einfache Konzepte Performant (Minimized) Bitmap Font-Tool Starker Editor (Weltmeister) Gute Dokumentation Aktive Community
Basics Spiel-Instanz ig.game Grundobjekt: Entit辰ten Standard Vererbung - Keine Components Sprite Sheets aka Texture Atlases Bitmap Fonts (Font-Tool)
Entit辰ten Life-Cycle init() update() draw() kill() Movement pos velocity friction gravityFactor Collision Detection touches() health receiveDamage()
Entit辰t ig.module( 'game.entities.badge' // Package ) .requires( 'impact.entity' // Imports ) .defines(function(){ EntityBadge = ig.Entity.extend({ init: function ( x, y, settings ) { this.parent( x, y, settings ); }, update: function () { this.parent(); }, draw: function () { this.parent(); }, } }
Fonts & Images // Font var font = new ig.Font( 'font.png' ); font.draw( 'Some text', x, y, ig.Font.ALIGN.RIGHT ); // Image var img = new ig.Image( 'player.png' ); img.draw( x, y ); img.drawTile( x, y, 3, 16 );
Animation EntityBadge = ig.Entity.extend({ size: { x: 50, y: 52 }, animSheet: new ig.AnimationSheet( 'media/entities/badges.png', 50, 52 ), init: function ( x, y, settings ) { this.parent( x, y, settings ); this.addAnim( 'idle', 1, [0] ); this.addAnim( 'run', 0.3, [1,2,3], false ); }, update: function () { this.parent(); if (someThingHappens) { this.currentAnim = this.anims.run; } }, }
Input // On game start ig.input.bind( ig.KEY.UP_ARROW, 'jump' ); // In your game's or entity's update() method if( ig.input.pressed('jump') ) { this.vel.y = -100; }
Weltmeister Editor Tile-Based Mehrere Ebenen Hintergrund Collision Entities Automatisches Entity Loading Freie Key-Value Definition
Nachteile Entwicklung stagniert Basics fehlen Button Spawning nur von Entit辰ten Depth Sorting Editor schr辰nkt Code-Reuse ein Manchmal unintuitiv: size.x Mobile Sound (Browser Problem)
HTML5 Spiele entwickeln mit ImpactJS
Beispiel: Stay Calm! http://staycalm.starnut.com
Wrapper Mobile Deployment Acceleration Monetization (z.B. IAPs)
Construct 2 WYSIWYG Editor Physik-Engine Deployment Wrapper Volle Dokumentation Aktive Community Lizenzen: Free, Personal, Business
Jesse Freeman, NYC F端r Einsteiger geeignet
Vielen Dank!
Links ImpactJS: http://impactjs.com/ ImpactJS Font-Tool: http://impactjs.com/font-tool/ Construct 2: http://www.scirra.com/construct2 CAAT: http://labs.hyperandroid.com/static/caat/ Crafty: http://craftyjs.com/ PixiJS: http://www.goodboydigital.com/pixi-js-has-landed/ Quintus: http://html5quintus.com/ melonJS: http://www.melonjs.org/ LimeJS: http://www.limejs.com/ Breakouts: http://city41.github.com/breakouts/ CocoonJS: http://www.ludei.com/tech/cocoonjs SoundManager 2: http://www.schillmania.com/projects/soundmanager2/ Stay Calm!: http://staycalm.starnut.com

More Related Content

HTML5 Spiele entwickeln mit ImpactJS

  • 1. HTML5 Spiele entwickeln mit ImpactJS 1. Indie Outpost Tre鍖en Michel Wacker 07.03.2013 @starnut
  • 2. Good job, Adobe! :-/ http://files.myopera.com/edwardpiercy/blog/Firing-Squad-4.jpg
  • 3. ? http://www.indygear.com/images/props/grail/grail2.jpg
  • 4. Performanz Mobile Audio JavaScript http://www.indygear.com/images/props/grail/grail2.jpg
  • 8. Details Entwickler: Dominic Szablewski Made in Hesse <3 Lizenz: einmalig $99
  • 9. Features Einfache Konzepte Performant (Minimized) Bitmap Font-Tool Starker Editor (Weltmeister) Gute Dokumentation Aktive Community
  • 10. Basics Spiel-Instanz ig.game Grundobjekt: Entit辰ten Standard Vererbung - Keine Components Sprite Sheets aka Texture Atlases Bitmap Fonts (Font-Tool)
  • 11. Entit辰ten Life-Cycle init() update() draw() kill() Movement pos velocity friction gravityFactor Collision Detection touches() health receiveDamage()
  • 12. Entit辰t ig.module( 'game.entities.badge' // Package ) .requires( 'impact.entity' // Imports ) .defines(function(){ EntityBadge = ig.Entity.extend({ init: function ( x, y, settings ) { this.parent( x, y, settings ); }, update: function () { this.parent(); }, draw: function () { this.parent(); }, } }
  • 13. Fonts & Images // Font var font = new ig.Font( 'font.png' ); font.draw( 'Some text', x, y, ig.Font.ALIGN.RIGHT ); // Image var img = new ig.Image( 'player.png' ); img.draw( x, y ); img.drawTile( x, y, 3, 16 );
  • 14. Animation EntityBadge = ig.Entity.extend({ size: { x: 50, y: 52 }, animSheet: new ig.AnimationSheet( 'media/entities/badges.png', 50, 52 ), init: function ( x, y, settings ) { this.parent( x, y, settings ); this.addAnim( 'idle', 1, [0] ); this.addAnim( 'run', 0.3, [1,2,3], false ); }, update: function () { this.parent(); if (someThingHappens) { this.currentAnim = this.anims.run; } }, }
  • 15. Input // On game start ig.input.bind( ig.KEY.UP_ARROW, 'jump' ); // In your game's or entity's update() method if( ig.input.pressed('jump') ) { this.vel.y = -100; }
  • 16. Weltmeister Editor Tile-Based Mehrere Ebenen Hintergrund Collision Entities Automatisches Entity Loading Freie Key-Value Definition
  • 17. Nachteile Entwicklung stagniert Basics fehlen Button Spawning nur von Entit辰ten Depth Sorting Editor schr辰nkt Code-Reuse ein Manchmal unintuitiv: size.x Mobile Sound (Browser Problem)
  • 19. Beispiel: Stay Calm! http://staycalm.starnut.com
  • 20. Wrapper Mobile Deployment Acceleration Monetization (z.B. IAPs)
  • 21. Construct 2 WYSIWYG Editor Physik-Engine Deployment Wrapper Volle Dokumentation Aktive Community Lizenzen: Free, Personal, Business
  • 22. Jesse Freeman, NYC F端r Einsteiger geeignet
  • 24. Links ImpactJS: http://impactjs.com/ ImpactJS Font-Tool: http://impactjs.com/font-tool/ Construct 2: http://www.scirra.com/construct2 CAAT: http://labs.hyperandroid.com/static/caat/ Crafty: http://craftyjs.com/ PixiJS: http://www.goodboydigital.com/pixi-js-has-landed/ Quintus: http://html5quintus.com/ melonJS: http://www.melonjs.org/ LimeJS: http://www.limejs.com/ Breakouts: http://city41.github.com/breakouts/ CocoonJS: http://www.ludei.com/tech/cocoonjs SoundManager 2: http://www.schillmania.com/projects/soundmanager2/ Stay Calm!: http://staycalm.starnut.com