あるみにメモ

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

OpenSiv3DのSimpleGUIを使ってみる-1-

OpenSiv3Dを久しぶりに使うあるみにの話。


今回はOpenSiv3DのSimpleGUIを使って

表示したRectの大きさや回転角、回転速度などをいじれるGUIを作りたいと思います。

環境

  • VisualSudio2017
  • OpenSiv3D v.0.3.1

要求

今回実現したいスライダーの要件は、

  • 値をハイライトする
  • 取り得る値に範囲がある
  • ボタンを使用して特定の単位ごとに値を変更できる
  • 「0」ボタンで値を0に初期化できる

みたいな感じで。


イメージ図はこんな。

f:id:aluminum_pepe:20190304032649p:plain

旧Siv3Dではこんな感じでした。

f:id:aluminum_pepe:20190304044957g:plain

「0ボタン」はこの時はないですね、だからこそ、これを機に作るんですけど


ライブラリ確認

今回はOpenSiv3Dにある「SimpleGUI」というのを使っていきたいと思います。

F12で実装を軽く見てみる。

f:id:aluminum_pepe:20190304030240p:plain
SimpleGUIの実装


知りたいのはスライダーなので…

    bool Slider(double& value, const Vec2& pos, double sliderWidth = 120.0, bool enabled = true);

    bool Slider(double& value, double min, double max, const Vec2& pos, double sliderWidth = 120.0, bool enabled = true);

    bool Slider(const String& label, double& value, const Vec2& pos, double labelWidth = 80.0, double sliderWidth = 120.0, bool enabled = true);

    bool Slider(const String& label, double& value, double min, double max, const Vec2& pos, double labelWidth = 80.0, double sliderWidth = 120.0, bool enabled = true);


今回見るべきなのはこの辺かな、訳すと、


  1. Slider(値,座標,スライダーの横幅,有効状態):

  2. Slider(値,最小値,最大値,座標,スライダー横幅,有効状態):

  3. Slider(ラベル,値,座標,ラベルの横幅,スライダーの横幅,有効状態):

  4. Slider(ラベル,値,最小値,最大値,座標,ラベルの横幅,スライダーの横幅,有効状態):


といったところですね。

fontと「2」の実装を組み合わせればいいかな。

できた

というわけでできたのがこんな。

f:id:aluminum_pepe:20190305145615g:plain

github.com

やっつけですがGUIに合わせて図形が動くようにしてあります

詰まったところ

ToRadians

回転をさせる処理は

rotated(ラジアン角) 

な訳ですが、GUIのハイライトでラジアン角を表記するのは分かりにくいです。

そこでGUIの値は-360~360の度数で扱い、処理の段階でラジアン角に変換することにしました。

というわけでRectの回転を、

RectF(100,100,block_w,block_h).rotated(Radians(block_r)).draw(Palette::White); 

としていたら、Radiansで怒られました。

f:id:aluminum_pepe:20190304065334p:plain

OpenSiv3DではToRadiansを使うみたいですね。

エラーコード見れば一目瞭然なんですが、焦っていたみたいで気が付かずウンウン言ってました()

値の表記

先ほどの話の続きになりますが、

GUIのスライダーによって値を変更するとき、値がdouble型なだけあって、かなり中途半端な値を取り得ります。

例えば127,345…………みたいな事です。

2つ問題があります。

こんな風に、ただ表示してると値が表示され過ぎる

f:id:aluminum_pepe:20190304131748p:plain

表示され過ぎてUIとびぬけてる。

0と1の間に差が生じる

f:id:aluminum_pepe:20190304131323p:plain

↑明らかに0じゃない0だ。この値は、有効範囲が-10~10と狭い。スライダーは長いのでこういった表示だけ誤魔化しても中途半端な状態が生まれる。

こっちの方が重いです。表示だけ直したとしても表記上0で0でない値はあまり良くない。

特に角速度、x移動速度、y移動速度は0であるのと0出ないのとでは大きく異なるため、厳密にする必要がある。

値をint型にしてしまいたいところですが、スライダーで扱う値はdouble型でなければならないので、intにキャストしてから代入しなおしてます。

なお、この場合値を変更している最中はSliderの処理中だからなのか気持ち悪い表示のままです。

f:id:aluminum_pepe:20190305004900g:plain

こんな感じで、カーソルを離した瞬間は補正がきくものの、変更中は補正されてないのでそのまま表示されてしまう。

加えてスライダー処理中の値の変化についてはいじり方が分からなかったので手が出せません。

そこで、たまたま知ったのですが、

U"{:.1f}"_fmt(変数) 

とする事で、表示する変数の桁数を定めることができるみたいです。(この場合小数点以下1桁まで)

というわけで使いました。まあつまり、基本的に補正はかけているので、結局見た目も誤魔化しちゃおうということです。

今回、小数点以下を全部なくしてるだけなので、表記する値をintにキャストするだけで良かったのでは…………?

レイアウト

GUIのレイアウトは1つのウィンドウ用のRect(=BlockGUIBox)の座標を基準に、特定のVec2を加算して相対的に決めています。

    if (SimpleGUI::Button(U"-", BlockGUIBox.pos + Vec2(65, 40), 20))
    {
            block_w--;
    }

基準にしているBlockGUIBoxが動けば一緒についてくるので、持ち運ぶ挙動ができました。

f:id:aluminum_pepe:20190305144049g:plain

バーの部分だけ持てるようにしてあります。あとバーは画面外に出ません。

前のGUIのウィンドウみたいになった気がする。

今後

とりあえずここまでで一度公開してしまって、クラス化?みたいなのをざっくりやってもう一度上げたいな

元々自作クラスで実装したものを引っ張り出してMainに直書きしたのであんまり見やすくないかもしれない。

とはいえクラスで見せるのもアレなので………

というか公にするにはコードがガバガバ過ぎるよう……


いい感じに汎用クラスみたいにできたらいいんだけどなあ、定石がわからんなあ


処理と描画を分けようとして失敗(?)した話とかしよう

まとめ

OpemSiv3Dに久しぶりに触れ、新しい仕様のSImpleGUIを触りました。

前よりはレイアウトや動かし方に若干自由度が増えた?前よりは扱い方がわかりやすくなったような気がします。

他の図形なんかと扱い方が近くなった?からかな

SimpleGUIが値の変更とGUIの描画そのものを同時に担っているので、処理部と描画部は分けられなさそうだなーと思いました。

ちょっと機能使ってないと忘れそうなので、備忘録的に使っていけたらいいな

今回はGitでコードの公開もしてみたけど、Gistの方がよかったかもしれん

あと「何やこれひどいな!こうしたほうがいい!!」という人がいましたらマサカリ投げてください(震)

自然なジャンプをしてほしくて-Unityでジャンプアニメーションをいじいじする-

Unityで自然なジャンプを目指したあるみにの話。

一年前くらいに頑張った事を再現しつつまとめておく記事。

3Dキャラクターを動かすゲームを作りたい!

せっかくならばキズナアイちゃんに動いてもらいたいところですね。

アニメーションを仕入れるためにもアセットの力を借りよう。

……ということでUnityちゃんアセットから色々持って来てみる

assetstore.unity.com

一度Unityちゃんに元からある移動スクリプトで動かしてみよう。

f:id:aluminum_pepe:20190106232921g:plain

動いてくれたね。

上キーで進み、左右キーはその場で止まって方向転換するみたい。ちょっと使いにくい。

カメラの視点を背面に固定すれば(もともとはそうなっている)違和感がないのだけど。

他のアセットの移動スクリプト、、例えばいつかの記事の「とりあえず操作する編」のものを使ってもいいのだけど、

自由に機能を追加しようとすると元々のスクリプトを完全に理解して改変する必要があるので、

なかなか闇が深くなってしまいそう、、、、

今のレベルで読み解くのは難しいので、移動スクリプトも一から書いていこう。

目標

  • カメラをグリグリ動かしながら移動する
  • 目の前にもカメラが回り込めたりする
  • イメージはマリオ64モンスターハンターのような三人称視点
  • なるべく人間的で自然な動き

三人称視点とはいえ、ただ後ろにカメラが周りこんでくるだけなのは少し寂しいので、プレイヤーがカメラを操作するやつをやりたい。

あとは人間的で自然な動き……これが大変そうな気がしますね()

とりあえず移動とカメラ

と、いうことで自分たちで、一連のスクリプトを書いてきました。

”たち”、というのは、3Dキャラを動かしてゲームを作ろうとしている過程で、友人を1人巻き込んでペアプロジェクトのようなものをしているためです。

その話はまあおいおいしていきたい。(そういうのを書いていくべきなんじゃないですかね)

ともかく3Dキャラを動かす勉強だって事で、いろいろ調べつつ移動スクリプトを書きました。



こんな感じになりました。

f:id:aluminum_pepe:20190107015330g:plain

マウス操作で視点をグルグルいじりながら、WASDキーで移動するものです。

移動&カメラ処理について

ChatracterContolloerを使った移動は自分が、カメラ処理は友人が主に書いてくれました。

カメラ移動はそのカメラの正面を軸に、WASDで移動になるようにお互いにかみ合わせたのがアピールポイントですかね?

まあそうじゃないとカメラに対して反対向きのときは行きたい方向と逆に入力しないといけないだとか、おかしいことになりますからね。

一番はじめのUnityちゃんの移動スクリプトは、カメラの位置にかかわらず、上キー入力でその時向いている方向へ進むので、

ただの三人称視点カメラでは操作しているうちにどんどん感覚がずれてくるという問題がありました。

何度も言う通りカメラが基本的にUnityちゃんの後ろにまわる事が前提のスクリプトだったわけですね。


かみ合わせたといっても、カメラの正面方向と入力方向のベクトルと掛け合わせたものを実際の移動に使ってるだけですが、、、

お互いググりながらとはいえ、カメラをグリングリン動かす方が大変な気がするので友人に感謝。

今はお互いにこの手の実装はできるようになりました。多分。


f:id:aluminum_pepe:20190107021950g:plain

グリグリカメラ移動、いいですねえ


ジャンプ実装

というかここからが本題なんですが。

今のでカメラに関する目標はほとんど達成されたとみていいでしょう。

あとは操作面でどれだけ"人間的にできるか"ということになりそうです。

ということで実際のジャンプに移りたいわけですが、これもUnityちゃんのジャンプモーションがあり、これを使ってみるわけですよ。

f:id:aluminum_pepe:20190107023934g:plain

この感じだとうまくジャンプできている気がするが、、、




ジャンプしてないよ

これ、ジャンプしてません。

どういうことかというと、これ、ジャンプのモーションだけ再生して判定は跳ねてないんです。

f:id:aluminum_pepe:20190107024603p:plain

こういうことです。

これだど当たり判定が残ったままなので、障害物を乗り越えるということがまるでできないですね

まあこれは、ジャンプ時に上方向の力をこちらで付ければいいだけなので、やってみる。



不自然だよ

f:id:aluminum_pepe:20190107030053g:plain

おわかりいただけただろうか……


そうこれ、ジャンプの入力とともに上方向の力を与えただけなんですが、

ジャンプの予備動作から飛んじゃってる。

もっというと、

着地モーションと全くあっていない。

というね。

実はこの問題、一番はじめのUnityちゃんのときから既に垣間見えていたんですよ。

f:id:aluminum_pepe:20190107030638g:plain

これとか。モーションが早く終わって空中に着地して空中を走ってますね。

さらに言えば、着地モーション中に移動できてしまうので足を動かしてないうちに滑るように移動してしまったりしてしまってます。

うーーん不自然。

これらを解決するためにどうしたらいいのか。

予備動作を切り取って、着地モーションも切り取るかすぐに移動に遷移させれば見栄えは解決するかもしれない。

ジャンプモーションに合わせて当たり判定を動かしたり、加える力を調整したらいいかもしれない。


しかし、これからジャンプの高さは調整できるようにしたい。

もしトランポリンに乗せるとか、能力上昇のために倍率をいじるのであれば、

当たり判定に合わせてモーションは再生されるべきでしょう。

そして、予備動作とかも再生した人間的な部分を再現しておきたい。

どうしようか……


…………


……


ジャンプモーションを切り刻もう。



切り刻もう、ジャンプモーション。

ググる力が弱いのか、有効そうな策を見つけられなかったあるみにの苦肉の策です。

問題は、ジャンプモーションが予備動作、ジャンプから着地まで一つのアニメーションになってるのが問題なんですよ。

とはいえ、自分に着地モーションを作ったりする技術はいまのところ持ってない……


いや、着地モーション、ありますね、そこに。部分に。


ということです。

f:id:aluminum_pepe:20190107035602p:plain

はいUnityちゃんのジャンプモーションである、「unitychan_JUMP00B」をいくつか切り分けで保存してみました。

同じアニメーションから、元々のアニメーションも合わせて10個のAnimationClipがあります。

StartとEndの標記のおかげでわかりやすくなってるのだが、状態に合わせて時間で区切って作っています。

10個ありますが、最終的には4つくらいしか使ってないんですけどね()

使ってる奴だけ紹介しましょう。

切り刻んだジャンプモーションたち

f:id:aluminum_pepe:20190107042000g:plain

まず、ジャンプをはじめる「JampStart」です。

f:id:aluminum_pepe:20190107042115g:plain

次に、滞空アニメーション(上昇中)の「Jump04」です(名前つけろ)。

f:id:aluminum_pepe:20190107042248g:plain

そして落下モーションの「Fall」です。

f:id:aluminum_pepe:20190107042409g:plain

最後に、着地モーションの「Jump07」です(Landingとかにしろ)。

これらを一連で再生すれば、元のジャンプアニメーションになります。

これらを状況にあわせて制御することで自然なジャンプアニメーションを表現するもくろみです。

いざ改修

まず、以前のジャンプアニメーションのアニメーションコントローラーがコチラ。

f:id:aluminum_pepe:20190107043249p:plain

シンプルですね。


そして次、自然なジャンプアニメーションを目指したアニメーションコントローラがコチラ。

f:id:aluminum_pepe:20190107050142p:plain

デデドン。

一気にStateが増えて遷移する矢印も入り組んできました。

実際に実行するとこんな感じです。

f:id:aluminum_pepe:20190107051856g:plain

さっきと同じだけの力でジャンプさせてますが、かなり安定した見栄えになってるのでは??


簡単に言うと、ジャンプ開始アニメーションのあと、上昇アニメーションにはいり、

キャラのy方向の速度が負の値になる=落下するときに落下モーションに変更、

地面を検知したときに着地モーションを再生する。


と、いう感じです。


サラッと言ってますがコードのほうは70行くらい増えました。

具体的には、床の判定をより正確にとるために、下方向にレイを飛ばすことにしたのと、

各状態が整合性をもって遷移できるように条件分岐を書いたりしました。

コードとかも載せた方がいい……と思うのだがうまい載せ方を考える気力がないので、また別で紹介するか、GitHubで紹介するかもです。

(いまのはキズナアイとかいるので簡単に公開できないというアレ)


おかげで、かなり汎用性のあるモーション再生ができている気がします。

例えば、ジャンプ地点と着地地点の高さが異なっても、違和感ないのがいいですね

f:id:aluminum_pepe:20190108031232g:plain


また、副産物的に落下モーションだけを使って、「ある程度の高さから落下した場合落下モーションをする」こともできるようになりました。

f:id:aluminum_pepe:20190108031909g:plain

アニメーションイベントってすごくね?

もうひとつ、予備動作はそのままでモーションで跳ねたときに合わせてジャンプができてます。

これはアニメーションイベントを使いました。

f:id:aluminum_pepe:20190107054818p:plain

ジャンプモーションのうち、跳ね始めである「JumpStart」のアニメーションのインスペクターから、「Events」という項目を開くことができます。

上の写真では、タイムライン上にJumpStartと表記された場所があると思います。

アニメーションイベントとはアニメーションの進行中に設定した関数を呼ぶ事ができる機能です。

つまり、跳ねる瞬間の時点で「上方向に力を加える処理」を登録すれば、そのタイミングでアニメーションがその処理を呼んでくれるわけです。

f:id:aluminum_pepe:20190107055120p:plain

↑跳ねるタイミング、、、、ココ!!!!!


それから、最後の着地モーションにまだ滑っていたので、一定の時間移動処理しないようなアニメーションイベントを追加しておきました。

f:id:aluminum_pepe:20190108032549g:plain

ジャンプ中も入力しっぱなしにしてます。比較すると分かりやすい。

モーションに合わせて当たり判定を伸縮させる

ジャンプ中、体を反るアイちゃんですが、足を上げて乗り越えられるようにみえるブロックが乗り越えられない。

f:id:aluminum_pepe:20190108033545p:plain


f:id:aluminum_pepe:20190108033528p:plain

それもそのはず。当たり判定自体はしっかり引っかかっているのだ。


ということで、ジャンプモーション中の体の"そり"に合わせて当たり判定が伸縮するようにもしてみたりしました。

f:id:aluminum_pepe:20190108034128p:plain

アニメーションイベントのときと同じ要領で、

ジャンプモーションのうち、反ってる「Jump04」のアニメーションのインスペクターから、「Curves」という項目を開くことができます。

ここでは特定の変数に対して、アニメーションの進行に合わせて値を変化させられます。

ここに当たり判定の大きさを決める三要素に対応する変数を作り、モーションに合わせて伸縮するように値を設定。

上の写真のように値がグラフのような変化をしてくれます。

ここの変数はAnimationControllerに対応するので、移動スクリプトから読み出して当たり判定に実際に適応させるようにします。

f:id:aluminum_pepe:20190108035103p:plain

これならば実際に乗り越えられますね。

f:id:aluminum_pepe:20190108035835g:plain

乗り越えられました。


一応、当たり判定の変化の様子を載せておく。

f:id:aluminum_pepe:20190108040140g:plain



かなりジャンプは突き詰められたかな。



まとめ

移動スクリプト、もといジャンプを自然に見せるためにいろいろしてみました。

個人的にかなり完成度の高いものにできたのではないかなーと思っています。

でも、実際この解決法って、どうなんだろう?

けっこうな力技である気がしないでもないし、もっとうまい方法があったのかも……

そんな情報をお持ちの方がいましたら是非教えて頂きたいです。

ヒントだけでも()


今回、GIFをいっぱいつかうというのが裏目標みたいなところがあったんですが、

わかりやすくなってましたかね、、

あとはコードを載せるか否かというところは、まあおいおい追加するかもしれない

自分が必要な部分だけ思い出せるようになるかもしれないし。

もっと具体的な実装方法もいずれ述べるかもしれない。

いままでで一番開発ブログという感じのする記事になったかなと思うので、

これからも記事をかきつつ開発を進めていきたいですねえ


まあ今回の内容、一年前くらいにやってたことなんですけどね。

状況再現なんかやったりしたので、色々思い出せてよかったです。


これからも過去にやった事とか新しくやる事をどんどん記事にしたいぞ

ライセンス

Unityちゃん

f:id:aluminum_pepe:20190107170135p:plain

http://unity-chan.com/contents/license_jp/

このコンテンツはユニティちゃんライセンスより提供されています。


キズナアイ

(c)Kizuna AI

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

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

f:id:aluminum_pepe:20181021160528p:plain

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

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



この子が、






f:id:aluminum_pepe:20181119135346g:plain




動きます。


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

言い訳

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

その通り。

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

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

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

やすみスギィ!

Anima2Dとは

f:id:aluminum_pepe:20181120222923p:plain

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

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

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


参考にしたのはコチラ↓

techblog.sega.jp

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


qiita.com

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


画像を取り込む

f:id:aluminum_pepe:20181120224145p:plain

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

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

が、

めんどくさい

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


SpliteMesh設定

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

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

f:id:aluminum_pepe:20181120225737p:plain

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

f:id:aluminum_pepe:20181120234336p:plain

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

f:id:aluminum_pepe:20181121001141p:plain

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

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

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

f:id:aluminum_pepe:20181121034904p:plain

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

f:id:aluminum_pepe:20181121102557p:plain

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

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

Alpha cutout は……何だろう()

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

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

ボーンを適用

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

f:id:aluminum_pepe:20181121102927p:plain

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

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

f:id:aluminum_pepe:20181121103045p:plain

こんな感じになった。

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

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

f:id:aluminum_pepe:20181125020625p:plain

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

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

f:id:aluminum_pepe:20181125021138p:plain

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

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

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

f:id:aluminum_pepe:20181125021613p:plain

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

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


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

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

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

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


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

f:id:aluminum_pepe:20181125023415p:plain

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


なんか口がついてくるんですが()

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

(青いわっかは後で説明するよ)

ということでこうした。


f:id:aluminum_pepe:20181206234644p:plain

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

するとどうだ



うーーんどうかな?

いい感じじゃない?


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

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


IK設定

f:id:aluminum_pepe:20181125033611p:plain

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

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

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

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



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



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

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

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

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

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

ところでこの青い球をいっぱい出してるの、気功弾みたいでかっこいいね(?)

アニメーションをつくる

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

 

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

まとめ

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

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

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

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


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

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

が、既に季節外れ

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

来年お楽しみに

自作ホームページに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

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

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

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