SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
@agatestudio
Animation
Luluz
Producer
Agate Studio
@agatestudio@agatestudio@agatestudio
VERTEX AND SHAPE ANIMATION
FOR
For Game Developer
Part 1
Research
@agatestudio@agatestudio@agatestudio
Overview
• Memberikan pengenalan tentang Skeletal Animation
dan Vertex Animation.
• Tujuan Share:
Producer mendapat gambaran sejauh apa potensi
penggunaan animation dalam game development.
Memberikan gambaran dasar konsep penggunaan
Vertex Animation.
@agatestudio@agatestudio@agatestudio
Batasan Masalah
• Part ini hanya menjelaskan dasar dan potensi
penggunaan Vertex Animation.
• Tidak termasuk dengan pembahasan performansi,
teknik implementasi dan lain-lain (Mungkin akan di
bahas di part 2).
@agatestudio@agatestudio@agatestudio
Skeletal Animation
*Teknik animasi dengan menggunakan bone.
*Definisi to the point, untuk definisi ilmiah silahkan cek Wiki
@agatestudio@agatestudio@agatestudio
Vertex Animation
• Flex Animation/Vertex and shape key
animation/Morph Animation adalah istilah-istilah
yang sering digunakan.
• Salah satu game yang menggunakan skeletal
animation dan vertex animation secara bersamaan
adalah DOTA 2 (akan digunakan sebagai referensi di
Presentasi kali ini).
• Pada DOTA 2, Pergerakan Karakter(berlari, pukul,
berdoa) menggunakan Skeletal Animation. Vertex
Animation digunakan untuk Facial Expression dan
Lypsync pada Portrait Karakter.
@agatestudio@agatestudio@agatestudio
Skeletal Animation
Faceless Void - Valve
Penggunaan Bone Leher dan Wajah untuk menggerakkan Faceless Void.
Garis-garis hitam adalah bone yang digunakan oleh karakter ini.
@agatestudio@agatestudio@agatestudio
Flex Animation
Flex animation (also called vertex and shape key animation) is the direct manipulation
of vertices without the involvement of a skeleton.
Perhatikan bahwa tidak ada bone yang mengatur pergerakan rahang.
@agatestudio@agatestudio@agatestudio
Lihat Lebih Dalam
Skeletal Animation (Perhatikan pergerakan tulang yang membuat kepala mendongak)
@agatestudio@agatestudio@agatestudio
Lihat Lebih Dalam
Flex Animation (Perhatikan bahwa mulut terbuka tanpa adanya pergerakan tulang,
mulut terbuka karena vertex di animasikan dari keadaan tertutup ke terbuka).
@agatestudio@agatestudio@agatestudio
Konsep Dasar Pembuatan
Vertex Animation
Akan dijelaskan menggunakan Blender sebagai contoh
untuk menjelaskan konsep dasar Vertex Animation.
Misalkan target kita adalah
Membuat vertex animation yang mengubah object dari
bentuk Kubus menjadi Trapesium.
@agatestudio@agatestudio@agatestudio
Teori
• Secara teori vertex animation bisa diperoleh dengan menggerakkan
vertex di setiap framenya.
Misal:
frame 1 mulut tertutup, do nothing
frame 5 mulut terbuka, kita gerakkan vertex agar terbuka
frame 10 mulut tertutup, kita gerakkan vertex agar tertutup.
Maka akan terjadi animasi membuka dan menutup mulut.
• Problem: Makan waktu dan capek karena harus menggerakkan
vertex vertex.
• Oleh karena problem diatas, 3D Software pada umumnya telah
menyediakan cara yang lebih friendly untuk melakukan Vertex
Animation.
@agatestudio@agatestudio@agatestudio
Pembuatan Vertex Animation pada Blender
Objek awal yang akan digunakan
sebagai bentuk dasar (default).
Kita catat sebagai Shape Keys ‘Basis
Kubus Biasa
Kita buat Shape Keys baru dengan nama Trapesium.
Kita edit Cube dengan memindahkan vertex-
vertexnya sehingga membentuk trapesium
@agatestudio@agatestudio@agatestudio
Pembuatan Vertex Animation pada Blender
Kita bisa mengatur value pada Shape Keys Trapesium.
@agatestudio@agatestudio@agatestudio
Pembuatan Vertex Animation pada Blender
Konsep (Sotoy):
Intinya dia nyatet bentuk trapesiumnya. Value ‘0’ bentuk dasarnya, value ‘1’ adalah bentuk
trapesiumnya. Jika kita set ‘0.5’ pergeseran vertex akan setengahnya.
Penggunaan:
Nah, value inilah yang akan diatur nantinya di Animation Timeline-nya. Jadi kita cukup mengatur
value shape key-nya saja, tidak perlu menggeser setiap vertex-nya.
@agatestudio@agatestudio@agatestudio
Catatan Kecil
• Pembuatan vertex animation diatas hanyalah salah
satu contoh (tiap 3D software mungkin berbeda).
• Vertex animation tidak se-serdahana itu untuk di
export dan digunakan . Sangat bergantung pada
engine yang digunakan (konsultasi dengan para
technical).
• Vertex animation dan Skeletal Animation bisa
digunakan bersamaan.
@agatestudio@agatestudio@agatestudio
Demo
Memperlihatkan perbedaan animasi dengan kombinasi
antara vertex animation dan skeletal animation dengan
vertex animation
Thank you!

Contenu connexe

Similaire à Vertex and Shape Animation by Luluz

Timing & Spacing by Henky
Timing & Spacing by HenkyTiming & Spacing by Henky
Timing & Spacing by HenkyAgate Studio
 
INFORMATIKA - FOTO DAN VIDEO DENGAN SMARTPHONE
INFORMATIKA - FOTO DAN VIDEO DENGAN SMARTPHONEINFORMATIKA - FOTO DAN VIDEO DENGAN SMARTPHONE
INFORMATIKA - FOTO DAN VIDEO DENGAN SMARTPHONEDEDEALAMSYAHSPd
 
cover Buku ACI DIGIARS.pdf
cover Buku ACI DIGIARS.pdfcover Buku ACI DIGIARS.pdf
cover Buku ACI DIGIARS.pdfSellyAZega
 
Smartphone Foto & Video Production
Smartphone Foto & Video ProductionSmartphone Foto & Video Production
Smartphone Foto & Video Productionsuryokoco suryoputro
 
Animasi dalam multimedia
Animasi dalam multimediaAnimasi dalam multimedia
Animasi dalam multimediaWahyu NR
 
Animasi dalam Multimedia
Animasi dalam MultimediaAnimasi dalam Multimedia
Animasi dalam Multimediahuriyahisty
 
Animasi dalam multimedia
Animasi dalam multimediaAnimasi dalam multimedia
Animasi dalam multimediaadila harfi
 
Animasi dalam Multimedia
Animasi dalam MultimediaAnimasi dalam Multimedia
Animasi dalam MultimediaRahmatul Aulia
 

Similaire à Vertex and Shape Animation by Luluz (13)

Timing & Spacing by Henky
Timing & Spacing by HenkyTiming & Spacing by Henky
Timing & Spacing by Henky
 
Pertemuan 2 animasi dasar
Pertemuan 2 animasi dasarPertemuan 2 animasi dasar
Pertemuan 2 animasi dasar
 
Alisalim flash4
Alisalim flash4Alisalim flash4
Alisalim flash4
 
PUPPETER.pptx
PUPPETER.pptxPUPPETER.pptx
PUPPETER.pptx
 
Animasi 2
Animasi 2Animasi 2
Animasi 2
 
INFORMATIKA - FOTO DAN VIDEO DENGAN SMARTPHONE
INFORMATIKA - FOTO DAN VIDEO DENGAN SMARTPHONEINFORMATIKA - FOTO DAN VIDEO DENGAN SMARTPHONE
INFORMATIKA - FOTO DAN VIDEO DENGAN SMARTPHONE
 
8.animasi
8.animasi8.animasi
8.animasi
 
cover Buku ACI DIGIARS.pdf
cover Buku ACI DIGIARS.pdfcover Buku ACI DIGIARS.pdf
cover Buku ACI DIGIARS.pdf
 
Smartphone Foto & Video Production
Smartphone Foto & Video ProductionSmartphone Foto & Video Production
Smartphone Foto & Video Production
 
Animasi dalam multimedia
Animasi dalam multimediaAnimasi dalam multimedia
Animasi dalam multimedia
 
Animasi dalam Multimedia
Animasi dalam MultimediaAnimasi dalam Multimedia
Animasi dalam Multimedia
 
Animasi dalam multimedia
Animasi dalam multimediaAnimasi dalam multimedia
Animasi dalam multimedia
 
Animasi dalam Multimedia
Animasi dalam MultimediaAnimasi dalam Multimedia
Animasi dalam Multimedia
 

Plus de Agate Studio

Digital Coloring by Raksa
Digital Coloring by RaksaDigital Coloring by Raksa
Digital Coloring by RaksaAgate Studio
 
Computational Advertising by Icha
Computational Advertising by IchaComputational Advertising by Icha
Computational Advertising by IchaAgate Studio
 
Freemium conceptanalytics leemarvin
Freemium conceptanalytics leemarvinFreemium conceptanalytics leemarvin
Freemium conceptanalytics leemarvinAgate Studio
 
Game Programming Pattern by Restya
Game Programming Pattern by RestyaGame Programming Pattern by Restya
Game Programming Pattern by RestyaAgate Studio
 
Community Management by Yudhit
Community Management by YudhitCommunity Management by Yudhit
Community Management by YudhitAgate Studio
 
[Habli] tds agustus
[Habli] tds agustus[Habli] tds agustus
[Habli] tds agustusAgate Studio
 
Wp quality bar tedy
Wp quality bar   tedyWp quality bar   tedy
Wp quality bar tedyAgate Studio
 
Lee marvin pitching-hacks
Lee marvin pitching-hacksLee marvin pitching-hacks
Lee marvin pitching-hacksAgate Studio
 
Emotiv EPOC by Neneng
Emotiv EPOC by NenengEmotiv EPOC by Neneng
Emotiv EPOC by NenengAgate Studio
 
Aksi – Koneksi – Deviasi by Valent
Aksi – Koneksi – Deviasi by ValentAksi – Koneksi – Deviasi by Valent
Aksi – Koneksi – Deviasi by ValentAgate Studio
 
MMO Design Architecture by Andrew
MMO Design Architecture by AndrewMMO Design Architecture by Andrew
MMO Design Architecture by AndrewAgate Studio
 
How to Persuade People by Dave
How to Persuade People by DaveHow to Persuade People by Dave
How to Persuade People by DaveAgate Studio
 
Eddie supersmash goodminton
Eddie   supersmash goodmintonEddie   supersmash goodminton
Eddie supersmash goodmintonAgate Studio
 
Satriyo digital audio gears
Satriyo   digital audio gearsSatriyo   digital audio gears
Satriyo digital audio gearsAgate Studio
 
Yinan heroes of-the_strom
Yinan   heroes of-the_stromYinan   heroes of-the_strom
Yinan heroes of-the_stromAgate Studio
 
Advanced encryption standard (aes) epul
Advanced encryption standard (aes)   epulAdvanced encryption standard (aes)   epul
Advanced encryption standard (aes) epulAgate Studio
 
Real Time Framework by Tonny
Real Time Framework by TonnyReal Time Framework by Tonny
Real Time Framework by TonnyAgate Studio
 
Unity Camera & Simple Image Editing by Puthut
Unity Camera & Simple Image Editing by PuthutUnity Camera & Simple Image Editing by Puthut
Unity Camera & Simple Image Editing by PuthutAgate Studio
 
Hibernate by Jason
Hibernate by JasonHibernate by Jason
Hibernate by JasonAgate Studio
 

Plus de Agate Studio (20)

Digital Coloring by Raksa
Digital Coloring by RaksaDigital Coloring by Raksa
Digital Coloring by Raksa
 
Computational Advertising by Icha
Computational Advertising by IchaComputational Advertising by Icha
Computational Advertising by Icha
 
Freemium conceptanalytics leemarvin
Freemium conceptanalytics leemarvinFreemium conceptanalytics leemarvin
Freemium conceptanalytics leemarvin
 
Game Programming Pattern by Restya
Game Programming Pattern by RestyaGame Programming Pattern by Restya
Game Programming Pattern by Restya
 
Community Management by Yudhit
Community Management by YudhitCommunity Management by Yudhit
Community Management by Yudhit
 
[Habli] tds agustus
[Habli] tds agustus[Habli] tds agustus
[Habli] tds agustus
 
Wp quality bar tedy
Wp quality bar   tedyWp quality bar   tedy
Wp quality bar tedy
 
Toku DB by Aswin
Toku DB by AswinToku DB by Aswin
Toku DB by Aswin
 
Lee marvin pitching-hacks
Lee marvin pitching-hacksLee marvin pitching-hacks
Lee marvin pitching-hacks
 
Emotiv EPOC by Neneng
Emotiv EPOC by NenengEmotiv EPOC by Neneng
Emotiv EPOC by Neneng
 
Aksi – Koneksi – Deviasi by Valent
Aksi – Koneksi – Deviasi by ValentAksi – Koneksi – Deviasi by Valent
Aksi – Koneksi – Deviasi by Valent
 
MMO Design Architecture by Andrew
MMO Design Architecture by AndrewMMO Design Architecture by Andrew
MMO Design Architecture by Andrew
 
How to Persuade People by Dave
How to Persuade People by DaveHow to Persuade People by Dave
How to Persuade People by Dave
 
Eddie supersmash goodminton
Eddie   supersmash goodmintonEddie   supersmash goodminton
Eddie supersmash goodminton
 
Satriyo digital audio gears
Satriyo   digital audio gearsSatriyo   digital audio gears
Satriyo digital audio gears
 
Yinan heroes of-the_strom
Yinan   heroes of-the_stromYinan   heroes of-the_strom
Yinan heroes of-the_strom
 
Advanced encryption standard (aes) epul
Advanced encryption standard (aes)   epulAdvanced encryption standard (aes)   epul
Advanced encryption standard (aes) epul
 
Real Time Framework by Tonny
Real Time Framework by TonnyReal Time Framework by Tonny
Real Time Framework by Tonny
 
Unity Camera & Simple Image Editing by Puthut
Unity Camera & Simple Image Editing by PuthutUnity Camera & Simple Image Editing by Puthut
Unity Camera & Simple Image Editing by Puthut
 
Hibernate by Jason
Hibernate by JasonHibernate by Jason
Hibernate by Jason
 

Vertex and Shape Animation by Luluz