Gry HTML5?

To proste!

Andrzej Mazur • @end3r • Enclave Games
Warszawskie Dni Informatyki, 24-25 marca 2015

Twórca gier HTML5

• Studio Enclave Games
• Konkurs js13kGames
• Spotkania Gamedev.js
• Newsletter Gamedev.js Weekly
• Strona domowa end3r.com
• Twitter @end3r
• GitHub end3r

Technologia?

...już dawno jest gotowa, serio.

Webowe API

Full Screen, Pointer Lock, Gamepad

Mobilne API

• Orientacja ekranu
• Wibracje
• Status baterii
• Telefon, SMS

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, ...

Wibracje

window.navigator.vibrate(200);

Orientacja ekranu

checkOrientation = function() {
	if(window.orientation == 0 || window.orientation == 180) {
		// "obróć urządzenie"
	}
	else {
		// "graj dalej"
	}
}

Widoczność

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

Narzędzia

Darmowe, łatwo dostępne, proste w użyciu

Pisanie kodu

Edytor: Notatnik, Sublime Text. IDE: Eclipse

Testowanie gry

Przeglądarka + wbudowane narzędzia

WebIDE

• Zarządzanie grami
• Edytor kodu
• Emulator Firefox OS
• Zdalne debugowanie

Frameworki

html5gameengine.com

Phaser

phaser.io

Darmowy, otwarte źródła na GitHubie

Porównanie

jsbreakouts.org

Wiedza

Artykuły, tutoriale, wpisy na blogach, dema, gry, pluginy, nagrania wideo, narzędzia, zasoby...

HTML5 Gamedev Starter

html5devstarter.enclavegames.com

Newsletter Gamedev.js Weekly

gamedevjsweekly.com

Społeczność

W razie pytań lub problemów

• Forum HTML5GameDevs.com
• Grupa Gamedev.js na Facebooku

Dystrybucja

Wydawcy, portale, strony, blogi, sieci społecznościowe...

Publikacja

Hosting jak dla stron internetowych

Wieloplatformowość

Smartfon, tablet, komputer, laptop, telewizor, lodówka...

Pakowanie do natywnych aplikacji

Phonegap, CocoonJS, Intel XDK, Ejecta

• 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

Wyślij grę do
Firefox Marketplace

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

Plik manifestu

{
    "name": "Moja nazwa gry",
    "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/

Instaluj bezpośrednio ze strony

var installapp = navigator.mozApps.install(manifestURL);
installapp.onsuccess = function(data) {
	// "Aplikacja została zainstalowana"
};
installapp.onerror = function() {
	// "Aplikacja NIE zastała zainstalowana,
	// sprawdź installapp.error.name po szczegóły"
}

Monetyzacja

• Płatne gry
• IAP
• Reklamy
• Freemium
• Licencje

Same dobre informacje