Edited at

Live2D WebGLとNW.jsでデスクトップマスコット

簡単にできそうだったので、デスクトップマスコットの作り方を調べてみました。

NW.jsを使えば既存のWebアプリがさくっとデスクトップマスコットできますっ!

001.gif


開発環境

・Mac 10.10.5(Yosemite)

Live2D Cubism SDK WebGL 2.0

NW.js → 背景透過サポートのあるv0.12.2のMac 64bit版をDL


デスクトップマスコットの作り方

以下のページを参考に背景透過まで簡単にできました。

透過がサポートされたnode-webkit(NW.js)でガジェットを作ろう

 ※ Macの場合は、ターミナルからNW起動とか必要なので以下を参考に

 → NW.jsによるアプリ実行

1)まずは簡単なアプリを作ってみます

透明部分は背景がちゃんと透過されてます。

ちなみに右上の歯車アイコンクリックでconsoleログが見れて開発しやすいです。

002.png

フォルダ構成はこんな感じにしました

nwjs

├── _app
│   ├── index.html → 追加したhtml
│   └── package.json → 追加したjson
├── credits.html
├── nwjc
└── nwjs.app

ヘッダータイトルは非表示にしたかったので、HTMLのtitleタグとjsonのtitleは空にしてます。


index.html

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="utf-8">
<!-- タイトルなし -->
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: green;
color:white;
font-size:60px;
text-align: center;
-webkit-app-region: drag; /* ドラッグ移動用 */
}
</style>
</head>
<body>
<div class="box">
test
</div>
</body>
</html>

確認用に一部コメントにしています


package.json

{

"name": "test",
"main": "index.html"
,
"window": {
"title": "", // タイトルなし
"width": 300, // 幅
"height": 300, // 高さ
"transparent": true//, // 透過
// "toolbar": false, // ツールバーを非表示に
// "frame": false, // フレームを非表示に
// "resizable": false, // ウィンドウのリサイズを無効化
// "always-on-top": true // 常に最前列に表示させる,
}
}

2)Live2Dソースに差し替える

app配下にLive2Dのソースを置きます。フォルダ構成はこのようにしました。

nwjs

├── app
│   ├── framework
│   │   └── Live2DFramework.js → モーション再生する場合は使う
│   ├── lib
│   │   └── live2d.min.js → Live2Dのコアライブラリ
│   ├── package.json
│   └── sample
│   └── Simple
│   ├── assets → モデルファイル
│   │   └── haru
│   │   ├── haru.1024
│   │   │   ├── texture_00.png
│   │   │   ├── texture_01.png
│   │   │   └── texture_02.png
│   │   └── haru.moc
│   ├── index.html → メインページ
│   └── src
│   └── Simple.js → Live2Dのメインソース
├── credits.html
├── nwjc
└── nwjs.app

簡単なアプリ作った時と同様にindex.htmlはtitleを消しておき、ドラッグできるようにcssにcanvasを追加します。


index.html

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<!-- タイトルなし -->
<title></title>
<style>
canvas{
-webkit-app-region: drag; /* ドラッグ移動用 */
}
</style>
</head>
<body>
<canvas id="glcanvas"></canvas>
<!-- Live2D Library -->
<script src="../../lib/live2d.min.js"></script>
<!-- User's Script -->
<script src="src/Simple.js"></script>
</body>
</html>

========== 2016/04/03追記 ==========

下記の修正はせずとも1箇所直せばできる方法を本記事の最後に追記しました

あとテクスチャ以外のバイナリファイル(.moc、.mtn)をロードする際に、既存のXMLHttpRequest経由だとロードに失敗します。

今回はnode.jsモジュールからファイルアクセスにするようにしました。

そのため、Live2Dモデルファイルはnwjsから参照するパス、テクスチャはjsから参照するパスになっています。


Simple.jsのモデル定義部分

// Live2Dモデル定義

var MODEL_PATH = "sample/Simple/assets/haru/"; // nwjsから参照するパス
var IMAGE_PATH = "assets/haru/"; // jsから参照するパス
var MODEL_DEFINE = {
"type":"Live2D Model Setting",
"name":"haru",
"model": MODEL_PATH + "haru.moc",
"textures":[
IMAGE_PATH + "haru.1024/texture_00.png",
IMAGE_PATH + "haru.1024/texture_01.png",
IMAGE_PATH + "haru.1024/texture_02.png",
],
};


Simple.jsのモデルファイルロード処理

    //------------ Live2Dの初期化 ------------

// mocファイルからLive2Dモデルのインスタンスを生成
// Simple.loadBytes(modelDef.model, function(buf){
// live2DModel = Live2DModelWebGL.loadModel(buf);
// });
// nodeのファイルアクセス
var fs = require('fs');
// 同期的にバイナリファイルを読み込む
var mocbuf = fs.readFileSync(modelDef.model);
// ArrayBufferに変換
var arrayBuf = this.toArrayBuffer(mocbuf);
// Live2Dに読み込み
live2DModel = Live2DModelWebGL.loadModel(arrayBuf);


Simple.jsのArrayBufferへ変換処理

/*

* ArrayBufferへ変換処理
*/

Simple.toArrayBuffer = function(buffer)
{
var ab = new ArrayBuffer(buffer.length);
var view = new Uint8Array(ab);
for(var i = 0; i < buffer.length; ++i){
view[i] = buffer[i];
}
return ab;
};


ソースコード

詳細なソースコードはgithubへあげたので、デスクトップマスコット作りたい人は参考にして下さい。

github - Live2D-DeskTopMascot

SimpleとMotionと2つのソースがあり、package.jsonをいじれば切り替え実行できます。

(Simpleはパラメータ操作のみ、Motionはモーション再生するサンプル)

<参考URL>

Node.js でテキストファイルを読み込むサンプルコード

node.jsでBuffer経由でArrayBufferを使う

========== 2016/04/03追記 ==========

XMLHttpRequest経由でロードに失敗する部分ですが、一箇所修正すれば解決しました。

→ TyranoScript + Live2D + phonegap でiOSアプリ化したらLive2Dが動かない

SampleApp1の場合は、PlatformManager.jsのloadByte部分の[case:200]→[case:0]に修正するだけでした。

tes001.gif

ちなみにv0.13.2以降だとその修正もいらなかったけど、背景透過ができなかった...。

また、Unityの場合はAssetがあるのでもっと簡単にデスクトップマスコットが作れます

 → Unityでデスクトップマスコットを作ろう