クリエイター支援サイト Ci-en
フォローするにはユーザー登録が必要です。
Heliodor 2021/04/29 23:43
ぼちぼち登場人物の紹介でも。
記念すべき第一回は主人公……ではなく生徒会長です。脇役から。
続きはフォロワー以上ですので、興味あったら是非フォローしてみて下さい。
まずは無料プランで様子見を。 お気軽にフォローしてみて下さい。
無料
このバックナンバーを購入すると、このプランの2021/04に投稿された限定特典を閲覧できます。 バックナンバーとは？
支援額：500円
Heliodor 2021/04/21 17:29
朝起きてトイレに入ったら、トイレの壁がバケツで水をぶち撒けたように濡れていてしばらく呆然となりました(上の階からの水漏れ)、ヘリオドールです（挨拶）。
さて、そんな笑い話は置いておいて水たまり表現の解説その４です。
ここまでで色々小細工をしたわけですが、一度全てを忘れます。
そう、一番最初に試した、矩形の水面（記事１を参照）を配置してみる方法に戻ります。
このポリゴンメッシュにテクスチャーを貼り付けて描画していたわけですが、ここで冷静に考えてみると、このポリゴンメッシュを部分的に表示するための方法がもう一つあるのです。
それは各頂点のアルファを調節する方法です。
むしろなんでそれを早く思いつかなかったのかという感じですが……。よくありますよね。
例えばこんなメッシュがあったとします。
ここに水たまりを表す円を置いたと考えて……。
円の内側にある頂点を不透明に、それ以外が全て透明になるようにアルファを設定するわけです。
最初の画像で示した基本形でこれを試してみると、こんな感じのメッシュが出来上がります。
これに水面テクスチャを貼り付けると、こんな感じに。
この方法の利点は、メッシュ頂点の色を変えるだけで位置やサイズを自由に変更できる事ですね。
【補足】
動画をよく見ると、水たまりの円同士が近づいたときに円が引き寄せられているかのように微妙に変形していると思いますが、これは各頂点のアルファを決めるときにメタボールの原理を使っているからです。
float val = 0;
Vec2 pos = 調べたい頂点の座標;
for (int i=0; i<円の個数; i++) {
Vec2 d = 円[i]の座標 - pos; // 距離
float dr2 = d.x*d.x + d.y*d.y; // 距離二乗和
val += 円[i]の重み / dr2;
}
if (val >= 閾値) {
// この頂点を表示
}
ところでこれ、背景に穴をあけて、そこに合わせて水面を配置して……みたいな煩わしさはなくなったのですが、フチの部分が超劣化したJPGみたいにギザギザしてしまうという、ワリと致命的な欠陥があります。
これを滑らかにするにはメッシュを細かくするしかないのですが、全頂点の色をリアルタイムで書き換える必要があるのと、増えた頂点分の波の計算もしなくてはならないという仕組み上、処理時間がガンガン増大します。つまりどんどん重くなる。
※水面がずっと固定でサイズも変化しないならそんな必要はないのですが、ここではさらに高みを目指すということで、リアルタイムでサイズも位置も自由自在に変化できるものを目指すことにします。
あと、水面の独立性の問題（記事３を参照）も、実はあまり解決していません。
このあたりまでくると「なぜあの方法を使わないのだ？」と思う方もいると思います。
というわけで次回、ようやくピクセルシェーダーを使った方法に挑戦します。
つづく
どうでもいいおまけ
冒頭のトイレの事件はこういうことだったみたいです。
（聞いた話ですが、多分こんな感じ）
トイレ使用後、何かの拍子で雑巾が落ちて穴を塞いだ（らしい）
タンク内が水で満たされないので永久に水が出続ける
そして真下の部屋の俺、朝っぱらから咽び泣く。
まあ、上の部屋の方が大変なことになっていたんだろうとは思いますが……。
みんなも気を付けようね！！マジで！！！！！
Heliodor 2021/04/07 19:36
今回はシンプルにプログラム話（だけ）です。
さて、前回の記事で画面いっぱいの水面に穴あき地面を重ねるという方法を使ったわけですが、これって見た目だけなら問題なかったんです。
……そう、静止画像での見た目だけならば。
実際に動かしプレイしてみると、水面としては挙動が不自然なんですよ。
どういう事かと言いますと、下の画像のように複数の水たまりを独立して配置した場合のことです。
この状態で動かすと当然、このようになります。
まあ一言で言って不自然ですよね。
この水たまりはすぐ近くにあるので、振動が伝わっている風に見えなくもないかもしれませんが、このヒロインどんだけ体重(ry 遠くにあってもそのうち波紋が届きます。これではよろしくない。
ならば画面全部に水面を貼り付けるのではなく、水たまりごとに小さな水面を貼り付けるか……？と考えたわけです。
こんな風に水面を配置して（分かりやすいように色を変えてあります）
この上から穴あき背景をかぶせれば、こんな風になります。
これで、どんなに動き回っても離れた水面に影響を与えなくなりました。
……しかし、これはこれでかなり面倒なんですよ。
背景の裏にあるのは矩形の水面ですから、水たまりの配置によっては、水面が互いに重なってしまう場合もあります。
これを防ぐためにはAを奥に、Bを手前に配置しないといけないのですが、この前後判定を自動で、しかもどんな配置でも矛盾なくやるのって結構難しいんです。というかムリ。
まあそこは仕様だと割り切ってしまうのが一番楽だし、あるいは水たまりを配置するときに気を付ければ良いだけなんですが、やっぱりもう少しうまく出来ないものかなと。
あと、むしろこちらの理由のほうが大きいのですが、この方法だとリアルタイムに水たまりを生成したり消したりするということが出来ないんです。
プレイヤーが敵を倒すとその場に白濁液だまりが生成されるとか、時間経過とともにそれがどんどん縮小して（乾いて）そのうち消えてしまうとか。
どうせならそういう事もやりたいなーと。
ゲーム作っていると起きる無駄に凝り始める症候群、初心者にはオススメ出来ない。
というわけで、次回で再び別のやり方を考えることにします。
つづく