検索対象:検索ほろほろりなゲーム置き場ジャンル雑多なゲーム・ゲーム制作関連のブログ記事置き場。最近はBlender中心に学習中。メインシーンのソースコードを晒しつつ、phina.jsを使ったノベルゲームの作り方について書いていこうと思います。【ノベルゲーム】櫻の樹の下にはまた、探索・脱出ゲームの作り方の方が知りたい方はこちらの記事がオススメです。今回の記事では、ローカルサーバー上で動作させる事を前提に進めさせていただきます。いくつか背景用の画像をご用意いただき、assetsに読み込ませてください。Materialで公開しているイラストをご利用ください。Materialソースコードの雛型として置いておきます。管理するメソッドテキスト表示&文字送りのシステムについては、本当にほとんど変えずに、simiraaaa氏のLabelAreaサンプルを使わせて(パクらせて)いただいたので、ここで深く感謝(と謝罪)を述べさせていただきます。配列として最初にまとめて作っておく方式をとりました。最後、””を作っているのは、次のシーンへ遷移させる為に余分に一つに作っておいているのです。※ノベルゲーム『櫻の樹の下には』、及び、ここで使っているテキストのデータは、青空文庫様からお借りしました。"これは信じていいことなんだよ。"何故《なぜ》って、\n桜の花があんなにも見事に咲くなんて\n信じられないことじゃないか。"俺はあの美しさが信じられないので、\nこの二三日不安だった。"しかしいま、やっとわかるときが来た。"桜の樹の下には屍体が埋まっている。"これは信じていいことだ。"――おまえはそれがわからないと言ったが\n――そして俺にもやはりそれがわからないのだが\n――それもこれもやっぱり同じようなことに\nちがいない。"いったいどんな樹の花でも、\nいわゆる真っ盛りという状態に達すると、\nあたりの空気のなかへ\n一種神秘な雰囲気を撒き散らすものだ。"灼熱《しゃくねつ》した生殖の幻覚させる\n後光のようなものだ。"それは人の心を撲《う》たずにはおかない、\n不思議な、生き生きとした、美しさだ。"しかし、\n昨日、一昨日、\n俺の心をひどく陰気にしたものもそれなのだ。"俺にはその美しさがなにか\n信じられないもののような気がした。"俺は反対に\n不安になり、\n憂鬱《ゆううつ》になり、\n空虚な気持になった。"しかし、俺はいまやっとわかった。"おまえ、\nこの爛漫《らんまん》と咲き乱れている\n桜の樹の下へ、一つ一つ屍体が埋まっていると\n想像してみるがいい。\n何が俺をそんなに不安にしていたかが\nおまえには納得がいくだろう。"馬のような屍体、犬猫のような屍体、\nそして人間のような屍体、屍体はみな\n腐爛《ふらん》して蛆《うじ》が湧き、\n堪《たま》らなく臭い。"それでいて水晶のような液を\nたらたらとたらしている。"桜の根は貪婪《どんらん》な蛸《たこ》の\nように、それを抱きかかえ、\nいそぎんちゃくの食糸のような\n毛根を聚《あつ》めて、その液体を\n吸っている。"俺は毛根の吸いあげる水晶のような液が、\n静かな行列を作って、維管束のなかを\n夢のようにあがってゆくのが見えるようだ。"――おまえは何をそう苦しそうな顔を\nしているのだ。美しい透視術じゃないか。"俺はいまようやく瞳《ひとみ》を据えて\n桜の花が見られるようになったのだ。\n昨日、一昨日、\n俺を不安がらせた神秘から自由になったのだ。"二三日前、\n俺は、ここの溪《たに》へ下りて、\n石の上を伝い歩きしていた。"水のしぶきのなかからは、\nあちらからもこちらからも、\n薄羽かげろうがアフロディットのように\n生まれて来て、溪の空をめがけて\n舞い上がってゆくのが見えた。"おまえも知っているとおり、\n彼らはそこで美しい結婚をするのだ。"しばらく歩いていると、\n俺は変なものに出喰《でく》わした。"それは溪の水が乾いた磧《かわら》へ、\n小さい水溜を残している、\nその水のなかだった。"思いがけない石油を流したような光彩が、\n一面に浮いているのだ。"おまえはそれを何だったと思う。"それは何万匹とも数の知れない、\n薄羽かげろうの屍体だったのだ。"隙間なく水の面を被っている、\n彼らのかさなりあった翅《はね》が、\n光にちぢれて\n油のような光彩を流しているのだ。"そこが、\n産卵を終わった彼らの墓場だったのだ。"俺はそれを見たとき、\n胸が衝《つ》かれるような気がした。\n墓場を発《あば》いて\n屍体を嗜《この》む変質者のような\n残忍なよろこびを俺は味わった。"この溪間では\nなにも俺をよろこばすものはない。"鶯《うぐいす》や四十雀《しじゅうから》も、\n白い日光をさ青に煙らせている木の若芽も、\nただそれだけでは、\nもうろうとした心象に過ぎない。"俺には惨劇が必要なんだ。\nその平衡があって、\nはじめて俺の心象は明確になって来る。"俺の心は悪鬼のように憂鬱に渇いている。\n俺の心に憂鬱が完成するときにばかり、\n俺の心は和《なご》んでくる。"――おまえは腋《わき》の下を\n拭《ふ》いているね。\nそれは俺も同じことだ。"何もそれを不愉快がることはない。\nべたべたとまるで精液のようだと\n思ってごらん。"それで俺達の憂鬱は完成するのだ。"いったいどこから浮かんで来た空想か\nさっぱり見当のつかない屍体が、\nいまはまるで桜の樹と一つになって、\nどんなに頭を振っても離れてゆこうとは\nしない。"今こそ俺は、\nあの桜の樹の下で\n酒宴をひらいている村人たちと同じ権利で、\n花見の酒が呑《の》めそうな気がする。""];テキスト表示&文字送りまずは先述の通り、主軸となる文字送りシステムを、simiraaaa氏作成のサンプルから、ほとんど変えずに持ってきます。私の場合は、テキストの背景となるRectangleShapeにまとめて、一つのオブジェクトとしてしまいました。このRabelRectクラスのthis.textsプロパティに、前項のMAINNTEXTSを格納して使うわけです。*/そして、メインシーンのupdateのところで、テキストの文字送り、全部のテキストを表示、次のテキストへの切り替えを管理します。RabelRectオブジェクトのtextIndexプロパティ(何番目の文章かのカウント)の数値で、背景や音の処理を進行させていく方式をとりました。因みに、この時、背景画像をほとんど640×960の大きさに統一して、引数にアセット名を入れたら、それだけで画面中央に表示されるようにするメソッド、setBackImg()を作って管理しました。前項のupdateの中で、このsetPhase()メソッドを呼び出すようにしています。具体的に説明すると、その時の分の全部の文章が読み込まれた後に、クリックかEnterキーが押された場合、文章が進みます。その毎に、一緒に画像・音楽の切り替えを行っています。画像の操作についてや、tweenerクラスによるアニメーション設定は、alkn203氏の記事に解説を丸投げさせていただきます。Spriteを表示するTips集ちなみに、サウンドの操作については、過去に書いた記事がありますので、わからなければご参考にどうぞ。画像以外で使ったオブジェクト実際に”【ノベルゲーム】櫻の樹の下には”で使用した、画像以外のオブジェクトのご紹介。ゲーム制作12件のコメントはじめまして、コメント失礼いたします。学校の課題で、大変参考になりました。ありがとうごうざいます。条件分岐を行いたいのですが今のコードだと、画面全体にタッチまたはクリックが認識されてしまいます。なにか助言いただけると幸いです。駆け出しプログラマさん初めまして、コメントありがとうございます。お役に立てたのでしたら大変嬉しく思います。学校の課題では、そういったものが出されるんですね。こちらも勉強になります。課題とのことで、どこまで具体的に申し上げてよいのかわからないのですが、とりあえず、コードは書かずに、私が考え付いた方法だけお伝えします。思い切ってシーンを移して選択肢シーンのようなものを作ってしまう方法です。シーン遷移に関しましては、こちらの記事で書いていますのでご参考までに。this.labelRect)に対してのクリックイベントにテキストを進ませる処理を記述してしまえば、そういったことが可能かと思います。一時的に画面(この場合、this)のinteractiveプロパティの値をfalseにして、クリックイベントを受け付けなくすることで可能かと思います。再度クリックイベントを受け付けるようになります。文字を一文字ずつ表示させる処理は、シーンとは別にオブジェクト自体にupdateを設定することができるので、this.labelRectのupdateに設定してしまう方法が良いかと思います。オブジェクト単体へのクリックイベントの設定は、下の記事で書いているので、よろしければ参考にどうぞ。https://horohorori.com/memo_phina_js/about_input_opetate/#click_touch1もっと詳しい説明のご要望や疑問点などございましたら、またお手数ですが再度ご質問ください。返信ご返信ありがとうございます。様の一つ目の提案、画面に対してのクリックイベントで進行させる手法を実装しようとしました。setPhase関数のcase文の中で、あるインデックス番号にきたらthis.setInteractive(false)の処理を追加しました。タッチ、クリックを受け付けてしまいます。追加したら、問題なく動作しました。メインシーンの様々な場所(init関数、update関数)でthis.setInteractive(false)を追加しても、クリックを受け付けてしまいます。助言をいただけると幸いです。返信あ、setPhase関数内でinteractiveプロパティの挙動の話ですが、setPhaseではくLabelRect()関数です。コメントいただき、ありがとうございます!最初は誰だって無知ですので、大丈夫ですよ。ソースコードを拝見していないので推測ですが、シーンのupdate内で、タッチ・クリックの判定をして、テキストを進行させていませんか?言葉が足りなかったかもしれませんので、わかりずらかったかもしれませんが、メインシーンのupdate内は空にします。書き直すところが出てくるかと思います。常にマウス(あるいはタッチ)の状態を取得している感じで、クリックの判定をしているのです。記事内でやっているapp.pointer.getPointingStart()をthis.setInteractive(false);では制御できません。いったところでいかがでしょうか?LabelRect()関数でinteractiveプロパティの挙動が~というのは、どうやろうとしているのか、もうちょっと詳しくお聞かせ願えませんでしょうか。返信こんな初心者に付き合ってくれて本当に感謝です。実装してみたら、やはりエラーが・・・(泣)LabelRect内ではthis.setPhaseを呼び出すことは不可能なのかな・・・?LabelRect内でsetPhaseのようなものを組む必要が?でも、分別してしまうと背景などの扱いが複雑化してしまいますよね。この辺、クラスの概念とかがまだあやふやだ・・・Phinaは若干、癖がある気がします。すいません、LabelRect()関数でinteractiveプロパティの挙動が~というのは私のただの勘違いでした。PM10か月前https://github.com/So-shi/kadaiこのjs内にある、game.jsというものなのですが・・・こんなにサポートしてもらっていて、ソースを見ろだの厚かましいですね。返信いえいえ、大丈夫ですよ!なるほど、締め切りは確かに焦らなきゃですね...私に出来る範囲ではお手をお貸ししますので、がんばってください!ああ!なるほど!!ソースコード拝見したんですが、えーとですね、まず、LabelRect()のupdate()の設定なのですが、それを、MainScene()内で設定する感じで考えてたんですよ。同じシーン内なので、this.setPhase()も参照できます。基本的にthis.onpointstartでの画面全体に対してのクリックイベントに設定、という方法でいかがでしょうか?それから、これがたぶん一番重要なとこなのですが、this.onpointstartの使い方が違います。onpointstartには、クリックの有無が真偽値で入るのではなく、クリック時に発火させるイベントの関数を直接セットする感じなんですよ。ここが確かにちょっとややこしいところですね。具体的には、app.pointer.getPointingStart()・・・クリックされているかどうかの真偽値が入っているthis.onpointstart・・・画面がクリックされたときに起こしたいイベントを関数で入れるといった感じ。クリック時にここに記述しておいた処理が呼び出される};といった使い方の違いがあります。毎度、ご返信ありがとうございます!!!いやいや!何をおっしゃるんですか・・・こんな初学者に対して、ものすごく親切にして、本当に感謝ですよ・・・!なるほど!this.labelRect.textIndexの分岐は良い方法ですね!再び質問よろしいでしょうか?泣app.pointer.getPointingStart()のような感じで、真偽値を返してくれるものが、this.labelRectやspriteにも適用できる関数はあるのですか?「クリックされた時の処理」を行おうとして記事のcase文内で、textIndexがある程度進んだら、画面にタッチ有効な画像(Sprite)を複数設置しました。function(){self.labelRect.○○};といったやり方で出来るかと思われます。夜にご返信いただいていたのですね。ありがとうございます!!!なるほどー。「こんなのいつ使うんや!!!」と思って、忘れてましたwほろほろりさんのコメントを読んで、試行錯誤した結果、なんとか形にでき、期限内に提出することができました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。twitterfeed当ブログと管理人についてはをご覧ください。twitterfeed。