{"id":2883,"date":"2023-01-06T18:00:00","date_gmt":"2023-01-06T11:00:00","guid":{"rendered":"https:\/\/student-activity.binus.ac.id\/nc\/?p=2883"},"modified":"2023-01-06T17:58:35","modified_gmt":"2023-01-06T10:58:35","slug":"liputan-workshop-press-start-day-2","status":"publish","type":"post","link":"https:\/\/student-activity.binus.ac.id\/nc\/2023\/01\/06\/liputan-workshop-press-start-day-2\/","title":{"rendered":"[Liputan] Workshop Press Start Day 2"},"content":{"rendered":"

Halo minna-san<\/em>! Kembali lagi di artikel tentang workshop<\/em> UKM Binus Game Development Club<\/em> Press Start<\/em> dengan tema \u201cCreating your first pixel art animation\u201d<\/em>. Setelah hari pertama yang asik sekali, kita akan melanjutkan sesi keduanya yang diadakan tanggal 17 Desember dengan pembicara Kak Dio Mahesa. Tunggu apalagi, ayo langsung kita mulai saja!<\/p>\n

Sesi kedua dimulai pada pukul satu siang dengan pembukaan oleh MC<\/em>Ariel Vito Suyata Ong yang menanyakan kabar dan pengalaman peserta di hari pertama sebelumnya. Setelah balasan yang antusias dari para peserta, sesi langsung dilanjutkan dengan pembawaan materi oleh Kak Dio mengenai pembuatan character animation<\/em>. Ada tiga jenis animation <\/em>yang akan dibuat, yaitu idle<\/em>, walk<\/em> atau animasi berjalan, dan run<\/em> atau animasi berlari. Kak Dio sudah menyediakan asset<\/em> dalam bentuk google drive<\/em> yang dikirim melalui chat<\/em> agar para peserta bisa ikut mencoba bersama-sama.<\/p>\n

Model karakter yang diambil dari Asset<\/i><\/b><\/figcaption><\/figure>\n

Ketika peserta membuka asset,<\/em> akan ditemukan file<\/em> model karakter kita. Model tersebut dibagi menjadi dua layer<\/em>yaitu kepala dan badannya. Pertama, kita akan membuat animasi basic<\/em>menggerakan kepala model. Kak Dio membuat sebuah grup dari layer <\/em>kepala dan badan model. Lalu, frame <\/em>awal akan dicopy<\/em> untuk membuat frame <\/em>baru yang kita namakan frame2 <\/em>sebagai latar kerja untuk menampung gerakan animasi. Di frame2<\/em>, layer<\/em> kepala dan badan sebelumnya juga tercopy<\/em> dan nama mereka harus diganti sesuai dengan frame<\/em>nya menjadi head2<\/em> dan body2<\/em> dengan nama layer2<\/em>. Kemudian, grup berisi layer<\/em> awal akan dimatikan, agar yang terlihat hanyalah layer2<\/em>saja. Selanjutnya, head2<\/em> di frame2<\/em> diturunkan sedikit saja agar terlihat berbeda dengan kepala yang ada di frame <\/em>awal.<\/p>\n

Setelah perubahan dilakukan, akan muncul bagian pixel<\/em> yang terlihat rusak, seperti warnanya tidak sesuai atau bisa saja menghilang. Bagian ini harus dibersihkan dengan penyesuain warna berdasarkan pixel <\/em>disekitarnya. Setelah pembersihan, kita dapat menekan play<\/em>untuk melihat perpindahan dari frame<\/em> awal ke frame2<\/em> yang menunjukkan gerakan kepala dari model kita. Setelah itu, kita lanjut dengan bagian badannya menggunakan cara yang sama.<\/p>\n

Kak Dio memberikan tips ketika melakukan perubahan atau pergeseran layer<\/em>di setiap frame<\/em>. Saat kita ada di frame2<\/em> dan ingin mengubah isi layer2<\/em>, pilih grup layer<\/em> milik frame <\/em>awal, lalu turunkan opacity<\/em>mereka. Hal ini akan membuat layer<\/em> dari frame awal berubah menjadi kotak-kotak dengan warna abu-abu atau buram yang menyerupai onion skin<\/em>dalam photoshop<\/em> pada umumnya. Ini akan memudahkan kita memperkirakan seberapa jauh pergeseran dan pembetulan pixel<\/em> rusak yang harus dilakukan. Dengan ini, hasil gerakan animasi bisa menjadi lebih halus atau tidak kaku. Jangan lupa juga untuk mengembalikan opacity<\/em> dan mematikan lagi layer<\/em> frame <\/em>awal di frame2<\/em> kita.<\/p>\n

contoh onion skin<\/i> di tangan kiri model<\/b><\/figcaption><\/figure>\n

Selanjutnya, Kak Dio mempraktikan cara membuat gerakan walking<\/em> yang cukup mirip prinsipnya dengan idle<\/em> hanya dengan beberapa penambahan sedikit. Perbedaan warna di anggota tubuh model akan digunakan untuk mempermudah pengertian dan prinsip perspective<\/em> saat sedang membuat animasi. Kak Dio juga menyarankan untuk mengurangi sedikit ukuran bagian layer<\/em> yang sedang diubah, ketimbang hanya mengubah posisinya saja, agar animasi kita lebih terlihat original<\/em> dan tidak terlihat hanya memindahkan atau mengcopy<\/em> bagiannya saja.<\/p>\n

Bagian tambahan untuk walk<\/em> adalah penambahan frame<\/em> yang dinamakan follow through<\/em> frame<\/em>. Frame <\/em>ini berisi gerakan selesai atau gerakan transisi ketika frame<\/em> utama akan berpindah ke frame<\/em>setelahnya. Untuk lebih mengerti prinsip follow through<\/em>, bayangkan frame1<\/em>kita berisi gerakan tangan ke depan dan frame2<\/em> ini kembali ke samping badan. Tidak mungkin tangan kita yang di depan akan tiba-tiba sudah ada di samping badan. Nah, di sela kedua frame<\/em> itu kita masukkan follow through<\/em> yang berisi gerakan tangan baru diturunkan sedikit saja. Tujuan dari follow through<\/em> ini supaya perpindahan transisi tiap frame <\/em>lebih terlihat bersih dan halus.<\/p>\n

Contoh frame<\/i> follow through<\/i><\/b><\/figcaption><\/figure>\n

Sayangnya waktu pemberian materi sudah habis di pukul 14.30, sehingga animasi untuk gerakan run<\/em> akan dibuat sendiri oleh Kak Dio dan hasilnya akan dikirim ke google drive<\/em> yang sudah diberikan di chat<\/em>. Kak Dio dan panitia langsung memulai sesi QnA<\/em>, dimana para peserta langsung menanyakan hal-hal yang berhubungan dengan materi, serta pengalaman Kak Dio sendiri dalam membuat animasi game pixel art<\/em>.<\/p>\n

sesi QnA<\/i> dan penyelesaian animasi run<\/i><\/b><\/figcaption><\/figure>\n

Para peserta berantusias dengan menanyakan hal-hal seperti pengaruh kecepatan frame<\/em> dalam millisecond<\/em> dan bagaimana perbedaan melakukan animasi di Photoshop<\/em> dengan aplikasi Aseprite. <\/em>Untuk menjawab pertanyaan ini, kak Dio langsung menunjukkannya sembari membuat animasi untuk running dan juga membuka salah satu asset<\/em>nya di Aseprite, lalu menjelaskannya dengan lengkap.<\/p>\n

Sekian pengalaman day 2<\/em> dari workshop <\/em>Press Start. Materi pembelajaran dan pengajaran dari sesi ini tentu akan digunakan dan dilanjutkan lagi di sesi terakhirnya. Sampai jumpa minna-san<\/em> di artikel selanjutnya!<\/p>\n

Writer: Mizuki<\/p>\n

Editor: Tio<\/p>\n","protected":false},"excerpt":{"rendered":"

Halo minna-san! Kembali lagi di artikel tentang workshop UKM Binus Game
\nDevelopment Club Press Start dengan tema \u201cCreating your first pixel art
\nanimation\u201d. Setelah hari pertama yang asik sekali, kita akan melanjutkan sesi
\nkeduanya yang diadakan tanggal 17 Desember dengan pembicara Kak Dio Mahesa.
\nTunggu apalagi, ayo langsung kita mulai saja!<\/p>\n

Sesi kedua dimulai pada pukul satu siang dengan pembukaan oleh MCAriel Vito
\nSuyata Ong yang menanyakan kabar dan pengalaman peserta di hari pertama
\nsebelum<\/p>\n","protected":false},"author":34,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-2883","post","type-post","status-publish","format-standard","hentry","category-article"],"_links":{"self":[{"href":"https:\/\/student-activity.binus.ac.id\/nc\/wp-json\/wp\/v2\/posts\/2883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/student-activity.binus.ac.id\/nc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/student-activity.binus.ac.id\/nc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/nc\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/nc\/wp-json\/wp\/v2\/comments?post=2883"}],"version-history":[{"count":1,"href":"https:\/\/student-activity.binus.ac.id\/nc\/wp-json\/wp\/v2\/posts\/2883\/revisions"}],"predecessor-version":[{"id":2884,"href":"https:\/\/student-activity.binus.ac.id\/nc\/wp-json\/wp\/v2\/posts\/2883\/revisions\/2884"}],"wp:attachment":[{"href":"https:\/\/student-activity.binus.ac.id\/nc\/wp-json\/wp\/v2\/media?parent=2883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/nc\/wp-json\/wp\/v2\/categories?post=2883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/nc\/wp-json\/wp\/v2\/tags?post=2883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}