AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to...
Transcript of AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to...
![Page 1: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/1.jpg)
AGATE MOBILE GAME
DEVELOPER CAMP Day 3
![Page 2: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/2.jpg)
PIXEL ART
- Resize pixel : add or remove pixel
- Susah untuk di scale / stretch
![Page 3: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/3.jpg)
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)
![Page 4: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/4.jpg)
WORKFLOW PIXEL ART ARTIST
• Hindari jaggy (membuat garis terlihat tidak rata)
Credit to Derek Yu (www.Derekyu.com)
Muncul karena ada bagian yang lebih kecil atau lebih besar
Pastikan penambahan ataupengurangan line pada garis
kurva konsisten
![Page 5: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/5.jpg)
WORKFLOW PIXEL ART ARTIST
1. Membuat sketsa
2. Membuat Outline dari sketsa (Outline jangan terlalu kasar)
Credit to Derek Yu (www.Derekyu.com)
![Page 6: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/6.jpg)
WORKFLOW PIXEL ART ARTIST
3. Memberi warna dasar
Credit to Derek Yu (www.Derekyu.com)
JANGAN ! :• Jangan gunakan warna gradient• Jangan menggunakan warna yang terlalu mirip dengan yang lainnya
![Page 7: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/7.jpg)
WORKFLOW PIXEL ART ARTIST
4. Shading :
Credit to Derek Yu (www.Derekyu.com)
Menentukan arahsumber cahaya Shading Soft Shadow Highlights
![Page 8: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/8.jpg)
WORKFLOW PIXEL ART ARTIST
5. Dithering ( teknik untuk mendapatkan beberapa nuansa tanpamenggukanan banyak warna)
Credit to Derek Yu (www.Derekyu.com)
![Page 9: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/9.jpg)
WORKFLOW PIXEL ART ARTIST
6. Menghaluskan Outline
Credit to Derek Yu (www.Derekyu.com)
mengganti warna outline hitam denganwarna yang mendekati warna
sprite.Tingkat keterangan warnatergantung dari arah sumber cahaya
Mengganti outlinemenjadi highlight
Menghilangkan outline hitam
Credit to natomic studio (www.natomic.com)
![Page 10: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/10.jpg)
WORKFLOW PIXEL ART ARTIST
8. Menambahkan anti alias ( menambahkan intermediary colors untuk menghaluskan outline.)
Credit to Derek Yu (www.Derekyu.com)
![Page 11: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/11.jpg)
WORKFLOW PIXEL ART ARTIST
9. Finishing
THANKS TO DEREK YU =)
![Page 12: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/12.jpg)
http://www.pixeljoint.com/
![Page 13: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/13.jpg)
SPRITE SHEET
• Animasi dari suatu karakter/objek
• Sprite yang satu yang sprite yang lain harus memiliki ukuran yang sama
![Page 14: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/14.jpg)
SPRITE SHEET (GIMP)
• Menggunakan SpriteSheet.scm
({GIMP-HOME}\share\gimp\2.0\scripts\SpriteSheet.scm )
• Filters > Sprite-Sheet > Create From Layers.
• Jangan lupa image tiap layer lebarnya harusmenyesuaikan lebar layar ( Klik kanan layer >> Layer to image size)
• Save .png
![Page 15: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/15.jpg)
ANIMATION (.GIF)
• Preview spritesheet
• Filters > Animation > Playback
• Save Image :
1. File Type (GIF IMAGE)
2. Export File : Save As Animation
2. One frame per layer (replace)
![Page 16: AGATE MOBILE GAME DEVELOPER CAMP - …...WORKFLOW PIXEL ART ARTIST 6. Menghaluskan Outline Credit to Derek Yu () mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat](https://reader030.fdocuments.in/reader030/viewer/2022040601/5e906828b5d21c32ab03f87a/html5/thumbnails/16.jpg)
Thank You