二次元イラストがぬるぬる動く！ Live2DでWebGLアドベンチャーゲームを作ろう

はじめに

　Live2Dとは、イラストをそのままの雰囲気で動かす日本発の技術です。1枚のイラストさえあれば、目や髪などパーツを切り分けてモデリングする事でアニメーションすることができます。

　「GF（仮）」や「乖離性ミリオンアーサー」など、多くのゲームで使われており、二次元のキャラクターを可愛く動かすことに長けた技術です。

　3DCGでは表現が難しいことも簡単に実現でき、Unity、cocos2d-x、Flashのほか、WebGL上で動作させることもできます。iOS 8からSafariにWebGLが搭載されたこともあり、スマホのブラウザで手軽にLive2Dコンテンツを楽しめるようになりました。

　Live2DのサイトでWebGL版を公開しているので、実際に触ってみてぜひこの可愛らしさを実感してみて下さい。

• WebGL対応でiPhoneのブラウザでもLive2Dアプリ！

対象読者

• JavaScriptでゲームを作りたい方
• アドベンチャーゲームを作りたい方

開発環境

　WebGLに対応しているブラウザと、テキストエディタ、Webサーバーが必要になります。Webサーバーは画像を読み込む際に必要になりますが、以下2つをインストールすれば簡単に環境が用意できます。

• Google Chrome
• Brackets（Adobeのフリーエディタで簡易Webサーバー付き）

　また、Live2DのSDKは下記からダウンロードして下さい（※1）。SDKは一般ユーザや小規模事業者は無料で使う事ができます（※2）。無料で使う場合は、「SDK試用申込ページへ（一般ユーザー・小規模事業者）」を選択して下さい。申込フォームで入力したメールアドレス宛にSDKのリンク先が届くので、そちらからWebGLのSDKをダウンロードして下さい。

• Live2D Cubism SDK

Live2D SDKのサンプルソースをいじってみよう

1）SDKのフォルダ構成

　SDKには2つのサンプルプロジェクトが入っています。今回はSimpleプロジェクトをボタン操作でモーション再生できるようにしていきます。

Live2D_SDK_WebGL_2.0.01_2_jp
│
├─framework
│     Live2DFramework.js・・・Live2Dを簡単に操作するフレームワーク
│
├─lib
│     live2d.min.js・・・Live2Dのメインライブラリ
│
└─sample
    ├─SampleApp1・・・基本的な機能を実装したサンプルプロジェクト
    │
    └─Simple・・・最も単純なLive2Dモデル組み込みのサンプルプロジェクト

2）Simpleプロジェクトの実行

　Simpleプロジェクトを実行してみます。simple.htmlを選択し、Bracketsエディタの右上にあるライブプレビューボタン押下します。

Bracketsでライブプレビュー

　ブラウザが自動起動され、Live2Dモデルが表示されます。

simple.htmlの実行結果

　このプロジェクトを、モーションが切り替えられるようにコードを修正していきます。