Xamarin de Live2d

2016年10月15日（土）

JXUGC #17 お前の XAMARIN アプリを見せてみろ！

自己紹介

木下と申します。よろしくお願いします。マイクロソフト技術ではAzure勢です。

Twitterアカウント @kingkinoko FaceBook

目次

１、デモ

２、Live2dとは

３、アプリの構成

４、苦労した点

５、おまけ

Live2dとは

※導入実績、HPより抜粋

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

Live2dとは

Live2dの作成フロー

Live2d Modelerで分割したパーツをもとにモデリングの修正を行います。次に修正したパーツ毎にモーションを作成します。目パチや口パク、眉毛の位置等で表情を作ります。

Live2d Animationでモーションを連結してアニメーションを作成します。また、音声ファイルからリップシンクを作成したり瞬きを作成し、よりリアルな動きをつけていきます。

Photoshopで画像をパーツ毎にレイヤー分割します。最初から分割されていると楽なのですが、今回は1枚絵から頑張って分割しました。

構成

Azure StorageAzure CDN

Live2d Modelファイル一式

Live2d WebGL FrameWork

HTML + JavaScript

AzureStorageをオリジンに設定したAzureCDNを経由してコンテンツデリバリーを実施。AzureStorageのみでも簡易Webサーバとして機能するが、通信負荷を懸念してAzureCDNを利用。

Xamarin.Formsでマルチプラットフォーム用のプロジェクトを作成。FormsのWebViewコントロールはWebGLに対応していないため、CustomRendererでプラットフォームに依存したWebViewを利用する。

Live2dのModelファイル一式とWebGLFrameWork、各種HTMLとコントロール用JSを作成してAzureStorageにアップロード。

苦労した点

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は実機で動かせ」等々、先人の教えを身をもって体験しました。

お土産

・Android4系はChromeブラウザで開いてください。

・iOSは8以降が必須です。

・WindowsMobileはカクカクする場合がありますが、それはWidnwosMobileのせいです。

・タップするときは力強くタップしてください。音声が再生できないことがあります。

※このURLは予告なく利用できなくなりますので予めご承知おきください。

最後に

Azureはいいぞっ！

Xamarinもいいぞっ！！

Live2dもいいぞっ！！！

ご清聴ありがとうございます。

告知

城東.net LT登壇 主催：Azureもくもく会

10月21日に東京の東側を盛り上げる城東.netでLT登壇します。過去5年間に発生したAzure障害について語る予定です。

10月29日にAzureもくもく会を開催します。席に余裕がありますので是非ご参加ください。