8. Mobile Games Developer War 4: Online Camp
Tips
-Bekerjalah menggunakan layer ( Ctrl + Shift + N)
-Biasakan save selalu ( Ctrl + S )
-Atur sendiri shorcut kalian ( Edit > Keyboard Shortcut)
9. Mobile Games Developer War 4: Online Camp
LET’S DRAW !
- Buat gambar berdasarkan referensi yang telah kalian
kumpulkan
- Diskusi gambar yang sudah dibuat
11. Mobile Games Developer War 4: Online Camp
Definisi Pixel Art
Suatu bentuk seni digital, yang dibuat menggunakan software grafis raster, dimana
gambar akan diedit pada tingkat pixel.
Pixel art sering digunakan ketika game
komputer berbasis 2D pertama kali
muncul.
Lalu jarang digunakan ketika teknologi 3D
berkembang.
Sekarang dengan adanya game mobile
atau gadget seperti GBA, NDS, dll, pixel
art pun sering digunakan kembali
12. Mobile Games Developer War 4: Online Camp
Contoh Pixel Art
http://en.wikipedia.org/wiki/Pixel_art
http://www.ilmuwebsite.com/i
mages/pixelart/bots1.png
14. Mobile Games Developer War 4: Online Camp
Why Pixel Art
1. Pixel art cocok untuk game mobile yang memiliki resolusi layar yang kecil,
ketimbang menggunakan vector art yang di resize
2. Pixel art dapat menyerupai game 3D dengan menggunakan teknik isometric
3. Pixel art dapat menghemat ukuran file game, dengan menggunakan PNG – 8
Isometric
Non – isometric
15. Mobile Games Developer War 4: Online Camp
WORKSPACE
GIMP 2
• Small resolusi (100x100,etc)
• Pencil tool /Q (Scale : 1)
• Eraser tool /W( Hard edge )
• Create New layer (Ctrl+Shift+N)
PHOTOSHOP
• Preferences (Ctrl + K)
16. Mobile Games Developer War 4: Online Camp
WORKFLOW PIXEL ART ARTIST
Hindari jaggy (membuat garis terlihat tidak rata)
Muncul karena ada bagian yang Pastikan penambahan atau
lebih kecil atau lebih besar pengurangan line pada garis kurva
konsisten
Credit to Derek Yu (www.Derekyu.com)
17. Mobile Games Developer War 4: Online Camp
WORKFLOW PIXEL ART ARTIST
1. Membuat sketsa
2. Membuat Outline dari sketsa (Outline jangan terlalu kasar)
Credit to Derek Yu (www.Derekyu.com)
18. Mobile Games Developer War 4: Online Camp
WORKFLOW PIXEL ART ARTIST
3. Memberi warna dasar
JANGAN ! :
• Jangan gunakan warna gradient
• Jangan menggunakan warna yang terlalu
mirip dengan yang lainnya
Credit to Derek Yu (www.Derekyu.com)
19. Mobile Games Developer War 4: Online Camp
WORKFLOW PIXEL ART ARTIST
4. Shading :
Menentukan arah
sumber cahaya Shading Soft Shadow Highlights
Credit to Derek Yu (www.Derekyu.com)
20. Mobile Games Developer War 4: Online Camp
WORKFLOW PIXEL ART ARTIST
5. Dithering ( teknik untuk mendapatkan beberapa nuansa
tanpa menggukanan banyak warna)
Credit to Derek Yu (www.Derekyu.com)
21. Mobile Games Developer War 4: Online Camp
WORKFLOW PIXEL ART ARTIST
6. Menghaluskan Outline
Mengganti outline
menjadi highlight
mengganti warna outline hitam dengan
warna yang mendekati warna
sprite.Tingkat keterangan warna
Menghilangkan outline hitam
tergantung dari arah sumber cahaya
Credit to Derek Yu (www.Derekyu.com) Credit to natomic studio (www.natomic.com)
22. Mobile Games Developer War 4: Online Camp
WORKFLOW PIXEL ART ARTIST
8. Menambahkan anti alias ( menambahkan intermediary
colors untuk menghaluskan outline.)
Credit to Derek Yu (www.Derekyu.com)
23. Mobile Games Developer War 4: Online Camp
WORKFLOW PIXEL ART ARTIST
9. Finishing
THANKS TO DEREK YU =)
25. Mobile Games Developer War 4: Online Camp
SPRITE SHEET
• Animasi dari suatu karakter/objek
• Sprite yang satu yang sprite yang
lain harus memiliki ukuran yang
sama
26. Mobile Games Developer War 4: Online Camp
SPRITE SHEET (GIMP)
• Menggunakan SpriteSheet.scm
({GIMP-HOME}sharegimp2.0scriptsSpriteSheet.scm )
• Filters > Sprite-Sheet > Create From Layers.
• Jangan lupa image tiap layer lebarnya harus menyesuaikan
lebar layar ( Klik kanan layer >> Layer to image size)
• Save .png
27. Mobile Games Developer War 4: Online Camp
ANIMATION (.GIF)
• Preview spritesheet
• Filters > Animation > Playback
• Save Image :
1. File Type (GIF IMAGE)
2. Export File : Save As
Animation
3. One frame per layer
(replace)
28. Mobile Games Developer War 4: Online Camp
ANIMATION (.GIF)
• Preview spritesheet
• Filters > Animation > Playback
• Save Image :
1. File Type (GIF IMAGE)
2. Export File : Save As
Animation
3. One frame per layer
(replace)
29. Mobile Games Developer War 4: Online Camp
ANIMATION (.GIF)
• Preview spritesheet
• Filters > Animation > Playback
• Save Image :
1. File Type (GIF IMAGE)
2. Export File : Save As
Animation
3. One frame per layer
(replace)
30. Mobile Games Developer War 4: Online Camp
Pixel Art For Game Mobile
• Jangan menggunakan terlalu banyak warna
dalam 1 objek
• Kompresi file size bisa dilakukan dengan save
sebagai PNG-8 = 8/16/32 colors)
Files > Save for web & devices (Alt+Shift+Ctrl+S)
36. Mobile Games Developer War 4: Online Camp
Pixel Art For Game Mobile
• Gunakkan Dithering untuk mendapatkan suasana yang
berbeda-beda dengan warna yang disediakan
Credit to :
-kiwinuptuo-d38pbk5
-http://pixel.oceansdream.net
-spriteland.com
-http://www.wikihow.com
38. Mobile Games Developer War 4: Online Camp
Pixel Art For Game Mobile
• Jangan terlalu banyak menggunakan anti
alias
• Buatlah asset yang efektif/efesien
• Size keseluruhan game standarnya sekitar
500kb. Target dibawah 1mb
39. Mobile Games Developer War 4: Online Camp
Background – Paralax use layering
Layer 1 Layer 2 Layer 3 Layering
Sumber : spriters-resource.com
42. Mobile Games Developer War 4: Online Camp
• Untuk menyelesaikan materi, isi form di
link ini: http://bit.ly/KF6Pg4
• Untuk pertanyaan atau diskusi bisa
dilakukan di forum:
http://bit.ly/mgdw4forum
