16
AGATE MOBILE GAME DEVELOPER CAMP Day 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

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thank You