23
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[JavaScript]Live2Dみたいにキャラを動かしたかった男の話

Last updated at Posted at 2016-09-28

Live2D作りたい

Live2Dすごいですよね。
maxresdefault.jpg

さらに「Live2D Euclid」で360度動けるなんてもう意味がわかりません(褒め言葉)
あんなものを自分で作って見たいですよね。
そこで技術力皆無の僕がjavascriptでLive2Dっぽいものを作りたかった話をします。

脳筋プログラミング その1

思考力がないので脳筋で実装。
DOMでキャラのパーツごとの要素をそれぞれ誤差を与えながら動かす。
マイムービー.gif
※比がおかしくてすみません。

ああ、なんか怖い。
あとDOMでtopleftを動かしているのでガタガタと揺れちゃってる。

さて、どうしよう...

canvasで同じようなとこをやってみよう!

脳筋プログラミング その2

パーツごとの画像を

sample.js
var img = new Image();
img.src = 'img/parts1.png';
img.onload = function() {
    // 画像読み込み終了
}

上記のような感じで一旦読み込んだ後、
canvasコンテキストのctx.drawImage()で各パーツごとに誤差を与えながら描画する。
使う画像は事前に読み込まないと描画できないので注意。

H-MIGiAtjizrDrCg.gif
※比がおかしくてすみません。

あ、なんかそれっぽい!(満足)
可愛い。もうこれで完成では?

ですが、問題が...

問題点 その1

みなさんご存知の通り、本家Live2Dは各パーツをポリゴン分けしてキャラを動かしています。
live2d_007.png

それに対し、自分が作ったものは各パーツに誤差を与えてキャラが動いているように見せています。
これではLive2Dのように手を動かしたりといった、柔軟な動きを表現することができません。

問題点 その2

現状、動きの情報はコードで全て書いています。
これでは違うキャラを動かしたい場合、もう一回コードを書かなくてはいけないので、Web上でGUIアプリのようなツールを作らなくてはいけない。

脳筋プログラミング その3

この時点でモチベーションは、ほぼゼロなのですが一応試して見ます。

まず、canvasでテクスチャマッピングできるのか調べて見たところ、
canvasを使って知識ゼロから独学してみた「エセ」テクスチャマッピング入門以前編」という記事があったのでこれを参考にさせていただきました。

あと、Web上でGUIアプリのようなツールを作るのですが、jsのフレームワークとかどれがいいかわからないし、そもそも使い方もわからないので全部js直書きしました。jQueryすら使ってません。(脳筋)

スクリーンショット 2016-09-13 21.17.32.png スクリーンショット 2016-09-13 21.21.42.png

こんな感じのUIになりました。
まあ、普通な感じです。

問題の動作なんですが...
名称未設定2.gif
※別のキャラ画像ですみません。

ああ!なんか変!
まあ、もっと作り込めば多少はマシにはなるかな...

これで基本機能は完成のはずだったんですが...

いままでとこれから

とりあえずしたいことはできたんですが、問題点が多すぎてスッキリしません。
canvasでテクスチャマッピングするのはどうも動作が遅いのでスマホとかタブレットではまともに動きませんでした。

なので、今は空いた時間でWebGLを使って作っています。
あと、マウスの動きを追って動くのではなく、gif画像みたいにアニメーションを作れるサービスにして、2月ごろにウチの学校の作品発表会で出そうと思っています。

中途半端な内容ですが、同じようなものを作ろうとしている人のヒントにでもなればと思います。

canvas版の未完成品ですが一応、GitHubに上げておきます.

23
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?