Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/02/06 14:00

ダウンロード live2dtyrano.zip (1.8 KB)
ダウンロード Simple.zip (4.4 KB)

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

目次

はじめに

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

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

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

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

対象読者

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

開発環境

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

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

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

simple.htmlの実行結果
simple.htmlの実行結果

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


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 池和田 直仁(イケワダ ナオヒト)

    株式会社Live2D プログラマ Live2D勉強会や3DCG MeetUPへ登壇したり布教活動をしています。 Live2D Libraryの管理人をしています。 UnityやUE4、blenderにも興味があり2.5~3DCG好きなプログラマです。 ブログ:とあるプログラマーのブログ

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5