あるみにメモ

技術的なメモをかくかもしれない

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

CSSもやってみたいなー

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


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

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

f:id:aluminum_pepe:20181002023050p:plain

あるみにのホームページ

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



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

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


CSSとは

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

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


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

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


使ってみたいぜ

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

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


とりあえず回してみた

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

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

なんでか……

(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を与えておくと、


f:id:aluminum_pepe:20181004040616g:plain


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


ちなみに、

.rote_target{
        transition: .3s;
}

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

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


f:id:aluminum_pepe:20181004031129g:plain

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


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

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


伝われ~


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

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

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

というわけです。

f:id:aluminum_pepe:20181004025700g:plain

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

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


まとめ

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

なんの意味もない()


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

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

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

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


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

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


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




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

前回の記事↓↓

aluminum-pepe.hatenablog.com


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

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

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

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

f:id:aluminum_pepe:20181001043926p:plain

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


到達点


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



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


UnityにMMDモデルをいれる


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


アイちゃん召喚

f:id:aluminum_pepe:20181001044010p:plain

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

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

aluminum-pepe.hatenablog.com


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

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

f:id:aluminum_pepe:20181001044024p:plain

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


動かすための設定

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

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

しません。

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


アセットストアとは

f:id:aluminum_pepe:20181001061647p:plain

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

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


アセットストアを使う

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

f:id:aluminum_pepe:20181001044049p:plain

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

f:id:aluminum_pepe:20181001044105p:plain

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

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

f:id:aluminum_pepe:20181001044128p:plain

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

f:id:aluminum_pepe:20181001044157p:plain

(選択はとりあえず"import"で)


Standard Assetsとは

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

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

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


方針

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

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

f:id:aluminum_pepe:20181001044219p:plain

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

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

f:id:aluminum_pepe:20181001044226p:plain

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

f:id:aluminum_pepe:20181001044239p:plain

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

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

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

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


適用

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


AnimatorController適用

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

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

f:id:aluminum_pepe:20181001044311p:plain

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

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


スクリプト適用

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

f:id:aluminum_pepe:20181001044321p:plain

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

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

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

f:id:aluminum_pepe:20181001044330p:plain

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


モデル設定

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

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

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

f:id:aluminum_pepe:20181001044341p:plain

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


シビアなあたり判定設定

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

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

f:id:aluminum_pepe:20181001044354p:plain

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

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

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


f:id:aluminum_pepe:20181001044404p:plain


浮く。


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

f:id:aluminum_pepe:20181001044414p:plain

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

f:id:aluminum_pepe:20181001044424p:plain

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


これで、適用は完了。


実行

これで動く。

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

f:id:aluminum_pepe:20181001044433p:plain

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



はしったーーーーヒャッホーーーーー(落下)



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

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


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

f:id:aluminum_pepe:20181001044536p:plain

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

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

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

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


その他設定

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


カメラを設定する

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

f:id:aluminum_pepe:20181001044546p:plain

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

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

f:id:aluminum_pepe:20181001044555p:plain

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

f:id:aluminum_pepe:20181001044604p:plain

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


空を変えてみる

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

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

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

f:id:aluminum_pepe:20181001044658p:plain

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

f:id:aluminum_pepe:20181001044707p:plain

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

f:id:aluminum_pepe:20181001044717p:plain

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

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

f:id:aluminum_pepe:20181001044727p:plain

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


到達~

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



こうなります。


まとめ

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

誰かの用意したものを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でやる価値全くない。

でもできるからやるの。


適用作業

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

f:id:aluminum_pepe:20180619052233p:plain

お借りします……!!

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

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

参考サイト

simplestar-tech.hatenablog.com

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

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

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

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

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

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


f:id:aluminum_pepe:20180904045330p:plain

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


f:id:aluminum_pepe:20180904045358p:plain

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


f:id:aluminum_pepe:20180904045424p:plain

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

えっち。


挙動

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

f:id:aluminum_pepe:20180904053412p:plain

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

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


踊る場所

f:id:aluminum_pepe:20180904045636p:plain

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

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

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

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

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


音源

piapro.jp

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

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

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


字幕

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

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

f:id:aluminum_pepe:20180904050806p:plain


踊ってみた

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

(音質悪い)


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

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

今後で改善していこう。

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


まとめ

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

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

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

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



次回、とりあえず操作編



ライセンス表記

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

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

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

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

……

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

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

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

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

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

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

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

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

主人公はハムちゃん

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

ハムちゃん。

f:id:aluminum_pepe:20180826025836p:plain

かわいい。

拾ったのはここから↓↓

frame-illust.com

(無料使用可能、加工もOKとのこと)

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

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

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


Paint3Dを起動

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

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

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

f:id:aluminum_pepe:20180826030210p:plain

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

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


aluminum-pepe.hatenablog.com


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

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

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


f:id:aluminum_pepe:20180826030323p:plain

単純そうでしょ?

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


f:id:aluminum_pepe:20180826030621p:plain

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


秘技、マジック選択

今回使うのは

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

です。

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

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


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

f:id:aluminum_pepe:20180826030703p:plain

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

f:id:aluminum_pepe:20180826030713p:plain

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

f:id:aluminum_pepe:20180826030722p:plain

そしてマジック選択。

f:id:aluminum_pepe:20180826031334p:plain

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

f:id:aluminum_pepe:20180826032753p:plain

決定を押せば、

f:id:aluminum_pepe:20180826031347p:plain

切り取られました。

f:id:aluminum_pepe:20180826031356p:plain

なんか浮き上がった……

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

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

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

f:id:aluminum_pepe:20180826031423p:plain

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

f:id:aluminum_pepe:20180826031441p:plain

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

f:id:aluminum_pepe:20180826031453p:plain

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

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


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

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

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


ハムちゃん差分いろいろ

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

f:id:aluminum_pepe:20180826031521p:plain

これが横向き。

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

f:id:aluminum_pepe:20180826032440p:plain

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


透過

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

www.webtoolss.com

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


まとめ

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

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

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

f:id:aluminum_pepe:20180826032551p:plain

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

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

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

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

RADiCALって何か?

aluminum-pepe.hatenablog.com

これが前の話。



RADiCALに動きアリ?

f:id:aluminum_pepe:20180816000302j:plain

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

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

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

いつもなら、


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


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


が、



f:id:aluminum_pepe:20180816000804p:plain



お?

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

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

ということみたいです。

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


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

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

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


f:id:aluminum_pepe:20180515163435p:plain

これが、


f:id:aluminum_pepe:20180816004344p:plain

こう。

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




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


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



f:id:aluminum_pepe:20180816005057p:plain


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

うそ……こんなにあっさり……()()

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




適用できましたねえ……




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

ひどいモーションだ()

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



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

f:id:aluminum_pepe:20180816004822p:plain



こりゃすごい。

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

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

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

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

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

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

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

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

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

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

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

f:id:aluminum_pepe:20180816012813p:plain

自分は先ほどの動画をモーションキャプチャしたものを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かけるってマジ?

{ \LaTeX 書けるなんて、}

まさか、、ね??

ありゃ!?{ \LaTeX } !!!!????


\begin{tabular}[htb]{|l|c|c|} \hline
さて &amp; 如何か &amp; 表は \ \hline
まあ &amp; 流石に &amp; 表は \
うん &amp; 無理か &amp; 表は \ \hline
\end{tabular}

数式は

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

おお、かけますね。



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

auewe.hatenablog.com

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

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

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

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

書き方としては、

[tex:

]

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

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

f:id:aluminum_pepe:20180808121253p:plain

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

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

f:id:aluminum_pepe:20180808121656p:plain

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

TeX commands」を選択すると

f:id:aluminum_pepe:20180808121835p:plain

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

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



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

制作物紹介-1- ポ○ックブレンダーをSiv3Dで作ってみた

いままで作ってきたゲームなんかを紹介したいあるみにのお話。

人生初のゲーム制作がこれだったのだけど、大した知識がなくても出来ました。

単なるゲーム紹介と経緯や作り方についての二部構成?なので後者に興味がなくても前半だけでも見れると思われます。

簡単なゲーム紹介

ポ○ックブレンダー

ゲーム画面はこちら。


f:id:aluminum_pepe:20180715005835j:plain

DL…http://firestorage.jp/download/ae7798c76b070d22a8f15b4da633cb74236d5754

四か所にあるマーカーの位置と、回転するマーカーが重なるときに、対応するボタンを押す!

タイミングが完全であれば「◎」、まあ良ければ「○」、大きくずれていれば「×」の評価になります。

評価スコア

  • ◎……50
  • ○……10
  • ×……-10

え?それどこかで


1人で1つのキーを担当するようにすれば、最大四人でプレイできます。

イメージとしてはひとつのマシンを四人で囲んでやるイメージ。原作に忠実でしょ?

各種モードについて


みんなでブレンド

最もベーシックなモード。やったことがある人ならある。

◎~×の評価が四か所で合計され、総合スコアを出す。最後にスコアランキングも出るのでハイスコアを目指そう!

f:id:aluminum_pepe:20180715005854j:plain

(個人的に2000行けば大したものだと思います)

いちおうセーブデータがあるので一度閉じても読み込んでくれます

もちろん1人でやっても大丈夫。後述するが、コンフィグで1人プレイ推奨モードにするといい。


バトルブレンド

四か所それぞれのマーカーのスコアが個別にカウントされ、各箇所のスコアと順位を表示してくれる。

f:id:aluminum_pepe:20180715013154p:plain

(みんなでブレンドでも「Qキー」を押すことで個別の結果が見れてしまうので現状あまり意味がない)


コンフィグ

ゲームと言えばコンフィグを弄って自分好みにしたい。

f:id:aluminum_pepe:20180715012430j:plain

このゲームにそこまでの自由はないけれど、四方のマーカーに対応するキーパターンが二種類ある。


「W」,「P」

「Z」,「/」(スラッシュ)


の四種類でやる複数同時プレイモード。キーが離れてるだけ。

みんなで一台を囲んでやろう。多分邪魔にならない。

通信すれば複数人プレイできる時代、でも一台で複数人遊べたらなってことも、ありますよね?(言い訳)

2人で2キーずつ担当してもいいかも?


「F」,「K」,

「V」,「M」


の四種類でやる1人プレイ推奨モード。キーが近いから多分やりやすい。

都合よく複数人でできるわけねーだろ!!って思ってる人も4人分1人で遊べるのでお得かもしれない。

むしろハイスコアを狙いたいならこっちを無限に試行した方が良さそう。

作者はこっちばかりやってました。


マーカー君とはなす

あんまりにもパクオリジナリティにかける気がしたので、かわいいマスコットを用意。


f:id:aluminum_pepe:20180715013309j:plain

その名も「マーカー君」です。15秒で思いつきました


各モードの説明をしてくれたりお話してくれるので割と役に立っている。

f:id:aluminum_pepe:20180715013121j:plain

後述するが、オブジェクト指向っぽく書く練習として、こいつだけがクラスを使って書いてあります。

(すなわちほかはそうでない)

何度も話かけたくなる……よね???浅い作りこみを是非見ていってください。


f:id:aluminum_pepe:20180715020441p:plain


ダウンロード先URLはこちら↓↓

http://firestorage.jp/download/ae7798c76b070d22a8f15b4da633cb74236d5754

制作物をちょいちょい公開していく予定↓↓

http://aluminum0001.webcrow.jp/gamepage.html


人生初のゲーム制作

ここからは自分語り。

ゲームを作った経緯とかどんな風に作ったかを話しているのでゲームの紹介で十分な人はそっ閉じ推奨(?)

プログラミングもゲーム制作も経験がほとんどなかった最初、サークルの先輩方から教えてもらったのが「Siv3D」というライブラリでした。


Siv3Dとは?

github.com

以下引用

ゲームとメディアアートのための C++ ライブラリ

Siv3D は C++ で楽しく簡単にインタラクティブなアプリケーションを作れるライブラリです。

2D / 3D グラフィックスやオーディオを自在にコントロールし、KinectLeap Motion, カメラやマイクといった様々なデバイスを使った複雑なインタラクションを短いコードで書けます。

引用終わり。

てなわけでして、 リファレンスを見ればわかるとおり、画面上で図形を動かしたりがとても簡単で分かりやすく、少ない行でいろんなことができます。

もっというとこの先C++オブジェクト指向の勉強をしていく中で、このSiv3Dのライブラリとして持っている機能やクラス構造はとても参考になりました。


開発環境

VS(Visual studio)もサークルのオヌヌメだったもので。


経緯

作るための環境を先に決めていました。

なにをつくろうかな……

と思っていた時に、発売したのは「ORAS」。

リメイクうれしい~~~~~

ということは、あのミニゲームをもう一度できるのか……?あれ好きだったんだよな~~~~~


ポロックブレンダー廃止


どうして…


……



ないなら?



作ればいい!!!!!!!!!


ということで作ったという事です。

やっぱりパクリじゃないか

ただし、初めてのゲーム制作において、なにかを真似たり、 オマージュすることは作るべきゲームの形が明確になっていた分良かったとも言えると思います。

開発について

以下だらだらと。

とりあえずリファレンスを見たりググったりです。

「Siv3D 図形 回転」で検索したのはいい思い出、中心軸を指定して回転する"rotateAt()"がすごく役に立ちました(というかゲームの根本)

当たり判定がものすごく簡単に取れるので(insects)、評価も作りやすかったです。

魔王魂というサイトでSEや音源を無料で使わせてもらえたので、雰囲気も出たかと思います。


このときはシーン遷移はSwich文でした、一回しか呼びたくない処理を一回しか通らないcaseを作ってなんとかした覚えがありますね……

オブジェクト指向とかもよく考えてなくて、四か所の判定処理や図形は四回ほぼ同じ事書いてます()

コードをかくのに慣れてきてから「マーカーくん」をクラス構造で実装してオブジェクト指向っぽい練習をしています。

残念ながらあまり恩恵のない実装でしたが()、動かし方の勉強になりました。



あちこちに不備はみられるものの、

「タイトル」、「説明」、「サウンド」、「スコア評価」までした、作った中で一番まともなゲームだったりするのでちゃんとしてくれ自分。

そんなわけで作っていこうまるでいじってないままですが、腐らせるのももったいないので公開しておきます。

どうぞやってみていただけると幸いです。


ダウンロード

ダウンロード先(firestorage)はこちら↓↓(しつこい)

http://firestorage.jp/download/ae7798c76b070d22a8f15b4da633cb74236d5754

制作物をちょいちょい公開していく予定↓↓

http://aluminum0001.webcrow.jp/gamepage.html