【ウディタ】初心者向けテクニック4(動的選択肢作成)

1.やってしまいがちな選択肢の作り方


例えば、難易度選択の選択肢を作る際、
クリアした難易度によって選べる難易度が増えるとします。

【例】

  • クリアした難易度が0の場合(未クリア)
    • レべル1
  • クリアした難易度が1の場合(レベル1クリア)
    • レべル2
    • レべル1
  • クリアした難易度が2の場合(レベル2クリア)
    • レべル3
    • レべル2
    • レべル1

クリア済の難易度が通常変数に格納されているとします。
やってしまいがちなのは、クリア済の難易度による条件分岐で
それぞれの選択肢を表示するやり方(図1-1)です。

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

このやり方をしてしまうと、
クリアした難易度の数だけ条件分岐が増えて大変です。

また、もし選択肢の中に直接処理を記述していた場合、
追加の処理が発生した場合にすべての条件分岐に追加しなければならない
というデメリット(図1-2)もあります。

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

2.ウディタの選択肢仕様(空の文字列)


ウディタの選択肢には特殊な仕様があります。
それは空の文字列を設定した場合、その選択肢が表示されなくなる
というものです。

これはすべての選択肢に対して有効な仕様なので、
選択肢1,2は空の文字列で選択肢3だけ文字が入っていた場合、
選択肢3だけ表示されるようになります(図2-1, 2-2)。

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

f:id:ashutaru1552:20190707164136p:plain
図2-2

この仕様を利用することで、
条件分岐を使わずにすっきりした選択肢を作ることができます。

3.動的選択肢作成


空の文字列は選択肢に表示されないということは、
必要ない時は選択肢の文字列を空っぽにしておくことで
表示しないようにすることができるということです。

例えば最初は図2-1のように選択肢1,2を空っぽにしておいて、
レベル1だけ表示されるようにしておきます。

その上でレベル1がクリアされたら、
選択肢2に「レベル2」という文字列を設定してあげることで、
動的に選択肢を増やしていくことができるわけです(図3-1, 3-2)。

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

f:id:ashutaru1552:20190707165138p:plain
図3-2

この方法を利用すると、図3-1のように、
ひとつの選択肢だけで処理を記述できるようになり、
コモンがすっきりして管理しやすくなります。

4.CDBを利用した管理方法


コモンで扱える文字列変数は最大5つまでなので、
コモンの文字列変数で選択肢を増やすのはあまり得策ではありません。
そこで、CDB(可変データベース)を利用します。

選択肢に、CDBの値を表示する特殊文字(※)を設定します。
※\cself[タイプ番号:データ番号:項目番号]

【例】

  • 選択肢1
    • \cself[20:0:0]
  • 選択肢2
    • \cself[20:0:1]
  • 選択肢3
    • \cself[20:0:2]

そしてCDBに選択肢用のデータを作成し、
必要に応じて選択肢を追加してあげることで、
同様の結果が得られます(図4-1)。

f:id:ashutaru1552:20190707171609j:plain
図4-1

項目「選択肢2」に「レベル2」という文字を
レベル1クリア時などに設定してあげれば、
動的な選択肢の完成です。

CDBの値はセーブファイル毎に保存されるため、
セーブ処理が実行されれば、
常に最新の状態の選択肢が表示されるようになります。

選択肢のパターンをコモン側で管理したり、
実行するコモン番号もDB側で管理したりすると、
より便利なコモンが作れそうですね。

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


■あらすじ

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


明日、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エディター コンテスト 応募作品

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

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

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

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