Tutorial Bohrtaag: Pixel Art Isometric Basics

[bohrtaag]

gila la maju korang!

+ froggy: ko nyer sprite ni giler detail gak. siap shading apa sumer. pasni  try buat sprite in isometric dan cuba limitkan kpd say, 30x30 pixel

+ skykids: ko nyer shading mmg smart ah, nmpk solid form2 tuh. dan aku ske tengok ko buat shadowcasting. dah maju dari kelas nih, aku plan nk ajar shadow casting dlm 2-3 kelas lagi wei

oh, dan thanx juga kpd e-j for the info.
korg mmg pawe!

[froggypapa]

30x30 ye?kecik betui..kena sahut cabaran nih!!hehe..sat lagi aku buat satu..

[bohrtaag]

nmpk cam ramai dh pickup dan go beyond dgn sindri! pawe2..

OK, sambung lagi. nmpk dh 2-3 pawe dh ni. dan sumer penuh dgn kaler. tu la yg best pun, kaler dlm pixel art. psl dgn kaler dan shading la akan menambah lagi ke3Dan isometric pixel art tu. so skang aku nk kasi tute
Shading dan Kaler (part 1) lak..

we continue where we were last wif the white box:


right, macam yg diceritakan oleh azarimy dalam tutorial Asas Pensel dia, utk shade bende 3D ni kene establish sumber cahaya.
biasanya kita set cahaya at an angle di mana senang nak nampak...
1)tang mana yang paling terang,
2)mana yg sedang dan
3)tang mana yang paling gelap.
..mcm kat bawah ni.

di atas ni aku set cahaya datang dari sudut atas, kanan.


Pilih value shade

setelah kita establish sumber cahaya dan mengenalpasti 3 jenis zon dgn penerimaan cahaya yang berbeza, sekarang kita boleh memilih kaler dgn shade yg berbeza utk diletakkan pada zon2 tersebut. macam apogee buat ada 5 tone kaler. which is good utk form dan shade yg complex. utk kotak basic ni, kita guna 3 shade of kaler je: 1)paling terang, 2)terang biasa, 3)gelap. and we get this:



Highlighting edges

Macam yg skykids buat kotak2 mula2 dia tu, garis yg menunjukkan bucu (vertex) diwarnakan dgn warna yg lebih cerah. ni bertujuan utk membawa kedepan lagi bucu tu supaya nmpk lebih timbul. secara x langsung, line hitam keliling form tu seakan menjadi profile line psl secara automatik dia jd lebih bold. biasa utk line ni org letak value yg paling terang berbanding dgn 3 shade tadi. or as in example aku ni, yg 2nd terang antara putih dan kelabu sedang. ada gak org buat vertex ni kaler lg gelap (cam skykids nyer shrubs kat depan terowong tu). kat sini bleh explore lagi pelbagai kombinasi kaler utk mendapatkan efek berbeza.
Kalo kaler vertex ni paling terang, dia seakan menunjukkan material objek tu cam berkilat, hence solid.


Colour
Dgn prinsip yg sama, bleh la buh kaler sesuka hati:


bleh la try kaler lak sapa2 yg baru nk try tu. questions are welcome as always.
stay tuned for next time di mana aku akan citre psl shading utk complex form dan shadow casting.

[ApOgEE]

oooo... itu macam ka abang Boh?... hehehe, kira tekaan aku betul juga la ye.. walaupun tak tepat... hehehhe

Terima kasih atas penerangan yang jelas...

Abang Boh, aku ada sikit kemusykilan ni:

1. Apa beza sprite dengan isometric pixel art tu? Air Sprite yang bergas tu ke?

2. Nanti akan ada tutorial buat isometric sprite juga ke?... 

[froggypapa]

Susah la nk buat org saiz 30x30 pix isometric..aku main terjah jadi camni je..bo tlg demo sket..

ni pesilat aku tadi..dah makin kecik..hehe..3

[Rokam82]

macam lukisan game!!!!!!!

[bohrtaag]

1. Apa beza sprite dengan isometric pixel art tu? Air Sprite yang bergas tu ke?

2. Nanti akan ada tutorial buat isometric sprite juga ke?... 

"sprite" slalunye character samada yg kita control atau dikawal computer dlm video game. X kisah la Mario ke, Ryu ke, Sonic ke, kalo game 2D, lukisan watak2 tu beserta dgn animation dia kita panggil sprite.


"isometric" pula merujuk kepada unjuran lukisan pixel tu yang membolehkan kita nampak 3 sisi sesuatu objek. Kalo Mario klasik dia hanya ada pandangan depan, so dia kira sprite yg "flat". Kalo Final Fantasy atau Ragnarok Online tu kira sprite yg isometric.

akan ada tutorial utk sprite ke? hmm.. mungkin!

[bohrtaag]

Susah la nk buat org saiz 30x30 pix isometric..aku main terjah jadi camni je..bo tlg demo sket..

hehee..aku pun x tau caner nk buat dlm size 30x30 tu! aku main bedal je kasi figure!

ni utk explanation aku td gak, amik contoh terdekat la, artwerk lama aku ni:

ha, yg org2 tu kita panggil sprite. dan diorg dilukis dlm unjuran isometri. dan saiz tiap org tu kalo x silap aku dlm 60x20 px

[froggypapa]

hehee..aku pun x tau caner nk buat dlm size 30x30 tu! aku main bedal je kasi figure!

chait!!!abg bobo tipu sayer..

nk tanya persoalan perkara sket bo,klu buat org kecik2 tu..agak2 ko sketch dulu ke atau main terus buat dah ok?lagi satu klu buat terus pakai ink hitam atau main color terus lagi senang?

pecah kaca pecah gelas..

[ApOgEE]

oooo... lepas ni, kira orang tu kita boleh animate kan juga la yer?

aku ada jumpa laman web yang ada banyak sprite percuma (bukan air Sprite)... sempoi jugak rupanya... hehehehe...


yang ni aku cuba2 la gerakkan guna Animated GIF dari GIMP ni heheheh


Terima kasih Cikgu Bohrtaag! Good info... harap-harap dapat la aku belajar nak design sprite pulak pasnih... hehehehe

[froggypapa]

tu mcm 3d je?x besh la 3d..kurg nmpak artistik..sprite yg best mcm dlm game fighting street fighter..paling cun street fighter alpha..KOF pun gila babes gak kan..

namun usaha apogee utk promote GIMP tu pun saya kagumi..hehe..cayalah..aku pernak guna gimp tu dulu,masa tu aku try install linux kat pc aku..bole lawan la photoshop 7..long live freeware!dok gitu?

hrp abg bobo bole teruskan tutorial ni..

aku janji akan emel air sprite utk kau bo..hehe..

[SkyKidS]

aku dh test wat kat GIMP... rase mudah la plak

[bohrtaag]

huu..giler arh pogee!
aku trus trang ckp nk animet x baper yakin. psl nk dpt movement dia nmpk convincing tu aku x mahir lagi.

[ApOgEE]

huu..giler arh pogee!
aku trus trang ckp nk animet x baper yakin. psl nk dpt movement dia nmpk convincing tu aku x mahir lagi.

ooo... takpe la, janji ajar aku buat sprite tu... yg aku animate tu aku donlod jer sprite percuma tu...

[bohrtaag]

burp! alhamdulillah kenyang makan sate xmas!
sprites nanti aku try dalami dlu, pastu kalo dh reti sket aku try wat tute eh.
meanwhile...
+++

Shading + Colour (part 2)

Kali ni aku sambung psl shading untuk bentuk yang lebih complex. Objek yang akan digunakan sbg contoh adalah olahan dari kotak basic yg kita guna untuk bahagian sebelum2 ni:

dari...


ke...



1st, kita tengok macamana untuk
Mengolah bentuk asas
Dari kotak asas tu, kita tandakan bahagian mana yg kita nak "potong". Aku randomly pilih 8x9x10 px dari bucu depan kotak tu dan lukis garis as if melukis bahagian yg ingin dikorek keluar (dlm garis merah):


Kemudian kita identify garisan yg perlu dibuang (garis merah):


dan padam utk mendapatkan:


senang je kan? teknik ni berguna kalo kita nk asas utk buat bentuk2 yg lagi complex. teknik ni kira umum dlm apa2 jenis lukisan pun. contohnye org mulakan ngan lakaran ellipse kasar seblum lukis kepala, atau guna primitive cube seblom membuat bentuk yg lebih advanced.

Shading modified form
Seperti seblum ni, kita establish sumber cahaya dr arah yg sama gak: atas, kanan. Juga kenalpasti sisi yg menerima cahaya:


Kemudian apply colour value yg sama pada sisi yg selari dgn satah tersebut:

dan kita akan dapat sebegini:


Perhalusi lagi lukisan dgn menukar warna garis vertex bucu dan garis benam. Kalo seblum ni vertex bucu diwarnakan dgn warna yg ke-2 terang, vertex benam (garis yg mana permukaan bersebelahannya melipat ke dalam) diwarnakan dgn warna ke-2 gelap maka terhasil la seperti di bawah ni:


Step yg ni agak simple krn ianya hanya sbg kesinambungan utk bahagian seterusnya yg lebih mencabar yakni shadow casting. Tapi basically lesson yg paling penting adalah permukaan pada sisi yg sama mempunyai nilai warna (shade) yg sama.

[bohrtaag]

test/teaser animated sprite:

[bohrtaag]

ok, sambung balik. subjek kali ni teknikal sket, as in kene kira2 pixel. teknik ni berguna untuk mendapatkan perletakan shadow yg betul atas permukaan. mmg meticulous, leceh, tp pd aku cam cool. bila dh ada sumber cahaya, ada shading berbeza utk surface, nk kasi lengkap lagi kene la ada...

Shadow Casting

Kita sambung dari objek dari bahagian lepas:

arah cahaya still sama- atas, kanan. untuk tujuan tutorial ni, kita bygkan cahaya dtg directly ke bucu kanan tu.

Mengira unjuran bayang
peratikan diagram bawah ni:

utk menentukan di mana bayang akan jatuh pada permukaan, kita kene tau ketinggian objek yg dilukis. vertex yg kaler hijau tu tingginya 10px. dari bucu atas tu, buat garis 45° seperti garis kaler biru tu sebanyak 8px.
formulanye d = h-2
di mana:
d = pjg garis unjuran bayang dlm pixel (biru)
h = ketinggian sisi dari permukaan(hijau)
so kalo ketinggian objek tu 10px, garis unjuran bayang dia adalah 10-2 = 8px.
kalo ketinggian objek tu 12px, garis unjuran adalah 10px dan sterusnye.
dari dasar vertex hijau tu, tarik garis merah sampai ke hujung garis biru tu. this is the edge of your shadow.

Tracing the shadow's edge onto the surface below
dari hujung garis merah tu, buat lagi satu garis bagi mewakili along the top vertex:

..sampai la ke surface tegak lagi satu, then garis tu naik balik along the perpendicular surface:

dan kita sudah dapatkan outline basic utk shadow kita.

[bohrtaag]

Warna garisan yg dilindungi bayang
Secara logiknya, warna garisan yg ditimpa bayang akan lebih gelap dari warna garisan yg selari dgnnye, tp di luar bayang. So pilih garisan yg ditimpa bayang:

dan tukar ke kaler yg lebih gelap (hitam misalnye, utk kaler ni), sambil mengisi kaler bayang dgn lagi satu shade of grey yg cerah sket dari shade yg paling gelap:

sket lagi, psl kat tgh tu x baper betul lagi.

Bayang pada permukaan perpendicular
kalo ikutkan sumber cahaya yg kita set, the light is at a slight angle. so kene ada sket shadow drop kat surface 2nd cerah tu:

buat garis 60° (merah) dari celah atas di mana kedua2 sisi tegak bertemu, sehingga bertemu dengan garis tegak bayang kita.
buang shadow yg terkeluar dari gari baru ni (biru) dan ganti dgn kaler asal surface tu:

et voila!


aku rasa pasni kalo aku buh gamba saje bleh paham la kot? psl prinsip dia sama je. korg kira la sindri pixel2 unjuran tu, aku dh buat img ni beso2 bagi senang nampak pixel.

[bohrtaag]

Finishing the Shadowcast





<-- saje gatal letak.

[chaku]

oo camtu ke nak unjurkn shadow...memerlukan keamatan yg tinggi...huhu