SlideShare a Scribd company logo
1 of 10
Optymalizacja grafiki oraz
 generowania grafiki na
   urządzena mobilne
Performance, a grafika
• Generlanie zawsze nalezy korzystad z trybu GPU
• Elementy graficzne powinny byc bitmapami
• Grafika wektorowa, to twój wróg
• Korzystanie ze smoothing nie ma wpływu, ale po co?
• Nie używamy cacheAsBitmap
• Zamykanie grafiki nawet w duże ilosci Sprite’ów nie ma
  wpływu na performance, o dziwo może ją poprawid
• Uproszczona i spłaszczona display lista
• Unikajmy tworzenia obiektów w locie
Współdzielenie grafiki
• Wszędzie gdzie to możliwe korzystajmy z jednej
  bitmapdata
• Ogromny wpływ na performance
• Do 150 obiektów jednocześnie, w
  płynnej, zindywidualizowanej animacji z użyciem
  TweenMax
Współdzielenie animacji
          „poklatkowej”

• Unikamy metody draw na rzecz copyPixel
• W przyp animacji poklatkowej, wszędzie gdzie to
  możliwe korzystajmy z jednej bitmapdata i wyłącznie
  w niej manipulujemy obrazem poprzez copyPixels
• Wówczas wszystkie inne elemnty współdzielące dane
  BitmapData będą animowane jednocześnie
• OGROMNY wzrost prędkości
• MINUS – wszystkie elementy animują się w
  jednakowym rytmie
Nie renderuj jeżeli nie musisz
• W przypadku gdy jakikolwiek element jest akurat poza
  sceną – visible = false
• Object Pooling – nie twórz obiektów w locie!
• Nie usuwaj obiektów w locie, chyba, ze na pewno już ich
  nie będziesz potrzebował
• Visible = false szybsze od removeChild();
Nie korzystaj z frameworków
      jeżeli nie musisz
Generowanie grafiki
Stwórz raz , korzystaj na
wszystkich urządzeniach!
Grafika wektorowa.
                  Tym razem przyjaciel.
public static function SpriteToBitmap(_class:*, _horizontal:Boolean =
true, _shadow:int = 0):Bitmap{
     var c:*;
     var bmp:Bitmap;
     if(spritesArr.indexOf(_class) == -1){
           generateNewBmpData();
     }else{
           var cn:int = spritesArr.indexOf(_class);
           bmp = new Bitmap(bmDatasArr[cn]);
     }
return bmp;
}
Grafika wektorowa.
                  Tym razem przyjaciel.
private static function generateNewBmpData(_class :*, _horizontal :Boolean, _shadow:int
) :void{
           var rescaleR:Number = _horizontal ? RESCALE_RATIO_W: RESCALE_RATIO_H;
           c = new _class();
           var mat:Matrix = new Matrix()
           mat.scale(rescaleR, rescaleR);
           var w:Number;
           var h:Number;
           w = c.width*rescaleR + _shadow* rescaleR;
           h = c.height*rescaleR+ _shadow* rescaleR;

         var bmd:BitmapData = new BitmapData(w, h, true, 0xfff);
         spritesArr.push(_class);
         bmDatasArr.push(bmd);
         bmd.draw(c, mat);
         bmp = new Bitmap(bmd);

}
Inne rzeczy na które warto zwrócid uwagę.
                GPU MODE
• Czas generowania
• Filtry w GPU
• Pamięd RAM

More Related Content

Featured

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 

Mobile graphics optimization

  • 1. Optymalizacja grafiki oraz generowania grafiki na urządzena mobilne
  • 2. Performance, a grafika • Generlanie zawsze nalezy korzystad z trybu GPU • Elementy graficzne powinny byc bitmapami • Grafika wektorowa, to twój wróg • Korzystanie ze smoothing nie ma wpływu, ale po co? • Nie używamy cacheAsBitmap • Zamykanie grafiki nawet w duże ilosci Sprite’ów nie ma wpływu na performance, o dziwo może ją poprawid • Uproszczona i spłaszczona display lista • Unikajmy tworzenia obiektów w locie
  • 3. Współdzielenie grafiki • Wszędzie gdzie to możliwe korzystajmy z jednej bitmapdata • Ogromny wpływ na performance • Do 150 obiektów jednocześnie, w płynnej, zindywidualizowanej animacji z użyciem TweenMax
  • 4. Współdzielenie animacji „poklatkowej” • Unikamy metody draw na rzecz copyPixel • W przyp animacji poklatkowej, wszędzie gdzie to możliwe korzystajmy z jednej bitmapdata i wyłącznie w niej manipulujemy obrazem poprzez copyPixels • Wówczas wszystkie inne elemnty współdzielące dane BitmapData będą animowane jednocześnie • OGROMNY wzrost prędkości • MINUS – wszystkie elementy animują się w jednakowym rytmie
  • 5. Nie renderuj jeżeli nie musisz • W przypadku gdy jakikolwiek element jest akurat poza sceną – visible = false • Object Pooling – nie twórz obiektów w locie! • Nie usuwaj obiektów w locie, chyba, ze na pewno już ich nie będziesz potrzebował • Visible = false szybsze od removeChild();
  • 6. Nie korzystaj z frameworków jeżeli nie musisz
  • 7. Generowanie grafiki Stwórz raz , korzystaj na wszystkich urządzeniach!
  • 8. Grafika wektorowa. Tym razem przyjaciel. public static function SpriteToBitmap(_class:*, _horizontal:Boolean = true, _shadow:int = 0):Bitmap{ var c:*; var bmp:Bitmap; if(spritesArr.indexOf(_class) == -1){ generateNewBmpData(); }else{ var cn:int = spritesArr.indexOf(_class); bmp = new Bitmap(bmDatasArr[cn]); } return bmp; }
  • 9. Grafika wektorowa. Tym razem przyjaciel. private static function generateNewBmpData(_class :*, _horizontal :Boolean, _shadow:int ) :void{ var rescaleR:Number = _horizontal ? RESCALE_RATIO_W: RESCALE_RATIO_H; c = new _class(); var mat:Matrix = new Matrix() mat.scale(rescaleR, rescaleR); var w:Number; var h:Number; w = c.width*rescaleR + _shadow* rescaleR; h = c.height*rescaleR+ _shadow* rescaleR; var bmd:BitmapData = new BitmapData(w, h, true, 0xfff); spritesArr.push(_class); bmDatasArr.push(bmd); bmd.draw(c, mat); bmp = new Bitmap(bmd); }
  • 10. Inne rzeczy na które warto zwrócid uwagę. GPU MODE • Czas generowania • Filtry w GPU • Pamięd RAM