明日は「猫になりたい」の日!


■あらすじ

まるで時が止まっているかのように、
繰り返される毎日、限られた語彙で語られる日常、
そして一向に進展する気配のない僕と彼女の関係……。
とある出来事をきっかけに、僕は彼女に告白することを決心する。


明日、7/31日は「猫になりたい」の日です!

……と、言い続けてもう三年目になりますが、
自作フリーゲーム「猫になりたい」の作中の日付にあやかり
勝手に僕がそう呼んでいます。

共同制作における代表作は恐らく「エウレカ・クラン」ですが、
個人製作における代表作はこの「猫になりたい」です。

ジャンルは短編SFノベル。
たぶん他では見たことのない
特徴的なギミックを盛り込んでいます。
またLive2Dを用いたキャラクター描写を行っており、
ヒロインが適宜アニメーションするのも特徴です。

f:id:ashutaru1552:20190730202841j:plain
ヒロインの最中花

プレイ時間は1時間程です。
ブラウザ版でDLしなくてもプレイすることができるので、
もし気が向くようでしたら是非遊んでみてください(´▽`*)

novelgame.jp

【ウディタ】初心者向けテクニック3(当たり判定)

1.当たり判定


キャラが敵と接触している、
あるいはキャラに攻撃がヒットしている、
などのいわゆる当たり判定は
ゲームではとても大事な要素ですね。

ウディタの場合、マップイベントでは
「プレイヤー接触
「イベント接触
を選ぶことができます(図1-1)。

f:id:ashutaru1552:20190725195841j:plain
図1-1

ですが、今回はキャラクターイベントを使わず、
ピクチャによる当たり判定を説明します。

2.当たり判定の考え方


シューティングで考えてみましょう。
丸い自機に、同じく丸い攻撃がヒットしたとします(図2-1)。

f:id:ashutaru1552:20190725201729j:plain
図2-1

この図を見ても分かる通り、
自機と攻撃がちょうど接触する距離というのは、
自機の中心と攻撃の中心までの距離が
互いの半径の合計と同じになる時
なのです(図2-2)。

f:id:ashutaru1552:20190725202500j:plain
図2-2

つまり自機が攻撃と接触しているかどうかは、
下記の式が成立するかどうかで判定できるんですね。

(自機の半径 + 攻撃の半径) >= 自機の中心~攻撃の中心までの距離

「じゃあもし自機の半径が10で、攻撃の半径が20なら……
 自機の半径と攻撃の半径の合計は30で、それから……
 あれ、自機の中心から攻撃の中心までってどうやって出すんだ?

3.三平方の定理

三平方の定理というのは、直角三角形に対して
下記の式が成り立つという定理です。

辺(斜めの部分)の二乗 = 底辺の二乗 + 高さの二乗

実は自機と攻撃の中心座標を結び付けると、
ひとつの三角形が姿を現します。

f:id:ashutaru1552:20190725210601j:plain
図3-1

この三角形に三平方の定理をあてはめると、 下記のようになります。

(自機の中心~敵の中心までの距離)の二乗 =
  (攻撃x座標 - 自機x座標)の二乗 + (攻撃y座標 - 自機y座標)の二乗

そういえば、自機の中心~敵の中心までの距離が
自機の半径 + 攻撃の半径とイコールになるとちょうど接触しているんでした。

つまり下記の式が成り立つ時、
ちょうど自機と攻撃が接触していることになります。

(自機の半径 + 攻撃の半径)の二乗 =
  (攻撃x座標 - 自機x座標)の二乗 + (攻撃y座標 - 自機y座標)の二乗

4.ここだけ覚えよう


何か定理とかめんどくせーし話なげえんだよと思う方は
ここだけ覚えておきましょう。

(自機の半径 + 攻撃の半径)の二乗 >=
  (攻撃x座標 - 自機x座標)の二乗 + (攻撃y座標 - 自機y座標)の二乗

これが当たり判定の条件式です。
成立する時は接触していることになるし、
成立しない時は接触していないことになります。

5.当たり判定(ウディタ)


では、自機の座標が(60, 60)で
攻撃の座標が(70, 80)の場合を考えてみましょう。
自機の半径は5、攻撃の半径は15とします。

(5 + 15)の二乗 >= (70 - 60)の二乗 + (80 - 60)の二乗
   ↓
20 * 20 >= 10 * 10 + 20 * 20
   ↓
400 >= 100 + 400

どうやら接触していないようです。
実際のウディタ画面で見てみても
接触していないのがわかりますね(図5-1)。

f:id:ashutaru1552:20190725214457p:plain
図5-1

では、攻撃の座標が(60, 80)の場合を考えてみましょう。

(5 + 15)の二乗 >= (60 - 60)の二乗 + (80 - 60)の二乗
   ↓
20 * 20 >= 0 * 0 + 20 * 20
   ↓
400 >= 0 + 400

ちょうどぴったし接触しているようです。
実際のウディタ画面で見てみても
接触しているのがわかりますね(図5-2)。

f:id:ashutaru1552:20190725214733p:plain
図5-2

形が複雑になるともう少し色々考えないとだめですが、
円形の当たり判定であればこんな感じで判定出来るので、
シューティングゲームなどに活かすことが出来そうですね。

【ウディタ】初心者向けテクニック2(二点間の角度の算出)

1.二点間の角度の算出


座標(x1, y1)に対する座標(x2, y2)の角度を算出する。
……と表記するとすごーく面倒な気がしてしまいますね。

キャラに置き換えてみましょう。
プレイヤーキャラから見て敵はどの角度にいるかを算出する。

どうでしょう、さっきよりは興味を持てる感じになっているでしょうか?

2.難しく考えなくてもOK


例の如くウディタには角度を算出する機能が既に備わっています(図2-1)。

f:id:ashutaru1552:20190722204029j:plain
図2-1

難しいことは考えず、
「手順通りにやると相手のいる角度がわかるらしいぞ」
ぐらいの軽い気持ちでやっていきましょう。

3.二点間の角度の算出(ウディタ)


ウディタの場合、相手と自分の座標の差分を渡すだけで
角度を算出してくれます。

例えばキャラが座標(10, 10)にいて、
敵が座標(20, 30)にいるとしたら、
差分は下記の通りになります。

差分x座標(10) = 敵のx座標(20) - キャラのx座標(10)
差分y座標(20) = 敵のy座標(30) - キャラのy座標(10)
差分y座標(20) *= - 1

これをウディタの算出機能にそれぞれ渡せばOKです(実例は図3-1)。

角度 = ウディタの角度算出機能(差分x座標, 差分y座標)

f:id:ashutaru1552:20190722212100j:plain
図3-1

y座標に-1を掛けているのは、ウディタの仕様上、
上がマイナスで下がプラスになるためです。
※ウディタの場合は画面最上部がy座標0で
 下にいくほどどんどんy座標が増えていくので、
 グラフなどのy座標とは考え方が真逆になる。

ここも混乱しやすいところだと思うので、
そういうもんなんだ理解でもOKです。

また、ウディタ側に記載もある通り、
算出された角度は掛ける10された値になっているので、
本来の角度を算出する場合は割る10する必要がある点に注意です。

が、ウディタは角度を常に掛ける10の値で扱う仕様であるため、
ピクチャなどに利用する場合はそのままでもよさそうです。

4.サンプルコモン


画面中央から見て0度~90度までの角度の範囲に
マウスカーソルがある場合に〇を表示、
ない場合は×を表示するサンプルコモンを置いておきます。

https://kazaeditor.net/asset/Tech02_SampleCommon.zip

プレイヤー機に向かって攻撃を放つ敵キャラの実装や
キャラの視野に敵キャラがいるかの判定など、
色んなことに応用出来そうですね。

【新作公開】マサオさがし

f:id:ashutaru1552:20190721174143p:plain
SS

というわけで、第11回ウディコンにエントリーしました。
No.20「マサオさがし」です。

本作は例の如くソローさんとの共同制作で、ソローさんの
シリーズキャラクター「マサオくん」を主人公にした間違い探しゲームです。
3分~10分前後で遊べるミニゲームとなっていますので、
お気軽にプレイしてみてください。
クリア後にはオンラインランキングもあります。

▼DLリンク
WOLF RPGエディター コンテスト 応募作品

マサオくんの顔がいい感じにこのゲームと相性がよくって、
じっと見てるとどれも間違っているような気になってくるんですよね(ゲシュタルト崩壊)。

あと謎のゾーンに入ると、
難しいやつも何故か連続で気づける時があります。
謎です(不思議)。

今回は去年の反省を踏まえ、開発期間には余裕を持たせていたため、
他にもちょっとだけお遊び要素を入れることができました。

そんなにがっつり長時間やるゲームではないので(目も疲れますし)、
気軽にのんびり遊んでもらえれば幸いです。

【ウディタ】初心者向けテクニック1(円座標の算出)

1.円座標の算出


半径(r)の長さが決まっている円の座標計算を行う場合、
三角関数を用いることで、
任意の角度(Θ)のx,y座標を算出することができます。

【x座標の算出】
x = r * cosΘ

【y座標の算出】
y = r * sinΘ

2.sinとかcosとか分からなくてもOK


sinとかcosとかチンプンカンプンという人もいると思いますが、
ウディタの場合は角度からsin,cosを算出する機能が備わっているため(図2-1)、
難しいことを考えなくてもOKです。

f:id:ashutaru1552:20190715165943j:plain
【図2-1】

「手順通りに計算すると円周上の座標を計算できるらしいぞ」
ぐらいの軽い気持ちで使ってみましょう。

3.円座標の算出(ウディタ)


先程の公式に合わせて、
半径rと角度Θにおける円周上の座標算出を
ウディタで行う場合は下記のようになります(実例は図3-1)。

【x座標の算出】
cosΘ = ウディタのcos算出機能 ( Θ * 10 )
x = r * cosΘ
x /= 1000

【y座標の算出】
sinΘ = ウディタのsin算出機能 ( Θ * 10 )
y = r * sinΘ
y /= 1000

f:id:ashutaru1552:20190715174125j:plain
【図3-1】

ウディタ側に記載もある通り、
sin・cosの算出に用いる角度は掛ける10してあげる必要があるのと、
算出されたsin・cosは掛ける1000の値になっているため、
最後に割る1000してあげる必要がある点に注意ですね。

4.サンプルコモン


画面中央からランダムの角度に向かって
ピクチャが飛んでいくサンプルコモンを置いておきます。

https://kazaeditor.net/asset/Tech01_SampleCommon.zip

円形の座標が算出できると、
リングコマンドの実装なんかもできそうですね。