投稿記事

Heliodor 2021/04/29 23:43

あやかし紅白戦キャラ紹介 その1

ぼちぼち登場人物の紹介でも。
記念すべき第一回は主人公……ではなく生徒会長です。脇役から。


体操着じゃないと誰だか分からないヒロインとの対比。右がその生徒会長。
余談ですが左の小さいのが一番年上。




続きはフォロワー以上ですので、興味あったら是非フォローしてみて下さい。

フォロワー以上限定無料

まずは無料プランで様子見を。 お気軽にフォローしてみて下さい。

無料

【 500円 】プラン以上限定 支援額:500円

このバックナンバーを購入すると、このプランの2021/04に投稿された限定特典を閲覧できます。 バックナンバーとは?

  • アイコン
    Jeka ID00344116
    アイデアのために
  • アイコン
    ひお ID00039210
    ぶっコロすこ

2件のチップが贈られています

チップを贈るにはユーザー登録が必要です。チップについてはこちら

Heliodor 2021/04/21 17:29

少しだけ詳しく水たまりプログラム説明 その4

朝起きてトイレに入ったら、トイレの壁がバケツで水をぶち撒けたように濡れていてしばらく呆然となりました(上の階からの水漏れ)、ヘリオドールです(挨拶)。



さて、そんな笑い話は置いておいて水たまり表現の解説その4です。

ここまでで色々小細工をしたわけですが、一度全てを忘れます。
そう、一番最初に試した、矩形の水面(記事1を参照)を配置してみる方法に戻ります。

このポリゴンメッシュにテクスチャーを貼り付けて描画していたわけですが、ここで冷静に考えてみると、このポリゴンメッシュを部分的に表示するための方法がもう一つあるのです。


それは各頂点のアルファを調節する方法です。
むしろなんでそれを早く思いつかなかったのかという感じですが……。よくありますよね。


例えばこんなメッシュがあったとします。


ここに水たまりを表す円を置いたと考えて……。


円の内側にある頂点を不透明に、それ以外が全て透明になるようにアルファを設定するわけです。


最初の画像で示した基本形でこれを試してみると、こんな感じのメッシュが出来上がります。


やっていることは3Dツールでの頂点カラー、頂点ペイントと同じです。
ステンシルとかマジで何だったのか。

これに水面テクスチャを貼り付けると、こんな感じに。


この方法の利点は、メッシュ頂点の色を変えるだけで位置やサイズを自由に変更できる事ですね。

【補足】
動画をよく見ると、水たまりの円同士が近づいたときに円が引き寄せられているかのように微妙に変形していると思いますが、これは各頂点のアルファを決めるときにメタボールの原理を使っているからです。


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みたいにギザギザしてしまうという、ワリと致命的な欠陥があります。

これを滑らかにするにはメッシュを細かくするしかないのですが、全頂点の色をリアルタイムで書き換える必要があるのと、増えた頂点分の波の計算もしなくてはならないという仕組み上、処理時間がガンガン増大します。つまりどんどん重くなる

※水面がずっと固定でサイズも変化しないならそんな必要はないのですが、ここではさらに高みを目指すということで、リアルタイムでサイズも位置も自由自在に変化できるものを目指すことにします。

あと、水面の独立性の問題(記事3を参照)も、実はあまり解決していません。



このあたりまでくると「なぜあの方法を使わないのだ?」と思う方もいると思います。

というわけで次回、ようやくピクセルシェーダーを使った方法に挑戦します。

つづく









どうでもいいおまけ

冒頭のトイレの事件はこういうことだったみたいです。
(聞いた話ですが、多分こんな感じ)


よくある普通のトイレ



トイレ使用後、何かの拍子で雑巾が落ちて穴を塞いだ(らしい)


※部屋主は気が付かずそのまま就寝




タンク内が水で満たされないので永久に水が出続ける


無限の泉!!
※実際はある程度溢れたところで止まったみたいです



そして真下の部屋の俺、朝っぱらから咽び泣く。
まあ、上の部屋の方が大変なことになっていたんだろうとは思いますが……。

みんなも気を付けようね!!マジで!!!!!

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

Heliodor 2021/04/07 19:36

少しだけ詳しく水たまりプログラム説明 その3

今回はシンプルにプログラム話(だけ)です。


さて、前回の記事で画面いっぱいの水面に穴あき地面を重ねるという方法を使ったわけですが、これって見た目だけなら問題なかったんです。

……そう、静止画像での見た目だけならば。


実際に動かしプレイしてみると、水面としては挙動が不自然なんですよ。

どういう事かと言いますと、下の画像のように複数の水たまりを独立して配置した場合のことです。


見た目には三つの独立した水たまりに見えますけど、これって画面全体の水面の上から穴あき背景を重ねているだけですから、水面処理的には全部繋がっているわけです。

テクスチャは繋がっててもギリ許されるかもしれない。だがしかし……。

この状態で動かすと当然、このようになります。

まあ一言で言って不自然ですよね。

この水たまりはすぐ近くにあるので、振動が伝わっている風に見えなくもないかもしれませんが、このヒロインどんだけ体重(ry 遠くにあってもそのうち波紋が届きます。これではよろしくない。



ならば画面全部に水面を貼り付けるのではなく、水たまりごとに小さな水面を貼り付けるか……?と考えたわけです。


こんな風に水面を配置して(分かりやすいように色を変えてあります)

この上から穴あき背景をかぶせれば、こんな風になります。


見た目は最初と同じですが、水たまり同士は繋がっておらず、それぞれ独立しています。


これで、どんなに動き回っても離れた水面に影響を与えなくなりました。


……しかし、これはこれでかなり面倒なんですよ。
背景の裏にあるのは矩形の水面ですから、水たまりの配置によっては、水面が互いに重なってしまう場合もあります。


例えばこののように配置したい場合、裏の水面をAとBのように置く必要がありますが、これではAがBにはみ出してしまいます。

これを防ぐためにはAを奥に、Bを手前に配置しないといけないのですが、この前後判定を自動で、しかもどんな配置でも矛盾なくやるのって結構難しいんです。というかムリ。


まあそこは仕様だと割り切ってしまうのが一番楽だし、あるいは水たまりを配置するときに気を付ければ良いだけなんですが、やっぱりもう少しうまく出来ないものかなと。


あと、むしろこちらの理由のほうが大きいのですが、この方法だとリアルタイムに水たまりを生成したり消したりするということが出来ないんです。

プレイヤーが敵を倒すとその場に白濁液だまりが生成されるとか、時間経過とともにそれがどんどん縮小して(乾いて)そのうち消えてしまうとか。


どうせならそういう事もやりたいなーと。
ゲーム作っていると起きる無駄に凝り始める症候群、初心者にはオススメ出来ない。




というわけで、次回で再び別のやり方を考えることにします。

つづく

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

Heliodor 2021/03/31 19:09

雑談

雑談です。
本当にどうでも良い話です。



シール剥がしスプレーを買いました。


ででーん、てれれれー(アイテム入手BGM脳内再生)

プリンの容器のシールとか、奇麗に剥がせそうで剥がせないシール。
このスプレーで剥がし放題!!

奇麗に剥がせそうで剥がせなくてイライラするシールは他にもあるし!
例えば………………。
………。
…。



まあそれはさておき、早速使ってみたのですが。


んんん、なんか思ってたのと違うな……。

使い方には「3分浸透させて奇麗な布で拭き取る」と書いてありましたが、このデロデロは拭いても洗っても取れやしません。というか布が大惨事。
完全に溶けて流れ落ちるまでスプレー噴射しまくるしかないんでしょうか? コスパ悪ぅ……。


ダメもとでスプレーしまくると、あたりに満ちる柑橘系の香り


ちゃんと柑橘系の爽やかな香りと容器に書かれている

まぁ、部屋に溶剤臭が充満するよりはいいですが、なぜそこに気を使ったのか。



……んん? 柑橘系


まさか発泡スチロール溶けたりしないよな……溶けるんかーい!!


捨てるの面倒臭くて放置していたレーザープリンターの梱包材




えっ、ということは……


スプレーして拭き取った布が緑色になりました。

注意書はちゃんと読みましょう。






結論:ドライヤーや台所洗剤の方がよく剥がせる……。
シール剥がしスプレーとは一体。

おまけの豆知識:発泡スチロールを溶かす柑橘類の皮なんかに含まれる成分(リモネン)は危険な薬品とかではなく、むしろ癌やハゲの予防にも効果があるそうです。マジカヨ。






プリンとかデザートの容器、洗って小物入れるのに使いますよね? 俺だけ?

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

Heliodor 2021/03/22 20:28

少しだけ詳しく水たまりプログラム説明 その2

疲れているときにお気に入りの曲を聴くと、やけにテンポが早く感じるような、遅く感じるような……。

きっと脳クロックがバグってます。ヘリオドールです(挨拶)。



前回(その1)ではステンシルで単純に水面画像を切り抜いて、不自然極まりないものが出来上がりました。そりゃハサミで切ったように切り抜いたらそうなりますよね。

……そうなんです。ステンシルの境界面はαマスクのようなグラデーションが使えません。

そこでどうにかしてフチの部分をもう少しマシなものにできないものかと考えた結果、異なるサイズのステンシルで切り抜いた水面を重ねたらどうだろう?と思いつきました。

大きめのステンシルで切り抜いた水面を半透明で描画し、次に小さめのステンシルで切り抜いた水面を半透明で重ねて描画、さらに小さめの水面を……とやっていき、エッジの部分が数段階グラデしているように見せるわけです。
(と、言葉で説明しても分かりにくいので画像を用意しました)



まず、大きめのステンシルで切り抜いた水面を半透明で配置します。


次に、ひと回り小さいステンシルで切り抜いたものを重ねます。

最後に不透明の水面を重ねて出来上がり。




これでフチがグラデーションっぽく……

ないですね。orz

なんかPS1時代の海の波打ち際の無理やりな表現というか、ドット絵ゲーム機時代にパレットアニメで波打ち際を表現していた時みたいというか、そんな風にあからさまに色の段階が見えますね。

これは3枚しか重ねていないので、さらに10枚、20枚重ねればもっと滑らかにグラデーションできると思いますが、ちょっとそれは努力の方向が違うような……。というか重過ぎる。


方針転換

これまでは、背景画像の上に、適当に切り抜いた水面を置いていました。
そこでフッと思ったんです。これ、逆にすればどうかな?と。


まず、一番最初に作ったただの長方形の水面を配置します。

そして水面の形に切り抜いておいた画像を用意し……。

水面に重ねて配置する!

お、これは行けるのでは……?ステンシルとは何だったのか。


動くとこんな感じに

このままだと水面があまりにものっぺりしすぎているので、試しに適当なテクスチャ画像をもってきて、適当にアニメーションさせて表示してみます。
(ちなみに "texture milk" をキーワードにして画像検索しました)


うむ!今までと比べるとそれっぽい!


補足
この水面のアニメ(プレイヤーが発生させた波ではなく、水面全体の模様がゆっくりゆらうら動いているヤツ)は、ただメッシュの各頂点のテクスチャ座標を動かしているだけで、メッシュの頂点自体が動いているわけではありません。



	// xindex 横方向の頂点番号
	// zindex 縦方向の頂点番号
	// xcount 横方向の頂点数
	// zindex 縦方向の頂点数
	Vec2 getTexCoord(int xindex, int zindex, int xcount, int zcount) {
		float tx = 0.02f * cosf(xindex*0.2f + zindex*0.2f + m_Time * 0.04f); // m_Time はアニメ用のフレーム番号
		float tz = 0.02f * sinf(xindex*0.2f + zindex*0.2f + m_Time * 0.04f);
		return Vec2(
			(float)xindex / (xcount - 1) + tx,
			(float)zindex / (zcount - 1) + tz
		);
	}

こんな感じで、頂点ごとに少しずつ位相をずらした円を描くように、テクスチャ座標を移動させているだけです。

これで一応、一番最初に目標としていたモノは出来上がったことになります。
水面の形とか、フチの部分のぼやけ具合とかはペイントツールでいくらでも調整できます。




だがしかし

ここで、ある問題が発覚します。
「これではイカン」となったわけです。



つづく









おまけ

愛用のドンキPCがTwitterでトレンドになってて「何事!?」と思ったらこんな記事が。
https://news.livedoor.com/article/detail/19892240/

CPUがCeleron N4100という以外、私が去年買ったドンキPC(19,800円)とほぼ同じスペックで49,800円!?マジか



で、そのCPU性能をPassMark(戦闘力みたいなもの)で比較してみると……。

私が愛用しているドンキノートのCPU(MUGA3)
Celeron N3550 →1164

今回新発売のノートPCのCPU
Celeron N4100 →2461

私が愛用している十年ぐらい前のデスクトップPCのCPU
Core i7 2600 →5308


結論:Sandy Bridgeはまだ戦える
(※あやかし紅白戦はドンキノートのスペックでも動きます)


まあ大したことやらんし、GPU内蔵のi5あたりで適当に作っちゃってもいいんですが、それならまだ今のままでもいいかなぁって……。

1件のチップが贈られています

チップを贈るにはユーザー登録が必要です。チップについてはこちら

1 2 3 4 5 6 7

記事のタグから探す

月別アーカイブ

限定特典から探す

記事を検索