Моя пропозиція
Занадто багато маленьких PNG додадуть велику кількість накладних витрат на мережу (через розмір запитів HTTP, але також заголовок PNG, і, що ще важливіше, неможливість стиснутись ефективно). З іншого боку, один дуже великий PNG має недоліки, які потребує певного часу для завантаження, і йому потрібно постійно залишатися в пам'яті (40 мегабайт на 10000 плиток) у безперервному шматку пам'яті.
Я рекомендую середину: кілька PNG з розумним розміром, наприклад 1024 плитки розміром 32 × 32 . Може бути згруповано за темами (наприклад, PNG з лісовою плиткою, одна з гірською плиткою, інша з міською плиткою - я не знаю тему вашої гри, але ви розумієте).
Примітка про ефективність кешу
Через ефективність доступу до пам’яті ніколи не слід робити занадто широкі списки листів. Виблискуючі плитки із зображення розміром 128 × 8192 завжди будуть швидшими, ніж блимати від зображення 8192 × 128.
Уявіть, що ви хочете зафарбувати першу плитку на зображенні 8192 × 128. Для простоти припустимо, що 1 піксель - 1 байт. Перші два рядки пікселів викладені таким чином (комірки містять у байті їхнє число):
┌────┬────┬───┬────┬──────────┬─────┐
│ 0 │ 1 │...│ 31 │ .... │ 8191│ 1st line of pixels: bytes 0 to 8191
├────┼────┼───┼────┼──────────┼─────┤
│8192│8193│...│8223│ .... │16383│ 2nd line of pixels: bytes 8192 to 16383
├────┼────┼───┼────┼──────────┼─────┤
│ .. │ .. │...│ .. │ .... │ ... │
Тож для того, щоб зафарбувати перший рядок першого заголовка, двигун браузера витягне байти 0
до31
. Щоб зафарбувати другий рядок , він отримає байти 8192
до8223
і так далі, поки не буде 32-й рядок, 253952
в який253983
будуть отримані байти .
Загальна кількість оброблених байтів становитиме 32 × 32. Однак загальний діапазон пам'яті становить понад 253984 байт. У сучасному процесорі це означає 32 або 33 сховища кешу . На відміну від цього, якби зображення було 128 × 8192, діапазон пам’яті становив би лише 4000 байт, що означає не більше двох стійлів кешу.
Оскільки сьогоднішні процесори дуже швидкі, сховища кеш-пам'яті дуже дорогі і вивішують обчислення. Тож використання зображення 128 × 8192 замість зображення 8192 × 128 потенційно може бути в 8 разів швидшим, принаймні, теоретично. На практиці це буде залежати від того, як реалізується відблиск: можливо, що базовий двигун сам розбиває зображення на плитки, щоб зменшити проблему.
Це не легко пояснити правильно, і я не сподівався, що докладно розробити. Сподіваюся, це має сенс!