DEV Community

Danjiro Daiwa
Danjiro Daiwa

Posted on • Edited on

How to make a lip-synching animation? : 9VAe

What is a lip-synching animation?

The animation below is a lip-synching animation created from SVG illustrations in 9VAe.
Here's how to make it.

Twitter.svg.gif

This article explains how to generate lip-synching animation.

6 key shapes of the mouth

9VAe has six mouth shapes in ".aiueo" to generate lip-synching animation.

. a i u e o
nn aa ii uu ee oo

Mouth movements are specified in Romaji

Romaji is Romanization of Japanese.

The animation above is set up as follows.

Duration(Second):Romaji
4:kyuubee can meik a tolking animeition with alphabet.

9VAe interprets the Roman letters in turn to create mouth movements.

Vowel to vowel

Vowel to vowel changes are created by keyframe interpolation of the mouth shape.

  • First half: the change from the front vowel to the back vowel
  • Second half: back vowel
Romaji mouth Romaji mouth Romaji mouth Romaji mouth Romaji mouth
aa aa ia ia.gif ua ua.gif ea ea.gif oa oa.gif
ai ai.gif ii ii ui ui.gif ei ei.gif oi oi.gif
au au.gif iu iu.gif uu uu eu eu.gif ou ou.gif
ae ae.gif ie ie.gif ue ue.gif ee ee oe oe.gif
ao ao.gif io io.gif uo uo.gif eo eo.gif oo oo

Closed-mouthed consonant

The next letter has a "." shape that closes the mouth.

. n m b p
Romaji mouth Romaji mouth Romaji mouth Romaji mouth Romaji mouth
ana ana.gif ami ami.gif abu abu.gif ape ape.gif ano ano.gif

Consonants in the form of the letter "i"

The next letter has a "i" shape in between.

i y j z
Romaji mouth Romaji mouth Romaji mouth Romaji mouth Romaji mouth
aya aya.gif aji aji.gif ayu ayu.gif aze aze.gif ayo ayo.gif

Consonants in the form of the letter "u"

The next letter has a "u" shape in between.

u w v f
Romaji mouth Romaji mouth Romaji mouth Romaji mouth Romaji mouth
awa awa.gif avi avi.gif afu afu.gif awe awe.gif avo avo.gif

Ignore the other consonants.

I ignore all but the consonants above.

c d g h k l q r s t x space
Romaji mouth Romaji mouth Romaji mouth Romaji mouth Romaji mouth
ada aa iga ia.gif uha ua.gif eka ea.gif ola oa.gif
ari ai.gif ishi ii uchi ui.gif eti ei.gif osi oi.gif

It's a pretty lame rule for making mouth shapes, but since it doesn't matter how you pronounce it, and since it actually moves so fast that it's hard to follow it with your eyes, I'm using this rule as the first version for now. I'll improve it in the future.

Apply to French

IPA symbol 9VAe Romaji
/a ɑ/ aa a
/i y j ɥ/ ii i
/u w/ uu u
/ɔ̃/ unon un or on
/e ø ɛ œ/ ee e
/ɛ̃ œ̃/ en en
/o ɔ/ oo o
/ɑ̃/ onan on or an
/p/ p
/b/ b
/t/ t
/d/ d
/k/ k
/g/ g
/c/ k
/ɟ/ g
/m/ m
/n ɲ/ n
/f/ f
/v/ v
/s/ s
/z/ z
/ʃ ʒ/ j
/ʁ/ r
/l/ l

French example

The pronunciation of French

IPA Romaji spelling IPA 9VAe Romaji Mouth shape
Vowels
a a patte /pat/ [1:pat] Alt Text
ɑ a pâte /pɑt/ [1:pat] Alt Text
ɑ̃ on clan /klɑ̃/ [1:klon] klon
e e /de/ [1:de] de
ɛ e belle /bɛl/ [1:bel] Alt Text
ɛ̃ en lin /lɛ̃/ [1:len] len
ə e demain /dəmɛ̃/ [1:deme] deme
i i gris /gʀi/ [1:gri] gri
o o gros /gʀo/ [1:gro] gro
ɔ o corps /kɔr/ [1:kor] kor
ɔ̃ un long /lɔ̃/ [1:lun lun
œ e leur /lœʀ/ [1:ler] ler
œ̃ en brun /brœ̃/ [1:bren] blen
ø e deux /dø/ [1:de] de
u u fou /fu/ [1:fu] fu
y i pur /pyʀ/ [1:pir] pir
Semi-vowels
j i fille /fij/ [1:fi] fi
ɥ i huit /ɥit/ [1:it] it
w u oui /wi/ [1:wi] wi
Consonants
b b bal /bal/ [1:bal] bal
d d dent /dɑ̃/ don
f f foire /fwaʀ/ [1:fwar] fwar
g g gomme /gɔm/ [1:gom] gom
k k clé /kle/ [1:kle] kle
l l lien /ljɛ̃/ [1:lien] lien
m m mer /mɛʀ/ [1:mer] mer
n n nage /naʒ/ [1:naj] naj
ɲ n gnon /ɲɔ̃/ [1:nun] nun
ŋ n dancing /dɑ̃siŋ/ [1:donsin] donsin
p p porte /pɔʀt/ [1:port] port
ʀ r rire /ʀiʀ/ [1:rir] rir
s s sang /sɑ̃/ [1:son] son
ʃ j chien /ʃjɛ̃/ [1:jie] jie
t t train /tʀɛ̃/ [1:tre] tre
v v voile /vwal/ [1:vwal] vwal
z z zèbre /zɛbʀ/ [1:zebr] zebr
ʒ j jeune /ʒœn/ [1:jen] jen
spelling IPA 9VAe Romaji Mouth shape
peinture /pɛ̃tyʀ/ [2:petir] petir
rare /ʀɑʀ/ [1:rar] 25.gif
pendant /pɑ̃dɑ̃/ [2:pandan] 2-pandan.gif
pétard /petaʀ/ [2:petar] petar
créateur /kʀeatœʀ/ [2:kreater] kreater
crapaud /kʀapo/ [2:krapo] krapo
donjon /dɔ̃ʒɔ̃/ [2:donjon] donjon
clémence /klemɑ̃s/ [2:klemans] klemans
trente /tʀɑ̃t/ [1:trant] trant
plan /plɑ̃ / [1:plan] plan
palette /palɛt/ [2:palet] palet
facile /fasil/ [2:fasil] fasil
tutu /tyty/ [2:titi] titi
clan /klɑ̃/ [1:klan] 1-klan.gif
charitable /ʃaʀitabl/ [2:aritabl] aritabl
effacer /efase/ [2:efase] efase
élève /elɛv/ [2:elev] elev

The Significance of the Romanized Lipstick

I think the main process of making a lip-synching animation is to recognize the audio data and make a mouth shape to match the sound.

However, if you don't need audio, as in the case of Twitter posts, there may be an easy way to make a lip-synching animation.

9VAe's method only requires you to create 6 mouth shapes, so you can easily create a lip-synching animation character from Openclipart's SVG illustrations.

Free lip-synching animation characters

Top comments (0)