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

　二次元イラストをぬるぬる動かすことのできる「Live2D」を使用した、アドベンチャーゲームの開発について、コードを元に紹介します。前半は、Live2Dのサンプルソースを元に、モーションやサウンドをつけるなどのカスタマイズの仕方を解説していきます。後半はアドベンチャーゲーム製作キット「ティラノスクリプト」のLive2Dプラグインについて紹介します。

はじめに

　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

註釈

※1　Live2D Cubism SDKは、2015年1月の最新ver2.0.01_2を使用します。

※2　年間売上1千万未満の小規模事業者なら商用利用も無料で使えます。

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

1）SDKのフォルダ構成

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

SDKのフォルダ構成

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の実行結果

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