そのいらすとや、動くよ（Anima2Dを使ってみた）

とりあえずこちらをご覧ください。

いらすとやの男の子です。

かわいいですね。ハロウィンの時期にぴったりなかっこうです。

この子が、

動きます。

……ということでUnityのアセット、「Anima2D」でいらすとやを動かしてみました。

言い訳

あれ？投稿日時ハロウィンとっくに過ぎてない？

その通り。

書きっぱなしにして放置していた。。。。。

週一くらいで上げるような習慣にしたかったのだけど、

忙しくて（自分の甘えが出たので）おやすみしてました。

やすみスギィ！

Anima2Dとは

Anima2DはUnityのアセットで、2Dのスプライトに対してボーンをやメッシュを設定してアニメーションさせることができます。

いらすとやを動かしてみる

Anima2Dを適用する様子をざっくり紹介。

参考にしたのはコチラ↓

techblog.sega.jp

ここでは実際にSEGAのスマホゲームアプリのキャラクターがAnima2Dで動かされている例が紹介されていておもしろいです。

qiita.com

「とりあえず動かしてみよう」という作業時はこっちを主に見てました。

画像を取り込む

一枚絵をガツンとぶち込みます。

普通、こういった画像データは顔、腕、足など切り刻んで登録したほうがいいです。（参考サイトもそうしてます）

が、

めんどくさい

たぶんそんなことしなくてもそれっぽく動かせるやろ！（楽観）ということで、このままいきます（）

SpliteMesh設定

いわゆる2Dキャラの「肉付け」に当たる部分です。

ゲーム状の肉付けしたいオブジェクトを右クリックして、項目「2DObject→SpriteMesh」を追加する

Assetsにある元の画像に、SpriteMeshが生成されるので、これを選択し、インスペクターから「Edit Sprite Mesh」を選択

するとSprite編集用のウィンドウが開くので、肉付けの設定する

デフォルトだとこんな感じ。

うまく説明できないが、アニメーションとして動く肉の細かさだとか、範囲を決められます。

この状態だとかなりざっくりと肉付けされてますね

「SliceTool」でMeshの設定ができる

Outline detail でノード数が増えてるのかな？

Tessellation は内側にノードを持ってくるかという事が設定できそう。

Alpha cutout は……何だろう（）

ともかく↑ので行きます。

多分Meshが細かすぎると処理が増えるんだろうね

ボーンを適用

ゲーム状の肉付けしたいオブジェクトを右クリックして、項目「2DObject→Bone」を追加する

ノリと勢いと感覚でボーンを付けていきます。

ctrl+alt+B で親子関係を作りながらボーン適用できていい感じです。

こんな感じになった。

ボーンに付いてくる度合い

さっき使ったSprite Mesh Editでボーンを含めた編集ができます。

このボーンと対応するMeshの色の濃度が、ボーンについてくる度合いを表しています。ウエイトってやつですね。

適当に範囲選択してオートのウエイト分け機能を使ったので雑 of 雑だ

うわなんだこの珍妙なシルエットは……

これは「Weght Tool」の"Overlay"と"Pie"を有効にした状態。

さっき設定したノードごとにボーンについてくる度合いが設定できます。

ノードにどのボーンついてくるかの配分が円グラフのように表示されていて、ここをいじるのが感覚的かなと思いました。

さてシーンで動かしてみよう。

カボチャボディくんにボーンをつけてみる pic.twitter.com/KyYxgfygqn

— えんかあるみに (@alumini_strugg) 2018年11月24日

• 彼の左手下におろすと凄いついてくるな（）

• 右手はいい感じ……と思いきや耳がついてきてないかｗｗｗ

• 足はまあいいとして、頭はやばいな

• 首で回すと躍動感があるな

……ちょっとこのままでは不自然すぎるのでウエイトいじって何とかしてみるかな？

まあさっきのウエイトと比べてみてもらえるとわかると思うんですが、より部位ごとにボーンの影響が極端になるよう、他のボーンの影響を完全カットしたり、雑過ぎたウエイトが良くなった気がします。

pic.twitter.com/L8m7e6JH19

— えんかあるみに (@alumini_strugg) 2018年12月6日

なんか口がついてくるんですが（）

上見てもわかるけど左腕（紫）の影響が体の内側に出てるからだなあ

（青いわっかは後で説明するよ）

ということでこうした。

ひだりての部分はひだりてのボーンだけのウエイトを受けるようにしたぞ。

するとどうだ

少しウエイトをいじった pic.twitter.com/ULt6V4R0Xq

— えんかあるみに (@alumini_strugg) 2018年12月6日

うーーんどうかな？

いい感じじゃない？

まあ、切り分けしてないのが悪いんですけどね。

妥協だ妥協。十分面白いので。

IK設定

突然のカボチャヘッド君の登場です。

連結しているボーンに関しては、関節の設定とかできるみたい。

IK（インバースキネマティクス）ってやつです。

Limb,CCDの2種類がありそれぞれの特性に合わせた関節の動きを自動で補助してくれます

関節を１つずつ動かす pic.twitter.com/2OalULXKne

— えんかあるみに (@alumini_strugg) 2018年11月25日

普通に1つずつ動かしていこうとすると面倒そう。

LimbとCCD比較 pic.twitter.com/JIh0iynpRG

— えんかあるみに (@alumini_strugg) 2018年11月25日

Limb,CCDをそれぞれの足先に適応してみました。

CCD（左足）は長い連結した部品を繋ぐのにあった機能なので、関節では有り得ない方向に曲がってますね。

揺れものと考えれば、自然な動きだと思われる。

Limb（右足）は2関節の手足にあった機能のため、持ち上げた際に傀儡人形みたいな足の上がり方してますね。

人の動きとして、自然な感じだ。こっちを採用。

ところでこの青い球をいっぱい出してるの、気功弾みたいでかっこいいね（？）

アニメーションをつくる

あとはUnityのアニメーション機能をつかってアニメーションを作成してみました。

近寄るカボチャボディくん pic.twitter.com/4I6z0XMppM

— えんかあるみに (@alumini_strugg) 2018年11月26日

腰（ボーン上では首）をグリングリン振りながら近づいてくるカボチャボディ君です。楽しそうですね。

まとめ

と、Anima2Dをいろいろ触ってみました。

2Dキャラを無理やりアニメーションさせられるのはなかなか面白い。

しっかり部品を切り取って使えばより自然になりそうです。

こんな機能もあるんやなあって。

ところで、各所に出てきたスクショは、遊びつつ、開発風景そのものです。

飴あげて帰ってもらう pic.twitter.com/z1L8P0XNrY

— えんかあるみに (@alumini_strugg) 2018年11月26日

現在、仮装しながらご機嫌で近づいてくるキャラにキャンディを与えて帰ってもらうゲームを作ってます。

が、既に季節外れ

旬も過ぎてモチベもだだ下がりなんですが、来年のハロウィンには間に合うようにすればいいか（）

来年お楽しみに

自作ホームページにCSSをちょっと組み込む(まわす)

CSSもやってみたいなー

というだけでCSS一口かじっただけのあるみにの話。

自作ホームページにCSSを導入してみたい

自作ホームページを作っていて↓↓

あるみにのホームページ

すこしずつでも改造していけたらなーと思っているわけです

…

……と思ったら5000兆年経過していた

というわけで、なんかHTMLだけではできないような面白い演出？ができるCSSを試してみたいと思います

CSSとは

CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。 例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、 プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、 ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。

http://www.htmq.com/csskihon/001.shtml より引用

簡単に言えば、ウェブページの色んな要素の、表示、出力、再生の仕方をいじくれる。

つまり「見え(聴こえ)方」を変えられるので、見栄えを良くしたり、わかりやすくするデザインができるということ

使ってみたいぜ

まあ、CSSを使ってみることの方が今回の目的ですね

手段と目的が入れ替わった瞬間である

とりあえず回してみた

カスホームページ、ものすごくどうでもいいパワーアップ pic.twitter.com/4kxkDfTgRB

— えんかあるみに (@alumini_strugg) 2018年7月15日

画像にカーソルが重なったらヨガ少年が回るようにしてみました。

触って回るが、マウスをはなしても逆回転して戻ったりしない所がこだわりです。

なんでか……

まわる pic.twitter.com/m6UNiq3EZs

— えんかあるみに (@alumini_strugg) 2018年7月15日

(GIFにしただけ)

こう、触るたびに回転するので、ユーザーが一方向に回してる感がでません？でない？

そんなかんじです（）

実装内容

参考にしたサイトはここ

回転について↓↓

lab.syncer.jp

回転という値を扱うのは

transform: rotate()

でした。()内に値を入れると回転し、回転軸もX,Y,Z軸と指定できる。

重要なのは、カーソルが重なった時を検知する

:hover

だろうか

これは「疑似クラス」というらしく、セレクタ要素の特定の状態に対して指定ができるというものみたいです。

.rote_target{

}

回転の対象になるrote_targetクラスをつくる。

特に指定することもないので、空白。

.rote_target:hover
{
        transform: rotateZ(360deg);
        transition: .3s;
}

次に、「要素の上にマウスがある状態」ときの、rote_targetクラスを指定するために、 :hoverがついたクラスを改めて記述します。

ここで、360°回転させる記述と、それに0.3秒かかるという記述をしました。

transition 

は他のプロパティの値変化に対して、変化するのにかかる時間を与えるものです。

transition 1sとすれば一秒かけて値変化を連続的に行わせてくれるので、結果的にアニメーションに見えるということです。

わりとアニメーション的な表現にとって重要やんけ！！サラッと流すところだった。

あとはhtml内で、

<img src="ヨガの画像.jpg" alt="ヨガポーズ"height="300" class="rote_target">

なんてふうにimgにclass属性rote_targetを与えておくと、

適用させた画像が回転してくれるわけですよ。

ちなみに、

.rote_target{
        transition: .3s;
}

.rote_target:hover
{
        transform: rotateZ(360deg);
}

のように、回転前が空白になっているrote_targetクラスに0.3秒かかるということだけ書いておくと

回転が戻るようになります。

これは、hover状態の有無にかかわらず、rote_targetの方に時間変化の情報が残っているために、 hoverすると360°、hoverしてないと0°（記述がないため初期値）というプロパティの値に対して、時間変化することができるためです。

どっちに対しても最大時間0.3秒で行き来しようとするため、目的の回転角を目指して右往左往できるということらしい。

伝われ～

それに対して今回採用している:hoverのクラスだけに時間変化の情報を記述するとどうなるかというと、

hover中は「0.3秒かかる」という情報があるのでその通りに遷移しようとするが、 hoverを外れると、元のクラスには時間変化に関する記述がないために瞬時に変化したプロパティ＝元の画像の角度（0°）に戻る事になる。

なので戻るアニメーションは起こらないということになる。

というわけです。

回転が戻るのは戻るので面白いのだけど、”一方向にクルクル回す”ということにこだわりたかったんですよね。

今回のケースは、瞬時に戻る0°と、回転のゴールである360°が同じ見た目で、回転時間が短いので、回転中に離してもあまり違和感ないかと思います。

まとめ

というわけでCSSでいらすとや君を回せました。

なんの意味もない（）

htmlもcssも正直ロクな知識があったわけではないですが、自分なりにCSSの挙動に対して理解しながら実装できたかなと思います。

cssで書いたクラスは、htmlの各成分の要素として適応が効くので、一度つくれば色々なものにつけられるのがよさそうです。

レイアウトに関する記述はCSS側に任せて、必要なものを、必要な所に適応していく。

そんな感じでやっていけばいいんですかね。

触れたら回転するCSSはほかのところにも付けられそうなので、ボタンとかに使えるかな？

簡単に画像にちょっとしたアニメーションを持たせられるのはいいなあ

ということでちょくちょくへなちょこホームページをいじっていけたらと思います。

Unityでキズナアイ(Vtuber)を動かしたい-4-（とりあえず操作編）

前回の記事↓↓

aluminum-pepe.hatenablog.com

前回はキズナアイちゃんに踊ってもらいましたが、今回は「操作キャラ」として扱ってみたいと思います。

一番簡単でコードを一行も書きません。

「よくわかんねえけどとにかく動かさせろや！！！！」って人向け

サークル内で似たような講習をしたのでレクチャー風。

走るキズナアイちゃん。(サムネ用)。

到達点

この記事の言うとおりにすると多分こんな感じになる。

コード一行も書かないでキズナアイを動かす pic.twitter.com/ZFSTjqzzrj

— えんかあるみに (@alumini_strugg) 2018年9月30日

ということで頑張っていこう。

UnityにMMDモデルをいれる

改めて簡単に手順をさらいつつ、確認していく。

アイちゃん召喚

キズナアイちゃんを召喚。 （一応足場も出しておく）

召喚の仕方は↓↓の前々々回記事にて

aluminum-pepe.hatenablog.com

※なお、ここで使用するMMDモデルはキズナアイちゃんですが、大体の人型MMDモデルを同様の手順で使用できます。好きなMMDモデルを探してやってみてもいいかも

ミライアカリちゃんもUnity召喚できる

もちろん方法はアイちゃんとおんなじ。

動かすための設定

MMDモデルをUnityに持ってこれたら、動かすための設定をしていく。

移動のアニメーションを作って適用させたり、移動キーに対応して自機を動かすスクリプトを書いたり……

しません。

今回はアセットストアから、そういった「キャラを動かすための諸々」は全部ダウンロード(インポート)してきてしまう。

アセットストアとは

アセットストアとは、Unityで使用できる3Dモデルの素材や画像などを購入できるショップ。

もちろん無料なものもある、またUnityの開発作業自体を助けるツールなんかもある。

アセットストアを使う

アセットストアはUnityのTab(タブ)としてどこかにあるので、選択。

見つからなかったら、Window→から選択して出す。

ちなみにアセットストアはUnityから開かずとも、ブラウザから開くことも可能。

次に、AssetStore から「Standard Assets」を検索

そしてダウンロード→インポート

（選択はとりあえず"import"で）

Standard Assetsとは

おそらく「Sample Scene」と「Standard Assets」がProjectに追加されるはず。

インポートした「Standard Assets」はUnity公式のアセットで、Unityでゲームを作る際に便利なスクリプトや素材が入っているのでおすすめ。

ファイル「Sample Scene」の中には、そのアセットで作られたシーンがいくつか入っているので使い方の参考になるかも。

方針

新たに追加されたファイル「Standard Assets」から、「Characters」→「ThirdPersonCharacter」→「Prefabs」を選択する

すると「ThirdPersonController」という名前の青いブロックアイコンの項目があるはず。

そして、これをGameウィンドウにD&Dしてみる。

すると灰色の人間が現れるはず。

ここで一度実行してみると

この灰色のキャラだけ、→矢印キーまたはWASDキーで動く。

すでにこのキャラは、キャラが動いて見えるための設定が済んでいるので、適用させただけで動かせてしまうのだ。

なので、今回は「とりあえずキズナアイを操作する」ために、この灰色のキャラに適用されている色々をまねてつけてみる。

どんな構造になっているかは、逐一「ThirdPersonController」を見てみるといいかもしれないとアドバイス。

適用

動かすために必要な色々を適用させていきます。

AnimatorController適用

まず、ファイル「Standard Assets」から、「Characters」→「ThirdPersonCharacter」→「Animator」の、「ThirdPersonAnimatorController」をモデルにアタッチしていく。

アタッチとは、要所にスクリプトやオブジェクトを適応させるということ。（D＆Dのこと）

アタッチする場所は、モデルのAnimatorのController

これはキャラのアニメーションを扱っていて、キー操作やキャラの場所に応じたアニメーションを再生してくれる。 （アニメーションごとアセットに用意してある）

スクリプト適用

次に、同じ大元ファイルから、「Characters」→「ThirdPersonCharacter」→「Script」の、「ThirdPersonUserControl」選択しモデルにアタッチする。

モデルのコンポーネント（MMD4MecanimModelやTransformのこと）が並んでいる部分に直接いれる。

画像のように、一番下に入れるのがわかりやすいかも

ちなみに、これを一つ入れただけで、自動的に4つのコンポーネントが追加される。

勝手に必要な項目が追加されるようにできているのだ。すごいね。

モデル設定

なお、これだけでは動かない可能性がある。

モデルによっては、元データのprefabを選択し、InspectorからのImportSettingsを選択して、

「Rig」→「Humanoid」を選択して「Apply」する必要がある。

ここが「Humanoid」でないと、「人用のアニメーション」が動かないので、棒立ちのままになってしまう。

シビアなあたり判定設定

次に、自動的に適用されたカプセル状のあたり判定である「CapsuleCollider」を調整する。

カプセル状の判定がうまくモデルと合うように、Center,Radius,Heightの項目をいじるか、Edit Colliderを選択してマウス操作で調節する。

画像はEdit Colliderを選択してマウス操作で調節している様子。Sceneでカプセル状のあたり判定の各所に四角いポイントが現れるので、それをマウス操作っで動かすと、カプセルの形状を変えられる。

このあたり判定、初期段階で地面にめり込まないように注意する。

そうなってしまった場合、このスクリプトの接地判定処理がうまく働かないので、

浮く。

判定を有効化してみると、こんなかんじ。

あたり判定は地面にくっついているように見えるが、アニメーションが空中にいるときのものを再生してしまっている。

地面にめり込まないように、きをつける。

これで、適用は完了。

実行

これで動く。

矢印、WASDキーで移動、スペースキーでジャンプ。

アイちゃんが走ったーーー！

動いたヒャッホーーーイの図 pic.twitter.com/hNHnBIwQii

— えんかあるみに (@alumini_strugg) 2018年9月30日

はしったーーーーヒャッホーーーーー（落下）

立ってるだけで可愛いの図 pic.twitter.com/a19oxzzgCX

— えんかあるみに (@alumini_strugg) 2018年9月30日

待機モーションも再生されてる。

もはや立ってるのを眺めているだけでもいいけどねえ

ちなみに、「適用」ときに勝手に追加されたコンポーネントの中に「ThirdPersonCharacter」という、色々入力できる項目のあるものがある。

これをいじると、移動スピードや、ジャンプ力などを変えることができる。

なお、先ほどからの動画ではジャンプ力をかなり高めに設定しているので、超ジャンプしていたというわけなのだ。

いくらかいじってみると面白いかも。

と、ひとまず操作出来るようになった。

その他設定

アセットを使ってもうちょっとだけなんかする。

カメラを設定する

さて、Gameウィンドウではどうしてもカメラが離れたところにあり、見にくい。

カメラの位置を直接変えて見やすくする……のではなく、ここでもアセットの力を借りる。

「Standard Assets」→「Cameras」→「Prefabs」に入っている、「MultipurposeCameraRig」を、Hierarchyに直接アタッチする。

さらにアタッチしたところで「Targert」を選択できるので、HierarchyのMMDモデルをアタッチする。

これで一番最初に上げた動画のように、カメラが操作キャラを回り込むように追従するようになる。

空を変えてみる

※これ、本来の進行と変えたのですぐにできないので飛ばしてもらっていいです（）

せっかくなので空を変えてみよう。

アセットストアで「Mecanim Locomotion Starter Kit」を検索し、ダウンロード→インポート。

ヘッダーから「Window」→「Lighting」→「Settings」を選択する。

いかにもな場所（SkyBox Material）にはすでに設定されているSkyBoxがあるが、ここの横の○をクリックする。

すると、プロジェクト内のテクスチャ（画像）一覧から、どれをSkyBoxに設定するか選ぶことができる。

上の検索欄に「Sky」と検索すれば曇のある青空のテクスチャが表示されるので、これを選択する。

いろいろ設定できたかと。

到達～

以上全てを実行すると……

コード一行も書かないでキズナアイを動かす pic.twitter.com/ZFSTjqzzrj

— えんかあるみに (@alumini_strugg) 2018年9月30日

こうなります。

まとめ

ね？一行もコードを書かなかったでしょ？

誰かの用意したものをUnityの画面でゴニョゴニョ設定するだけで、それっぽい動きをさせることができるんすねえ。

え？もっと動かしたい？

違うアセットも使ってみよう（他力本願）

ただし、アセットを使っていると、自分好みに拡張させたり、変更を持たせたいときに、どこを変えたらいいのか分からないことがある。

それならば、自分で移動処理のスクリプトを書いた方がいいということもあるので、頑張ろう。

特に今回適用した「ThirdPerson~」のスクリプトは、未熟な自分には理解しきれない部分もあるので、自身がキャラ操作を扱うときはわかる部分を参考にしつつ、自分で移動のスクリプトは書いて、アニメーションコントローラを組んだりしている。

といっても、3Dアニメーション自体は自力で用意はできないので、そういったものはアセットに頼ることが多い。

そんな話もいずれもできたらいいかもしれない。

次回は表情変化の方法について、書こうかな。

次回、表情変化（？）

ライセンス表記

キズナアイ Ver1.01

企画・製作：Project A.I. キャラクターデザイン：森倉円 モデリング制作監修：Tda モデラー：トミタケ

(c)Kizuna AI

ミライアカリ(Mirai Akari)Ver 1.0 モデラー:Digitrevx イラスト:KEI

(c)Mirai Akari Project

Unityでキズナアイ(Vtuber)を動かしたい-3-（踊る編）

前回の続き

aluminum-pepe.hatenablog.com

なんやかんやでvmdファイルをUnityに召喚したキズナアイに適応できた。

ということで踊らせようぜ！！！！！！！！！！！！！！！！！！！！！！！！！！！

今回は詳しい説明なしパート

曲目「ハッピーシンセサイザ」

題のとおりEasyPopさんの、「ハッピーシンセサイザ」を踊ってもらおうと思います

なんで？

なんで？キズナアイチャンネルをご覧になっておられない？

こんなのがあるのよ↓↓

www.youtube.com

あーかわいいねえ

歌声もいいですね

詳細を乗っける↓↓

巡音ルカ・GUMI先輩の『ハッピーシンセサイザ』の歌ってみた&踊ってみたに挑戦してみました！ これを聞いて、みんなも楽しく元気になってくれたらうれしいです！ それではどうぞ！

---

※敬称を略させていただいています！

■原曲 『ハッピーシンセサイザ』 http://www.nicovideo.jp/watch/sm12825985

作詞：Easy Pop 作曲：Easy Pop 編曲：Easy Pop 唄：巡音ルカ・GUMI

■振り付け めろちん http://www.nicovideo.jp/watch/sm12926280

---

……はい、とのことで

振り付けが、「めろちん」さんの踊ってみた動画の振り付けをもとに作ってるみたいですね

そして

www.nicovideo.jp

ここにその、「めろちん」さんの踊ってみたをトレスしたという踊ってみたMMDの動画！！

しかもモーションを配布してくださっている……ありがたい！！

ちなみにこの動画は「ブレン坊」さん、「あひるP」さんが別々に作成したダンスをルカとGUMIそれぞれで踊ってるとのことで、微妙な動きのずれとかが、別のキャラ二人で踊っているという感をより表すことになっているのでとてもすごかったです。

というわけで何ができるかというと、

元の振り付け元が同じなので動画のダンス再現できるじゃん！！

ってことです。Unityでやる価値全くない。

でもできるからやるの。

適用作業

動画元のブレン坊さんらに感謝しつつ、動画詳細からモーションダウンロードページに飛んでモーションをダウンロード。

お借りします……！！

そしてvmdファイルを前回の要領で適用

なおブレン坊さんの配布データには「口パク」までついているということでこれも適用しちゃう。

参考サイト

simplestar-tech.hatenablog.com

いやもう完全な先駆者様……

探せばいくらでも出てきますねこの分野。

MMD4Mecanimではいくつかのスクリプトが用意されていて、その中の「MMD4 Mecanim Anim Morph Helper」に表情変化用のanimファイルを適用させることができます。

配布された「リップシンクのみ」を適用すれば「口パク」をしてくれる！

また、元のアニメーション自体をここに適用すると、元動画の表情変化ごと再生してくれるみたいです。

せっかくなのでそっちにします。

モーションファイルごと適用すると、動画どおりの口パクを含めた笑顔、目線などの表情変化もしてくれました！

これはウィンクキズナアイ。

そしてこれはシャンプーCM並みキズナアイ。

えっち。

挙動

↑の画像で当たり前のようにアイちゃんの髪が振り乱れていますが、UnityでのMMDモデルの物理演算はデフォルトでは行ってくれません。

なお、これらについては「Bullet Physics」という、MMDのほうで使われていた物理エンジンをこっちでも動かせるようになっているため、設定すれば簡単に揺れ物が揺れたりします。

（すこし過剰な気もするけど今回は目をつぶる）

踊る場所

既にスクショで見えてるし大したことはないのですが、

いつもアイちゃんのいる虚無なバーチャル空間を再現してみました。

（ただそれっぽいタイルを張り巡らしただけ）

やっつけ仕事で出来ている「ランダムワード生成機」も置いておきました。

こっちみてるアイちゃんかわいいですね。

音源

piapro.jp

どうしても音とは合わせたかったので、

ここからダウンロードできる「ハッピーシンセサイザ　カラオケ」を使用しました。

作詞、作曲、編曲はEasyPopさんです（ライセンス並感）

字幕

カラオケ音源ということで、

申し訳程度の字幕が用意してあります。

踊ってみた

というわけで、踊ってみた動画です。

（音質悪い）

キズナアイちゃんでEasyPopさんのハッピーシンセサイザ踊ってみたをUnityで再現してみるやつ（完成度低） pic.twitter.com/Q57t0dBhGU

— えんかあるみに (@alumini_strugg) 2018年9月3日

うーーーん、音質悪いし若干ずれてるけど……

こだわりすぎて記事ださないよりマシ！！

今後で改善していこう。

個人的にはアイちゃんが可愛く踊ってるので満足ですはい。

まとめ

というわけで、キズナアイちゃんのMMDモデルを使って、Unityで歩かせたり、踊らせたりできました！！

表情変化にも触れたいのですが、

次回はとりあえず三人称視点の操作キャラとして動かしてみるやつを書きます。

もはや外見がキズナアイなだけで、やってることはよくあるUnityのチュートリアルのようなものになると思われます。

次回、とりあえず操作編

ライセンス表記

モデル：　kizunaAI(c) 楽曲　：ハッピーシンセサイザ　EasyPopさん

Paint3Dでフリー素材の差分を作った話

Paint3D、思ったより便利じゃーん！

って思ったあるみにの話。

……

ゲームを作るとき、よほどグラフィックに秀でた人間であるか、そういった人間が身近にいて、かつ協力してもらえる状況でない限り、「フリー素材」を用いると思います。

「いらすとや」にお世話になった人も少なくないでしょうし、Unityで言えばアセットストアを使ったり、適当に検索して引っかかったフリー素材を使って、ゲームに組み込むのがやっぱりお手軽ですよね。

簡単なオブジェクトや、複雑なアニメーションが求められない限り、それでうまくいくと思います。

しかし、「操作キャラ」はどうでしょう。

操作キャラの場合、実現したい動きに合わせて、グラフィックも変化させたいはずです。

しかし、フリー素材にそんな差分あるわけない（ごくまれにあるけども）。

そんな感じの状況で加工OKのフリー素材を加工して差分を作ればよくね？

とおもってやってみた話です。

主人公はハムちゃん

今回用いる素材はこちらです。

ハムちゃん。

かわいい。

拾ったのはここから↓↓

frame-illust.com

（無料使用可能、加工もOKとのこと）

詳細は省くがハムスターを自機に用いたゲームを作ろうとしていたのですが、

ハムスターかつゲームに使えそうなイラストがあるわけもなく。

そのなかでもかわいいと思ったこのイラストをもとに、差分を作ってみることにしました。

Paint3Dを起動

グラフィッカーいねぇ新しく書けねえで困ってるのに、優秀なペイントソフト（Photoshopとか）を持ってるわけないでしょ。

無料でも高性能なペイントソフト（GIMPとか）もあるけど、レイヤーもよくわからん素人にいきなり複雑な機能も使いこなせんわけですよ。

今回使って見るのは、Windowsなら多分みんな無料で使える？「Paint3D」です

3Dの名の通り立体オブジェクトも作れるものですが、今回は2D的な利用をしていきます。

3Dでちょっといろいろしてみた記事があります。

aluminum-pepe.hatenablog.com

まあここで触った事があるのも大きいですが、

自分は、ペンが選べて、色が吸い取れて、図形が作れて、くらいしかわからないです。

それが簡単に扱えるので、十分だと思います。

単純そうでしょ？

GIMPというのもダウンロードしてみましたが、わけわからなくなりました（）

もはや白いキャンバスとかすら出せなかったよ（調べろ）

秘技、マジック選択

今回使うのは

• ペン機能
• 塗りつぶし機能
• 色コピー
• 選択
• マジック選択

です。

今回はこの「マジック選択」がキモです。

使ってみたらなかなか有能？だったので共有したいと思った次第です。

例えば先ほどのハムちゃんの画像をインポートしておきます。

「吸い取りペン」を用いて、くわえているタネを消しました。

拡大しながらかけるのもいいですね。

そしてマジック選択。

切り取り範囲を選択するように言われるので、鼻周りをぐるり。

決定を押せば、

切り取られました。

なんか浮き上がった……

「マジック選択」は、選択した範囲内をソフトが判断して切り取ることが出来る機能です。

今回は鼻とその周辺をいい感じに切り取ってくれました。

あとはこれをいい感じに横に移動させて……

そしてそれっぽく「吸い取りペン」で色を合わせて調節。

目も「マジック選択」で移動させます。

すると横を向いているハムちゃんになりました。

部位を切り取って移動させるだけでもかなりそれっぽくなるみたい。あとは手をずらせば良さそう。

「マジック選択」は精密な切り取りも必要なく、切り取り後の修正もしやすかったです。

自動で切り取られますが、決定前に範囲の修正もできます。

また、一度切り取った範囲は「選択」で移動させられるので他の差分を作るのにも役立ちました。

ハムちゃん差分いろいろ

ということで、作ったハムちゃんたち。

これが横向き。

あとはなんか、再配布になってしまわないように、まとめてドン。

足とか目とか、切り取って消したり移動させたり、技術無いなりに頑張ってみました。

透過

うっかり透過でないバックに書いてしまったので、背景透過のウェブツールを使用しました。

www.webtoolss.com

これがなかなか便利でした。「戻る」機能なんかもあってよい。

まとめ

ということで、素材がないと全てを諦める前に、

加工OKなフリー素材から作ってみる手があるのでは、という話でした。

比較的簡単で分かりやすい「Paint3D」も使っているので、なかなか良いのではと思いました。

それにしてもハムちゃんかわいい。

自分で手を加えたのもあって、気分も上がりましたねえ

切り取ったハムちゃんで作ったゲームは、いずれ紹介できればなと思います。

遂に動きアリ！RADiCALのモーションキャプチャーがFBXでダウンロードできるようになった！！

RADiCALって何か？

aluminum-pepe.hatenablog.com

これが前の話。

RADiCALに動きアリ？

スマホの「RADiCAL」のアイコンが何故か青くなっていて、 前回の記事のアクセスが若干増えてる……？

と思ってひっっっさしぶりに起動しました。

ダッシュボードには以前私が取り込んだ友人のモーションのスキャンがあり、 何気なく、FBXのダウンロードをクリック。

いつもなら、

「商用アップデートをまとう！！」

なんて言われる……ハハハ、分かってる分かってる……

が、

お？

なにか様子が違うみたい。簡単に言うと

「おい、ダウンロードしたいならアップデートしろよ」

ということみたいです。

えっ、つまりアップデートしたらダウンロードできちゃうんすか……

はい。ダウンロード、できます。

ということでコンティニューコンティニュー。

まず、アップデート前のキャプチャープレビューが、

これが、

こう。

あれ？人間なんかリアルじゃない？？

RADiCALでモーションキャプチャー
アップデート pic.twitter.com/nnnzM4hsik

— えんかあるみに (@alumini_strugg) 2018年8月15日

リアルな人間が動いてる……

そして思い切ってダウンロードをクリックすれば……

FBX形式でダウンロードできちゃった。

うそ……こんなにあっさり……（）（）

ちなみにこれ、Unityに持っていって試してみたんですけど、

ダウンロードしてきたモーションをUnityに持ってきた pic.twitter.com/UJRUyWqeMZ

— えんかあるみに (@alumini_strugg) 2018年8月18日

適用できましたねえ……

実行してみただけ pic.twitter.com/m77hp4FjnV

— えんかあるみに (@alumini_strugg) 2018年8月18日

特に意味はないけどキズナアイちゃんに適用してみた（）

ひどいモーションだ（）

でもまあ、まじめに動いたやつでモーションキャプチャーして適応させれば面白い事が出来そう。

RADiCALにもともとあったサンプルがありました。

RADiCAL サンプル3 プレビュー pic.twitter.com/UChZJfC9mC

— えんかあるみに (@alumini_strugg) 2018年8月15日

こりゃすごい。

これは流石にサンプルなのでFBXはもらえませんでしたが、

これだけの精度のモーションキャプチャーサービスを利用できるというのはすごいことなのかもしれないです。

こういう動きしてるキズナアイを見せたかったなあ（怠惰）

基本的に、スマホで撮った動画をあげる、Youtubeの動画を用いるといったような方法が推奨されているようですが、撮った動画の環境を伝えればそれに適したモーションキャプチャーをしてくれるっぽいです。

そんなうまい話ばかりではない

前回も調べた通り、「商用リリース」がなされるはずのRADiCAL。

もちろん完全にタダ、というわけにはいかないようです（そりゃそうだ）

どうやら、2018年10月31日まで無料トライアルがサービスされるようですが、

モーションキャプチャーしてもらうために必須である、動画のアップデート/ダウンロード量が課金要素となるようです。

利用できる動画時間を「Playtime（プレイタイム）」と呼び、スキャンしたものをダウンロードすればその時間だけそれが消費されているようです。

Playtimeが現在ちょこっともらえているのが無料トライアルということなのかな？

自分は先ほどの動画をモーションキャプチャしたものをFBX化してダウンロードした11秒分だけ、Download　Playtimeが減っているので、そういうことなのでしょう。

3分……なかなか無駄にはできないですね……

スキャンを公開するので恐らくUpload　Playtimeを消費するのだと思います、こちらは10分も用意されてますね。

※追記

元々無料用の「Personal」から、このトライアル期間中は「Producer」という有料会員状態になっているっぽいです。

もともとPlaytimeは月に一度少しずつ与えられていて、そのひと月当たりのPlaytimeの量や、アップロード/ダウンロード速度などに違いがあるようです。

足りなくなったらPlaytimeは別途で買うと、そんな感じかな？

自分のへなちょこ翻訳で、理解が間違っているかもしれないので気になった方は調べてみるといいと思います（丸投げ）

さいごに

スマホを介して動画をスキャン→モーションキャプチャのFBX化→ダウンロード……このRADiCAL、かなり手軽で強力なサービスだと思います。

きっと商用でも人気でそう。

いい状態で使わせてもらえるうちに使わせてもらいたいですねえ。

ところで、Playtimeを増やす方法は課金以外にもあります。

RADiCAL開発陣はどうやらモーションの動画のサンプルを集めているようなので、そういったものを送るといいみたいです。

それから、招待という制度で、他の人に始めてもらえれば招待した人はPlaytimeを獲得できるそうですよ。

……何が言いたいかわかりますね？（）

getrad.co

このリンクから登録されると、招待主（つまり私）のPlaytimeが増えるらしい！！

よかったらここから登録しよう！！！！！！！

……とかいって、「お前の利益になるのは気に食わん」という人がほとんどだと思うので、スマホのアプリストアから、普通に「RADiCAL」で検索してアプリを手に入れるか、PCから検索してサインアップするのがいいと思います。

むしろこういう、石1000個欲しくありませんか？とかいっちゃってポイントサイトとかに誘導するやつ、よくあるけど腹立たしいわ～

まあそれはさておいて

お手軽にモーションキャプチャーできるこのRADiCAL、ぜひ試してみてください。

みんなもレッツ、RADiCAL！！！！！

え？はてなブログでLaTeXかけるってマジ？

まさか、、ね？？

ありゃ！？ ！！！！？？？？

数式は

\begin{align*} b_n = \sum_{m=0}^{N-1} a_m \end{align*}

おお、かけますね。

なにげない気持ちで「はてなブログ　TeX」で検索したら

auewe.hatenablog.com

というような記事が見つかりまして、試した次第。

はてなブログでは、「MathJax」という、数式をウェブブラウザ上で表示するJavaScriptライブラリが動いているようで、

それを用いてLaTeXの数学環境コマンドを再現することができるようです。

つまりは二番目に試した表なんか知るか、って感じなのかな……？自分の書き方が悪いのかもしれない。

書き方としては、

[tex:

]

で挟まれた位置にLaTeX文章（というか数式）を書けるようです。

あと面白いと思ったことが一点、

数式はクリックして指定できるみたい。

それから、右クリックすると

こんな風に詳細が開けて、

「TeX commands」を選択すると

どういう記述によって書かれてるかもわかるようです。

他の人のはてなブログのLaTeX文書から盗……お勉強出来そうだ

……まあ、だからといって自分が数式使った記事を書けるとは思わないですけどね！！！！！！！！！！！！！！