Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
78
Help us understand the problem. What is going on with this article?
@naotaro0123

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

More than 1 year has passed since last update.

簡単にできそうだったので、デスクトップマスコットの作り方を調べてみました。
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でデスクトップマスコットを作ろう

78
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
naotaro0123
Webエンジニアです。BlenderとWebGLと漫画が大好きです ◆ソース http://github.com/naotaro0123

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
78
Help us understand the problem. What is going on with this article?