ganymede - nowoczesne technologie w grach przeglądarkowych i mobilnych

Niższy próg wejścia dla gracza

Integracja z portalami gier bądź społecznościowymi (Facebook)

Większy rynek

Bo inni (wielcy) robią dokładnie to

Moc obliczeniowa tabletów i telefonów już dorównała konsolom przenośnym

Wkrótce dorówna stacjonarnym

Stale rosnący rynek z własnym ekosystemem typu App Store, Google Play, Amazon Store

Gra dostępna wszędzie = więcej czasu na grę

Nowe interfejsy, pole do innowacji

Bo inni (wielcy) robią dokładnie to

Co oferują dzisiaj poszczególne technologie webowe?

Czy znajdują zastosowanie na urządzeniach mobilnych

Co będą oferować jutro?

Nie jest nową, rewolucyjną technologią

Formalnie jest kolejną wersją języka znaczników wzbogaconą m.in. o canvas, audio, video, storage, geolokalizację

Nie jest samowystarczalną platformą

Jako buzzword funkcjonuje do opisu grupy technologii: CSS3, SVG, JavaScript … WebGL

Problem rozszerzeń i wtyczek, dążenie do czystości aplikacji webowych

• http://occupyflash.org/

• http://occupyhtml.org/

Uniezależnienie od sklepów i systemów dystrybucji elektronicznej (szczególnie urządzenia mobilne - koniec przeglądarkowego Flasha mobilnego)

Canvas – grafika wektorowa

<canvas id= "myCanvas" width="200" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var canvasContext = canvas.getContext("2d"); canvasContext.fillStyle = "rgb(255, 0, 0)"; canvasContext.fillRect(10, 10, 200, 50); </script>

Canvas – grafika rastrowa

var spriteSheet = new Image(); spriteSheet.src = ("texture.png"); canvasContext.drawImage( spriteSheet, srcX, srcY, srcW, srcH, dstX, dstY, dstW, dstH);

var block = canvasContext.getImageData(0, 0, canvas.width / 2, canvas.height); for(var y=0; y<block.height; y++){ for(var x=0; x<block.width; x++){ block.data[4 * (block.width * y + x) + 3] = 128; } } canvasContext.putImageData(block, 0, 0);

OpenGL ES 2.0 w kontekście 3D canvasa

Interface JavaScript oparty na DOM

Mozilla -> Khronos Consortium -> Google

-/-> Microsoft (względy bezpieczeństwa)

<audio id="hitSfx" src="explosion.mp3"></audio> <script> document.getElementById('hitSfx').play(); document.getElementById('hitSfx').pause(); document.getElementById('hitSfx').volume = 0.3; </script>

<video src= "intro.webm" controls></video>

WebSocket - dwukierunkowa komunikacja po sockecie TCP (brak UDP)

Teoretycznie wspierany przez większość przeglądarek (nawet Safari w iOS od 4.2), praktycznie w najnowszej specyfikacji tylko przez trzy

Protocol Internet Explorer Firefox Chrome Safari Opera

hixie-75 4 5.0.0

hixie-76 hybi-00

4.0 (DISABLED)

6 5.0.1 11.00 (DISABLED)

hybi-06 HTML5 Labs dev

hybi-07 6.0

hybi-09 HTML5 Labs

hybi-10 IE10 developer preview 7 14

RFC 6455 11 16

Problemy standaryzacji (bezpieczeństwo WebGL i WebSocket)

Różnice w implementacji dla różnych przeglądarek, czyli odwieczne problemy web developera

Różna wydajność na różnych konfiguracjach sprzęt - przeglądarka (canvas, audio)

Mentalność programisty webowego a mentalność programisty gier (choćby i Flash)

JavaScript = duża swoboda = łatwo o błędy, miks kodu obiektowego i funkcyjnego

CEL: ulepszenie semantyki js

niemutowalne klasy

brak prototypów i literałów obiektów

opcjonalne silne typowanie

Maszyna wirtualna po stronie serwera

Po stronie klienta kompilacja do js zrozumiałego dla przeglądarek, ale nie koniecznie człowieka

Hello world kompiluje się do 17259 linii kodu…

CEL: ulepszenie składni js

wszystko jest mutowalne

wprowadza możliwość deklaracji klas, ale pozwala na ich późniejszą modyfikację

typowanie dynamiczne

Kompilacja do czytelnego i czystego kodu js

przykład

Ugruntowana technologia w produkcji gier przeglądarkowych

Bogate zasoby narzędzi do generacji treści oraz bibliotek wspomagających

Liczna, doświadczona baza developerska (czyżby?)

Wykorzystywana także w produkcji wysokobudżetowych tytułów pudełkowych

Uniezależnienie od platformy sprzętowej i przeglądarki (przynajmniej w teorii)

Gwarancja spójnego zachowania na różnych konfiguracjach sprzętowych

Stosunkowo niska fragmentacja, szybka penetracja kolejnych wersji (update w tle)

Łatwość designu, prototypowania i implementacji złożonych efektów i animacji

Duża ilość gotowych bibliotek i rozwiązań dla zastosowań takich jak efekty cząsteczkowe (Flint), fizyka (Box2D, Nape, jiglib), animacje (TweenLite) oraz frameworków (Flex, robotlegs, pureMVC)

Konieczność instalacji pluginu

Pokusa nadużywania Flasha, niewłaściwe zastosowania (nawigacja, galerie)

Powszechność a doświadczenie programistyczne designerów

Poleganie na CPU jeśli chodzi o renderowanie grafiki (obszary odrysowania a pełnoekranowe animacje)

Grafika wektorowa a bitmapy, movie clipy a sprite sheety

Powolność ActionScriptu

Brak bezwzględnych współrzędnych myszy, ograniczenia klawiatury w trybie pełnoekranowym

Stage3D

StageVideo Stage3D[0] Stage3D[1] Stage3D[N] Stage

Nispokopoziomowe API 3D w zależności od platformy będące warstwą abstrakcji dla OpenGL bądź DirectX

Oparte na specyfikacji OpenGL ES 2.0, z wieloma ograniczeniami (one plugin fits all)

• Shader model 2.0

• Limit ilości rejestrów

• 8 tymczasowych, atrybutów i zmiennych - interpolowanych vertex shader->pixel shader

• stałych: 128 dla vs i 28 dla ps

• Limit operacji odczytu z tekstury na pass

AGAL

Pixel Bender 3D

SwiftShader fallback

źródło: http://www.lidev.com.ar/agal-materials-in-minimole/

<languageVersion : 1.0;> vertex kernel Bulge < namespace : "AIF Test"; vendor : "Adobe"; version : 1; > { parameter float4x4 world < id : "world"; >; parameter float4x4 projection < id : "projection"; >; parameter float4x4 view < id : "view"; >;

input vertex float4 vertexPosition < id : "PB3D_POSITION"; >; input vertex float4 vertexNormal < id : "PB3D_NORMAL"; >; output float4 vertexClipPosition; void evaluateVertex() { float4 t = vertexPosition; vertexClipPosition = t * world; vertexClipPosition = vertexClipPosition * view; vertexClipPosition = vertexClipPosition * projection; } }

Język wysokiego poziomu, kompilowany do AGAL

Biblioteka z zestawem wrapperów i helperów

Rozwój wstrzymany przez Adobe, rozwiązania niezależne

Grafika 2D z akceleracją sprzętową – 60 FPS płynnej, pełnoekranowej animacji

Flash developer: to krok wstecz, gdzie moja Display Lista?!

Flash Display List -> iOS Sparrow Framework -> Starling Framework

Znana struktura sceny, MovieClip -> Image (SpriteSheet)

// create the vertices

var vertices:Vector.<Number> = Vector.<Number>([ -0.5,-0.5,0, 0, 0, // x, y, z, u, v -0.5, 0.5, 0, 0, 1, 0.5, 0.5, 0, 1, 1, 0.5, -0.5, 0, 1, 0]); // create the buffer to upload the vertices var vertexbuffer:VertexBuffer3D = context3D.createVertexBuffer(4, 5); // upload the vertices vertexbuffer.uploadFromVector(vertices, 0, 4); // create the buffer to upload the indices var indexbuffer:IndexBuffer3D = context3D.createIndexBuffer(6); // upload the indices indexbuffer.uploadFromVector (Vector.<uint>([0, 1, 2, 2, 3, 0]), 0, 6); // create the bitmap texture var bitmap:Bitmap = new TextureBitmap(); // create the texture bitmap to upload the bitmap var texture:Texture = context3D.createTexture(bitmap.bitmapData.width, bitmap.bitmapData.height, Context3DTextureFormat.BGRA, false); // upload the bitmap texture.uploadFromBitmapData(bitmap.bitmapData); // create the mini assembler var vertexShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler(); // assemble the vertex shader vertexShaderAssembler.assemble( Context3DProgramType.VERTEX, "m44 op, va0, vc0\n" + // pos to clipspace "mov v0, va1" // copy uv ); // assemble the fragment shader

fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT, "tex ft1, v0, fs0 <2d,linear, nomip>;\n" + "mov oc, ft1" ); // create the shader program var program:Program3D = context3D.createProgram(); // upload the vertex and fragment shaders program.upload( vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode); // clear the buffer context3D.clear ( 1, 1, 1, 1 ); // set the vertex buffer context3D.setVertexBufferAt(0, vertexbuffer, 0, Context3DVertexBufferFormat.FLOAT_3); context3D.setVertexBufferAt(1, vertexbuffer, 3, Context3DVertexBufferFormat.FLOAT_2); // set the texture context3D.setTextureAt( 0, texture ); // set the shaders program context3D.setProgram( program ); // create a 3D matrix var m:Matrix3D = new Matrix3D(); // apply rotation to the matrix to rotate vertices along the Z axis m.appendRotation(getTimer()/50, Vector3D.Z_AXIS); // set the program constants (matrix here) context3D.setProgramConstantsFromMatrix(Co ntext3DProgramType.VERTEX, 0, m, true); // draw the triangles context3D.drawTriangles( indexBuffer); // present the pixels to the screen context3D.present();

// create a Texture object out of an embedded bitmap var texture:Texture = Texture.fromBitmap ( new embeddedBitmap() ); // create an Image object our of the Texture var image:Image = new Image(texture); // set the properties image.pivotX = 50; image.pivotY = 50; image.x = 300; image.y = 150; image.rotation = Math.PI/4; // display it addChild(image);

ND2D

Genome2D

API do obsługi ekranu dotykowego

API do obsługi akcelerometru i zmiany orientacji ekranu

Możliwość poszerzenia dostępu do natywnych API poprzez native extensions

Od AIR 3.2 pełne wsparcie dla Stage3D

Native Extensions

Alchemy

Kod natywny komunikujący się z aplikacją działającą w AVM

Wydajność aplikacji natywnej

Pełen dostęp do natywnych interfejsów

Zależny od urządzenia

Tylko AIR

Aktualnie dostępny do produkcji

Kod C++ -> LLVM -> bytecode AS, swc uruchamiany w AVM

Wydajność gorsza od natywnej

Działa wewnątrz sandboxa flash playera

Niezależny od platformy

Dostępny także w flash playerze

Poprzednia wersja eksperymentalna na Adobe Labs, płatna wersja produkcyjna dostępna wkrótce

Native Extensions Przykładowe zastowanie

Alchemy Przykładowe zastowanie

Pozyskanie szczegółów nt. konfiguracji

urządzenia

Obsługa wyspecjalizowanych funckji urządzenia (kompas, akcelerometr, Kinect)

Obsługa funkcji systemu i platformy (powiadomienia, płatności, Game Center)

Użycie biblioteki dostępnej w C++

Zwielokrotnienie wydajności zadań wymagających złożonych obliczeń np. symulacje fizyczne (~80% prędkości natywnej)

LUA w ActionScript - 100% zgodność z kodem serwera

Silnik fizyczny? Cały silnik gry? Czemu nie!

Rozszerzenie natywne (.ane)

Biblioteka natywna (.jar/.a)

Zasoby (grafika, teksty, dźwięki)

Interfejs rozszerzenia w ActionScript (.swc)

Aplikacja AIR

AIR runtime

System operacyjny urządzenia

źródło: http://e-musings.tumblr.com/post/11994829993/what-the-heck-are-air-native-extensions

Skupienie rozowoju platformy na grach i treściach video

http://gaming.adobe.com

Cyril - 2. kwartał 2012 Klawiatura w trybie pełnoekranowym

Zredukowane opóźnienia w generowaniu dźwięku

Progresywne strumieniowanie tekstur dla Stage3D

LZMA ByteArray

Dolores - 2. połowa 2012 ActionScript workers

Zaawansowane profilowanie – Project Monocle

Rozszerzenie wsparcia akceleracji do kart graficznych z lat 2005/2006

Poprawiona optymalizacja AS podczas targetowania iOS

Performance Index API

Next - nowa wersja ActionScript Typowanie statyczne bez potrzeby określania typu (zmartwienie

kompilatora), typowanie dynamiczne jako opcja

Typy numeryczne zorientowane pod kątem sprzętu

Optymalizacja kompilatora

Alternativa 3D

Alternativa Physics

Alternativa GUI

Tanki Online

Toolsy

Licencja komercyjna

Open Source

Rozwijany przez społeczność

Open Source

Wsparcie developera

BlackSun

ShaderLab

Penetracja Flash vs Unity - nokaut

Skrypty C#, JavaScript tłumaczone do ActionScript

Komunikacja z ActionScriptem w projekcie flashowym zawierającym komponent Unity i vice versa

Assets pipeline

Przykładowe gry

• Flash in a Flash

Epic citadel

W pełni grywalny level z UT3

Na rynku PC ruch w kierunku gier free to play

Dziękujemy za uwagę:)

www.ganymede.com.pl

Dziękujemy za uwagę:)

www.ganymede.com.pl

We are hiring!

www.ganymede.eu

All logos, trade marks and brand names used belong to the respective owners