SlideShare a Scribd company logo
1 of 18
Download to read offline
The Starling
Framework Game
   The Open Source
     Engine for Flash
Czy to w ogóle działa?
Stage3D nie wspiera:
• GPU nie obsługujące Pixel Shader wersja 2.x
• GPU ze sterownikami starszymi niż styczeń
  2008 (FP11.2)
• NVIDIA driver 8.17.11.9621 oraz 8.17.11.8267
• Mac - ATI Radeon X1600, ATI Radeon 2400,
• Mac - Firefox 3.6 i wcześniej, Mac OS X 10.5 i
  wcześniej
Jak sprawdzić brak wsparcia
sprzętowego ?
Starling.context.driverinfo.toLowerCase().indexOf(„software”)
                         == -1
Informacja dla
użytkownika/gracza
Jak dobrać się do klasy głównej z
poziomuDisplay List?

new Starling(StarlingGamePlay, Game.instance().stage);

var st:starling.display.Stage = Starling.current.stage;
starlingGamePlay = st.getChildAt(0) as StarlingGamePlay;
Łączenie Stage3D z Display
List
• Komputery stacjonarne – nie ma
  problemów
• Mobile – zjazd framerate do 30fps, zaleca
  się całkowitą rezygnację z Display Listy
Wmode – „direct” potencjalny
kłopot
Źródła problemów:
• Wszędzie gdzie nie odpowiadamy za
  osadzenie swf’a
• FGL - sprzedż gier na portale
• Facebook – zaleca korzystać zawsze gdy
  to możliwe z wmode – opaque,
  transparent
Korzystając z wmode – „direct” użytkownik
nie zobaczy żadnych komunikatów z
Facebook’a.
 http://developers.facebook.com/docs/hideflashcallback/


          JS hideflashcallback
Screenshot ze sceny Starling
var support:RenderSupport = new RenderSupport();
RenderSupport.clear(Game.instance().starlingGamePlay.stage.colo
r, 1.0);
support.setOrthographicProjection(760, 590);
Game.instance().starlingGamePlay.stage.render(support, 1.0);
support.finishQuadBatch();
var result:BitmapData = new BitmapData(760, 590, true);
Game.instance().starlingInstance.context.drawToBitmapData(result);
var bmp:Bitmap = new Bitmap(result);
+ screenshot z Display List
var displayListBmpData:BitmapData = new BitmapData(760, 590,
true, 0xffffff);
displayListBmpData.draw(Game.instance().stage);
var displayLBmp:Bitmap = new Bitmap(displayListBmpData);

container.addChild(starlingBmp);
container.addChild(displayLBmp);
Łączymy w całość
var endBmpData:BitmapData = new BitmapData(760, 590);
endBmpData.draw(container);
var endBmp:Bitmap = new Bitmap(endBmpData);
var pngBytes:ByteArray = PNGEncoder2.encode(endBmpData
var screenshotBase64:String = Base64.encode(pngBytes);

https://github.com/cameron314/PNGEncoder2/
Napisany w haxe, 5x szybszy od PNGEncodera z as3corelib

http://www.sociodox.com/base64.html
sociodox:     encode      : 260ms     decode: 255ms
as3Crypto     encode      : 6728ms    decode: 4098ms
Co po stronie
                JS
function facebookPost(arg){
        var objData = arg;
        FB.ui({method: 'feed‘, name         : objData.name,link:
objData.link,picture: objData.picture, caption: objData.caption,
description:objData.description
        },function(response) {
                 hideScreenshot();
                 if (response && response.post_id) {
                           //alert('Post was published.');
                           } else {
                 //alert('Post was not published.');
                 }
        });
        displayFlashScreenshot(objData.screenshot);
}
Co po stronie
                 JS
function displayFlashScreenshot(screenshotData) {
// Set the screenshot image data as a base64
//encoded data URI in the img src attribute
        document.getElementById('screenshotObject').src =
        'data:image/jpeg;base64,' + screenshotData;

      document.getElementById('flashContent').style.top = '-
10000px';  document.getElementById('imageContent').style.top =
'';
}
Dynamiczne kolorowanie
elementów
• Rzeczywiste odwzorowanie kolorów nastąpi wyłacznie
  na czystej bialej teksturze
• Wówczas w prosty sposób modyfikujemy właściwość
  color w obiekcie Image, np:

 var newCol:uint=
 Color.interpolateColor(0xff0000,0xFFFF00,_aimfactor);
 image.color = newCol;
Duże tekstury
• Ograniczenie rozmiaru do 2040px
• Można je obejść krojąc teksturę na mniejsze
  części i składając pozniej w calość
• Dla performance zawsze lepiej będzie dac
  wiecej małych elementów niż 1 duży
Maski
• http://wiki.starling-
   framework.org/extensions/clippedsprite
• Maska nie podlega rotacji
• Ma formę prostokąta
• Koordynowana względem współrzędnych sceny
 var sprite:ClippedSprite = new ClippedSprite();
 sprite.addChild(anotherObject); // set the mask rectangle in
 stage coordinates sprite.clipRect = new Rectangle(10, 10, 380
 280);
Starling MVC
• http://creativebottle.github.com/starlingMVC/
•
  Dependency Injection(DI)/Inversion of Control(IOC)
• View Mediation
• Event Handling
• Stays out of the way of your Starling game code
• Simple configuration
• Easily extended
• More utilities to help with your game code

More Related Content

Similar to The starling framework

Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]Andrzej Krzywda
 
TUATARA SHARES: Sieci neuronowe: wprowadzenie, teoria, praktyka
TUATARA SHARES: Sieci neuronowe: wprowadzenie, teoria, praktykaTUATARA SHARES: Sieci neuronowe: wprowadzenie, teoria, praktyka
TUATARA SHARES: Sieci neuronowe: wprowadzenie, teoria, praktykaTUATARA
 
Confitura 2018 - Sekretne życie jobów Sparkowych
Confitura 2018 - Sekretne życie jobów SparkowychConfitura 2018 - Sekretne życie jobów Sparkowych
Confitura 2018 - Sekretne życie jobów SparkowychMarcin Jasiński
 
Konrad Kokosa - Pamięć w .NET - od ogólu do szczegółu- 4developers2016
Konrad Kokosa - Pamięć w .NET - od ogólu do szczegółu- 4developers2016Konrad Kokosa - Pamięć w .NET - od ogólu do szczegółu- 4developers2016
Konrad Kokosa - Pamięć w .NET - od ogólu do szczegółu- 4developers2016PROIDEA
 
Maciej Węglarczyk: Optymalizacje aplikacji mobilnych
Maciej Węglarczyk: Optymalizacje aplikacji mobilnychMaciej Węglarczyk: Optymalizacje aplikacji mobilnych
Maciej Węglarczyk: Optymalizacje aplikacji mobilnychGameDesire Academy
 
AADays 2015 - Jak to zrobic w JavaScript
AADays 2015 - Jak to zrobic w JavaScriptAADays 2015 - Jak to zrobic w JavaScript
AADays 2015 - Jak to zrobic w JavaScriptJacek Okrojek
 
Optymalizacja aplikacji ASP.NET
Optymalizacja aplikacji ASP.NETOptymalizacja aplikacji ASP.NET
Optymalizacja aplikacji ASP.NETBartlomiej Zass
 
Michał Dec - Quality in Clouds
Michał Dec - Quality in CloudsMichał Dec - Quality in Clouds
Michał Dec - Quality in Cloudskraqa
 
Implementacja algorytmów na procesory kart graficznych
Implementacja algorytmów na procesory kart graficznychImplementacja algorytmów na procesory kart graficznych
Implementacja algorytmów na procesory kart graficznychKrzysztof Wegner
 
Using Red Gate SQL Doc for database documentation
Using Red Gate SQL Doc for database documentationUsing Red Gate SQL Doc for database documentation
Using Red Gate SQL Doc for database documentationMariusz Koprowski
 
Modularny JavaScript - meet.js
Modularny JavaScript - meet.jsModularny JavaScript - meet.js
Modularny JavaScript - meet.jsPatryk Jar
 
Worklety i magiczne interfejsy z przyszłości
Worklety i magiczne interfejsy z przyszłościWorklety i magiczne interfejsy z przyszłości
Worklety i magiczne interfejsy z przyszłościMarcin Gajda
 
Worklety i magiczne interfejsy z przyszlosci
Worklety i magiczne interfejsy z przyszlosciWorklety i magiczne interfejsy z przyszlosci
Worklety i magiczne interfejsy z przyszlosciThe Software House
 
Sieciowe serwery danych
Sieciowe serwery danychSieciowe serwery danych
Sieciowe serwery danychWGUG
 
Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!The Software House
 
Architektura serwera gier online
Architektura serwera gier onlineArchitektura serwera gier online
Architektura serwera gier onlineMaciej Mróz
 
System GRASS
System GRASSSystem GRASS
System GRASSWGUG
 
Nowości w zakresie bezpieczeństwa w SQL Server 2016
Nowości w zakresie bezpieczeństwa w SQL Server 2016Nowości w zakresie bezpieczeństwa w SQL Server 2016
Nowości w zakresie bezpieczeństwa w SQL Server 2016Kamil Nowinski
 

Similar to The starling framework (20)

Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
 
Mongodb with Rails
Mongodb with RailsMongodb with Rails
Mongodb with Rails
 
TUATARA SHARES: Sieci neuronowe: wprowadzenie, teoria, praktyka
TUATARA SHARES: Sieci neuronowe: wprowadzenie, teoria, praktykaTUATARA SHARES: Sieci neuronowe: wprowadzenie, teoria, praktyka
TUATARA SHARES: Sieci neuronowe: wprowadzenie, teoria, praktyka
 
Confitura 2018 - Sekretne życie jobów Sparkowych
Confitura 2018 - Sekretne życie jobów SparkowychConfitura 2018 - Sekretne życie jobów Sparkowych
Confitura 2018 - Sekretne życie jobów Sparkowych
 
Konrad Kokosa - Pamięć w .NET - od ogólu do szczegółu- 4developers2016
Konrad Kokosa - Pamięć w .NET - od ogólu do szczegółu- 4developers2016Konrad Kokosa - Pamięć w .NET - od ogólu do szczegółu- 4developers2016
Konrad Kokosa - Pamięć w .NET - od ogólu do szczegółu- 4developers2016
 
Maciej Węglarczyk: Optymalizacje aplikacji mobilnych
Maciej Węglarczyk: Optymalizacje aplikacji mobilnychMaciej Węglarczyk: Optymalizacje aplikacji mobilnych
Maciej Węglarczyk: Optymalizacje aplikacji mobilnych
 
AADays 2015 - Jak to zrobic w JavaScript
AADays 2015 - Jak to zrobic w JavaScriptAADays 2015 - Jak to zrobic w JavaScript
AADays 2015 - Jak to zrobic w JavaScript
 
Optymalizacja aplikacji ASP.NET
Optymalizacja aplikacji ASP.NETOptymalizacja aplikacji ASP.NET
Optymalizacja aplikacji ASP.NET
 
Michał Dec - Quality in Clouds
Michał Dec - Quality in CloudsMichał Dec - Quality in Clouds
Michał Dec - Quality in Clouds
 
Direct3D 9
Direct3D 9Direct3D 9
Direct3D 9
 
Implementacja algorytmów na procesory kart graficznych
Implementacja algorytmów na procesory kart graficznychImplementacja algorytmów na procesory kart graficznych
Implementacja algorytmów na procesory kart graficznych
 
Using Red Gate SQL Doc for database documentation
Using Red Gate SQL Doc for database documentationUsing Red Gate SQL Doc for database documentation
Using Red Gate SQL Doc for database documentation
 
Modularny JavaScript - meet.js
Modularny JavaScript - meet.jsModularny JavaScript - meet.js
Modularny JavaScript - meet.js
 
Worklety i magiczne interfejsy z przyszłości
Worklety i magiczne interfejsy z przyszłościWorklety i magiczne interfejsy z przyszłości
Worklety i magiczne interfejsy z przyszłości
 
Worklety i magiczne interfejsy z przyszlosci
Worklety i magiczne interfejsy z przyszlosciWorklety i magiczne interfejsy z przyszlosci
Worklety i magiczne interfejsy z przyszlosci
 
Sieciowe serwery danych
Sieciowe serwery danychSieciowe serwery danych
Sieciowe serwery danych
 
Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!
 
Architektura serwera gier online
Architektura serwera gier onlineArchitektura serwera gier online
Architektura serwera gier online
 
System GRASS
System GRASSSystem GRASS
System GRASS
 
Nowości w zakresie bezpieczeństwa w SQL Server 2016
Nowości w zakresie bezpieczeństwa w SQL Server 2016Nowości w zakresie bezpieczeństwa w SQL Server 2016
Nowości w zakresie bezpieczeństwa w SQL Server 2016
 

The starling framework

  • 1. The Starling Framework Game The Open Source Engine for Flash
  • 2. Czy to w ogóle działa? Stage3D nie wspiera: • GPU nie obsługujące Pixel Shader wersja 2.x • GPU ze sterownikami starszymi niż styczeń 2008 (FP11.2) • NVIDIA driver 8.17.11.9621 oraz 8.17.11.8267 • Mac - ATI Radeon X1600, ATI Radeon 2400, • Mac - Firefox 3.6 i wcześniej, Mac OS X 10.5 i wcześniej
  • 3. Jak sprawdzić brak wsparcia sprzętowego ? Starling.context.driverinfo.toLowerCase().indexOf(„software”) == -1
  • 5. Jak dobrać się do klasy głównej z poziomuDisplay List? new Starling(StarlingGamePlay, Game.instance().stage); var st:starling.display.Stage = Starling.current.stage; starlingGamePlay = st.getChildAt(0) as StarlingGamePlay;
  • 6. Łączenie Stage3D z Display List • Komputery stacjonarne – nie ma problemów • Mobile – zjazd framerate do 30fps, zaleca się całkowitą rezygnację z Display Listy
  • 7. Wmode – „direct” potencjalny kłopot
  • 8. Źródła problemów: • Wszędzie gdzie nie odpowiadamy za osadzenie swf’a • FGL - sprzedż gier na portale • Facebook – zaleca korzystać zawsze gdy to możliwe z wmode – opaque, transparent
  • 9. Korzystając z wmode – „direct” użytkownik nie zobaczy żadnych komunikatów z Facebook’a. http://developers.facebook.com/docs/hideflashcallback/ JS hideflashcallback
  • 10. Screenshot ze sceny Starling var support:RenderSupport = new RenderSupport(); RenderSupport.clear(Game.instance().starlingGamePlay.stage.colo r, 1.0); support.setOrthographicProjection(760, 590); Game.instance().starlingGamePlay.stage.render(support, 1.0); support.finishQuadBatch(); var result:BitmapData = new BitmapData(760, 590, true); Game.instance().starlingInstance.context.drawToBitmapData(result); var bmp:Bitmap = new Bitmap(result);
  • 11. + screenshot z Display List var displayListBmpData:BitmapData = new BitmapData(760, 590, true, 0xffffff); displayListBmpData.draw(Game.instance().stage); var displayLBmp:Bitmap = new Bitmap(displayListBmpData); container.addChild(starlingBmp); container.addChild(displayLBmp);
  • 12. Łączymy w całość var endBmpData:BitmapData = new BitmapData(760, 590); endBmpData.draw(container); var endBmp:Bitmap = new Bitmap(endBmpData); var pngBytes:ByteArray = PNGEncoder2.encode(endBmpData var screenshotBase64:String = Base64.encode(pngBytes); https://github.com/cameron314/PNGEncoder2/ Napisany w haxe, 5x szybszy od PNGEncodera z as3corelib http://www.sociodox.com/base64.html sociodox: encode : 260ms decode: 255ms as3Crypto encode : 6728ms decode: 4098ms
  • 13. Co po stronie JS function facebookPost(arg){ var objData = arg; FB.ui({method: 'feed‘, name : objData.name,link: objData.link,picture: objData.picture, caption: objData.caption, description:objData.description },function(response) { hideScreenshot(); if (response && response.post_id) { //alert('Post was published.'); } else { //alert('Post was not published.'); } }); displayFlashScreenshot(objData.screenshot); }
  • 14. Co po stronie JS function displayFlashScreenshot(screenshotData) { // Set the screenshot image data as a base64 //encoded data URI in the img src attribute document.getElementById('screenshotObject').src = 'data:image/jpeg;base64,' + screenshotData; document.getElementById('flashContent').style.top = '- 10000px'; document.getElementById('imageContent').style.top = ''; }
  • 15. Dynamiczne kolorowanie elementów • Rzeczywiste odwzorowanie kolorów nastąpi wyłacznie na czystej bialej teksturze • Wówczas w prosty sposób modyfikujemy właściwość color w obiekcie Image, np: var newCol:uint= Color.interpolateColor(0xff0000,0xFFFF00,_aimfactor); image.color = newCol;
  • 16. Duże tekstury • Ograniczenie rozmiaru do 2040px • Można je obejść krojąc teksturę na mniejsze części i składając pozniej w calość • Dla performance zawsze lepiej będzie dac wiecej małych elementów niż 1 duży
  • 17. Maski • http://wiki.starling- framework.org/extensions/clippedsprite • Maska nie podlega rotacji • Ma formę prostokąta • Koordynowana względem współrzędnych sceny var sprite:ClippedSprite = new ClippedSprite(); sprite.addChild(anotherObject); // set the mask rectangle in stage coordinates sprite.clipRect = new Rectangle(10, 10, 380 280);
  • 18. Starling MVC • http://creativebottle.github.com/starlingMVC/ • Dependency Injection(DI)/Inversion of Control(IOC) • View Mediation • Event Handling • Stays out of the way of your Starling game code • Simple configuration • Easily extended • More utilities to help with your game code