Your SlideShare is downloading. ×
HTML5 Spiele entwickeln mit ImpactJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Spiele entwickeln mit ImpactJS

871
views

Published on

von Michel Wacker (http://twitter.com/starnut) …

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 schießen 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.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
871
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 Spiele entwickeln mit ImpactJS1. Indie Outpost Treffen Michel Wacker07.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
  • 5. Engines (Canvas/JS) und mehr ...
  • 6. Engines (Canvas/JS)
  • 7. Details• Entwickler: Dominic Szablewski• „Made in Hesse <3“• Lizenz: einmalig $99
  • 8. Features• Einfache Konzepte• Performant (Minimized)• Bitmap Font-Tool• Starker Editor (Weltmeister)• Gute Dokumentation• Aktive Community
  • 9. Basics• Spiel-Instanz ig.game• Grundobjekt: Entitäten• Standard Vererbung - Keine Components• Sprite Sheets aka Texture Atlases• Bitmap Fonts (Font-Tool)
  • 10. Entitäten• Life-Cycle init() update() draw() kill()• Movement pos velocity friction gravityFactor• Collision Detection touches() health receiveDamage()
  • 11. Entitätig.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(); }, }}
  • 12. Fonts & Images// Fontvar font = new ig.Font( font.png );font.draw( Some text, x, y, ig.Font.ALIGN.RIGHT );// Imagevar img = new ig.Image( player.png );img.draw( x, y );img.drawTile( x, y, 3, 16 );
  • 13. AnimationEntityBadge = 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; } }, }
  • 14. Input// On game startig.input.bind( ig.KEY.UP_ARROW, jump );// In your games or entitys update() methodif( ig.input.pressed(jump) ) { this.vel.y = -100;}
  • 15. Weltmeister Editor• Tile-Based• Mehrere Ebenen • Hintergrund • Collision • Entities• Automatisches Entity Loading• Freie Key-Value Definition
  • 16. 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)
  • 17. Beispiel: Stay Calm! http://staycalm.starnut.com
  • 18. • Wrapper• Mobile Deployment• Acceleration• Monetization (z.B. IAPs)
  • 19. Construct 2• WYSIWYG Editor• Physik-Engine• Deployment Wrapper• Volle Dokumentation• Aktive Community• Lizenzen: Free, Personal, Business
  • 20. Jesse Freeman, NYCFür Einsteiger geeignet
  • 21. Vielen Dank!
  • 22. 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