プロジェクトの作成

Last update: 2014/12/08

ここでは、Adobe Bracketsを使ってLive2D モデルを表示するまでの手順を説明します。

推奨環境などはSDK付属のReadMeをご覧ください。

用意するもの

  • Adobe Brackets

  • Live2D ライブラリ

  • Live2D のリソース(ダウンロードしたLive2D SDK の「lib」フォルダ)

本来は、Live2Dのリソースは作成するモデルに応じてそれぞれ用意します。
ここではサンプルプロジェクトの「ハル」のリソースを使って説明をしていきます。

simple/assets/haru/

  • haru.moc

  • haru.1024/texture_00.png

  • haru.1024/texture_01.png

  • haru.1024/texture_02.png

◆プロジェクトの作成と下準備

プロジェクト用のフォルダを作成します(ここではLive2DSampleという名前にします)
用意したライブラリ(libフォルダ)とリソース(assets)をその中にコピーします。
ソースコードを入れるsrcフォルダも作成しておきます。

◯Adobe Brackets

メニューバーの「フォルダーを開く...」をクリックし、準備したプロジェクトフォルダを開きます。

◆モデル表示までの流れ

  1. Canvasオブジェクトを取得

  2. WebGLオブジェクトを生成

  3. Live2Dの初期化

  4. live2DModelにテクスチャ、WebGLオブジェクト、マトリクスをセット

  5. live2DModelを更新・描画

◆CanvasオブジェクトとWebGLオブジェクトの準備

Live2Dモデルを表示するためのCanvasオブジェクトを取得します。

取得したCanvasオブジェクトからWebGLオブジェクトを生成します。

◆Live2Dの初期化とテクスチャ用Imageオブジェクトの作製

Live2D.init()で初期化後、モデルオブジェクトとImageオブジェクトの準備をします。

◆モデルにテクスチャ、WebGLコンテキスト、マトリクスをセット

◆モデルの更新と描画

モデルの設定が完了したらupdate()、draw()を呼び出します。

◆ソースコードと実行結果

最終的なソースコードと実行結果は次のようになります。

◯ HTML

index.html

◯ Javascript

main.js

◯ 実行結果