プロジェクトの作成
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
メニューバーの「フォルダーを開く...」をクリックし、準備したプロジェクトフォルダを開きます。
◆モデル表示までの流れ
Canvasオブジェクトを取得
WebGLオブジェクトを生成
Live2Dの初期化
live2DModelにテクスチャ、WebGLオブジェクト、マトリクスをセット
live2DModelを更新・描画
◆CanvasオブジェクトとWebGLオブジェクトの準備
Live2Dモデルを表示するためのCanvasオブジェクトを取得します。
取得したCanvasオブジェクトからWebGLオブジェクトを生成します。
◆Live2Dの初期化とテクスチャ用Imageオブジェクトの作製
Live2D.init()で初期化後、モデルオブジェクトとImageオブジェクトの準備をします。
◆モデルにテクスチャ、WebGLコンテキスト、マトリクスをセット
◆モデルの更新と描画
モデルの設定が完了したらupdate()、draw()を呼び出します。