Xamrin de live2d

1. Xamarin de Live2d
2016年10月15日（土）
JXUGC #17 お前の XAMARIN アプリを見せてみろ！

2. 自己紹介
木下と申します。よろしくお願いします。
マイクロソフト技術ではAzure勢です。
Twitterアカウント @kingkinoko FaceBook

3. 目次
１、デモ
２、Live2dとは
３、アプリの構成
４、苦労した点
５、おまけ

4. Live2dとは
※導入実績、HPより抜粋
イラストを動かすことができるようになるソフトです。
イラストをパーツ毎に分けた画像データを利用してモーションを作成します。
作成したアニメーションはゲーム、動画、アプリに利用できます。
Android、iOS、Unity、cocos2d、PSP、PS-VITA、DirectX、FLASH、
WebGLに対応しています。

5. Live2dとは
Live2dの作成フロー
Live2d Modelerで分割したパーツを
もとにモデリングの修正を行います。次に
修正したパーツ毎にモーションを作成し
ます。目パチや口パク、眉毛の位置等
で表情を作ります。
Live2d Animationでモーションを連
結してアニメーションを作成します。また、
音声ファイルからリップシンクを作成した
り瞬きを作成し、よりリアルな動きをつけ
ていきます。
Photoshopで画像をパーツ毎にレ
イヤー分割します。最初から分割さ
れていると楽なのですが、今回は1
枚絵から頑張って分割しました。

6. 構成
Azure Storage
Azure CDN
Live2d Modelファイル一式
Live2d WebGL FrameWork
HTML + JavaScript
AzureStorageをオリジンに設定したAzure
CDNを経由してコンテンツデリバリーを実施。
AzureStorageのみでも簡易Webサーバと
して機能するが、通信負荷を懸念して
AzureCDNを利用。
Xamarin.Formsでマルチプラット
フォーム用のプロジェクトを作成。
FormsのWebViewコントロールは
WebGLに対応していないため、
CustomRendererでプラットフォーム
に依存したWebViewを利用する。
Live2dのModelファイル一式と
WebGLFrameWork、各種
HTMLとコントロール用JSを作成し
てAzureStorageにアップロード。

7. 苦労した点
WebGLの対応・非対応調査
Android
純正エミュレータ 実機
Android4系以前 × ×
Android5系以降 × ○
iOS
シミュレータ 実機
iOS7以前 × ×
iOS8以降 ○ ○
Xamarinの対応状況
・Xamarin FormsのWebViewControlはWebGLに非対応です。
HybridWebViewというCustomRenedererを利用したサンプルがXamarin公式HPで公開していたのでそれを参考にしました。
【備考】
・Visual Studio Emulator for AndroidはWebGLに対応しています。
・Android4系でもChromeブラウザはWebGLに対応しています。
・Android5系でも端末によってはWebViewのバージョンが古く対応し
ていない場合があります。
【備考】
・iOS8以降であれば何の問題もなく対応しています。
「Xamarin開発はMacがいい」「Androidは実機で動かせ」等々、
先人の教えを身をもって体験しました。

8. お土産
・Android4系はChromeブラウザで開いてください。
・iOSは8以降が必須です。
・WindowsMobileはカクカクする場合がありますが、
それはWidnwosMobileのせいです。
・タップするときは力強くタップしてください。
音声が再生できないことがあります。
※このURLは予告なく利用できなくなりますので
予めご承知おきください。

9. 最後に
Azureはいいぞっ！
Xamarinもいいぞっ！！
Live2dもいいぞっ！！！
ご清聴ありがとうございます。

10. 告知
城東.net LT登壇 主催：Azureもくもく会
10月21日に東京の東側を盛り上げる城東.netでLT登壇します。
過去5年間に発生したAzure障害について語る予定です。
10月29日にAzureもくもく会を開催します。
席に余裕がありますので是非ご参加ください。