Studium przypadku: Craigen

Programowanie: Andrzej Mazur | Enclave Games

Grafiki: Robert Podgórski | BlackMoon Design

URL: https://marketplace.firefox.com/app/craigen

Historia Craigena

• Prosta, ale dopracowana gra
• Stworzona z pomocą ImpactJS
• Przygotowana i zoptymalizowana pod urządzenia Firefox OS
• Wysłana do Firefox Marketplace

Problemy?

• Audio
• Wydajność
• Monetyzacja
• Działanie offline

Audio?

Web Audio API!

Wydajne aplikacje?

• Brak warstwy pośredniej
• Dostęp do sprzętu z poziomu JS
• Dedykowane API

Monetyzacja?

• Płatne gry
• Płatne dodatki wewnątrz gier
• Wyświetlanie reklam
• Sprzedaż licencji

Offline?

Cache przeglądarki - pomocne narzędzia, np. localForage

Frameworki

• Buildery: GameMaker, Construct 2
• Kodowanie: ImpactJS, Phaser

Webowe API

• Gamepad
• Pointer Lock
• Fullscreen
• Storage
• Geolocation

Mobilne API

• Device orientation
• Vibration
• WebSMS
• Battery status
• WebBluetooth

Same dobre informacje

• Unreal Engine działa w przeglądarce
• Unity eksportuje do WebGLa
• Spil Games dostaje 5 MLN dolarów dofinansowania
• Portale z grami flash przechodzą na HTML5
• Zapotrzebowanie rośnie lawinowo

Firefox OS

• Mobily system operacyjny napisany w HTML5 i JavaScript
• Stworzony i rozwijany przez Mozillę
• Otwarte źródła dostępne dla wszystkich
• Platforma sprzętowa dla mobilnej Sieci

Fakty o Firefox OS

• 15 krajów (w tym Polska)
• 7 mobilnych operatorów
• 4 partnerów sprzętowych
• Celem rozwijające się rynki
• Alternatywa dla starych telefonów
• Tanie, przystępne smartfony

Typy aplikacji

• Zwykła strona internetowa (WWW)
• Uprzywilejowana strona (Hostowana)
• Zainstalowana aplikacja webowa (Spakowana)
• Certyfikowana aplikacja webowa (System)

Uprawnienia

"permissions": {
  "contacts": {
    "description": "Required for autocompletion in the share screen",
    "access": "readcreate"
    },
  "alarms": {
    "description": "Required to schedule notifications"
  }
}

Lista API

WebTelephony, Vibration API, WebSMS, Idle API, Screen Orientation, Settings API, Power Management API, Mobile Connection API, TCP Socket API, Geolocation API, WiFi Information API, Device Storage API, Contacts API, Mouse Lock API, Open WebApps, WebBluetooth, Network Information API, Battery Status API, Alarm API, Browser API, Time⁄Clock API, Web Activities, Push Notifications API, Permissions API, WebFM API, FileHandle API, Network Stats API, WebPayment, IndexedDB, Archive API, Ambient light sensor, Proximity sensor, SystemXHR, ...

Wibration API

window.navigator.vibrate(200);

Wibracje

Screen orientation

checkOrientation = function() {
	if(window.orientation == 0 || window.orientation == 180) {
		// "obróc swoje urządzenie"
	}
	else {
		// "możesz grać"
	}
}

Orientacja ekranu

Page visibility

document.addEventListener("visibilitychange", function() {
	if(document.hidden) {
		// "aplikacja jest niewidoczna"
	}
	else {
		// "aplikacja jest widoczna"
	}
})

Widoczność strony

Optymalizacja kodu

Rendering pikseli

ctx.drawImage(myImage, 0.3, 0.5);

Korzystaj z niewidocznego Canvasa

myEntity.offscreenCanvas = document.createElement(“canvas”);
myEntity.offscreenCanvas.width = myEntity.width;
myEntity.offscreenCanvas.height = myEntity.height;
myEntity.offscreenContext = myEntity.offscreenCanvas.getContext(“2d”);
 
myEntity.render(myEntity.offscreenContext);

Dodawaj moz-opaque do Canvasa

<canvas id="mycanvas" moz-opaque></canvas>

Skaluj Canvas transformacjami CSS3

var scaleX = canvas.width / window.innerWidth;
var scaleY = canvas.height / window.innerHeight;
 
var scaleToFit = Math.min(scaleX, scaleY);
var scaleToCover = Math.max(scaleX, scaleY);
 
stage.style.transformOrigin = "0 0";
stage.style.transform = "scale(" + scaleToFit + ")";

Warstwy na oddzielnych Canvasach

<div id="stage">
	<canvas id="ui-layer" width="480" height="320"></canvas>
	<canvas id="game-layer" width="480" height="320"></canvas>
	<canvas id="background-layer" width="480" height="320"></canvas>
</div>

<style>
#stage { width: 480px; height: 320px;
	position: relative; border: 2px solid black; }
canvas { position: absolute; }
#ui-layer { z-index: 3; }
#game-layer { z-index: 2; }
#background-layer { z-index: 1; }
</style>

Co dalej?

Skupiaj się na optymalizacji samego HTML5

Firefox OS to "tylko" platforma dla webowych aplikacji

Testowanie gry

App Manager

about:app-manager

Dystrybucja aplikacji

Wolność

Zainstaluj ze strony WWW

var installapp = navigator.mozApps.install(manifestURL);
installapp.onsuccess = function(data) {
	// "Aplikacja została zainstalowana"
};
installapp.onerror = function() {
	// "Aplikacja NIE została zainstalowana,
	// zajrzyj do installapp.error.name po więcej informacji"
}

Dynamiczne wyszukiwanie

Wiele platform do wyboru

Wrappery: Phonegap, CocoonJS, Intel XDK

Platformy: iOS, Android, Windows Phone, BlackBerry, Tizen, ...

HTML5 kontra natywne aplikacje?

W Firefox OS natywnym językiem jest JavaScript!

Firefox Marketplace

• Sklep dla Twoich aplikacji
• Spakowane lub hostowane
• Instalacja ze strony
• Niewielka konkurencja

Przygotuj gry pod Firefox OS

• To tylko HTML5!
• Nie musisz uczyć się nowego języka ani narzędzi
• Plik manifestu i formularz zgłoszeniowy

Plik manifestu

{
    "name": "Moja nzwa aplikacji",
    "description": "Tutaj jej opis",
    "launch_path": "/",
    "icons": {
        "128": "/img/ikona-128.png"
    },
    "developer": {
        "name": "Enclave Games",
        "url": "http://enclavegames.com"
    },
    "default_locale": "pl"
}							

Formularz

https://marketplace.firefox.com/developers/submit/

Promuj siebie i swoje gry

Platformy dystrybucji

Open HTML5 Games - openhtml5games.com

• MarketJS
• HTML5Games.com
• Kongregate
• Newgrounds
• FGL

Strony z informacjami

Gamedev.js Weekly - weekly.gamedevjs.com

• HTML5 Game Development
• HTML5 Game Devs forums

Wpisy i publikacje

• MobileTuts+, GamedevTuts+
• HTML5 Hub
• Build New Games
• Doctor HTML5 Games

Konkursy

js13kGames - js13kgames.com

• Global Game Jam
• Mozilla Game On
• Ludum Dare
• One Game a Month
• Node Knockout

Wydarzenia

Gamedev.js - gamedevjs.com

• onGameStart