モルタルコのプログラマ日記

7月が終わってしまうので日記を更新。

Typing Field、周辺の実装を進めている。まずはセキュリティ。20年前にウェザタイ作ったときはパスワードも平文で送れば良いし通信も平文でいいや、って感じだったけど、さすがにちゃんと作らないとなあ、ってことで「オンラインゲームセキュリティ」という本を読んでいる。

認証については、FIDOっぽく公開鍵を使ったパスワードレス方式にしてみた。ついでにユーザ名が一意でなくてもいいように、自動生成IDで区別するようにする。ウェザタイはすでに主要な名前は取られていて新規参戦が難しい。この方式なら好きな名前を使える。

通信はどうしようかな。単純にTLSにしてもいいけど、遅延とか問題になるんだろうか。

あとは、「気持ちいい」から考えるゲームアイデア講座」を読んでみた。ゲームシステムをいろいろ考えているけどなかなか面白くならず、試行錯誤。

今のペースだと完成まであと3年くらいかなあ。これだけに絞りたい。

気分転換にパネル表示をいじってみる。とりあえず半透明のパネルを出していたのだが、もう少し工夫したいのですりガラス処理＋角丸四角形にしてみた。

中身のデザインが今ひとつだけど、とりあえずパネル自体はこんな感じかな。すりガラスも角丸もシェーダーで実装。

すりガラス

すりガラスは一般的にはガウシアンブラーを使うらしい。ただ、普通に5×5とかのカーネルで処理すると重くなるので、縦5をかけた後に横5をかける、みたいに2パスでやるらしい。検索するとそういう方針でGrabPass(レンダリングされた画像を取得するやつ)を使用した例がたくさん出てくる。

ただ、Universal Render PipelineだとGrabPassがサポートされてなくて、同様の機能を持つCameraOpaqueTextureを使うと2パスができない(と思う)。なので、カーネルを省略して十字みたいな感じに近似してみた。上の画像の通りそれっぽくはなるからいいかな。

角丸四角形

角丸四角形はなかなか難しい。公式的にはRounded Rectangleっぽいんだけどそのままコピペしてもうまくいかない。なので参考にしながら自力で実装。

float RoundedRectangle(float2 uv, float width, float height)
{
    // uvは-width/2～width/2、-height/2～height/2の座標

    // uvから一番近い矩形状の座標を計算する
    float2 pt = float2(min(abs(uv.x), width / 2 - _Radius), min(abs(uv.y), height / 2 - _Radius));

    // 計算した矩形状の位置とuvとの差分ベクトルの長さを計算する
    float d = length(pt - abs(uv));

    // 半径以内なら1、半径よりおおきければ0
    return smoothstep(d - _Radius / 10, d + _Radius / 10, _Radius);
}

fixed4 frag(v2f i) : SV_Target
{
    // 角丸四角形判定。範囲内にあるならr=1、ないならr=0
    float width = 1 / _CameraOpaqueTexture_TexelSize.x;
    float height = 1 / _CameraOpaqueTexture_TexelSize.y;
    float2 uv = float2((i.uv.x - 0.5) * width, (i.uv.y - 0.5) * height);
    float r = RoundedRectangle(uv, width, height);
 
    // 角丸四角形外(rが0に近い)は描画しない。
    clip(r - 0.1);

    ・・・
    ガウシアンフィルタ処理(他でたくさん紹介されているので省略)
    ・・・

    // 角丸のα値:r
    // オリジナルのα値:α
    // オリジナル色:o
    // ガウシアンフィルタをかけた背景色:b
    // とすると、以下で表せる
    // rα*o + (1-rα)*b

    fixed4 col = r * _Color.a * _Color
        + (1 - r * _Color.a) * b;

    return col;
}

こういうときに数学が役立つ。数学の知識がない場合、ぴったりうまくいくコードを見つけてコピペするかAssetを買うしかないので不利になる。

5月の日記がゼロになってしまうので何か書いておこう。

相変わらず副業(会社員)が休みなしでなかなかTyping Field開発が進まないのだが、今は音作りをやっている。BGM、システム音、攻撃、レベルアップなどいろいろなSEが必要。

BGMは一応作曲の入門本を読んではみたけど、さすがにすぐに使えるレベルにはならなさそう。昔から打ち込みとかMIDI楽譜生成ツールのPurentro作ったりはしてたのでなんとなくは分かるし、作曲少女シリーズを読むと何かしら作れそうな気分にはなるけど・・・。ちなみに同じ作者さんのトークバックは面白かった。AIで作るのも考えはしたけど、コンセプトにあったBGMという縛りがあると難しそう。てことでまずはコンセプトに合いそうなBGMをpixtaで購入。いずれ置き換えられればいいなあ。

効果音も素材から全部買ってもいいけど、結構大量に必要。簡単なものならシーケンサーで作れるってことで試行錯誤中。まあシーケンサの方が金額的には高くなるけど。ただ、どこをいじるとどんな音になるのか、ノウハウが出回ってないので難しい。サウンドエフェクトの作り方を参考にしているけど、それに載っていない音はどう作るのか想像ができない。再現したい音を観察してアタックとかエフェクトとかがこうなっているはず、みたいなことをやっていく、ってことだと思うんだけど・・・。

脈絡なくスクリーンショット。

Typing Field開発。今週はBlender+Unityのアニメーション。ずっと適当な動きのまま放っておいたのでそろそろちゃんと作り込む。

やりたいことは、プレイヤがキーボードを首からぶら下げて、問題文章が表示されたらキーボードに手を置いて、そのまま歩き回れるところまで。Action People Pack 2の部品として使えるように作っているが、モデルには関係ないはず。次回いじる際にはもう忘れているのでメモ。環境はBlender 3.1.2+Unity 2021.2.18f1。試行錯誤の結果なので不要な手順、間違ってる手順とかもあるはず。

[Blender] キーボードモデルの作成

まずBlenderでキーボードを作成。四角とベジエ曲線、キーボードのテクスチャとバンプマッピングで作った。

Advanced People Pack2で部品として使う場合はオブジェクトが一つになっている必要がるので、キーボードとロープを一つにする。ベジエ曲線を[ConvertTo]-[Mesh]、キーボードとロープを[Object]-[Join]で結合する。あとで調整できるように変換前のオブジェクトをバックアップしておく。

[Blender] Rigとの関連付け

このままモデルを出力してしまうと、Rigと関連付けられていないのでUnity側でデフォルトの位置に表示されてしまう。そのためRigに関連付ける。オブジェクト->適当なRigの順でShiftクリックで選択し、Alt-P-[With Automatic Weights]で関連付け。するとモデルの下にVertex Groupsが作られる。関連付けを解除するにはオブジェクトを選択してAlt+P-[Clear-Parent]。

この状態だと全てのRigにちょっとずつウェイトが関連付けられて変形してしまうので調整。衣服なんかだと良い具合にウェイトを調整して、ボーンアニメーションに追従させるのだが、今回の場合キーボードは曲がったりしないので特殊な設定になる。要するに一つのボーンに全体を100%ウェイトにして、他のボーンにはウェイトなしにすれば、一つのボーンの動きや角度に追従して、何も変形しないものが作れる。ってことで、今回はChestのRigに追従させる。Neckの方が妥当に見えるけど、走るモーションと組み合わせたときにキーボードと首の角度差によってめり込んでしまったのでChestにしてみた。まずChest以外のVertex Groupを削除し、Chestを選んで[Weight Paint]モードにして真っ赤(1.0)にする。

[Blender] モデルの出力

ここまでやったものをfbxで出力。Blenderを再起動する度に設定が初期化されるので面倒。オブジェクト-Rigの順番に選択して、[File]-[Export]-[FBX (.fbx)]で、以下の設定で出力。デフォルトと違うのは、Select Objects、ArmatureとMeshを選択、FBX ALL、Apply Transform、Face、Only Deform Bornsオン、Add Leaf Bonesオフ、Bake Animationオフ。その際、モデル自体は非表示にしてRigだけにしておくと余計なものがエクスポートされない。

[Unity] モデルの読み込み

次はUnityでモデルを読み込み。fbxを選択したときのプロパティから、[Rig]タブでAnimation　Typeを[Humanoid]に、MaterialsタブでMaterial Creation Modeを[Import via MaterialDescription]にする。マテリアルは一度fbxからExtractしておいてUnity側で再設定。しなくてもいいかもしれないけど。

Action People Pack2で部品として扱う場合、Item 1か何かのプリセットを増やして、キーボードモデルとマテリアルを設定する。マテリアル側でBump Mappingを設定し直しているのでちゃんとキーが立体的に見える。ここで設定を変更した場合、キャラクター側で設定をロードし直すのだが、Animation Controllerがデフォルト値に戻って自作のアニメーションが再生されなくなってしまうので、手動で設定し直す。

[Blender] アニメーションの作成

Blender側でアニメーションを作成する。モデルと同じblenderファイルでできればいいんだけど、何故かボーンがうまくUnityに反映されなくなってしまう（手首の角度が変になった）ので別々のファイルにしてある。

Rigを選択して、Posing Modeで好きなようにポージング。[A]キーでRigを全て選択して[Pose]-[Animation]-[Insert Keyframe]。とりあえず単純にキーフレーム1個だけ。

1つのfbxファイルに複数のアニメーションを入れることもできて、その場合、Animationタブの「Dope Sheet」になっている箇所を「Action Editor」にして、アニメーションを追加する。

設定が終わったら、[A]キーでRigを全て選択してfbxエクスポート。さっきの設定に加えて、[Bake Animation]をオンにしておく。その際、モデル自体は非表示にしてRigだけにしておくと余計なものがエクスポートされない。

[Unity] アニメーションの設定

Unityでアニメーションを読み込み。fbxを選択したときのプロパティから、[Rig]タブでAnimation　Typeを[Humanoid]に、MaterialsタブでMaterial Creation Modeを[None]。Animationタブで、Clipsにアニメーションが全て表示されていることを確認。

あとは普通にAnimation ControllerでMotionを設定する。複数のアニメーションを共存させる場合はLayer分けして、AvatorMaskを設定。

[Unity] 実行

ついに実行。以下のスクショは分かりやすいようにあえて前カメラで見ている。

久々にお休みにしたのでTyping Fieldの開発を進める、はずだったんだけど割と機能は揃ってきたので、アイテム作りを進める。まずはデフォルトで持っている「宝箱を開けるアイテム」のアイコン。

ってところで今日は終わってしまった。1個アイテム作る度にアイコン作りに1日かかるのか。。。アセットも探してみたけど、全てのアイコンで雰囲気とか向きとか光の方向を合わせないといけないので、探すより自分で作った方がいいだろうと。割とちゃんと作れたと思うけどどうかな。

ずっと表向きの職業が忙しいのだが、Typing Online(仮)をなんとか進めている。早いところゲーム製作一本に絞りたい。

タイトルはひとまずTyping Field Onlineにしてみた。タイピングが全ての空間みたいな。

そしてワードは自動生成。Weather Typingのときもディープラーニングによる自動生成を入れてみたけど、今回はそれをメインにするのでいろいろ改善してみた。最終的に、日本語と英語で、ウェザタイの文章っぽいフレーズができるようになったのでこういう感じに。

あとはCPUのAIをちゃんと作り込んで、攻撃アイテムを持ってなければアイテム探し、持っていればプレイヤーを探して攻撃、みたいにしたので一人プレーがちゃんとできるようになった。

てことでプレイしてみたけど、これは結構面白いと思う。アイテム運があったり、相手の隙を突いて攻撃、相殺みたいなウェザタイにはない戦い方もできるし。複数の対人対戦やってみたい。

ただ3D酔いしやすいかな。眼が疲れているのか判断が難しいけど。そのあたりのガイドラインを調べるか。