黒羽のアリカ & making 2d character well-animated in Unity

Presented at 2017/05/16 Tokyo Indies #5 .
スマホゲーム『黒羽のアリカ』の紹介と、その技術について発表しました。
http://hexat.studio/arika

Transcript

1. 黒羽のアリカ & making 2D character well- animated in Unity 2017/05/16 Tokyo Indies #5 Hexat Studio @keroxp / Yusuke Sakurai
2. Profile @keroxp / Yusuke Sakurai • Born in 1991. • An individual Software Developer based in Tokyo. • Currently focusing on development of the video game. • Personal Mission • Making character animated by programming. 2017/5/16 2
3. ARIKA (黒羽のアリカ) • Mobile Video Game for iOS / Android. • Free Download, Showing Ads. • Development in progress (from February, 2017) • Developed by Me. • Programming • Graphic Art • Animation • iOS version Will be released on 15,June. • (Only a month left!!) 2017/5/16 3
4. What kind of a game? • Description • Tiny tap-to-jump game of winged girls. • Genre • Jump Game(?) • Core Action • Tap to jump, dodge the obstacle. • Object • Fly higher and collect items as possible. • Rule • Dead on crash. 2017/5/16 4
5. Screen Shots 2017/5/16 5 TAP TAP AVOID COLLECT
6. Features • A lot of playable characters! • 5 are available in the first version. • The more versions, the more characters. 2017/5/16 6 MARI SHIROHA ARIKA SUZUNE KURURU
7. DEMO 2017/5/16 7
8. How to setup characters as playable? 2017/5/16 8
9. Spine + Unity • Rigged and animated by Spine. • Managed by Unity(Animator). 2017/5/16 9 Spine Unity (Animator)
10. Single Player Component • There is only one “Player.cs” component that can be parameterized. • All characters depend on the same component. • No specialized subclasses. 2017/5/16 10
11. Single Animation Controller • Only one Animation Controller is used. • Animators that have exactly same animation clips could be managed by same Animation Controller. 2017/5/16 11
12. Automatic Rigging System • Character’s illustrations are saved as .psd. • Usually, you must import images and re- position these, re-rig bones on Spine. • I want to make .psd file into .spine directly with bones, also animations. 2017/5/16 12
13. OK, Done. 2017/5/16 13
14. psd2spine.rb • Written in Ruby, depending on PSD.rb • Traversing psd layers tree, exporting spine data with meta-bones, common animations. 2017/5/16 14
15. 2017/5/16 15 Structured PSD files psd2spine.rb Conventionally named layers for bones and skins. Meta-Bones, Common Animations Ready for play! No special setup 3 minutes.
16. Facial Morph Editor 2017/5/16 16
17. Motive • Facial Morphing is EXTREAMLLY important to make characters charming (^□^). • Changing character’s expression is powerful way to show what is going on in the scene. • Fun? • Damaged? • Hurry? • Unfortunately, Unity and Spine don’t provide tools or system for facial morphing. 2017/5/16 17
18. OK, Done. 2017/5/16 18
19. Custom Facial Morph Editor 2017/5/16 19 Saved Faces Data Chose eye & mouse images Save Face
20. Custom Facial Morph Editor • Implemented with Unity’s Custom Editor. • Can be edited in the Scene. • Exported custom face into ScriptableObject. • Eye & Mouse parts are created in advance. 2017/5/16 20 Left Eyelashes for MARI
21. Face Image Structure In Order 2017/5/16 21 eyelash eyeball HL face skin white eye eyeball
22. Basic & Custom Faces • There are two types of face. • Basic • Common face through all characters. • [Normal, Fun, Smile, Damaged, Tired, Surprised] • Useful for program • Custom • Custom face for individual character. 2017/5/16 22
23. Expressive Faces 2017/5/16 23
24. Thanks! Follow me on Twitter @keroxp 2017/5/16 24