ガラスを割るエフェクト2

アバター
SAI
記事: 115
登録日時: 14年前
住所: はひほーひ

ガラスを割るエフェクト2

投稿記事 by SAI » 13年前

早速難航しております。
今考えてるものは次のようなものです。

ガラスを割ると言っても、本物のようなものはかなり無理ゲーなので直線をたくさん引いて、それで分割する手法をとります。
まず線を引くのですが、直線の式を

Ax+By=E

として、ABEの値をランダムで決定します。
まず上下左右どの端にいるかを決め、その辺上の位置をランダムで決めます。
これをもう一度行い、直線を引く2点を選びます。
(同じ値にならないように、また頂点と重ならないように。これを重なり判定とし、
処理がめんどくさくなると思われるので重ならないように今後全ての点に対し総当たりで行います)

この求めた座標を(x1,y1),(x2,y2)とします。
このときA,B,Eの値を求めるのですが、

Ax1+By1=E
Ax2+By2=E

未知数3つに対して、式が2つしかない。
あれ?

これは中学校からやり直しフラグか?
とりあえず解くと、

B=(x2-x1)/(y2-y1)*A
E=Ax1 + (x2-x1)/(y2-y1)*y1

やっぱりAが消えない・・・。Aってどんな値でもよかったんでしたっけ?そしたら1にしたいです。

このへんよくわかりませんが、とりあえず直線が求まったとします。これにより四角い画面はぶった切られます。
このときどんな図形になるか、図にまとめました。
長方形の画面とはいっても、下のように一般的な四角形に分類できるので、イビツな四角形や三角形と一緒にして考えています。
画像
図によると、

三角形を隣り合った辺で分割 → 三角形 + 四角形

四角形を隣り合った辺で分割 → 三角形 + 五角形
四角形を2つ隣りの辺で分割 → 四角形 + 四角形

ここから

n角形を隣り合った辺で分割 → 三角形 + (n+1)角形
n角形を2つ隣りの辺で分割 → 四角形 + (n)角形

さらに
n角形をm個隣りの辺で分割 → (m+2)角形 + (n-m+2)角形

となることがわかります。
なにがなんだかわからなくなってまいりました。

三角形を分割した場合、直線と三角形の交点は2つであるはずです。
(△x1,△y1),(△x2,△y2),(△x3,△y3)とあったとき、交点(x1,y1),(x2,y2)は
(△x1 > x1 > △x2) かつ (△y1 > y1 > △y2) かつ
(△x2 > x2 > △x3) かつ (△y2 > y2 > △y3)

となるはずです。これをn角形に応用すると
(△x1,△y1)~(△xn,△yn)の頂点があり、(△なのは突っ込んだら負け)
(△xi > x1 > △xi+1) かつ (△yi > y1 > △yi+1) かつ
(△xj > x2 > △xj+1) かつ (△yj > y2 > △yj+1)
となるiとjが決まるはずです。iとjは、6角形ならiが5番目でi+1が0番目ということがありうるので注意が必要ですね。

~ここまでで2時間~
プログラムが書ける気がしない。

こうしてiとjの差が求まります。これがmです。ということはi≠jですね。
mがわかれば、iとjもわかっているのでどの辺でどう分割すればいいかがわかるはずです。その結果何角形になるかもわかります。
多分これで分割できるのではと思います。

ちなみに
Ax+By=E
Cx+Dy=F

の連立方程式の解は
x=(E*D-B*F)/(A*D-B*C)
y=(F*A-E*C)/(A*D-C*B)

なので、直線同士の交点はこれで求めます。


次です。三角形はいいのですが、四角形以降は三角形をくっつけて描画しないといけません。
百角形ができないとは言い切れないので、これまた一般化して考えたいです。
まず五角形の場合、頂点0~4まであります。
必要な三角形の座標は
△1 (x0,y0),(x1,y1),(x2,y2)
△2 (x0,y0),(x2,y2),(x3,y3)
△3 (x0,y0),(x3,y3),(x4,y4)

あ、なんか簡単そう。一般化は省略します。

次に実際に描画する3Dの座標をどう決めるかという問題が残っていますがとりあえずこんなところで。



プログラム抜きでざざっと考えてみましたが、こんなに複雑だとは思いませんでした・・・。
現在絶賛迷走中ですので、他にいいやり方があったら教えてください。いやほんとに。

アバター
a5ua
記事: 199
登録日時: 14年前

RE: ガラスを割るエフェクト2

投稿記事 by a5ua » 13年前

異なる2点 (x1, y1), (x2, y2) を通る直線の式は、

(x2 - x1) (y - y1) = (y2 - y1) (x - x1)

で表すことができます。

ISLe
記事: 2650
登録日時: 14年前

Re: ガラスを割るエフェクト2

投稿記事 by ISLe » 13年前

元画像を直線でぶった切る仕様で無くても良いなら、図形内や辺の上にランダムに点を打って、三角形になるように適当に繋ぐほうが簡単だと思います。

本物のガラスは衝撃を受けた点から放射状に割れますし、分岐点はガラスが薄かったり不純物が入っている弱いところですから。

アバター
SAI
記事: 115
登録日時: 14年前
住所: はひほーひ

Re: ガラスを割るエフェクト2

投稿記事 by SAI » 13年前

>>a5uaさん
ありがとうございます!
基本的なところがすっぱり抜け落ちているのでとても助かります。
これで直線の式を計算しなくても交点を求められますね!
今計算したところ、(x3,y3),(x4,y4)を通る直線との交点は

x={x1(x4-x3)(y2-y1)-x3(x2-x1)(y4-y3)+(x2-x1)(x4-x3)(y3-y1)} / {(x4-x3)(y2-y1)-(x2-x1)(y4-y3)}
y={y1(y4-y3)(x2-x1)-y3(y2-y1)(x4-x3)+(y2-y1)(y4-y3)(x3-x1)} / {(y4-y3)(x2-x1)-(y2-y1)(x4-x3)}

になるようです。
なんだこの長い式は・・・。
最後に編集したユーザー SAI on 2011年11月23日(水) 17:15 [ 編集 1 回目 ]

アバター
SAI
記事: 115
登録日時: 14年前
住所: はひほーひ

Re: ガラスを割るエフェクト2

投稿記事 by SAI » 13年前

>>ISLeさん
なるほど、そのようなやり方があるんですね。
しかも線を引くより簡単そうですね。どう三角形に分割するかは見当がつきませんが・・・

実は直線を使うやり方でもやりたいことがあるので、直線タイプとリアルなガラスタイプの両方作りたかったですが、
ガラスの方はさっぱりだったので諦めていました。
しかしこれで足がかりできました。ありがとうございます!

アバター
へろりくしょん
記事: 92
登録日時: 14年前

Re: ガラスを割るエフェクト2

投稿記事 by へろりくしょん » 13年前

とりあえず、家の窓ガラスを割って観察するところから始めてみればいいと思うよ。

アバター
SAI
記事: 115
登録日時: 14年前
住所: はひほーひ

Re: ガラスを割るエフェクト2

投稿記事 by SAI » 13年前

さすがへろりさんです。
割れたガラスの画像をググって観察すればいいだなんて名案ですね。早速やってみます。


・・・ツッコミません。ツッコミませんよ!?

さりげなく投稿時間が同じという。
実はISLeさんのコメントに返信したあとの画面からここに戻ってきたときにへろりさんのコメントを見つけたので、
相当なタッチの差だったみたいですね。

かば
記事: 7
登録日時: 13年前

Re: ガラスを割るエフェクト2

投稿記事 by かば » 13年前

割れるイメージってかっこいいですね。
コードは創造もつきません。
作ろうなんて考えたことなかったです。
これは、ものにしたら、かなりの成長ではないでしょうか。
ぜひ、がんばってください。

アバター
SAI
記事: 115
登録日時: 14年前
住所: はひほーひ

Re: ガラスを割るエフェクト2

投稿記事 by SAI » 13年前

>>かばさん
ゲームにガラスが割れて戦闘に突入する演出があって、それがすごくカッコイイのでずっとやりたかったんです。
ここまででも3Dや数学についてたくさん学ぶことができました。
これもアドバイスや応援をしていただける皆さんのおかげです。
なのでがんばっちゃいます!