HTML5 Spiele entwickeln mit ImpactJS
-
Upload
indieoutpost -
Category
Technology
-
view
885 -
download
2
description
Transcript of HTML5 Spiele entwickeln mit ImpactJS
![Page 1: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/1.jpg)
HTML5 Spiele entwickeln mit ImpactJS
1. Indie Outpost Treffen07.03.2013
Michel Wacker@starnut
![Page 2: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/2.jpg)
Good job,Adobe!
:-/
http://"les.myopera.com/edwardpiercy/blog/Firing-Squad-4.jpg
![Page 3: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/3.jpg)
?http://www.indygear.com/images/props/grail/grail2.jpg
![Page 4: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/4.jpg)
http://www.indygear.com/images/props/grail/grail2.jpg
• Performanz
• Mobile Audio
• JavaScript
![Page 5: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/5.jpg)
Engines(Canvas/JS)
und mehr ...
![Page 6: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/6.jpg)
Engines(Canvas/JS)
![Page 7: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/7.jpg)
![Page 8: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/8.jpg)
Details
• Entwickler: Dominic Szablewski
• „Made in Hesse <3“
• Lizenz: einmalig $99
![Page 9: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/9.jpg)
Features
• Einfache Konzepte
• Performant (Minimized)
• Bitmap Font-Tool
• Starker Editor (Weltmeister)
• Gute Dokumentation
• Aktive Community
![Page 10: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/10.jpg)
Basics
• Spiel-Instanz ig.game
• Grundobjekt: Entitäten
• Standard Vererbung - Keine Components
• Sprite Sheets aka Texture Atlases
• Bitmap Fonts (Font-Tool)
![Page 11: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/11.jpg)
Entitäten
• Life-Cycle init() update() draw() kill()
• Movementpos velocity friction gravityFactor
• Collision Detectiontouches() health receiveDamage()
![Page 12: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/12.jpg)
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(); },
}}
![Page 13: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/13.jpg)
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 );
![Page 14: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/14.jpg)
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;
} },
}
![Page 15: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/15.jpg)
Input
// On game startig.input.bind( ig.KEY.UP_ARROW, 'jump' );
// In your game's or entity's update() methodif( ig.input.pressed('jump') ) { this.vel.y = -100;}
![Page 16: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/16.jpg)
Weltmeister Editor
• Tile-Based
• Mehrere Ebenen • Hintergrund
• Collision
• Entities
• Automatisches Entity Loading
• Freie Key-Value De"nition
![Page 17: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/17.jpg)
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)
![Page 18: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/18.jpg)
![Page 19: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/19.jpg)
Beispiel: Stay Calm!
http://staycalm.starnut.com
![Page 20: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/20.jpg)
• Wrapper
• Mobile Deployment
• Acceleration
• Monetization (z.B. IAPs)
![Page 21: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/21.jpg)
Construct 2
• WYSIWYG Editor
• Physik-Engine
• Deployment Wrapper
• Volle Dokumentation
• Aktive Community
• Lizenzen: Free, Personal, Business
![Page 22: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/22.jpg)
Jesse Freeman, NYC
Für Einsteiger geeignet
![Page 23: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/23.jpg)
Vielen Dank!
![Page 24: HTML5 Spiele entwickeln mit ImpactJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498e93b4c905b96a8b5273/html5/thumbnails/24.jpg)
• 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
Links