View
4.236
Download
0
Category
Preview:
DESCRIPTION
Prezentacja z Mrrrocznych Sekretów Twórców Gier Komputerowych V, które odbyły się 15. marca 2012.
Citation preview
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
Recommended