Prezentacja z Mrrrocznych Sekretów Twórców Gier Komputerowych V, które odbyły się 15. marca 2012.

3.  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

4.  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

7.  Co oferują dzisiaj poszczególne technologie
webowe?
 Czy znajdują zastosowanie na urządzeniach
mobilnych
 Co będą oferować jutro?

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

10.  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)

11.  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>

12.  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);

13.  OpenGL ES 2.0 w kontekście 3D canvasa
 Interface JavaScript oparty na DOM
 Mozilla -> Khronos Consortium -> Google
-/-> Microsoft (względy bezpieczeństwa)

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

15.  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 4.0
6 5.0.1 11.00 (DISABLED)
hybi-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

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

17. CEL: ulepszenie semantyki js CEL: ulepszenie składni js
 niemutowalne klasy  wszystko jest mutowalne
 brak prototypów i literałów obiektów  wprowadza możliwość deklaracji klas,
 opcjonalne silne typowanie ale pozwala na ich późniejszą
modyfikację
 typowanie dynamiczne
Maszyna wirtualna po stronie serwera
Po stronie klienta kompilacja do js
zrozumiałego dla przeglądarek, ale nie Kompilacja do czytelnego i czystego kodu
koniecznie człowieka js
Hello world kompiluje się do 17259 linii przykład
kodu…

20.  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

21.  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)

22. Konieczność instalacji pluginu
Pokusa nadużywania Flasha, niewłaściwe zastosowania
(nawigacja, galerie)
Powszechność a doświadczenie programistyczne designerów

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

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

25.  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

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

27.  Język wysokiego poziomu, kompilowany do AGAL
 Biblioteka z zestawem wrapperów i helperów
 Rozwój wstrzymany przez Adobe, rozwiązania niezależne
<languageVersion : 1.0;> input vertex float4 vertexPosition
vertex kernel Bulge <
< id : "PB3D_POSITION";
namespace : "AIF Test"; >;
vendor : "Adobe";
version : 1;
> input vertex float4 vertexNormal
{ <
parameter float4x4 world id : "PB3D_NORMAL";
< >;
id : "world";
>; output float4 vertexClipPosition;
parameter float4x4 projection
<
id : "projection"; void evaluateVertex()
>; {
parameter float4x4 view float4 t = vertexPosition;
<
id : "view"; vertexClipPosition = t * world;
>; vertexClipPosition = vertexClipPosition * view;
vertexClipPosition = vertexClipPosition * projection;
}
}

28.  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)

29. // create the vertices fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT,
var vertices:Vector.<Number> = Vector.<Number>([ "tex ft1, v0, fs0 <2d,linear, nomip>;n" +
-0.5,-0.5,0, 0, 0, // x, y, z, u, v "mov oc, ft1"
-0.5, 0.5, 0, 0, 1, );
0.5, 0.5, 0, 1, 1,
0.5, -0.5, 0, 1, 0]); // create the shader program
var program:Program3D = context3D.createProgram();
// create the buffer to upload the vertices
var vertexbuffer:VertexBuffer3D = context3D.createVertexBuffer(4, 5); // upload the vertex and fragment shaders
program.upload( vertexShaderAssembler.agalcode,
// upload the vertices fragmentShaderAssembler.agalcode);
vertexbuffer.uploadFromVector(vertices, 0, 4);
// clear the buffer
// create the buffer to upload the indices context3D.clear ( 1, 1, 1, 1 );
var indexbuffer:IndexBuffer3D = context3D.createIndexBuffer(6);
// set the vertex buffer
// upload the indices context3D.setVertexBufferAt(0, vertexbuffer, 0,
indexbuffer.uploadFromVector (Vector.<uint>([0, 1, 2, 2, 3, 0]), 0, 6); Context3DVertexBufferFormat.FLOAT_3);
context3D.setVertexBufferAt(1, vertexbuffer, 3,
// create the bitmap texture Context3DVertexBufferFormat.FLOAT_2);
var bitmap:Bitmap = new TextureBitmap();
// set the texture
// create the texture bitmap to upload the bitmap context3D.setTextureAt( 0, texture );
var texture:Texture = context3D.createTexture(bitmap.bitmapData.width,
bitmap.bitmapData.height, Context3DTextureFormat.BGRA, false); // set the shaders program
context3D.setProgram( program );
// upload the bitmap
texture.uploadFromBitmapData(bitmap.bitmapData); // create a 3D matrix
var m:Matrix3D = new Matrix3D();
// create the mini assembler
var vertexShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler(); // apply rotation to the matrix to rotate vertices along the Z axis
m.appendRotation(getTimer()/50, Vector3D.Z_AXIS);
// assemble the vertex shader // set the program constants (matrix here)
vertexShaderAssembler.assemble( Context3DProgramType.VERTEX, context3D.setProgramConstantsFromMatrix(Co
"m44 op, va0, vc0n" + // pos to clipspace ntext3DProgramType.VERTEX, 0, m, true);
"mov v0, va1" // copy uv // draw the triangles
); context3D.drawTriangles( indexBuffer);
// present the pixels to the screen
// assemble the fragment shader context3D.present();

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

33. ND2D Genome2D

35.  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

37. Native Extensions Alchemy
 Kod natywny komunikujący się z  Kod C++ -> LLVM -> bytecode AS, swc
aplikacją działającą w AVM uruchamiany w AVM
 Wydajność aplikacji natywnej  Wydajność gorsza od natywnej
 Pełen dostęp do natywnych interfejsów  Działa wewnątrz sandboxa flash playera
 Zależny od urządzenia  Niezależny od platformy
 Tylko AIR  Dostępny także w flash playerze
 Aktualnie dostępny do produkcji  Poprzednia wersja eksperymentalna na
Adobe Labs, płatna wersja produkcyjna
dostępna wkrótce

38. Native Extensions Alchemy
Przykładowe zastowanie Przykładowe zastowanie
 Pozyskanie szczegółów nt. konfiguracji  Użycie biblioteki dostępnej w C++
urządzenia  Zwielokrotnienie wydajności zadań
 Obsługa wyspecjalizowanych funckji wymagających złożonych obliczeń np.
urządzenia (kompas, akcelerometr, symulacje fizyczne (~80% prędkości
Kinect) natywnej)
 Obsługa funkcji systemu i platformy  LUA w ActionScript - 100% zgodność z
(powiadomienia, płatności, Game Center) kodem serwera
 Silnik fizyczny? Cały silnik gry? Czemu
nie!

39. Aplikacja AIR
Rozszerzenie natywne (.ane)
Zasoby (grafika,
teksty, dźwięki)
Interfejs rozszerzenia
w ActionScript (.swc)
Biblioteka natywna
(.jar/.a)
AIR runtime
System operacyjny urządzenia
źródło: http://e-musings.tumblr.com/post/11994829993/what-the-heck-are-air-native-extensions

41. Skupienie rozowoju platformy na grach i treściach video
http://gaming.adobe.com

42. Cyril - 2. kwartał 2012
 Klawiatura w trybie pełnoekranowym
 Zredukowane opóźnienia w generowaniu dźwięku
 Progresywne strumieniowanie tekstur dla Stage3D
 LZMA ByteArray

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

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

45.  Alternativa 3D  Open Source  Toolsy
 Alternativa Physics  Rozwijany przez  Licencja
 Alternativa GUI społeczność komercyjna
 Tanki Online

46.  Open Source
 Wsparcie developera
 BlackSun
 ShaderLab

47.  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

48.  Epic citadel
 W pełni grywalny level z UT3
 Na rynku PC ruch w kierunku gier free to play

51. Dziękujemy za uwagę:)
www.ganymede.com.pl

52. Dziękujemy hiring!
We are za uwagę:)
www.ganymede.com.pl
www.ganymede.eu
All logos, trade marks and brand names used belong to the respective owners