検索対象:検索ほろほろりなゲーム置き場ジャンル雑多なゲーム・ゲーム制作関連のブログ記事置き場。最近はBlender中心に学習中。使った探索パートのソースコードを一部晒しつつ、phina.jsを使った探索・脱出ゲームの作り方について書いていこうと思います。※ただし、トリックなどのアイディアはこちらではご用意できませんので、ご自分でご用意ください。【ノベルゲーム】ガラス細工のクリスマス後日追記:ノベルゲームの作り方編の記事も書きましたので良よしければ合わせてご覧ください。今回の記事では、ローカルサーバー上で動作させる事を前提に進めさせていただきます。いくつか背景用の画像をご用意いただき、assetsに読み込ませてください。Materialで公開しているイラストをご利用ください。Materialソースコードの雛型として置いておきます。部屋移動時の背景画像・クリックポイントの切り替えテキスト表示ということで、まずはLabelAreaオブジェクトを用意しますが、その前に、そのLabelAreaオブジェクトの枠(背景?)として、一つ、RectangleShapeオブジェクトをご用意下さい。そのRectangleShapeオブジェクトの子オブジェクトとして、LabelAreaオブジェクトをセット。これでひとまず、テキスト表示の方は準備完了です。0);クリックポイントまずクリックポイントを格納するクリックポイントグループを作成し、クリックポイントとなるオブジェクト(RectangleShapeやCircleShape)を設置します。イベント(例えばonpointstart)に先ほど作ったテキスト表示用のLabelAreaのtextプロパティを呼び出し、何かしらの文章をセットします。位置確認した設置後はそのオブジェクトをhide()するか、alphaの値を0にするなどで隠してください。すれば、クリックポイントがクリックされた時に、テキストの文章が変わります。"クリスマスツリーだ。this.labelRect.show();};上でやったような仕組みを、「どうせ隠しちゃうんだし...」と、個々で位置や大きさの指定だけしてクリックポイントを生成するメソッドと、クリックされた時のテキスト表示についての設定をするメソッドを、独自に作っちゃいました。this.labelRect.show();}これを使って、先ほどのクリックポイントの記述を直したのが下のものになります。this.setLabelRectText("クリスマスツリーだ。");};また、何かの特殊イベントやエンディングなどは、私の場合ほとんど、何かのオブジェクトのonpointstart内に条件分岐を記述し、管理が楽(面倒)だったので条件が合致した場合にpopScene()かreplaceScene()で、そのままシーン遷移するようにしてしまいました。this.setLabelRectText("クリスマスツリーだ。シーン生成・消去、dat.GUIについて因みにですが、私の場合、まず全体絵を描いて、こういう方法を取ったのですが、それぞれのクリックポイントとなるアイテムの写真やら画像をそのままクリックポイントにする方法もあるかと思います。アイテム回収するような脱出ゲームを作ろうとしている場合は、そちらの方が効率的だと思います。フラグゲームを進めるために必須となるであろう、フラグです。私の場合は、あらかじめグローバル変数として真偽値を格納しておき、クリックポイントのonpointstart内で条件が合致した場合に呼び出してtrue/falseを反転させ、ゲームを進行させる仕様にしました。"クリスマスツリーだ。ついては、まず、グローバル変数としてBASYOを用意して、一番最初に”ribingu”を格納しておきます。探索シーンで、this.basyoというプロパティを用意します。こちらも初期値は”ribingu”を格納しておきます。探索シーンの隅っこに移動ボタンを設置し、移動ボタンが押された時にpopScene()して背景が半透明な一時的シーンを作るように設定しておきます。その一時的なシーンで、間取りを表示し、そのそれぞれの部屋をこれまたクリック有効化して、どれかがクリックされたら、その一時的シーンを消すと同時に、そのクリックされた部屋に対応した場所の名前をグローバル変数BASYOに格納し、通常の探索シーンに戻ります。});その上で、もし、通常探索シーンのthis.basyoと、BASYOに格納されている値が違った場合、部屋移動の独自メソッドを呼び出し、画面に表示されている画像や、クリックポイントを切り替え、といった具合に仕上げました。背景画像用グループを作っているのは、phina.jsではオブジェクトの表示順を途中で変更できないのでその対策です。Qiitaという記事がとても分かりやすいかと思いますので、詳しく知りたい方はご覧ください。あと、もしも、ルートやフラグによって背景画像を変えたい場合は、heyaIdou()メソッド内でbackImageNameに入れる名前を条件によって変更するか、シーンごと変更するという方法があるかと思います。*/});この方法以外にも、左右や上下に矢印ボタンを設置して、それが押されたらそれぞれに対応した場所へ移動する、ってやり方でもいいと思います。this.setLabelRectText("窓だ。this.setLabelRectText("本棚だ。this.setLabelRectText("椅子だ。this.setLabelRectText("テーブルだ。this.setLabelRectText("時計だ。this.setLabelRectText("クリスマスツリーだ。this.setLabelRectText("照明だ。this.setLabelRectText("靴箱だ。this.setLabelRectText("覗き穴だ。this.setLabelRectText("襖だ。this.setLabelRectText("畳だ。ここから外へ出られる。\nクリックで戻ります。"ノーマルエンドです。\nクリックで戻ります。Over\nクリックで戻ります。});}あとがき(唐突な自分語り)今回解説した方法は作り方の一例です。』は、「なんか、探索+ノベルゲーム作りたい!」という私の唐突な思いつきから誕生しました。日頃phina.jsでゲーム制作をしていたため、phina.jsで制作してみようと思い、どなたかそういった制作方法の記事を書いていないかな?と思って探して見たのですが、なかなか見つからず、「じゃあ、やってみるか!」と試験的に作ってみたところもあります。「ゲームとして、一応形にはなったかな?」と思いましたので、他にもphina.jsでこういった方向の事を試そうとされている方、偶然にもこの記事を目にして頂けた方に、「こんな方法もあるんだ」という参考として示せればと思い、この記事を書いてみました。これよりももっと良い方法があるかと思いますので、この方法に固執せず、読んでくださった方の今後のゲーム制作(ゲーム以外の制作も含め)の、一助となれば幸いです。ここまで読んでいただきありがとうございました!宣伝になってしまいますが、ノベルゲームの場面転換などの仕方なども、後日別の記事として上げる予定です。_)m後日追記:ノベルゲームの作り方編の記事も書きましたので良よしければ合わせてご覧ください。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。twitterfeed当ブログと管理人についてはをご覧ください。twitterfeed。