lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/bab iii.pdf · untuk...

68
Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP Hak cipta dan penggunaan kembali: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli. Copyright and reuse: This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Upload: others

Post on 25-Jan-2020

7 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP 

 

 

 

 

 

Hak cipta dan penggunaan kembali:

Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.

Copyright and reuse:

This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Page 2: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

BAB III

METODOLOGI

3.1. Gambaran Umum

Tugas akhir ini akan menghasilkan lima buah set puzzle dan kartu jajanan pasar

Indonesia yang dapat divisualisasikan dalam bentuk 3D pada sebuah aplikasi AR.

Setiap kepingan puzzle berisi gambar bahan dari jajanan pasar, dan ketika seluruh

kepingan puzzle disatukan, akan menghasilkan visualisasi 3D dari jajanan pasar

sesuai dengan bahan pembuatnya.

3.1.1. Gameplay

Terdapat 5 jenis kartu kue yang terdiri dari klepon, kue apem, kue mangkok,

nagasari, dan kue bugis. Setiap kartu kue memiliki warna yang berbeda, dan

masing-masing puzzle bahan-bahan kue harus tersusun sesuai dengan warna yang

ada pada kartu jajanan puzzle, sehingga dapat menghasilkan visualisasi 3D dalam

wujud AR dari jajanan pasar sesuai dengan bahan bakunya. Berikut adalah daftar

jajanan pasar dengan bahan-bahan yang terdapat dalam setiap kepingan puzzle:

Tabel 3. 1. Tabel Konten Puzzle

No. Jajanan Pasar Bahan-bahan

1 Klepon - Gula Merah

- Daun Pandan

- Tepung Ketan

- Air

- Daun Suji

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 3: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

- Kelapa

2 Kue Apem - Tepung Beras

- Tape Singkong

- Ragi

- Telur

- Santan

- Gula Pasir

3 Kue Mangkok - Pewarna Makanan

- Gula Pasir

- Air

- Ragi

- Tepung Beras

- Tape Singkong

- Tepung Terigu

4 Nagasari - Pisang

- Gula Pasir

- Santan

- Tepung Beras

- Daun Pisang

- Daun Pandan

5 Kue Bugis - Santan

- Kelapa

- Garam

- Daun Pisang

- Ketan Hitam

- Gula Merah

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 4: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

3.1.2. Posisi Penulis

Dalam tugas akhir ini, penulis berperan sebagai modeler, yang bertugas untuk

membuat visualisasi 3D dari rancangan visual yang sudah tersedia, sehingga dapat

diaplikasikan ke dalam AR. Proses visualisasi 3D ini terdiri dari proses modeling

dan texturing dari bahan-bahan dan jajanan pasar.

3.2. Tahapan Kerja

Tahapan kerja berisi tahapan-tahapan yang dikerjakan oleh penulis pada saat

pengumpulan data.

Gambar 3. 1. Skema Tahapan Kerja

Praproduksi Produksi Pascaproduksi

Konsep Visual &

Desain Layout

Puzzle

Research

Texturing

Modeling

Animation

VFx

Augmented Reality

Exporting Assets

+ marker

Final APK &

Printed Puzzle

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 5: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

3.2.1. Praproduksi

Dalam tahap praproduksi dimulai dengan membuat konsep dari hasil jadi jajanan-

jajanan pasar dan bahan-bahan pembuat jajanan pasar, berdasarkan referensi dari

gambar asli.

3.2.1.1. Konsep Visual

Konsep visual dari hasil jadi jajanan pasar adalah jenis visual stylized digital

painting sederhana yang imajinatif. Warna dan bentuk dari jajanan pasar

dan bahan-bahan menyesuaikan dengan bentuk dan warna asli dari jajanan

pasar dan bahan-bahannya. Pada jajanan pasar, setiap kue memiliki mata

dan mulut, yang bertujuan untuk menunjukkan sisi imajinatif dan membuat

karakter kue menjadi lebih hidup, dikenali, dan diingat oleh anak-anak.

Gambar 3. 2. Referensi Jajanan Pasar

Gambar 3. 3. Konsep Hasil Jadi Jajanan Pasar

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 6: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 4. Konsep Awal Bahan-bahan Pembuat Jajanan Pasar

3.2.1.2. Referensi

Dalam mengumpulkan data untuk tugas akhir ini, penulis menggunakan

metode studi existing, dengan mengumpulkan beberapa referensi kartu AR

untuk pembelajaran anak-anak. Referensi kartu AR tersebut menggunakan

model non-realis, yang disertai dengan animasi sederhana. Penggunaan low

poly modeling untuk menyesuaikan dengan platform yang digunakan yaitu

smartphone Android dan iOS, sehingga visualisasi 3D dalam AR dapat

dinikmati secara maksimal tanpa terbebani dari segi visualnya.

Gambar 3. 5. Referensi Kartu AR

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 7: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 6. Kartu Transportasi ABC

Referensi yang pertama adalah kartu AR ABC Transport dari studio

kuasar yang berguna untuk mempelajari jenis-jenis transportasi. Dalam

kartu ini, penggunaan style toon shading tampak dalam visualisasi model

3D kendaraan, yang dapat semakin menunjukkan bahwa set kartu ini

ditujukan untuk anak-anak. Penggunaan visual yang imajinatif juga tampak

dalam tampilan visual masing-masing model, yang tampak pada adanya

mata dan mulut pada setiap kendaraan.

Selain itu, tampilan dalam aplikasi ABC Transport dilengkapi

dengan gambaran dari kemudi kendaraan yang dapat digerakkan sesuai

dengan keinginan penggunanya. Pada aplikasi ini, setiap model 3D yang

muncul dari kartu memiliki suara sesuai dengan jenis kendaraannya.

Penggunaan User Interface seperti pada kartu AR ABC Transport ini

menarik untuk anak-anak, karena mereka dapat memahami bagaimana

wujud, gerakan, dan suara dari kendaraan.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 8: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 7. Wujud AR Kartu Transportasi ABC

Referensi selanjutnya adalah kartu AR Animal 4D+ dari Octagon

Studio, yang bertema binatang. Pada kartu ini tampak style yang lebih realis

namun tetap menggunakan model low poly. Kesan realis tersebut tampak

pada penggunaan tekstur yang lebih detail, sehingga sesuai seperti binatang

asli.

Gambar 3. 8. Kartu Animal 4D+

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 9: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 9. Wujud kartu AR Animal 4D+

Kartu ini juga disertai dengan adanya interaksi antara satu kartu

dengan kartu yang lainnya. Seperti pada contoh ketika kartu bergambar

bunga didekatkan dengan kartu bergambar lebah, maka akan muncul sebuah

animasi AR yang baru dari lebah yang sedang menghisap madu dari bunga.

Gambar 3. 10. Interaksi Antar Kartu AR Animal 4D+

Referensi yang terakhir adalah kartu AR Octaland 4D+ dari Octagon

Studio, yang bertema pekerjaan. Pada kartu ini tampak style visual yang

realis namun tetap tampak seperti kartun dan menggunakan model low poly.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 10: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 11. Kartu Octaland 4D+

Gambar 3. 12. Wujud AR Kartu Octaland 4D+

Berdasarkan riset studi existing didapatkan pula media lain berupa

buku cerita dongeng mengenai kuliner nusantara. Buku ini bertujuan untuk

memperkenalkan kuliner Indonesia melalui jalan cerita yang imajinatif,

sehingga dapat dinikmati oleh anak-anak. Visual buku dongeng tersebut

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 11: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

diilustrasikan menggunakan style digital painting dengan warna-warna

yang cerah dan kontras.

Gambar 3. 13. Buku Dongeng Kuliner Nusantara

Referensi modeling low poly yang digunakan adalah model low poly

yang memaksimalkan penggunaan tekstur untuk meminimalkan jumlah

polygon, juga referensi model-model 3D yang digunakan untuk AR dan

Virtual Reality (VR).

Referensi yang pertama adalah sebuah model low poly ramen, hal

ini tampak pada kurang halusnya sisi-sisi mangkok ramen tersebut. Model

ini memaksimalkan penggunaan tekstur untuk membentuk wujud mie,

sehingga mie dapat tampak lebih nyata dan berisi, tanpa harus menggunakan

banyak poly untuk membentuk wujud mie. Kemudian ditemukan pula set

model low poly makanan yang dapat digunakan untuk AR dan VR. Model-

model tersebut memiliki jumlah polygon dibawah 500, dan memanfaatkan

tekstur untuk membuat model menjadi lebih hidup dan menyerupai

makanan aslinya.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 12: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 14. Model Low Poly Ramen Memanfaatkan Tekstur

(https://67.media.tumblr.com/5f69e848de6749eb6fe04507d94232f6/tumblr_n0tsmjbfuo1r

x0figo1_500.png)

Gambar 3. 15. Set Model Low Poly Makanan Untuk AR dan VR

(https://www.cgtrader.com/3d-models/food/miscellaneous/cookie-boxes-low-poly)

3.2.1.3. Interaktivitas Permainan

Pada tahap ini pula, penulis merancang konsep gameplay dari kartu jajanan

pasar dan puzzle sehingga dapat dipahami oleh anak-anak. Penulis

menyusun layout puzzle yang akan digunakan dan memilih warna-warna

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 13: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

latar yang cenderung cerah untuk desain puzzle dan kartu jajanan pasar.

Pemilihan warna latar puzzle dan kartu juga berpengaruh pada pembacaan

marker AR. Kartu jajanan pasar berfungsi sebagai patokan warna untuk anak

dalam mencari kepingan puzzle.

Pada kartu jajanan pasar, terdapat AR berupa model seluruh bahan-

bahan pembuat kue yang ada pada kartu, yang tampak dengan perbandingan

ukuran aslinya. Setiap kepingan puzzle juga memiliki AR berupa model

bahan yang terdapat dalam ilustrasi pada puzzle. Ketika kepingan-kepingan

puzzle dengan warna yang sama, disusun menjadi satu kesatuan, maka akan

menghasilkan AR dari model jajanan pasar, sesuai dengan ilustrasi bahan-

bahan yang terdapat pada tiap kepingan puzzle.

Gambar 3. 16. Konsep Interaktivitas

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 14: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 17. Layout Puzzle dan Kartu Jajanan Pasar

3.2.2. Produksi

Dalam tahap produksi, dilakukan proses pembuatan ilustrasi jajanan pasar dan

bahan-bahannya berdasarkan referensi foto asli, juga dilakukan proses modeling,

UV mapping dan texturing dari aset-aset yang dibutuhkan berdasarkan ilustrasi-

ilustrasi tersebut.

Aplikasi 3DS Max digunakan untuk membuat seluruh model, melakukan

proses UV mapping dan pengaplikasian tekstur. Untuk proses texturing UV map,

penulis menggunakan program Adobe Photoshop. Bentuk setiap model dan

pewarnaan tekstur disesuaikan dengan style dan warna dari ilustrasi.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 15: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 18. Hasil Visualisasi 3D Jajanan Pasar dan Perbadingan Ukurannya

Gambar 3. 19. Hasil Visualisasi 3D Bahan-bahan dan Perbandingan Ukurannya

Modeling aset dibuat dengan jumlah poly serendah mungkin, dan dibatasi

pada batas jumlah polygon yaitu 1500. Pada beberapa model juga menggunakkan

tekstur alpha modifier smooth atau mesh smooth untuk menghaluskan sisi-sisi dari

setiap model, sehingga model dapat tampil secara lebih halus dan menarik.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 16: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Berikut adalah proses produksi model 3D dari hasil jadi jajanan pasar dan

bahan-bahan pembuatnya:

3.2.2.1. Klepon

Klepon merupakan jajanan pasar yang khas dengan bentuk bulatnya, warna

hijau cerah, dan parutan kelapa yang menyelimutinya. Oleh karena itu,

penggunaan warna hijau diterapkan dalam pembuatan ilustrasi dari klepon.

Gambar 3. 20. Foto Referensi Klepon

(http://1.bp.blogspot.com/AB6UmD7lcvc/VmLQ6Ru2V3I/AAAAAAAASY4/0gKG1H

Mjerw/s1600/resep%2Bklepon%2Bncc.jpg)

Gambar 3. 21. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Klepon

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 17: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 22. Pemisahan Badan Klepon dan Parutan Kelapa

Proses modeling klepon menggunakan dua bagian sphere yang

terpisah. Bagian dalam berwarna hijau untuk badan klepon dan bagian luar

untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat

lebih efektif untuk menghemat jumlah polygon dibandingkan dengan secara

satu persatu menempelkan plane ke badan klepon untuk menimbulkan

kesan parutan kelapa yang tidak beraturan. Oleh karena itu, untuk membuat

kesan parutan kelapa, pada objek parutan kelapa diberikan map alpha yang

transparan.

Gambar 3. 23. Tekstur Klepon dan Parutan Kelapa

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 18: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Pada texturing, proses unwrap UVW dilakukan kepada model

sehingga dapat diperoleh map UV yang kemudian dilakukan proses

pewarnaan sesuai dengan konsep visual dalam program Adobe Photoshop.

Material parutan kelapa disimpan ke dalam ekstensi file png dengan latar

transparan, agar dapat digunakan dalam program Unity. Jumlah polygon

model-model klepon adalah 780 atau 1560 tris. Terdapat pula animasi

dalam model klepon berupa ketiga karakter klepon yang melompat secara

bergantian dengan jumlah frame sebanyak 80 dan berulang (looping).

Jumlah frame ini menghasilkan animasi berdurasi 3 detik untuk

menunjukkan karakteristik klepon yang kenyal.

Gambar 3. 24. Modeling dan Texturing Klepon

3.2.2.2. Kue Apem

Kue apem memiliki ciri khas warna putih pada bagian atas dan warna coklat

pada bagian bawah, juga disertai dengan hiasan potongan daun pandan.

Penggunaan warna dalam ilustrasi mengambil referensi dari warna asli kue

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 19: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

apem yang dibuat lebih cerah dibandingkan kue aslinya. Potongan daun

pandan juga disertakan untuk menunjukkan karakteristik dari kue apem.

Gambar 3. 25. Foto Referensi Kue Apem

(http://www.buahatiku.com/wp-content/uploads/2016/01/Kue-Apem-Kukus.jpg)

Gambar 3. 26. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Kue Apem

Dalam modeling kue apem, modifier unwrap UVW diaplikasikan

pada model kue apem untuk mendapatkan map UVW, sehingga dapat

dilakukan proses texturing material untuk model kue apem. Pewarnaan map

menggunakan palet warna dari warna asli kue dan diwarnai sesuai dengan

ilustrasi yang ada.

Modifier mesh smooth digunakan untuk memperhalus sisi-sisi dari

model kue apem, sehingga dapat terbentuk sisi yang bulat seperti pada kue

apem asli. Jumlah polygon akhir dalam modeling kue apem adalah 368 atau

736 tris, dan masih berada di jumlah normal batas polygon untuk aplikasi

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 20: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

mobile. Terdapat animasi berulang sebanyak 100 frame berupa kue apem

yang melompat dan berusaha meniup potongan daun pandan. Animasi ini

untuk menunjukkan karakteristik kue apem yang cukup kenyal dan

potongan daun pisang yang ringan, juga menunjukkan sisi imajinatif dari

karakter kue apem.

Gambar 3. 27. Tekstur Kue Apem

Gambar 3. 28. Model Kue Apem Sebelum Menggunakan Modifier Mesh Smooth

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 21: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 29. Model Kue Apem Setelah Menggunakan Modifier Mesh Smooth

3.2.2.3. Kue Mangkok

Kue mangkok memiliki ciri khas dari warna yang menarik dan rasanya yang

manis. Kue mangkok biasanya berwarna merah cerah, merah muda maupun

oranye yang dapat menarik perhatian. Penggunaan warna pada ilustrasi kue

mangkok berdasarkan warna-warna asli kue, dan menggunakan paduan

warna dari warna merah.

Gambar 3. 30. Foto Referensi Kue Mangkok

(https://s-media-cache-

ak0.pinimg.com/originals/86/ac/d0/86acd0c7aa2bc5f313b24d7972d5500f.jpg)

Setelah proses penggambaran kue mangkok selesai, dilakukan

proses modeling dan texturing yang dibuat sesuai dengan ilustrasi. Pada

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 22: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

proses modeling, modifier mesh smooth digunakan untuk memperhalus

bentuk kue mangkok yang didominasi oleh sisi-sisi bulat. Jumlah total

polygon ketiga model kue mangkok adalah 750 atau 1500 tris.

Gambar 3. 31. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Kue Mangkok

Gambar 3. 32. Tekstur Kue Mangkok

Gambar 3. 33. Modeling dan Texturing Kue Mangkok

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 23: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Untuk proses texturing, menggunakan modifier unwrap UVW,

kemudian map diwarnai sesuai dengan warna yang ada pada ilustrasi, dan

diaplikasikan ke dalam model-model 3D. Terdapat animasi berulang berupa

setiap model yang memiliki gerakannnya masing-masing, sebanyak 90

frame. Animasi pada kue-kue mangkok bertujuan untuk menampilkan

karakteristik kue mangkok yang kenyal, dan menunjukkan sisi imajinatif

dari karakter kue mangkok.

3.2.2.4. Nagasari

Nagasari memiliki ciri khas pada adanya potongan buah pisang yang berada

pada bagian tengah kue, dan kue dibungkus dalam potongan daun pisang.

Ilustrasi nagasari dibuat berdasarkan referensi dari kue nagasari asli.

Gambar 3. 34. Foto Referensi Nagasari

(http://3.bp.blogspot.com/cnWVOYoU_yQ/VaWJft75yFI/AAAAAAAAOxg/5T0DTfhA

B4Q/s1600/resep-kue-nagasari-isi-pisang-manis.jpg)

Setelah proses ilustrasi nagasari selesai, proses modeling dan

texturing dilakukan. Pada proses modeling, modifier mesh smooth

digunakan untuk memperhalus bentuk nagasari. Modifier shell diberikan

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 24: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

pada plane daun pisang, agar kedua sisi dapat terbaca dengan baik dalam

Unity.

Gambar 3. 35. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Nagasari

Jumlah polygon akhir dalam modeling nagasari adalah 542 atau

1084 tris. Modifier unwrap UVW kemudian diaplikasikan pada model

nagasari, sehingga dapat proses texturing material dapat dilakukan.

Pewarnaan map menggunakan palet warna dari ilustrasi nagasari.

Pada model nagasari, digunakan 6 buah bones untuk daun pisang

untuk membantu dalam proses animasi. Animasi berulang sebanyak 70

frame berupa model kue nagasari yang melompat dan memantul ketika daun

pisang terbuka. Animasi selama 3 detik ini, bertujuan untuk menunjukkan

karakteristik dari nagasari yang kenyal.

Gambar 3. 36. Tekstur Nagasari dan Daun Pisang

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 25: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 37. Modeling dan Texturing Nagasari

3.2.2.5. Kue Bugis

Kue bugis merupakan jenis kue yang dibungkus oleh daun pisang. Ciri khas

kue bugis tampak pada warna dan bentuk yang berasal dari bahan baku

ketan hitam dan hasil dari pembungkusan menggunakan daun pisang yang

dibentuk segitiga.

Gambar 3. 38. Foto Referensi Kue Bugis

(https://id.pinterest.com/pin/385902261791481195/)

Penggunaan warna dan bentuk pada ilustrasi kue bugis berdasarkan

referensi kue bugis asli. Setelah proses penggambaran kue bugis selesai,

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 26: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

dilakukan proses modeling dan texturing yang dibuat sesuai dengan

ilustrasi.

Gambar 3. 39. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Kue Bugis

Pada model kue bugis, modifier mesh smooth digunakan untuk

memperhalus sisi-sisi kue bugis, dan modifier shell diberikan pada model

daun pisang. Model Kue bugis menggunakan bones sebanyak 6 buah yang

terdapat pada daun pisang, sehingga dapat membantu dalam proses animasi.

Total akhir jumlah polygon pada model kue bugis adalah 718 atau 1436 tris

dan animasi sebanyak 50 frame. Animasi berupa kue bugis yang melompat

dan memantul ketika daun pisang terbuka, untuk menunjukkan karakteristik

kue bugis yang cukup kenyal.

Gambar 3. 40. Tekstur Kue Bugis

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 27: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 41. Model Kue Bugis Sebelum Menggunakan Modifier Mesh Smooth

Gambar 3. 42. Model Kue Bugis Sesudah Menggunakan Modifier Mesh Smooth

3.2.2.6. Daun Pandan

Daun pandan memiliki ciri khas pada bentuk daun sejajar, dan cenderung

kaku. Dalam pembuatan ilustrasi daun pandan, bentuk dan warna yang

digunakan mengambil referensi dari daun pandan asli, sehingga wujud daun

pandan dapat terlihat dengan baik.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 28: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

. Gambar 3. 43. Foto Referensi Daun Pandan

(http://media.viva.co.id/thumbs2/2016/01/13/200791-0_641_452.jpg)

Gambar 3. 44. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Daun Pandan

Proses modeling daun pandan dilakukan dengan menggunakan

plane dan memanfaatkan map alpha dalam proses texturing, sehingga

penggunaan polygon dapat berkurang. Tekstur daun pandan berupa bentuk

daun pandan yang disesuaikan dengan ilustrasi daun pandan yang telah

dibuat sebelumnya. Kemudian tekstur diaplikasikan pada plane.

Gambar 3. 45. Tekstur Daun Pandan

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 29: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Modifier shell diaplikasikan pada model, sehingga, jumlah akhir

polygon adalah 288 atau 576 tris. Terdapat animasi berulang berupa daun

pandan yang berjatuhan secara bergantian, untuk menunjukkan karakteristik

daun pandan yang sedikit kaku dengan jumlah frame sebanyak 90.

Gambar 3. 46. Modeling dan Texturing Daun Pandan

3.2.2.7. Daun Pisang

Daun pisang pada umumnya berukuran besar dan memiliki tekstur yang

lentur. Sebagai pembungkus makanan, daun pisang dipotong menjadi

bentuk segi empat terlebih dahulu sehingga dapat membungkus makanan

dengan lebih rapi.

Gambar 3. 47. Foto Referensi Daun Pisang

(http://findfood.ru/attaches/product/dobavki/listja-banana.png)

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 30: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 48. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Daun Pisang

Proses visualisasi 3D daun pisang dimulai dengan pembuatan

ilustrasi daun pisang, daun pisang asli dijadikan sebagai referensi. Proses

visualisasi 3D daun pisang dimulai dengan pembuatan ilustrasi daun pisang,

daun pisang asli dijadikan sebagai referensi.

Kemudian dilakukan tahap modeling dengan menggunakan plane

dalam membentuk model daun pisang. Texturing model menggunakan map

alpha yang berwujud gambar daun pisang utuh, yang kemudian

diaplikasikan pada model. Modifier shell diaplikasikan pula ke dalam

model, untuk menambah sisi plane Jumlah polygon pada model 3D daun

pisang adalah 188 atau 376 tris, dengan total animasi berulang sebanyak 50

frame.

Gambar 3. 49. Tekstur Daun Pisang

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 31: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Animasi berupa daun pisang utuh yang kemudian terbelah menjadi

4 potongan daun pisang yang berbentuk segi empat, seperti bentuk daun

pisang untuk membungkus kue. Animasi ini untuk menunjukkan bagaimana

proses daun pisang digunakan untuk membungkus makanan.

Gambar 3. 50. Modeling dan Texturing Daun Pisang

3.2.2.8. Pisang

Pisang memiliki ciri khas pada warna kuning yang cerah. Pada pembuatam

ilustrasi pisang, pisang asli dijadikan sebagai sumber referensi utama untuk

bentuk dan warna dari ilustrasi pisang yang dihasilkan.

Gambar 3. 51. Foto Referensi Pisang

(https://laven01.files.wordpress.com/2015/01/banana4_s.jpg)

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 32: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 52. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Pisang

Model pisang terdiri dari model kulit pisang dan 6 buah model

potongan pisang, yang masing-masing model memiliki tekstur sesuai

dengan yang dibutuhkan. Modifier smooth digunakan pada model isi pisang

untuk memperhalus sisi-sisi model tanpa mengalami penambahan jumlah

polygon yang signifikan, sedangkan pada model kulit pisang diberi modifier

mesh smooth.

Gambar 3. 53. Tekstur Pisang

Bagian kulit pisang dilengkapi oleh bones yang terbagi menjadi 3

bagian set bones untuk membantu dalam proses animasi, karena animasi

pada pisang berupa animasi kulit pisang yang terbuka menjadi 3 bagian, dan

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 33: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

menunjukkan isi pisang. Jumlah akhir polygon pada model pisang adalah

799 atau 1598 tris, dengan animasi berulang sebanyak 120 frame.

Gambar 3. 54. Modeling Dan Texturing Pisang Sebelum Diberi Modifier Shell

Gambar 3. 55. Modeling Dan Texturing Pisang Sesudah Diberi Modifier Shell

3.2.2.9. Daun Suji

Daun suji digunakan sebagai zat pewarna hijau alami bersama dengan daun

pandan sebagai pemberi aroma. Tanaman ini memiliki ciri khas pada bentuk

daun yang sejajar dan lemas, juga memiliki batang yang kokoh.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 34: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 56. Foto Referensi Daun Suji

(https://ecs7.tokopedia.net/img/cache/200-square/product-

1/2016/5/27/1552227/1552227_c19feff6-eb2f-41ad-90fa-b53ba18cc2f6.jpg)

Dalam pembuatan ilustrasi daun suji, daun suji asli digunakan

sebagai referensi bentuk dan warna. Kemudian dilakukan proses modeling

daun-daun suji menggunakan plane dan modifier shell, juga map alpha

untuk texturing. Map alpha berwujud bentuk daun suji yang mengambil

referensi dari ilustrasi daun suji.

Gambar 3. 57. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Daun Suji

Pada model daun suji, jumlah polygon adalah 713 atau 1426 tris, dan

disertai dengan animasi berupa daun suji yang satu per satu berjatuhan dari

batangnya secara berulang sebanyak 120 frame. Animasi ini bertujuan

untuk menunjukkan karakteristik daun suji yang cukup kaku.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 35: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 58. Tekstur Daun Suji

Gambar 3. 59. Modeling dan Texturing Daun Suji

3.2.2.10. Garam

Referensi untuk garam mengarah pada wujud tempat garam yang sering

ditemui dalam kehidupan sehari-hari. Dalam pembuatan ilustrasi garam,

mengambil referensi dari tempat garam dari kaca, dengan tutup yang

disertai oleh lubang-lubang untuk mengeluarkan isi garam. Pada pembuatan

ilustrasi, digambarkan tempat garam terbuat dari plastik, yang juga disertai

dengan label bertuliskan garam, untuk semakin membantu anak-anak

mengenali ilustrasi garam.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 36: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 60. Foto Referensi Garam

(http://res.cloudinary.com/dk0z4ums3/image/upload/v1470370099/attached_image/janga

n-selalu-dimusuhi-manfaat-garam-juga-banyak-alodokter.jpg)

Gambar 3. 61. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Garam

Setelah ilustrasi selesai, garam kemudian divisualisasikan ke dalam

bentuk 3D. Dalam proses modeling, modifier mesh smooth kembali

digunakan untuk memperhalus sisi-sisi model. Tekstur pada garam dibuat

dengan mewarnai map UVW, untuk membuat bulatan-bulatan pada tutup

garam, dan agar tekstur pada model garam sesuai dengan ilustrasi.

Animasi pada model garam berupa model garam yang sedang

mengeluarkan butiran-butiran garam. Butiran-butiran garam tersebut

berperan sebagai visual effect sederhana pada model garam. Visual effect

dibuat dengan menggunakan plane yang diberi modifier shell, dan

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 37: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

memanfaatkan map alpha sehingga menghasilkan tekstur yang transparan.

Penggunaan plane dan map alpha lebih efektif untuk mengurangi jumlah

polygon, dan cukup ringan dalam penggunaannya, dibandingkan dengan

menggunakan particle system sebagai visual effect.

Gambar 3. 62. Tekstur Garam dan Butiran Garam

Jumlah total polygon pada model garam adalah 710 atau 1420 tris,

dengan animasi berulang sebanyak 60 frame. Animasi sebanyak 2 detik

yang berulang bertujuan untuk menunjukkan proses penuangan butiran

garam dari botol garam, dan menunjukkan karakteristik tekstur garam yang

berupa butiran-butiran halus.

Gambar 3. 63. Model Garam dan Visual Effect Butiran Garam

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 38: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

3.2.2.11. Gula

Dalam pembuatan ilustrasi gula, mengambil referensi dari pot gula yang

dapat ditemui dalam kehidupan sehari-hari. Tempat gula disertai dengan

label bertuliskan gula, untuk membantu anak-anak mengenali ilustrasi gula

tersebut.

Gambar 3. 64. Foto Referensi Gula

(http://sc01.alicdn.com/kf/HTB1v3t1KVXXXXaQXVXXq6xXFXXXZ/Terracotta-sugar-

Pot-with-lid.jpg_200x200.jpg) dan

(http://a3.cdn.whatstrending.com/post_items/images/000/023/065/large/spoon-full-of-

sugar-art.jpg)

Gambar 3. 65. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Gula

Gula kemudian divisualisasikan ke dalam bentuk 3D dan

memanfaatkan modifier mesh smooth untuk membentuk sisi bulat yang

sempurna. Texturing dengan menggunakan map UVW juga digunakan agar

dapat membuat model dapat sesuai dengan ilustrasi yang penulis ciptakan.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 39: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Pada model gula, terdapat animasi sederhana yang berulang sebanyak 90

frame animasi.

Animasi berupa gerakan ketika pot gula terbuka dan terdapat

tumpukan gula, serta sendok yang mengambil gula dari dalam pot. Ketika

sendok diangkat, terdapat visual effect sederhana berupa butiran-butiran

gula yang terjatuh dari atas sendok. Animasi ini dibuat untuk menunjukkan

karakteristik tekstur gula berupa butiran-butiran halus. Seperti pada model

garam, visual effect dibuat dengan menggunakan plane yang diberi modifier

shell, dan menggunakan map alpha untuk menghasilkan kesan butiran gula.

Jumlah total polygon pada model gula 648 atau 1296 tris.

Gambar 3. 66. Tekstur Gula dan Tekstur Butiran Gula

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 40: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 67. Modeling, Texturing, dan Visual Effect Gula

3.2.2.12. Kelapa

Kelapa yang digunakan sebagai referensi adalah kelapa yang sudah tua,

karena kelapa tua dapat diolah kembali menjadi kepala parut dan santan.

Kelapa parut digunakan sebagai penambah daya tarik visual dari jajanan

pasar, maupun menjadi isian dari jajanan pasar.

Gambar 3. 68. Foto Referensi Kelapa

(http://www.blueband.co.id/old-content/uploads/2016/01/10.jpg)

Ilustrasi kelapa yang terbelah dipilih untuk menunjukkan bagaimana

pemotongan kelapa dilakukan untuk mendapatkan parutan kelapa. Dalam

visualisasi 3D, penulis menambahkan model alat pemarut kelapa, mangkok,

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 41: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

serta hasil parutan kelapa. Pada model alat pemarut kelapa, texturing sangat

berperan dalam membentuk wujud alat pemarut kelapa.

Gambar 3. 69. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Kelapa

Selain itu, terdapat animasi sederhana berupa kelapa yang terbelah

kemudian mengalami proses pemarutan dan menjadi parutan kelapa.

Terdapat pula visual effect sederhana berupa efek butiran parutan kelapa

yang terbuat dari plane yang diberi modifier shell dan texturing dengan

menggunakan map alpha. Jumlah polygon akhir pada model kelapa adalah

530 atau 1060 tris, dengan animasi berulang sebanyak 130 frame. Animasi

bertujuan untuk menunjukkan bagaimana proses pembuatan parutan kelapa

secara singkat.

Gambar 3. 70. Modeling dan Texturing Kelapa

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 42: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 71. Tekstur Parutan dan Butiran Kelapa

3.2.2.13. Ketan Hitam

Ketan hitam dimanfaatkan sebagai bahan pewarna dan pemberi cita rasa

yang khas pada jajanan pasar. Ilustrasi ketan hitam mengambil referensi

wujud ketan hitam, yang ditampilkan dalam bentuk gunungan ketan hitam

yang berada dalam sebuah tempat kayu. Setelah ilustrasi selesai, proses

visualisasi 3D dilakukan. Model 3D dibentuk sesuai ilustrasi, kemudian

mengalami proses texturing.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 43: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 72. Foto Referensi Ketan Hitam

(http://3.bp.blogspot.com/-

8b5mUi10gKU/VXEJLzU2FFI/AAAAAAAACRM/PStvQbRbPsA/s1600/ketan%2Bhita

m.jpg)

Gambar 3. 73. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Ketan Hitam

Animasi sederhana yang berulang sebanyak 60 frame animasi

terdapat pada model ketan hitam, yang bertujuan untuk menunjukkan

karakteristik tekstur ketan hitam berupa butiran-butiran. Animasi berupa

sekop yang mengambil ketan hitam dan disertai dengan visual effect

sederhana berupa butiran-butiran ketan hitam yang terjatuh.

Visual effect dibuat dengan menggunakan plane yang diberi

modifier shell, dan untuk texturing pada plane menggunakan map alpha

untuk menghasilkan kesan butiran ketan hitam. Jumlah total polygon pada

model gula adalah 656 atau 1312 tris.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 44: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 74. Tekstur Ketan Hitam dan Butiran Ketan Hitam

Gambar 3. 75. Modeling dan Texturing Ketan Hitam

3.2.2.14. Ragi

Ragi digunakan untuk membuat kue menjadi mengembang. Dalam projek

ini bentuk bungkus ragi yang sering ditemui di pasaran menjadi referensi

utama dalam pembuatan ilustrasi untuk ragi.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 45: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 76. Foto Asli Bungkus Ragi

(https://image1ws.indotrading.com/s3/productimages/co30295/p217190/w300-

h300/9d5a968b-d967-4ec1-91cd-1313930d72daw.jpg)

Gambar 3. 77. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Ragi

Setelah ilustrasi ragi selesai, dilakukan proses visualisasi 3D ragi.

Pembuatan model menggunakan box dan memanfaatkan tekstur dalam

membentuk wujud bungkus ragi. Tekstur dibuat dengan mewarnai map

UVW menyerupai ilustrasi yang telah dibuat sebelumnya. Pada bagian ujung

bungkus ragi dibuat terpisah untuk kebutuhan animasi.

Animasi pada ragi berupa bagian atas bungkusan yang disobek

sehingga dapat mengeluarkan isi ragi yang berupa visual effect plane

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 46: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

dengan tekstur map alpha berupa butiran ragi. Animasi ini untuk

menunjukkan karakteristik tekstur ragi yang berupa butiran-butiran yang

tidak halus. Pada plane visual effect dan model bungkus ragi, diberikan

modifier shell. Sehingga, jumlah polygon akhir pada model ragi adalah 244

atau 488 tris, dengan jumlah animasi berulang sebanyak 100 frame.

Gambar 3. 78. Tekstur Bungkus Ragi dan Butiran Ragi

Gambar 3. 79. Modeling dan Texturing Ragi

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 47: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

3.2.2.15. Tepung Terigu

Dalam pembuatan ilustrasi tepung terigu, referensi karung tepung terigu

digunakan sebagai referensi utama. Pada ilustrasi, bungkus tepung terigu

berupa karung putih yang khas digunakan sebagai bungkus tepung terigu

dengan jumlah besar.

Gambar 3. 80. Referensi Tepung Terigu

(http://itpc-busan.kr/wp-content/uploads/2015/07/produk-bogasari.jpg)

Gambar 3. 81. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Tepung Terigu

Setelah ilustrasi tepung terigu selesai, kemudian dilakukan proses

modeling dan texturing, pada model, modifier mesh smooth juga

diaplikasikan. Modifier unwrap UVW diberi pada model untuk proses

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 48: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

texturing. Texturing model kemudian dilakukan dengan mewarnai UVW

map sesuai dengan ilustrasi yang ada.

Gambar 3. 82. Tekstur Tepung Terigu dan Butiran Tepung Terigu

Animasi pada tepung terigu dimulai dengan terangkatnya sekop

tepung, sehingga menjatuhkan butiran-butiran tepung terigu, yang bertujuan

untuk menunjukkan karakteristik tekstur tepung terigu yaitu berupa butiran-

butiran halus.

Gambar 3. 83. Modeling dan Texturing Tepung Terigu

Butiran tepung terigu merupakan visual effect sederhana dengan

menggunakan plane dan map alpha. Plane visual effect diberi modifier

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 49: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

shell, agar kedua sisi dapat terbaca dengan baik pada Unity. Jumlah total

polygon pada model adalah 737 atau 1474 tris, dengan animasi berulang

sebanyak 60 frame.

3.2.2.16. Gula Merah

Gula merah memiliki ciri khas yaitu berbentuk silinder dan setengah

lingkaran dengan warna merah bata atau coklat. Pembuatan ilustrasi gula

merah mengambil referensi dari bentuk dan warna gula merah asli. Gula

merah memiliki tekstur yang tampak kasar, sehingga bentuk ilustrasi gula

merah dibuat kasar dan cenderung kurang beraturan pada pewarnaannya.

Gambar 3. 84. Foto Referensi Gula Merah

(http://4.bp.blogspot.com/-

kau4fyns2DE/UI25Go69YuI/AAAAAAAAByA/WYYzPAFGNWo/s1600/gula.jpg)

Gambar 3. 85. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Gula Merah

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 50: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Pada proses modeling, vertex-vertex pada model dibuat kurang

beraturan sehingga dapat terlihat kesan kasar dari sisi-sisi gula merah,

modifier smooth juga diberikan pada model. Kemudian model diberi

modifier unwrap UVW sehingga dapat dilakukan pewarnaan tekstur sesuai

dengan ilustrasi. Jumlah total polygon pada model gula merah adalah 139

atau 279 tris. Animasi berulang pada gula merah menampilkan gula merah

yang terbelah dengan panjang frame sebanyak 50. Animasi ini untuk

menunjukkan karakteristik gula merah yang cukup keras.

Gambar 3. 86. Tekstur Gula Merah

Gambar 3. 87. Modeling dan Texturing Gula Merah

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 51: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

3.2.2.17. Santan

Santan digunakan sebagai salah satu bahan baku utama, dan pemberi rasa

gurih pada jajanan pasar, sehingga jajanan pasar dapat menjadi semakin

lezat. Bentuk santan pada projek ini mengambil referensi dari bentuk

bungkusan santan yang sering ditemui dalam kehidupan sehari-hari.

Gambar 3. 88. Referensi Bungkus Santan

(http://assets.klikindomaret.com/products/10022118/10022118_1.jpg)

Ilustrasi santan untuk marker berupa santan yang berada dalam

mangkok kayu. Kemudian, ilustrasi mengalami proses visualisasi 3D pada

program 3DS Max. Modeling bungkus santan dibagi menjadi 2 bagian

terpisah, yaitu bagian badan bungkus santan, dan bagian segel bungkus

santan sebagai tempat mengeluarkan isi santan.

Gambar 3. 89. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Santan

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 52: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 90. Tekstur Santan

Gambar 3. 91. Modeling dan Texturing Santan

Pada bagian segel bungkus santan, terdapat 4 buah bones yang

berperan dalam proses animasi, karena animasi pada santan berupa bungkus

santan yang seolah dirobek pada bagian segel, sehingga dapat mengeluarkan

isi santan. Isi santan terbuat dari box yang dibentuk menyerupai cairan yang

sedang dituang kesebuah tempat. Animasi ini untuk menunjukkan

karakteristik santan yang kental. Tekstur berperan sangat penting dalam

pembuatan bungkus santan, agar dapat menunjukkan bentuk dari bungkus

santan. Tekstur dibuat dengan mengaplikasikan modifier unwrap UVW,

kemudian mewarnai map UVW sesuai dengan ilustrasi. Total jumlah

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 53: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

polygon pada santan adalah 399 atau 798 tris, dengan animasi berulang

sebanyak 140 frame.

3.2.2.18. Pewarna Makanan

Pewarna makanan digunakan untuk membuat tampilan jajanan pasar

menjadi menarik. Ilustrasi untuk pewarna makanan berdasarkan referensi

botol pewarna makanan yang sering ditemui dipasaran, karena akan lebih

mudah untuk dikenali. Botol menggunakan warna merah muda, karena

hanya akan digunakan pada layout puzzle untuk kue mangkok, yang

memiliki tone warna serupa. Selain itu, untuk semakin memperjelas,

ilustrasi botol diberi label bertuliskan pewarna makanan.

Gambar 3. 92. Foto Referensi Pewarna Makanan

(http://images.sukamart.com/media/catalog/product/cache/1/thumbnail/9df78eab33525d0

8d6e5fb8d27136e95/d/s/dsc_0085_6.jpg)

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 54: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 93. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Pewarna

Makanan

Model 3D pewarna makanan terbagi menjadi 2 bagian, yaitu tutup

dan badan botol, agar dapat membantu dalam proses texturing. Animasi

pada model pewarna makanan berupa pewarna makanan mengeluarkan

tetesan pewarna yang berwarna merah muda, untuk menunjukkan

bagaimana cara untuk memberikan pewarna pada makanan. Tetesan ini

terbuat dari box yang diolah sehingga dapat menyerupai wujud cairan. Total

akhir jumlah polygon adalah 675 atau 1350 tris, dengan animasi sebanyak

80 frame.

Gambar 3. 94. Tekstur Pewarna Makanan

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 55: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 95. Modeling dan Texturing Pewarna Makanan

3.2.2.19. Telur

Telur berperan dalam pembuatan jajanan pasar yang dapat membuat tekstur

jajanan pasar menjadi lembut. Dalam pembuatan ilustrasi telur, telur asli

dijadikan referensi utama dari bentuk dan warnanya. Pembuatan ilustrasi

telur pada mulanya berwujud tiga buah telur utuh, dengan salah satu bentuk

telur yang telah dipecahkan.

Gambar 3. 96. Referensi Telur

(https://www.ngopy.com/content/images/20150930152014-tips-memilih-telur.jpg)

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 56: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 97. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Telur

Proses modeling telur dilakukan sesuai dengan ilustrasi, dan terdiri

dari 3 bagian utama, yaitu cangkang telur bagian atas, bagian bawah dan isi

telur. Model telur menggunakan modifier smooth untuk menghaluskan sisi-

sisi model. Pada bagian putih telur, diberikan bones sebanyak 4 buah.

Modifier unwrap UVW diberikan pada model cangkang telur untuk

mendapatkan map UVW sehingga dapat diwarnai sesuai dengan ilustrasi.

Gambar 3. 98. Tekstur Telur

Animasi pada model telur berupa telur yang dipecahkan sehingga

tampak bagian isi telur, yang menunjukkan cara untuk memecahkan telur.

Jumlah total polygon adalah 516 atau 1032 tris, dengan jumlah animasi

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 57: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

sebanyak 60 frame yang berulang. Durasi animasi selama 2 detik ini untuk

menunjukkan proses pecahnya telur.

Gambar 3. 99. Modeling dan Texturing Telur

3.2.2.20. Tape Singkong

Tape singkong pada jajanan pasar berfungsi untuk memberikan tekstur, rasa

dan aroma yang khas. Pada pembuatan ilustrasi tape, mengarah pada

referensi asli tape singkong, dari segi warna dan bentuk.

Gambar 3. 100. Referensi Tape Singkong

(http://resepkus.exe.bz/wp-content/uploads/2016/06/tape+singkong-2-500x479.jpg)

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 58: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 101. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Tape Singkong

Modeling dan texturing tape singkong mengacu pada ilustrasi.

Modifier mesh smooth, dan smooth digunakan untuk memperhalus sisi-sisi

model tape. Modifier unwrap UVW diaplikasikan pada model, sehingga

dapat dilakukan texturing sesuai dengan ilustrasi. Jumlah total polygon

model tape adalah 514 atau 1028 tris. Animasi berulang sebanyak 50 frame

berupa tape yang secara bergantian jatuh ke atas daun pisang, untuk

menunjukkan karakteristik tape singkong yang cukup kenyal, namun cukup

keras pula.

Gambar 3. 102. Tekstur Tape Singkong

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 59: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 103. Modeling dan Texturing Tape Singkong

3.2.2.21. Tepung Beras

Referensi untuk tempat tepung beras adalah baskom yang sering ditemui

dalam kehidupan sehari-hari, yang kemudian disatukan dengan gambar

tepung beras. Ilustrasi kemudian dibuat berdasarkan kedua referensi

tersebut.

Gambar 3. 104. Referensi Tepung Beras

(https://www.tokopedia.com/anekaperabot/baskom-murah-kode-175 dan

http://www.deyaza.com/wp-content/uploads/2015/09/membuat-tepung-beras.jpg)

Gambar 3. 105. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Tepung Beras

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 60: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Model 3D kemudian dibuat berdasarkan ilustrasi, yang terbagi

menjadi dua objek, yaitu objek tepung dan baskom, untuk mempermudah

dalam proses texturing. Texturing dilakukan dengan mewarnai map UVW

yang telah diperoleh dari hasil unwrap UVW model. Modifier mesh smooth

digunakan untuk memperhalus sisi baskom yang bulat. Total polygon pada

model tepung beras adalah 740 atau 1480 tris.

Terdapat animasi berulang sederhana sebanyak 50 frame pada

model tepung beras, yaitu baskom bergoyang sehingga tepung beras

menyebar dan tidak lagi membentuk gunungan, untuk menunjukkan cara

merapikan gunungan tepung beras.

Gambar 3. 106. Tekstur Tepung Beras

Gambar 3. 107. Modeling dan Texturing Tepung Beras

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 61: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

3.2.2.22. Tepung Ketan

Tepung ketan memiliki tampilan warna yang lebih kusam dibandingkan

tepung beras dan tepung terigu, hal ini kemudian dijadikan acuan dalam

pembuatan ilustrasi tepung ketan. Baskom kembali digunakan sebagai

tempat bagi tepung ketan.

Gambar 3. 108. Referensi Tepung Ketan

(http://anekaresepmasakan.net/wp-content/uploads/2012/05/tepung-ketan.jpeg)

Gambar 3. 109. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Tepung Ketan

Kemudian, dilakukan proses visualisasi 3D dari ilustrasi tepung

ketan. Model tepung ketan terbagi menjadi dua objek, yaitu objek tepung

dan baskom, untuk membantu dalam mempercepat proses texturing dengan

mewarnai map UVW. Modifier mesh smooth digunakan unruk memperhalus

sisi-sisi model, sehingga model dapat tampak lebih menarik. Terdapat

animasi sederhana pada model, yaitu berupa baskom yang digoyangkan,

sehingga gunungan tepung ketan menjadi rata, untuk menunjukkan cara

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 62: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

merapikan gunungan tepung ketan. Total polygon pada model tepung ketan

adalah 664 atau 1328 tris, dengan animasi berulang sebanyak 50 frame.

Gambar 3. 110. Tekstur Tepung Ketan

Gambar 3. 111. Modeling dan Texturing Tepung Ketan

3.2.2.23. Air

Dalam pembuatan ilustrasi air, teko air plastik yang biasa ditemui dalam

kehidupan sehari-hari menjadi referensi utama. Dalam ilustrasi air, terdiri

dari gambar teko dan gelas dengan warna senada yang terisi dengan air

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 63: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 112. Referensi Teko Air

(https://images-na.ssl-images-amazon.com/images/I/31zdpFj-9oL.jpg)

Setelah itu, dilakukan proses modeling air serta gelas dalam program

3DS Max. Tekstur pada model memanfaatkan material bawaan dari

program, karena tekstur pada model berupa plastik transparan, sehingga

akan lebih baik jika menggunakan material langsung pada program.

Gambar 3. 113. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Air

Model 3D air menggunakan modifier mesh smooth untuk

menghaluskan sisi-sisi model. Pada model juga terdapat animasi berulang

sederhana berupa teko yang menumpahkan air ke dalam gelas, hingga gelas

terisi. Isi air tersebut dibuat menggunakan box hingga membentuk wujud

air yang tertuang dari teko, untuk menunjukkan cara menuangkan air ke

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 64: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

dalam sebuah gelas. Jumlah total polygon model air adalah 667 atau 1334

tris, dengan jumlah animasi sebanyak 120 frame.

Gambar 3. 114. Modeling dan Texturing Air

3.2.3. Pascaproduksi

Pada tahap pascaproduksi, seluruh aset yang telah dihasilkan diekspor dari 3DS

Max ke dalam wujud file FBX, kemudian diimpor ke dalam program Unity. Ketika

projek 3D diimpor dari 3DS Max ke Unity, projek-projek tersebut akan mengalami

proses triangulation atau pembentukan polygon ke bentuk polygon segitiga (tris)

untuk memaksimalkan detail visualnya.

Setelah seluruh aset telah diimpor ke dalam projek program Unity, package

Vuforia diimpor pula ke dalam projek untuk membuat seluruh aset dapat tampil

dalam wujud AR. Package Vuforia ini dapat diperoleh dari situs developer Vuforia

secara gratis dengan cara mendaftar sebagai member dalam situs developer Vuforia.

Package ini berfungsi untuk membuat model-model 3D dapat diwujudkan dalam

bentuk AR. Gambar puzzle dan kartu yang telah didaftarkan sebagai marker pada

situs developer Vuforia, diimpor pula ke dalam projek Unity. Setelah seluruh aset

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 65: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

telah dimasukkan ke dalam projek Unity, marker-marker disusun sesuai dengan

gambaran layout awal, dan model-model 3D juga disusun sesuai dengan ilustrasi

yang ada pada layout.

Gambar 3. 115. Pengimporan dan Penyusunan Aset

Pencetakan layout puzzle, kartu jajanan pasar dan buklet panduan

permainan dilakukan pula pada tahapan ini. Set Puzzle akan berwujud puzzle

magnet, yang nantinya dapat ditempel ke sebuah whiteboard kecil pada packaging.

Wujud packaging ini dipilih agar buklet panduan, puzzle dan kartu dapat disusun

secara rapi dalam satu tempat. Packaging ini mengambil referensi dari set puzzle

magnet yang dapat ditemui dalam kehidupan sehari-hari.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 66: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 116. Packaging Projek “Jajanan Pasar"

Selain itu, pada tahap pascaproduksi, dilakukan pula pembuatan User

Interface (UI) dan User Experience (UX) untuk aplikasi AR Jajanan Pasar, yang

ditujukan untuk platform android. Tampilan desain aplikasi menyerupai tampilan

untuk layout buklet panduan dan packaging puzzle.

UI pada aplikasi dibuat sederhana dengan adanya beberapa tombol yang

memungkinkan pengguna melakukan perintah pada aplikasi. Pada menu utama

terdapat tiga buah tombol yaitu AR Camera, Fun Facts dan Exit.

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 67: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Gambar 3. 117. Tampilan Menu Utama Aplikasi “Jajanan Pasar”

Pada menu AR Camera, aplikasi akan menampilkan kamera AR yang dapat

diarahkan langsung kepada puzzle-puzzle dan kartu jajanan pasar untuk

menampilkan model-model 3D dalam wujud AR-nya. Pada menu ini, terdapat tiga

buah tombol, yaitu tombol lambang kamera untuk mengambil gambar, tombol

lambang segitiga untuk kembali ke menu utama, dan tombol X untuk menutup

aplikasi.

Dalam menu AR Camera, pengguna dapat mengubah dan memutar ukuran

model 3D dengan mencubit layar smartphone menggunakan dua jari. Selain itu

letak model 3D juga dapat dipindahkan dengan menyentuh layar smartphone.

Gambar 3. 118. Tampilan Menu AR Camera Aplikasi “Jajanan Pasar”

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017

Page 68: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/BAB III.pdf · untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat lebih efektif untuk

Terdapat pula menu Fun Facts yang berisi informasi mengenai filosofi yang

terdapat pada setiap jajanan pasar. Informasi dibuat dengan bahasa yang ringan agar

dapat dimengerti oleh anak-anak. Pada menu ini terdapat enam buah tombol, lima

tombol merupakan tombol menuju ke halaman masing-masing jajanan pasar, dan

satu tombol adalah tombol kembali ke menu utama.

Gambar 3. 119. Tampilan Menu Fun Facts Aplikasi “Jajanan Pasar”

Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017