Personaj va Obyekt Spraytlarini Chizish

O'yin uchun ikonka va spraytlar (2-qism): piksel-art, soya-yorug'lik, idle animatsiya

9-sinfGame Design4-hafta · 12-dars

Takrorlash

Qahramon spraytini qaysi formatda eksport qilamiz?

PNG to'liq shaffoflikni saqlaydi va o'yin dvijoklari uni yaxshi qabul qiladi.

Personaj va obyekt

Ikki xil talab, bitta uslub

Personaj va obyekt spraytlari

	Personaj	Obyekt
Misollar	qahramon, dushman, NPC	tanga, zelye, sandiq, kalit
Talab	xarakter, holatlar (idle, yurish, sakrash)	vazifasi bir qarashda tushunilsin
Animatsiya	deyarli doim	oddiy (aylanish, yaltirash) yoki yo'q
Rang	eng yuqori kontrast	rang kodlash: oltin — tanga, qizil — jon

Sprayt yaratishning 6 bosqichi

1. Uslub va o'lcham

Qahramon 32×32, mayda obyekt 16×16. Bitta masshtab.

2. Siluyet

Bitta to'q rang: bosh, tana, qo'l-oyoq, o'ziga xos detal.

3. Flat ranglar

Palitradan har qismga bitta rang, jami 4–6.

4. Soya va yorug'lik

Manba yuqori chapda, hue shifting bilan.

5. Kontur

1 px, eng to'q rangdan (qora emas).

6. Eksport va test

Shaffof PNG, o'yin fonida tekshirish.

Siluyet testi

Tanilmaydi

Qora dog' — kimligi noma'lum, detallar yo'qoladi.

Tanilishi

Shlyapa, qilich, katta bosh — qora rangda ham kimligi aniq.

Siluyet qora rangda ham tanilsa — dizayn yaxshi.

Photoshop va piksel-art

Har bir piksel — ataylab

Photoshop sozlamalari

Piksel to'ri

Preferences → Guides, Grid & Slices → Gridline Every 1 pixel.

View → Show → Grid (Ctrl + ').

Pencil Tool, 1 px

Shift + B bilan almashtiriladi. Brush emas — u chetlarni xiralashtiradi.

Eraser va Bucket

Eraser — Mode: Pencil. Paint Bucket — Anti-alias o'chiq.

Nearest Neighbor

Kattalashtirishda piksellar keskin qoladi.

Brush yoki Pencil?

Brush Tool

bosing

Anti-aliasing — chetda yarim shaffof «xira» piksellar. Piksel-art uchun yaramaydi.

Pencil Tool

bosing

Qattiq chet: har bosish — aniq bitta piksel. Piksel-art asbobi.

Piksel-art qoidalari

Bir piksel — bir qaror

Har piksel ataylab qo'yiladi.

Jaggies'dan qoching

Chiziq bo'laklari tekis: 2-2-2 yoki 3-2-1.

Orphan piksel

Yolg'iz piksel — shovqin, o'chiring.

Doubles

2 px qalinlashgan konturni 1 px ga tushiring.

Kam rang

Qahramon 4–6, sahna 16–32 rang.

Bitta manba

Yorug'lik barcha spraytlarda yuqori chapdan.

Chiziq ritmi

Mini-test

Hech narsaga ulanmagan yolg'iz piksel qanday ataladi?

Orphan piksel shovqin hosil qiladi — uni o'chirish kerak.

Qahramon va obyektlar

32×32 namunasi qatlamlar bilan

Qahramon: 5 qatlam


Qatlamlar (pastdan yuqoriga):
  01_siluyet   - to'q ko'k-binafsha, keyin yashiriladi
  02_flat      - asosiy ranglar
  03_soya      - soyalar (Clipping Mask)
  04_yoruglik  - yorug'lik dog'lari (Clipping Mask)
  05_kontur    - 1 px kontur

Nisbat: bosh ~12 px, tana ~10 px, oyoq ~8 px, tepada va pastda 1 px bo'sh joy. Ko'z — 1×2 px.

Proporsiya: 32 px qahramon

Obyekt spraytlari

Tanga 16×16

Oltin doira, to'q-jigarrang kontur, yuqori chapda oq yaltiroq.

Zelye 16×16

Shisha siluyeti, ichida qizil (jon) yoki moviy (mana), oq aks.

Sandiq 32×32

Yog'och, oltin qoplama, qulf — «ochish mumkin» signali.

Obyektlar personajdan oddiyroq va kamroq to'yingan (bonuslardan tashqari).

Idle animatsiya: 2 kadr

Guruh nusxasi (Ctrl + J)

Tana va bosh 1 px pastga

Timeline: 2 kadr × 0.5 s

Window → Timeline → Create Frame Animation, Looping: Forever. Oyoqlar joyida qoladi.

Eksport va test

PNG

100% — dvijok uchun, 800% — prezentatsiya (Nearest Neighbor).

Fon testi

10-dars lokatsiya fonida kulrang testdan o'tadimi?

Masshtab testi

Yonma-yon: tanga qahramondan kattami?

Kadrlar: sprayt_qahramon_idle_01.png, _02.png yoki namoyish uchun GIF.

Mini-test

Piksel-art spraytni kattalashtirishda qaysi interpolyatsiya tanlanadi?

Nearest Neighbor yangi «oraliq» ranglar yaratmaydi — piksellar keskin qoladi.

Amaliy topshiriqlar 25 daqiqa

OsonQahramoningiz siluyetini 32×32 da bitta to'q rangda chizing.

OsonPhotoshop'ni sozlang: grid 1 px, Pencil, Nearest Neighbor.

O'rtaQahramonni 5 qatlamda yakunlang: flat, soya, yorug'lik, kontur.

QiyinTanga, zelye, sandiq to'plami va 2 kadrli idle animatsiya.

Dars xulosasi

6 bosqich

O'lcham → siluyet → flat → soya → kontur → eksport.

Piksel-art

Pencil 1 px, grid, jaggies, orphan, doubles.

Idle

2 kadr, 1 px siljish, 0.5 s.

Uyga vazifa: qahramon + 3 obyekt spraytlari va idle kadrlari (PNG).

Keyingi dars: sprayt sheet

Sprayt sheet (atlas) tayyorlash va optimallashtirish

5-hafta · 13-dars