Just Spaceships!

Just Spaceships! – development notes

Just Spaceships! – poznatky z vývoje

• Webová interaktivní prezentace Online interactive presentation
• Stiskněte "L" pro Angličtinu, "?" zobrazí krátkou nápovědu Press "L" for Czech language, "?" for a brief help
• Tisk jako obvykle Print this as any other page
• Pro pokračování stiskněte mezerník Press spacebar to continue
• ondras@zarovi.cz

Obsah

Contents

1. Canvas
2. Audio
3. Network Síťová komunikace
4. Miscellaneous Ostatní

Canvas

• Pravidlo #1: Překreslovat jen tolik pixelů, kolik je potřeba Rule #1: Redraw only those pixels that need to be changed
• Pravidlo #2: Když už je nutné překreslovat všechny pixely, dělat to rychle a ne moc často Rule #2: If you need to redraw all pixels, do it fast and not too frequently

Canvas

• Grafická primitiva: obdélníky, cesty, per-pixel, sprite Graphic primitives: rectangles, paths, per-pixel, sprite
• Sprite (obrázek/canvas) je nejrychlejší Sprite (image/canvas) is the fastest
• Obrázky se stahují on-demand; předkreslení s natočením do canvasu Images are downloaded on-demand; they are pre-drawn (incl. rotation) to another canvas
• Pozadí předrenderováno do velkého canvasu Background is pre-rendered to a large canvas

Canvas – animace

Canvas – animation

• HAF: HTML5 Animation Framework
• setTimeout: vhodné pro simulaci setTimeout: suitable for simulation
• requestAnimationFrame: vhodné pro animaci requestAnimationFrame: suitable for animation
• ⇒ dvě nezávislé smyčky ⇒ two independent loops

var dirty = false;

var simulate = function() {    /* setTimeout(simulate, 1000/60); */
	if (...) { dirty = true; }
}

var animate = function() {     /* requestAnimationFrame(animate) */
	if (!dirty) { return; }
	dirty = false;
	redraw();
}

Canvas – špatné nápady

Canvas – bad ideas

• Mazání: Clearing: fillRect, clearRect, width
• Více canvasů přes sebe: ano, ale jen v některých případech Multiple overlaid canvases: yes, but only in certain scenarios
• Kreslení mimo DOM / double-buffer Drawing offscreen / double-buffering

Audio

• Detekce Detection

  var supported = !!window.Audio && !firefox_on_linux

• Formát Format

  new Audio().canPlayType("audio/ogg") ? "ogg" : "mp3"

• Přehrávání Playback

  new Audio(file).play()

Network

Síťová komunikace

• Peer-to-peer vs. Client-server
• Autoritativní server Authoritative server
• Klient posílá jen stav klávesnice Client sends just keystrokes
• Server periodicky posílá fyzikální atributy lodí (každých 500msec) Server periodically updates relevant physics attributes (every 500msec)
• Predikce pohybu na klientu Client movement prediction

Network – server

Síťová komunikace – server

• WebSocket: obousměrný komunikační kanál WebSocket: bidirectional communication channel
• Nový TCP protokol postavený nad HTTP Upgrade New TCP protocol built atop an HTTP Upgrade
• Software: v8cgi – víceúčelové prostředí pro JS skriptování na serveru multi-purpose server-side JS scripting environment
• Identický JS kód pro server i klienta! Identical JS code runs at both server and client!

Miscellaneous

Ostatní

• Operátor modulo nezvládá záporné hodnoty Modulus operator does not handle negative values

  Number.prototype.mod = function(n) {
  	return ((this % n) + n) % n;
  }

• AI monkey-patching

  AI.prototype.init = function(ship) {
  	this.originalTick = ship.tick;
  	ship.tick = this.tick;
  }
  AI.prototype.tick = function() {
  	/* ... */
  	this.originalTick();
  }
  

Questions?

Prostor pro otázky