HTML5 Spiele entwickeln mit ImpactJS

1. Indie Outpost Treffen07.03.2013

Michel Wacker@starnut

Good job,Adobe!

:-/

http://"les.myopera.com/edwardpiercy/blog/Firing-Squad-4.jpg

?http://www.indygear.com/images/props/grail/grail2.jpg

http://www.indygear.com/images/props/grail/grail2.jpg

• Performanz

• Mobile Audio

• JavaScript

Engines(Canvas/JS)

und mehr ...

Engines(Canvas/JS)

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()

• Movementpos velocity friction gravityFactor

• Collision Detectiontouches() 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

// 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 );

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;

} },

}

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;}

Weltmeister Editor

• Tile-Based

• Mehrere Ebenen • Hintergrund

• Collision

• Entities

• Automatisches Entity Loading

• Freie Key-Value De"nition

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)

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!

• 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