前に吉里吉里ZでちょっとしたRPG要素を作ろうと思った時のまとめ②(健全記事)

マップ移動とランダムマップ部屋！！

画像の表示の考え方

前回とりあえず、配列を使って、ランダムでスタートとゴールを作り、
それを道でつないだり、他にもそれらを移動する考え方を書いたと思いますが、
次は簡単にそれを表示できるようにしておこうかと思いました。
え？　普通そこはランダムマップで部屋をちゃんと作って、
完璧なランダムマップを作った方が……
とも考えると思いますが、
ランダムマップが複雑になる前の簡単なマップで、
とりあえずちゃんと表示して、マップを移動できるようになってるかを確かめたりも大事かと思い、
順番的には変ですが、先にマップ移動や、3D画面とかの考え方を書いていきたいと思います。

と言っても、考え方自体は前回書いたように、

(指定したい文字数目)　/　(改行するときの数)　＝(ｘ軸)　と余りの数(ｙ軸)

でまず自分の座標を設定します。
そこから上に移動したら(改行するときの数)を配列の何番目かという座標に足して、
そこが、０(つまり壁)かどうかを判別させて、
壁じゃなかったら移動、壁だったら移動させない。
移動させたら、自分の座標を移動した場所にするということにすれば、
数値上理解させることができます。

そして数値で理解させたということは、面倒ですけど、
その数に対応した画像を表示させればいいことになってきます。

なので前回やっていた配列をマス目と考えて、
０の壁を黒として、２の道を白とする。
そして自分の位置を矢印にして、向いている方向を矢印の向きにして、
あとは移動する方向に対応したボタンを作り、

例として載せる画像や動画では今回から150×10のマップにしてます。
ちなみに矢印やスとかゴって描いているマスが一マス分になっています。

動画見るの面倒くさい人向けの一応の画像↓
あと画像に対応している配列表

０，０，０，０，０，０，０，０，０，０，０，０，０，０，０，
０，０，０，０，０，０，０，０，０，０，０，０，０，０，０，
０，０，０，０，０，０，０，０，０，０，０，０，０，０，０，
０，０，０，０，０，０，０，０，０，０，０，０，０，０，０，
０，０，１，２，２，２，２，２，０，０，０，０，０，０，０，
０，０，０，０，０，０，０，２，０，０，０，０，０，０，０，
０，０，０，０，０，０，０，２，０，０，０，０，０，０，０，
０，０，０，０，０，０，０，３，０，０，０，０，０，０，０，
０，０，０，０，０，０，０，０，０，０，０，０，０，０，０，
０，０，０，０，０，０，０，０，０，０，０，０，０，０，０，

という対応したマス目とボタンの表示をすることで、
とりあえずノベルゲームをつくる吉里吉里でもそれっぽい動きを再現できたのではないかと思います。

ランダムマップ部屋編

ここまでくればランダムマップの部屋なんて結構簡単に考えてもいいんじゃないでしょうか？
スタートとゴールをランダムで決めて道でつながるように自動でできるのなら、
スタートとゴールの周りの囲んだマス全部を道にするようにすれば、

０，０，０，０，０，０，０，０，０，０，
０，１，２，２，２，２，２，２，２，０，
０，０，０，０，０，０，０，０，２，０，
０，０，０，０，０，０，０，０，２，０，
０，０，０，０，０，０，０，０，３，０，
０，０，０，０，０，０，０，０，０，０，

という場合ならば、スタートの周りを２にすると

２，２，２，０，０，０，０，０，０，０，
２，１，２，２，２，２，２，２，２，０，
２，２，２，０，０，０，０，０，２，０，
０，０，０，０，０，０，０，０，２，０，
０，０，０，０，０，０，０，０，３，０，
０，０，０，０，０，０，０，０，０，０，

ゴールの周りを２にして、

２，２，２，０，０，０，０，０，０，０，
２，１，２，２，２，２，２，２，２，０，
２，２，２，０，０，０，０，０，２，０，
０，０，０，０，０，０，０，２，２，２，
０，０，０，０，０，０，０，２，３，２，
０，０，０，０，０，０，０，２，２，２，

となり、これで部屋が2部屋できます。
そしてこれが自動でできるようになったら……
単純にこれを乱数でループさせるようにすれば部屋が勝手に何部屋かできるようになると思います。
これが、自分のランダムマップの考え方です。
最初のスタートの場所を保存しておき、新しいスタートを作ってゴールと結ばせる、
なのでさっきの配列マップをループさせて、

２，２，２，０，０，０，０，０，０，０，
２，１，２，２，２，２，２，２，２，０，
２，２，２，０，０，０，０，０，２，０，
０，０，０，０，０，０，０，２，２，２，
０，０，０，０，２，０，０，２，３，２，
０，０，０，０，０，０，０，２，２，２，
　　　　　　　　↑ここに新しい仮のスタートを作らせてゴールと結ばせると、

２，２，２，０，０，０，０，０，０，０，
２，１，２，２，２，２，２，２，２，０，
２，２，２，０，０，０，０，０，２，０，
０，０，０，２，２，２，０，２，２，２，
０，０，０，２，２，２，２，２，３，２，
０，０，０，２，２，２，０，２，２，２，

という3部屋ができていきます。
これを乱数で何回ループさせるかを設定させれば、
結構ランダムなマップがちゃんと生成されたりします。
(まぁもちろんループを何度もさせればさせる程重くなったりするんですが、
所詮数値の単純な入れ替えをしているだけなので、吉里吉里では重くならないんですが、
ティラノスクリプトだと結構重くなったりもしますのでちょっと注意)

ただここまでできれば、ランダムマップに移動もできて、結構色々なことができたりします。
別にランダムじゃなくても、配列の数値をもっと複雑にして、
ここは道、ここは草や木、ここは民家の数値と決めて、対応した画像を表示できるようになれば、
初代ポケモンくらいの見た目のマップ移動とかはできるようになったりすると思います
！

次回は今回作ったランダムマップと移動を自分の居る位置と比べて、
3D風の画面表示考え方と、
戦闘になったときの速さ比べのバブルソートの考え方とかを載せようかと思います。
バブルソートなんかは知ってる人も多いかと思いますが、
昔ながらの有名なソート方法なんで、説明する必要もないかもしれないですけどね。

ティラノスクリプトで3Dっぽいのとかランダムマップとかを作ってる進捗2024年5月4週(健全記事)

吉里吉里で作ったのをティラノスクリプトでもある程度動かせるようになりました。

その前に吉里吉里で作ってた3Dのランダムマップとかのまとめ

Ci-enではまず吉里吉里で作ったのをまとめていなかったので、
ツイッターでは載せていた吉里吉里での挙動なんかのまとめの動画と画像を、
ここにも一応載せておこうかと思います。

という感じでノベルゲームを作るツールで、3Dっぽいランダムマップとかを移動して、
敵とランダムに出会い戦うみたいなRPG的な要素を作っていたりしました。
(ちなみに動画だと防御の数値とかステータスがちょっとバグって変動してたりするんだけど、
もうなおしたバグなのでご勘弁を……)

そしてそれをティラノスクリプトでもなんとか動かせるようにしたまとめ

と、その前に、どうしてティラノスクリプトでも動かせるようにしているのかの理由

これを見ている人は、吉里吉里で動かせているのに、
なんでティラノスクリプトでも動かせるようにしているの？？
って結構不思議に思っている人もいるかもしれないです。
……なんなら個人的にもティラノスクリプトより吉里吉里の方が、
動作も軽くて、ファイルもすきっりまとまっていたりと、吉里吉里の方が好きなんですが。
ただ、吉里吉里って、今の主流は吉里吉里Zで公式サイトの最新バージョンは6年前くらいに更新が止まっていたりします。
なので対応OSもWindows 7/8/10までで、Windows11では対応してないというのが現実です。
まぁ、多分Windows11でも動くとは思うんですが、
今後のことを考えると、今でも更新やバージョンアップを積極的に行っていて、
なおかつ吉里吉里と互換性のあるシステムであるティラノスクリプトでも作れるようになっておいた方がいいというのが本音です。
もちろんティラノスクリプトの方が吉里吉里より優れている場所も多くあり、
やっぱりなんといってもフリーゲームなんかだと、
簡単にブラウザゲームとして更新できることも大きいですよね。
他にもlive2Dや、色々な要素もあったりするのでとても良い！！

ということで今後の事を考えて、ティラノスクリプトでも動かせるようにしていこうというのが、自分の考えです。
今の所、フリーゲームなんかの公開ではPCで吉里吉里Zのダウンロード版として軽く動かしてもらうのと、
ティラノスクリプトのブラウザ版で、スマホなんかでも気軽に楽しんでもらえるように分けてたり自分はします。

ティラノスクリプトでも動かせるようになったまとめ

そして本題の吉里吉里から移行してうごかせるようになった動作を、
動画にしてまとめてみたのがこちらになります。

↑動画の音量でかすぎたっぽくて申し訳ないです……

動作はティラノスタジオ(ティラノスクリプトを起動確認できるツール)での動作になっています。
動画でも言っていたんですが、もともとランダムマップを生成する際、
吉里吉里版のプログラムをそのままもってきたらめちゃくちゃ重くて、
最初20秒くらいかかったりすることもあったり……
けど、色々と調べて、軽くする方法とかを実践して、
動画のように1秒前後、遅くても3、4秒くらいと、ぎりぎり許されるのではないかというレベルになりました。
あとは、画像が何枚か表示されないのは、多分どっかで微妙なミスをしていると思うのでなおすとして。
これからの目標として、マップの移動による画像の読み込みが重いので、
どうにかそれを改善していけば、ほとんど問題ないといっていいかと思います。

今後の目標

ということで、繰り返しになりますが、マップ移動の画像読み込みを速くするようにしていければと思います。
あとは、こういった作品をノベルゲームのツールで作れるってことは、
マップ中に立ち絵を表示したりできるのも強みだったりするんじゃないかと思います。
独自の強みを作れるように色々な案を出して搭載していきたいです。

あと動画や画像の報告は、もともとフリーゲームのミニゲームとして作っているものですが、
これをもう少し改良して、ダンジョンをクリアしてボスを倒して、
ボスとエッチなこと！　をするみたいなゲームなんかも販売できればと思っています。

今後もうちのサークル気狂いなすびの独自の強みをどんどん自分で作っていき、
面白い作品をいっぱい出していく予定なので、どうぞこれからもよろしくお願いします！！

前に吉里吉里ZでちょっとしたRPG要素を作ろうと思った時のまとめ①(健全記事)

ランダムマップとかマップ移動編！！

ランダムマップを作りたい

ランダムマップを作りたい！！　と思ったのも、自分は別にそんなに別にプログラミングとかできる人間じゃなくて、
ぶっちゃけunityどころかRPGツクールとかも触ったことのない人間でして、
ゲームを作るサークルと言っても自分は吉里吉里とティラノスクリプトしか触ったことがありませんでした。
ですが、ノベルゲーム以外にもちょっとしたRPG要素を作れたりしないかなーと思った時に、
ずぼらな自分なので、新しい何かじゃなくて、今まで使ってた吉里吉里で簡単にできれば、
あまり他にはない自分らしい作品ができたりしないかなーと思ったのが最初です。
でも吉里吉里とかノベルゲームツールでRPG要素ってなんだよって思った時に、
実は前に実験的な試みとして、
ほとんどじゃんけん要素みたいな戦闘のみのゲームを吉里吉里で作ったことがありました。

マップ移動の考え方

っていっても吉里吉里でマップってどうすれば？？　と思ったんですけど、
原理的には昔大学生のときに軽くやってたプログラミングの授業を思い出しまして、
ほらよくプログラミングの初歩の配列の出力とか表示するとかのあれ。

例えば配列という変数の格納できる列をどこで改行するかって話で、

０，０，０，０，０，０，０，０，０，０，

という１０っこの文字列があったとして、
これを五文字ごと改行が入る様にすれば、

０，０，０，０，０，
０，０，０，０，０，

という表示したとして、これを繰り返して行けば、５×ｎのマップが完成するのかなと。

しかもそうなったとき、改行の数と何番目の数字かということがわかれば、
こんどは座標を設定できるはず！

例えばさっきの

０，０，０，０，０，
０，０，０，０，０，

だったとして７文字目の座標を、知りたいときは、

７(指定したい文字数目)　/　５(改行するときの数)　＝１(ｘ軸)　と余り　２(ｙ軸)

なので答えの１は改行の数で、つまりｚ座標が2行目なので、

０，０，０，０，０，
⓪，⓪，⓪，⓪，⓪，

と下の段が指定されて(ちなみに1行目は答えが０になる)、

余りの２が座標になって、
つまりｙ座標の2列目が指定されて、

０，０，０，０，０，
０，⓪，０，０，０，
　　↑
これが指定されるということになります。

これで指定したい座標を考えていこうと思いました。
なんかちょっと複雑じゃない？？　って思うかもしれないけど、
自分としてはこういう考え方が楽なのかなと、
例えば、今の指定された座標からマップ的に上に行きたいときは、座標を-５(改行をするときの数)をする。
すると、

　　↓ここに移動
０，⓪，０，０，０，
０，０，０，０，０，

逆もしかりで、下に移動するときは+５をする。

そしてこれを吉里吉里でいうことろの選択肢に置き換えて、
上に移動したいときは+５、-５して、横に移動したいときは-１、+１をして、
もしも移動先が壁なら計算をしないようにすれば、
とりあえずこれで、移動と自分の場所を表示できるようになる感じです。

さらにそこから
０を壁、１をスタート、２を道、３をゴールと設定します。
すると、
０，０，０，０，０，
０，１，２，２，０，
０，０，０，３，０，
０，０，０，０，０，

みたいなマップで移動の遊びが吉里吉里でもできたりすると思います。

ランダムマップの考え方

でそこからランダムにマップを生成するとなるとどうすればいいのかというと、
スタート位置とゴール位置を乱数でまず決めて、
(もちろん被らないようにif条件とかでスタート位置とゴール位置が一緒だったら戻るみたいな設定する)
始まりと終わりが決まったら、

そこまでの道を作る、

これがなんだかんだ一番面倒な作業だと思います。

自分がとった考え方は、スタート位置とゴール位置を比べさせて、
ｘ軸とｙ軸の比較をして、その両方が同じ数になるようにループをさせて、
その通り道を道にするようにしたりしました。

例えば、またさっきのマップで言うなら、

０，０，０，０，０，
０，１，０，０，０，
０，０，０，３，０，
０，０，０，０，０，

スタートの位置はｘ軸１、ｙ軸２なのに対して、
ゴール位置はｘ軸２、ｙ軸４になります。

まず配列の順番を比べて、スタートは7番目の配列、ゴールは14番目の配列。
自分の場合は、配列のｎ番目が大きい方から始点にするようにしましたので、
ｘ軸を比較しスタートはｘ１でゴールがｘ２なので、ゴールを始点に
道を作る削岩的な動く位置を作らせておき、
ゴールの配列から始まる削岩機の配列の番目に-５をする。
そしてその場所を道として設定させる。

０，０，０，０，０，
０，１，０，２，０，
０，０，０，３，０，
０，０，０，０，０，

すると道ができます。
そしてもう一度ｘ軸を比較させて、
ｘ軸はどちらも１なので、これでｘ軸比較は終了。
今の道を作る削岩機の配列は9番目にいます。

次はy軸を比較させて、
スタートのｙ２、ゴールｙ４なので、
削岩機の位置を-１させて、

０，０，０，０，０，
０，１，２，２，０，
０，０，０，３，０，
０，０，０，０，０，

となります。
そしてもう一度ｙ軸を比較させると誤差1だけ。
つまり、次いどうしたらスタートにたどり着くので、これで道は完成ということになります。

これでとにもかくにもスタートとゴールへの道が完成して、
さらに移動のマップが完成します。

ちなみにそのときに配列を表示させて、ツイッターに載せた時の画像がこんな感じです。
あと今回は説明でわかりやすく、配列の始まりを左上をｘ０ｙ１にしてますが、
この画像でもわかる通り、自分はその逆で、右下をｘ０ｙ１にしてたりします。

ならわかりやすいように統一しろよって思うかもしれませんが、
あくまでここのでの説明は概論的なものとしてるので、
とりあえず原理を理解してもらえればと思って、わかりやすそうな方を採用しています。

まぁこんな感じで第一段階はＯＫって感じで、次はこのスタート位置やゴール位置を複数作り、それを部屋としたりしたことや、
画面の表示なんかを説明していきたいと思います。