Sprayt Sheet va Atlas

O'yin uchun ikonka va spraytlar (3-qism): tayyorlash va optimallashtirish

9-sinfGame Design5-hafta · 13-dars

Takrorlash

Idle animatsiyaning 2-kadrida nima o'zgaradi?

Oyoqlar joyida qoladi, tana va bosh 1 px pastga — qahramon «nafas oladi».

Sprayt sheet nima?

Ko'p kadr — bitta fayl

Ta'rif

Sprayt sheet — bir nechta sprayt yoki animatsiya kadri bitta PNG faylda to'r ko'rinishida joylashgan rasm. Dvijok kerakli kadrni undan «kesib» oladi.

Animatsiya sheet

Bitta harakat kadrlari bir qatorda: idle, yurish, sakrash.

Atlas

Turli obyekt va ikonkalar bitta katta rasmda.

Alohida fayllar → bitta sheet

O'xshatish: fotoalbom

30 ta konvert

Har rasmni alohida ochish — vaqt ketadi, tartib yo'qoladi.

Bitta albom

Bir marta ochasiz, kerakli sahifani darhol topasiz.

Nega kerak?

Dvijok nuqtai nazaridan

Uch foyda

Bitta yuklash

Fayl bir marta yuklanadi — o'yin tezroq ochiladi.

Kam draw call

Bitta atlasdagi spraytlar birga chiziladi.

Tartib

Kadrlar ketma-ket, jamoaga tushunarli.

O'quv qo'llanma: «Draw call sonini kamaytirish uchun sprite atlaslaridan foydalaning».

Draw call nima?

Draw call

bosing

Dvijokning videokartaga «shuni chiz» degan bitta buyrug'i. Har buyruq vaqt oladi.

Mobil qurilma

bosing

Telefonda buyruqlar soni ayniqsa muhim: kam draw call — ravon o'yin va kam batareya sarfi.

Mini-test

Atlasning asosiy texnik foydasi qaysi?

Bitta fayl bir marta yuklanadi, bir atlasdagi spraytlar birga chiziladi.

Sheet tuzilishi

Katak, qator, padding, tayanch nuqta

Sheet anatomiyasi

O'lchamni hisoblash

kadr kengligi

kadr (eng uzun qator)

sheet kengligi

Kenglik = kadrlar × kadr kengligi · Balandlik = qatorlar × kadr balandligi. 2 ning darajalari (64, 128, 256) qulay.

Tayanch nuqta: oldin / keyin

2-kadrda qahramon 2 px yuqorida chizilgan — o'yinda har qadamda «sakraydi».

Gorizontal guide oyoq ostida, barcha kadrlar shu chiziqda — harakat silliq.

Photoshop amaliyoti

Idle va yurish sheetini yig'amiz

6 qadam

1. Hujjat

128×32 px (4 × 32), Background: Transparent.

2. Guide Layout

View → New Guide Layout: Columns 4, Gutter 0.

3. Kadrlarni joylash

12-dars guruhlarini nusxalab, Move Tool (V) bilan kataklarga. Snap yoqilgan.

4. Nomlash

Qatlamlar kadr_01…, guruh yurish.

5. Tekshirish

Oyoq chizig'i bir xil, kadrlar katakdan chiqmaydi.

6. Eksport

Export As → PNG, 100%, Transparency.

Yurish: 4 kadr

O'ng oyoq oldinda

Oyoqlar birga

Yurish: 4 kadr

O'ng oyoq oldinda

Oyoqlar birga

Chap oyoq oldinda

Oyoqlar birga

Oyoq oldinda bo'lgan kadrlarda tana 1 px pastda. Timeline: 4 kadr × 0.15 s.

Obyektlar atlasi

Pastga bosing: atlas qoidalari

Atlas qoidalari

16×16 katak

64×64 hujjatda 16 o'rin.

O'xshashlar birga

Pullar, zelyelar, kalitlar — alohida qatorlar.

Bitta uslub

Bir xil palitra, kontur va yorug'lik yo'nalishi.

Optimallashtirish

Yengil, tartibli, sifatli

5 qoida

Ortiqcha joy yo'q

Katak obyektga mos, lekin hammasi bir xil.

Nusxa kadr yo'q

Dvijokda kadr vaqtini uzaytiring.

Kam rang

16–32 rang — kichik fayl, yaxlit uslub.

PNG, 100%

Kattalashtirishni dvijok qiladi.

Aniq nom

tanga_aylanish_sheet_16x16.png

Dvijokda nima bo'ladi?


Unity: qahramon_yurish_sheet_32x32.png
  Texture Type : Sprite (2D and UI)
  Sprite Mode  : Multiple
  Filter Mode  : Point (no filter)
  Sprite Editor → Slice → Grid By Cell Size: 32 × 32
  Natija: qahramon_yurish_0 … qahramon_yurish_3

Bu Unity bo'limida amalda o'tiladi. Bugun asosiysi: teng katak bo'lsa, kesish bir bosishda.

Mini-test

Sheetdagi kadrlar 30, 32 va 34 px kenglikda. Nima bo'ladi?

Grid By Cell Size teng kataklarni kutadi — har xil kenglik kadrlarni yarmidan kesadi.

Amaliy topshiriqlar 30 daqiqa

OsonYurish 6 kadr × 32 px: sheet o'lchamini hisoblang.

OsonIdle 2 kadrdan 64×32 px sheet yig'ing.

O'rta4 kadrli yurish animatsiyasini chizib, 128×32 sheetga joylang.

Qiyin64×64 obyektlar atlasi (6+ obyekt) va hajm taqqoslash.

Dars xulosasi

Sheet va atlas

Ko'p kadr — bitta PNG fayl.

Tuzilish

Teng katak, qator, padding, tayanch nuqta.

Optimallashtirish

Kam rang, nusxasiz, 100%, aniq nom.

Uyga vazifa: idle + yurish sheet (128×64) va obyektlar atlasi (64×64).

Keyingi dars: tugmalar

UI dizayn (1-qism): tugmalar turlari va holatlari — Normal, Hover, Pressed

5-hafta · 14-dars