O'yin Uchun Ikonka va Spraytlar

1-qism: sprayt va ikonka tushunchasi, PNG, SVG va GIF formatlari

9-sinfGame Design4-hafta · 11-dars

Takrorlash: palitra

Kulrang test nimani tekshiradi?

Black & White qatlami value kontrastini ko'rsatadi. Bugungi ikonkalar ham shu palitradan bo'yaladi.

Ikonka

Interfeysdagi kichik, ma'noli rasm

Ikonka nima?

Ikonka — interfeysda obyekt, harakat yoki ma'lumotni ifodalovchi kichik grafik rasm (piktogramma).

Tez tushunish

Yurak — «jon» ekanini o'yinchi bir zumda biladi.

Ixchamlik

Murakkab tushuncha kichik joyda.

Til to'sig'i yo'q

Yaxshi ikonka har qanday tilda tushunarli.

Ikonkalar turlari

Tur	Vazifasi	Misol
Axborot	Holat haqida xabar	jon, chidamlilik, mini-xarita belgisi
Interaktiv	Bosiladigan tugma	do'kon, sozlamalar, pauza
O'yin (buyum)	O'yin buyumlari	qilich, zelye, kalit, tanga
Uslubiy	Vizual uslubni belgilaydi	minimalistik, realistik, multfilm
Bezak	Funksiyasiz chiroy	ramka burchaklari, yulduzchalar
Navigatsiya	Mo'ljal olish	strelka, kompas, «chiqish»

Qaysi tur? Bosib tekshiring

Tishli g'ildirak

bosing

Interaktiv — bosilsa sozlamalar ochiladi.

Yurak

bosing

Axborot — qancha jon qolganini bildiradi.

Kompas

bosing

Navigatsiya — olamda yo'nalish ko'rsatadi.

Yaxshi ikonka qoidalari

Oddiy siluyet

Ortiqcha detal yo'q, shakl aniq.

Kichikda tanilsin

32×32 px da tekshiring.

Bir xil uslub

To'plamda bir xil qalinlik va 10-dars palitrasi.

Sprayt

2D o'yin olamining «g'ishtlari»

Sprayt nima?

Sprayt — 2D o'yinda qahramon, obyekt yoki fon elementini ifodalovchi ikki o'lchovli tasvir yoki animatsiya.

Personajlar

Qahramon va dushmanlar: Mario, Luidji.

Obyektlar

Tanga, qurol, bonus.

Fon

Daraxt, tog', bino, taylsetlar.

Statik (tanga, daraxt) yoki animatsion (yuruvchi qahramon — bir nechta kadr).

Ikonka va sprayt farqi

Ikonka

UI qatlamida. Ma'lumot beradi yoki bosiladi. Animatsiya kamdan-kam.

Sprayt

O'yin olamida. Obyektni ko'rsatadi, harakatlanadi. Ko'pincha kadrlar bilan.

Rastr va vektor

Rastr — Photoshop, Aseprite. Vektor — Illustrator, Figma, Photoshop Shape qatlamlari.

Formatlar

PNG, SVG, GIF — qachon qaysi?

Formatlarni solishtiramiz

PNG — rastr

Sifat yo'qotmasdan siqish, to'liq shaffoflik (alpha). Qahramon, obyekt, tugmalar, sprayt sheet. Unity, Godot, Unreal yaxshi qabul qiladi.

SVG — vektor

Matnli XML fayl. Masshtablanadigan menyu ikonkalari, mini-xarita belgilari, veb-o'yin UI.

GIF — animatsiya

256 rang, shaffoflik faqat «bor/yo'q». Menyudagi kichik animatsiyalar.

JPG — sprayt uchun yaramaydi

Sifat yo'qotib siqiladi, shaffoflik yo'q. Faqat fotosurat fonlar.

Asosiy qoida

Sprayt → PNG

UI ikonka → SVG

Oddiy animatsiya → GIF

JPG'da qahramon atrofida oq to'rtburchak qoladi — shaffoflik yo'q.

Mini-test

Har qanday ekranda keskin qolishi kerak bo'lgan menyu ikonkasi uchun qaysi format?

SVG vektor: istalgan o'lchamga sifat yo'qotmasdan kattalashtiriladi.

Mini-test: shaffoflik

Qaysi formatda yarim shaffof (silliq) chetlar saqlanadi?

GIF'da piksel yo shaffof, yo shaffof emas. PNG har piksel uchun 256 darajali shaffoflik beradi.

O'lchamlar raqamda

ikonka ish o'lchami

tanilish sinovi

GIF chegarasi

Vositalar va kutubxonalar

Muharrirlar

Photoshop, Aseprite (piksel-art), Piskel (brauzerda, bepul).

Animatsiya: Spine, DragonBones (skelet).

Bepul assetlar

OpenGameArt, Kenney Assets, CraftPix Freebies, Itch.io.

PNG, SVG, GIF, PSD.

Litsenziyani o'qing: CC0 — erkin, CC-BY — muallifni ko'rsatish shart.

Birinchi ikonka: 128×128 px

1. Hujjat

128×128 px, 72 ppi, Background — Transparent.

2. Shakl

Custom Shape Tool (U), Shape rejimi, Shift — proporsiya.

3. Fill va Stroke

Palitradan asosiy rang, 4 px to'q kontur.

4. Hajm

Clipping Mask qatlamida yuqori chapga yorug'lik dog'i.

5. Kichikda tekshirish

32×32 nusxada ham taniladimi?

6. Eksport

Export As → PNG, Transparency yoqilgan → ikon_jon_128.png.

Nomlash qoidasi


tur_nom_o'lcham.png

ikon_jon_128.png
ikon_tanga_64.png
sprayt_qahramon_idle_32.png

Bo'sh joysiz, lotin harflarida — dvijok va jamoa uchun qulay.

Amaliy topshiriqlar 20 daqiqa

OsonSevimli o'yiningiz ekranidagi 6 ta ikonkani turlarga ajrating.

Oson5 ta vaziyat uchun format tanlang: PNG, SVG yoki GIF — sababi bilan.

O'rta128×128 shaffof fonli «jon» ikonkasi va PNG eksport.

QiyinBir uslubdagi 4 ikonkali to'plam, 32×32 da sinov.

Dars xulosasi

Ikonka

6 tur, oddiy siluyet, bir xil uslub.

Sprayt

Personaj, obyekt, fon; statik yoki animatsion.

Formatlar

PNG — sprayt, SVG — UI, GIF — oddiy animatsiya.

Uyga vazifa: 4 ta ikonka to'plami (PNG) va litsenziyali 1 ta bepul asset.

Keyingi dars: spraytlar chizamiz

Personaj va obyektlar uchun piksel-art spraytlar

4-hafta · 12-dars