ラッシュデュエルやろうぜ

TCU-CTRL場外乱闘 Advent Calendar 2024 - Adventar

???イ?Ȃ?日目の記事です。（時空が歪んでいる）

アドベントカレンダーが1番視聴率見込めるから名前借りましたすみません。

大晦日にアドベントカレンダー更新するって意味不明だね
でも今日思いついたのが今日だったから...せっかくなのでねじ込みました。

mak1a.hatenadiary.com

エントリーした日付の前にあたる投稿はこちら。

ラブライブはμ'sから追いかけてないんですが、「蓮ノ空」って伝統あるスクールアイドル部の話なんすね。「以前からの代の残した歌の意味を考える/受け継ぐ」ってのは「始まり」であるμ'sの話からは想像つかないものだったので「そういうところを描いているんだ」っていうのは新鮮でした。というかそこまで考えて作られてるの深すぎんか？

ラッシュデュエルやろうぜ

最近ラッシュデュエルにハマっていて、最近ちょっと勢い出てきてる気がするのでウェーブに乗れ!ということで書いてます。

最近だと、

E・HEROのテーマがやってきたりしてOCG勢の目にも留まったことがあるかもしれません。（最近か？）

古代の機械巨人も来てるのでリマスター決定したGXのアニメ1話だって再現可能なノーネ。

ストラクではOCG勢のノスタルジー呼び起こすストラクをどんどん出していくっぽいのでとりあえずここまで見てくれたら一定の効果はあるかもしれない。

ブラマジ・ブラマジガールみたいな遊戯王の顔たちも堂々参戦してます。媚び‥ファンとしては嬉しいのでは。

現・元OCG勢向けのフックとしては、聖バリとか死者蘇生みたいなカードが登場しててかつバリバリ現役ってところも興味深ポイントかもしれない。（アニメもいまはラッシュデュエルやってますね）

風帝ライザー/雷帝ザボルグが大体のデッキに入ってるって言ったらお前笑う？

最新弾ではレッドアイズのテーマが出ます。

公式の販促Xの投稿は↓

／／　　　　　　　　　＼＼
トリプルビルドパック
エボリューション・インパクト
＼＼　　　　　　　　　／／
𝟚𝟘𝟚𝟝.𝟙.𝟙𝟙 𝕊𝕒𝕥

◤真紅眼の極炎竜◢
収録❗️

「レッドアイズ」に新たな戦術を
もたらす新カードが登場❗️

✅HPhttps://t.co/MSGFEcaBBP#ラッシュデュエル
発売まであと24日 pic.twitter.com/o4jaxb2os0

— 【公式】遊戯王ラッシュデュエル (@YuGiOh_RUSHDUEL) 2024年12月17日

3体合体マキシマム召喚はラッシュだけよ

興味がでたらもうちょっと見てみて。

ラッシュデュエルやろうぜ！

遊戯王ラッシュデュエルは大体4〜5年の歴史のある遊戯王OCGとは似て非なるカードゲームです。

モンスター・魔法・罠

デッキ・墓地

手札・ドロー・ライフ... 

この辺の用語や意味はOCGと同じで、大体の流れはOCGと同じなので、やったことある人はイメージつきやすいと思います。

どんなゲームなの

公式の画像貼るのが一番早い

ラッシュ！

ここがスゴい！

メインフェイズが一つ！

というわけでざっくりはこんな感じ。

今回は遊戯王知ってる人向けにアピールするつもりで書いているので知ってるテイでもうちょい色々書いてみます。（なお筆者は真六武衆が出たあたりで時が止まっています）

ドローと召喚

一番違うのはここ。

- 毎ターン5枚になるまでドロー

- 召喚権無限

ラッシュデュエルがラッシュたる所以。

1ターンで2体のモンスターを通常召喚したうえで、青眼の白龍だすってこともできる。

1ターンで手札4枚使えば、次は4枚引けるので展開が結構早いし、相手に空っぽの盤面にされても追加4枚で盤面を立て直して攻勢にでれるってワケ。なのでとりあえず魔法カードを伏せたり、あえてカードを使い切るようにするプレイングもある。

相手も当然同じようにカードを引き込むので、結構試合展開が劇的になりやすい気がする。

カードゾーン

リンクスみたいにモンスターカードゾーンと魔法・罠ゾーンは3枠ずつ。（フィールド魔法ゾーンはある）

展開は早いが、出せる場所は限られているので注意。意外とモンスターが邪魔でリリース数が確保出来ないとかあるので、自己退場できるカード好き。

ルールとかそのほかとかつらつら

オーバーラッシュレアと絵違い

どんどんルールの話になりそうなので、先にイラストの話をしておく。

とまあこんな感じでカードの絵が飛び出すオーバーラッシュレアってレアリティがあります。

紹介したようなやつは特にレアなので2〜8万するしそうそう手に入らないですが、大体1BOXに1〜2枚ある感じですね。

同じパックでも低確率で同一カードの絵違い出す商法もやってます。

受け継がれし英雄譚。後者が絵違いverです。てえてえ強いカード。

メインフェイズが1だけ

攻撃したらエンドするしかない。罠で塞がれた時のリスクはかなり高いです。「セットしてエンド」じゃなくて「セットしてバトル！」になるね

レジェンドカード

ラッシュデュエルでは特に効果が強力なレジェンドカードというものがあり、モンスター・魔法・罠それぞれ一種一枚ずつデッキに入れることができます。この仕様結構好き。デッキに合うカードを考えるのが楽しいね。

ラッシュではレベル4の最大打点は大体1500で、たまに1600がいる。そんな中でブラッド・ヴォルスさんはレジェンドさんとして参戦してます。

これまでの話に出てきた死者蘇生、聖バリ、魔法の筒、風帝ライザー、青眼の白龍なんかもレジェンドカードです。（アルティメット出すために代用モンスターがいたりする）

最近出たE・HEROプリズマーはOCG版からちょっと効果が変わって登場。フュージョンデッキの希望。

サーチがない

デッキからカードを選んで手札に加えるみたいな効果は存在しません。そのかわり、上からめくって〜があったら、とか、墓地から手札に加えるカードが多いです。

なので、結構再現性が取りづらいゲームかも。

「名のつく」指定がない

絶対にしないという意志を感じる。カード名直指定はある。

範囲を指定する場合、属性や種族、攻守指定をしています。

特にスカイスクレイパー…

ちなみにディセントのあと、N・エアハミングバードが出ました。仲間はずれでかわいそう。

除外がない

ない。OCGカードが来る時は、デッキの下に戻すになりがち。

マキシマム召喚

ラッシュ固有の召喚方法。ゴットリンクやレジェンドポケモンのごとくカードをくっつけて1体のモンスター扱いで召喚する。

一体で3体枚分の効果が使えたり、召喚が難しい分強力な効果にはなっている。

フュージョン

融合じゃないよフュージョンだよ

ちなみにこのカードは場フュージョンしかできないけど、「融合」もきてて、そっちは元の通り手札も素材にしてフュージョン召喚できる。

あとはコンタクトフュージョンもあるよ（ターン終了時に戻らない）

環境

最近は果物幼女の天下です。

あとは大会の優勝報告とか見るに‥

ガジェット、青眼、ヒーロー、ダイスとか…

あとサラマンデウスも強いと思いますね

ガジェット。もちろん普通のXXガジェットもいる。下級モンスターの回転が速い。古代の機械とも組んだりしてる。

サラマンデウス。マキシマムでフュージョンする贅沢でロマンでパワーなデッキ。全体3000ダウンはダメじゃない？

ダイス。サイコロを振るカードのデッキ。フュージョンもサイコロ頼りなのでたまに失敗するかも。なんとアニメで使い手がいるのでただのオタク向けテーマではない。

ラッシュやろうぜ！！

移動中に書いているんですがそろそろ着くのでこの辺で。

色々雑だけど読んでいただいた方はありがとうございます。

はじめに紹介したヒーローストラクは今現在も結構売ってたりします。自分の近所では割引もしてました（勢いがある…？）

それから、ポケカと違って最新弾とその前の弾は結構手に入ります。そもそも取り扱ってない店もあるけど…（勢いがある…？？）

というわけで今後のラッシュデュエルの展開を紹介。

2025/3/8にはキメラティックなサイバー流デッキと、ハーピィのデッキがストラクででます。

4月にはブラマジのテーマで新規召喚方法であるリチュアル召喚を実装したストラクも出るみたいです。（ラッシュ版儀式やね）

そして、直近2025/1/11には、最新のパックであるトリプルビルドパックも発売します。

トリプルビルドパックは

• レッドアイズ x マキシマム&フュージョン
• パジャマ昆虫女子に取り込まれフュージョン
• 合体先取っ替え引っ換えマキシマム恐竜

の、3本立てでお送りします。

ぜひラッシュをはじめて、僕とラッシュで握手！

…

……

…………

1/1追記　あるみにが使っているデッキテーマ紹介（帝）

昔マークダウン編集ってのがあった気がするんですがなくなった？

マークダウン記法が効いてなかったので直しました（2025/1/1/17時現在）。

ついでにあるみにがラッシュで使っているデッキテーマのうち、OCG勢も見知った「帝」デッキを紹介しておきます。

ラッシュオリジナル帝は、

• ギャラクシー族の （煌）星帝エストローム
• サイバース族の（才）賢帝ヴィルヘル

の2種です。

公式画像が星帝しか見つかんなかったんで自分の手持ち撮影しときます。

Lv５時の帝。召喚したターンに魔法を破壊するヴィルヘル、Lv6以下モンスターを破壊するエストローム。雷帝や氷帝の劣化みたいな効果ですがラッシュの召喚権無限を考えるとこんなもんかもしれない（OCG帝はレジェンドモンスターとして参戦。モンスターとしては一枚採用しかできない。）

Lv.8帝。Lv8帝共通である輪っかを後ろに背負ってるらしいですよ。

OCGのLv8帝の持っていた効果である「アドバンス召喚したモンスター１体をリリースしてアドバンス召喚できる」は若干調整されて実装。

相手に破壊するカードを選ばせるヴィルヘルと、守りたいカードを一枚選ばせ、それ以外の一枚を自分が選んで破壊するエストローム。

エストロームで「破壊したくないカードを選んで」って聞くの好き。

帝といえばOCGでは「攻撃力2400/守備力1000の上級モンスター」を指していたと思います（強化版？のLv８帝は攻撃力2800/守備力1000）、ラッシュデュエルのステータス基準で攻撃力は400下がってます。

しかしこちらをご覧ください

フィールド魔法「エンペラー・レルム」は攻撃を400上げるフィールド魔法ですが、こいつでOCG基準のスタッツになるんですね。

帝はアドバンス召喚成功時に効果を発揮して相手の場のカードをなんやかんやするわけですが、ラッシュでは1ターンのうちにアドバンス召喚を何度もできるのがデフォルトなので、繰り返しアドバンス召喚して相手の盤面を更地にする動きになります。

インフレも進んで正直打点はマキシマムやフュージョンにとどかないんでもう。。。みたいなところはありますね。。。そして効果破壊耐性に無力になりがちですが、風帝が強いのでそこにワンチャンがあります。

ラッシュではとりあえずデッキ・手札に戻すバウンス耐性のあるカードがほとんどないため、風帝ライザーはめちゃめちゃ強いです。

今年のラッシュデュエルの大会であるギャラクシーカップ2024小学生の部決勝ではライザーとライザーが対面するといういつの時代なのかわからん場面もありました。

／
＜最強小学生＞決勝戦❗️
ついに #ラッシュデュエル
No.1デュエリスト決定💥

風帝ライザー‼️
風帝ライザー‼️
＼

🎦🅻🅸🆅🅴
◤#ギャラクシーカップ2024◢
配信中❗️

🎦ご視聴ページはこちらhttps://t.co/upbNkmDZYV

🎁キャンペーンはこちらhttps://t.co/pADdIlm6yo… pic.twitter.com/2DcjicxkdY

— 【公式】遊戯王ラッシュデュエル (@YuGiOh_RUSHDUEL) 2024年8月4日

帝デッキはそんな強力なライザーを何度も使いまわすことにも期待が持てるデッキなのがいいです。

今月発売(2025/1月現在)の最新のパックからバウンス耐性カードが出始めるので、「とりあえずライザー」という時代も終わりそうで、これまた帝にとっては逆風か...

あとはアドバンス召喚しかしないテーマなんで、

強欲で謙虚な壺も使えます。

ラッシュデュエルでは無制限なので3枚詰めるよ。

自分の記憶ではこいつが高い！ってところで記憶が止まってるんでこいつが使えるだけでなんかワクワクしてくるんだよな。（ラッシュでも3千円くらいします）

というわけでラッシュ版帝の紹介でした。

正直環境ではまったく見かけないテーマだけどちょくちょくサポートカードも来てるテーマなんで今後に期待。さあ君も今すぐラッシュしようね。

次回にあたるのはポリエステルくん

polyester-kpr.hatenablog.com

最近開発参加できてなくてすみません。

そしてえんじにあぢからを感じやした。

自分の場合自前サーバ（クラウド）立てたいけど最近の体たらくだとただ月の料金だけ支払う人になりそうだ。。っつって最近はGithub Copilotを解約してしまったね。。。

ローカルでOSSサービス動かすこと自体はお金けちるのがってよりはなんかのサービスいれて動かす楽しみがあっていいなと思うよね

シェルスクリプトで実行プログラムの引数を変えながらまとめて実行して1つのファイルにまとめたい（バッチ処理）[1]

題のまんまの事がしたいあるみにの話．

ちょっとやらないとすぐ忘れてしまうので試したこととかを残す

引数を要求する自作プログラムを引数を変えながら代わりに実行させて，

シェルコマンドを上手く使って出力結果をそのまままとめたりしたいという話．

こういう処理のことを「バッチ処理」っていうらしい．

やりたいこと

• 作成したプログラムを実行させる
• ↑の引数を変えた複数の命令セットにして扱う
• 同時に実行を指定のファイルに出力させる

初歩です．

前提条件

まず，実行したいプログラムコードを，

program

という名前の実行ファイルにコンパイルしたとしよう．

実行するときは，

./program

とすればいいし，引数が付くのなら

./program 0 10 200

という風になる．

例えば引数を2つとり，2数の結果を出力するcalc.cというプログラムを作成した．

#include <stdio.h>

int main(int argc, char *argv[])
{
    int a, b;
    a = atoi(argv[1]);//引数1番目をaに代入
    b = atoi(argv[2]);//引数2番目をbに代入

    printf("%dと%dの和は%dです。\n", a, b, a + b);
    return 0;
}

このプログラムを用いて，様々な2数の計算結果を調べたいとする.

1+1を調べたいのであれば，

./calc 1 1

と実行する．

出力は，

1+1の和は2です。

となる．

1～100まで全ての組み合わせで全ての値を計算せよと言われたとき， 全パターンを1回ずつ入力，実行し，結果をコピペしたりするのは流石にキツイ．

まあこの例であればそもそも1~100の組み合わせ1つのプログラムの中で計算して逐一出力すればよいのだけど．

今回の目的はプログラムをいじるのではなく，プログラムの実行やその出力結果先を コントロールするシェルスクリプトを書くことで効率化を図ることである．

複雑なシミュレーション結果を出力するものであるとか，入出力機構をあまりいじるわけにはいかないプログラム（闇）だとか，とにかく引数を使って得るタイプのプログラムでも，いちいち入力，実行，記録のステップを踏みたくないので，シェルスクリプトをつかって自動化を試みる．

シェルスクリプトで「Hello,World」

まずはシェルスクリプトを書いてみる．

echo "Hello,World!!"

シェルスクリプトは拡張子を「.sh」にして保存する．

（つけないことが実は普通だとか）

「echo」は出力命令で（厳密にはそれだけでないが），このシェルスクリプトを実行すれば， 「Hello,World!!」と出力してくれるはずである．

シェルスクリプトの実行は他のプログラムの実行と同様に，

./test.sh 

とする．

シェルスクリプトは命令のまとまりを逐次解釈して実行するインタプリタなので，

コンパイルは必要としない．

シェルスクリプトの実行権限

./test.sh: 許可がありません

なんて言われて実行出来なかったかもしれない。

詳しい説明は省くが，ファイルには属性がある．

そのうち，実行権限という属性がある．

ls -a なんかをして調べられるが，シェルスクリプトに 実行権限を与えていない場合実行できないので， 信頼できるシェルスクリプトを作れたなら実行権限を与えよう．

chmod +x シェルスクリプト名

で実行権限を与えられる．

実行可能なファイルはlsなどをした時も色が変わって見えるようになっていると思う．

実行したいシェルスクリプトが存在するディレクトリで，

./test.sh 

とすれば，

Hello,World!

と出力される．

シェルスクリプトに実行権限を与える事を忘れないように．

改行コードの注意

もしかして

実行形式エラー．間違ったアーキテクチャです．

なんて言われている人もいるかもしれない．

自分は先ほどの一行コード，こんな風にecho文の前に空行があると上のように怒られてしまった．

もっと言えば，

上は空いてないでecho文のあとに空行がいっぱいあるようなコードだと，

のように，謎のコマンド見つかりませんがたくさん出てくる．

我々捜索隊は原因を調査するためアマゾンの奥地に向かった-------------------

試しに空行とecho文を織り交ぜる．

とすると，

こうなる．

空行の数だけ，というより，命令が記述されていない行の改行に反応しているっぽい．

この問題，改行コードが「CRLF」になっていることが問題らしい．

というわけで，エディタの設定で「LF」にすると，改行をコマンドとして 検知しなくなり，上記の二つの問題が解決する.

としても．．．．

ヨシ！！

他のプログラムを実行させる

シェルスクリプトでは他の実行ファイルを実行する事もできる

例えば，

echo "calcを実行します"

./calc 1 1

として実行すれば，

calcを実行します
1+1の和は2です。

となる．

test.sh内で先ほど作ったcalcプログラムに1と1を引数に与えて計算させることができる．

もちろん同じディレクトリにない実行ファイルも，パスさえ正しければ実行出来るはず．

引数をいちいち与える手間だけを省略したいのであれば，

echo "calcをいっぱい実行します"

./calc 1 1
./calc 2 1
./calc 3 1
./calc 4 1
./calc 5 1
./calc 6 1
./calc 7 1
./calc 8 1
./calc 9 1
./calc 10 1
・
・
・

なんてすれば，まとめて実行できる(脳筋)．

実行結果の保存先(リダイレクション「>>」)

プログラム実行結果は

./calc > result.txt

などとすることで，「result.txt」に出力させることができる．

（リダイレクションは保存先を変えるという意味）

「>」は完全な上書きなので，

「>>」の追加を使うと良い

もちろんこのリダイレクションも，シェルスクリプト内にそのまま記述でき，その通りに実行させる事ができる

さっきの脳筋シェルスクリプトを，

echo "calcをいっぱい実行します"

./calc 1 1 >>result.txt
./calc 2 1 >>result.txt
./calc 3 1 >>result.txt
./calc 4 1 >>result.txt
./calc 5 1 >>result.txt
./calc 6 1 >>result.txt
./calc 7 1 >>result.txt
./calc 8 1 >>result.txt
./calc 9 1 >>result.txt
./calc 10 1 >>result.txt
・
・
・

とすればresult.txtに結果をどんどん記述していくことができるので，わざわざ黒い画面の結果を1つずつコピペして記録する必要はない．

実行のさせ方が強引ではあるが， 必要に応じてこのシェルスクリプトを書き換えることで 様々な命令をまとめて実行し，指定したファイルに結果を出力できる.

また，シェルスクリプトそのものに対してもリダイレクトは有効なので，シェルスクリプト内のリダイレクトを無くし，

test.sh >>result.txt

としてもいいと思う．

全パターン列挙は流石に・・・・という人へ

当然1~100まで全パターンという処理を， シェルスクリプト内で書くことで， 全パターンを列挙する必要をなくすことはできるので， 最後にそれを記述しよう．

#!/bin/sh
for ((i=0 ; i<=100 ; i++))
do
    for ((j=0 ; j<=100 ; j++))
    do
    ./calc $i $j
    done
done

シェルスクリプトにも変数を使って数値計算処理できるということである

シバン行

今回のコード例では記述していないが， 大抵のシェルスクリプトの話題では，コードの最初のほうに

#!/bin/sh

とか

#!/bin/bash

記述してある

これはシバン行といって，

・・・・・・・・

・・・

qiita.com

スクリプトファイルの冒頭を#!にして、その後にファイル名を書いておくと、実行属性を付けてファイルを実行できるようになります。この冒頭行を「シバン」といいます。

・・・・

うーん？（）

後ろにオプションを付ける事でいくらかなにかしら設定できるみたい（無理解）

あるとシェルスクリプトとして働くのかな・・・とおもったら無くても動いちゃったから分からん

それとも「.sh」があったからシバン行指定しなくても動いたとかいうオチかな？ (無くても動きました)

自分の環境（Linux系サーバ）だと勝手に分かってくれるだけとかそういうこと？

ただ，そういった実効的な意味合いよりも， 「bashのコマンドや記法を含むよ!!」といったような説明的な効果の方が大きいようなイメージを感じている.

コード規約とかに近い感じかな

とりあえず自分も，

#!/bin/sh

を記述しておくことにする．

まとめとつづきのはなし

さて，シェルスクリプトをつかってプログラム（コマンド）の実行を代わりに行わせることができるようになったので， とりあえず「まとめて実行」「まとめて記録」ができるようになった．

今回は計算プログラムに対して引数を変えて指定のファイルに結果を出力させたが， これはCプログラム実行コマンドとUNIX/Linuxの「>>(リダイレクション)」の合わせ技をさせたことになる.

このようにしてシェルスクリプトでは UNIX/Linux上の複数のコマンド実行やファイル操作をまとめて実行できる利点を活かす事もが目的で使われることも多い(バッチ処理っていうんだって)．

複数の既存のプログラムを繋げて実行でき，ファイル操作の場面でシェルコマンドもまとめて実行できるので，自動化にはもってこいといった感じ，一回実行しただけで面倒な手順を自動でやってくれると楽．

自動化プログラムだけ上手くメンテナンスできれば人為的なミスが減る（保存先間違えたり設定値変え忘れたりしそうだった）．

既存のプログラムの本体をいじるより，命令（引数）を入力して実行する工程に工夫をして自動化する方が効率が良い事もけっこうありそう．

自動化するにあたってまだまだ改良の余地がありすぎるというか，コマンドの組み合わせをほとんどしてない段階．

続きとして用途に合わせたコマンドの使い方をメモ書きするつもり．

たとえば，ディレクトリを生成するmkdirを使って結果を出力するためのディレクトリをつくったり，出力結果保存用のファイルにリセットをかけられるようにしたり，シェルスクリプト自体が引数をとって扱う・・・・・とか

最後に

適当に検索かけつつ，ざっとシェルスクリプトを使ってみたときのことをまとめてみた

改行コードだったり実行権限だったり， とりあえず使ってみようとしたときに自分がつっかかった箇所を取り上げつつ シェルスクリプトを試せる/思い出せるようになっている気はする

自分もこれで何回忘れても大丈夫だね！！

知ってることをまとめたつもりだけど，初学者のガバガバ知識でうやむやにしてたりする

この記事を見かけた人へ

間違っている事がありましたら是非ともご教授（マサカリを投げて）くださるとありがたいです。

aluminum_pepe 2019-09-17 18:15 読者になる

広告を非表示にする

• もっと読む

コメントを書く

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

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

今回はOpenSiv3DのSimpleGUIを使って

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

環境

• VisualSudio2017
• OpenSiv3D v.0.3.1

要求

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

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

みたいな感じで。

イメージ図はこんな。

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

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

ライブラリ確認

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

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

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」の実装を組み合わせればいいかな。

できた

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

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で怒られました。

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

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

値の表記

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

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

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

2つ問題があります。

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

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

0と1の間に差が生じる

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

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

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

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

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

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

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

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

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

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

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

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

レイアウト

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

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

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

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

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

今後

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

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

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

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

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

処理と描画を分けようとして失敗（？）した話とかしよう

まとめ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

assetstore.unity.com

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

動いてくれたね。

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

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

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

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

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

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

目標

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

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

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

とりあえず移動とカメラ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ジャンプ実装

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

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

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

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

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

ジャンプしてないよ

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

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

こういうことです。

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

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

不自然だよ

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

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

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

もっというと、

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

というね。

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

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

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

うーーん不自然。

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

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

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

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

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

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

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

どうしようか……

…………

……

…

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

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

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

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

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

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

ということです。

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

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

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

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

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

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

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

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

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

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

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

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

いざ改修

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

シンプルですね。

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

デデドン。

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

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

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

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

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

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

と、いう感じです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

乗り越えられました。

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

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

まとめ

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

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

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

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

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

ヒントだけでも（）

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

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

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

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

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

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

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

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

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

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

ライセンス

Unityちゃん

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

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

キズナアイ

(c)Kizuna AI

そのいらすとや、動くよ（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