Learn programming.

何とか走りきることが出来ましたー。 やりたいことが全くできず、プログラミングが嫌いになりそうになる瞬間もありました。それでも、後半に近づくにつれミスも減り、分からないことがあったとしてもそこまで焦らないようになったりと、立ち止まる時間が長かった分、ある程度歩けるようになった時の楽しさは感慨深いものでした。 知識不足や計画性の無さといった、反省点ばかりを見つめる今回のプログラム作成でしたが、全体としてやってよかったなと思えるものが出来ました。 今回は研究ノートの課題ということで、次回は卒業研究と題したアクション要素を取り入れたプログラムの作成です。 どの道終盤になって焦る未来は変わらないと思いますが、できるだけ今回得た学びと反省を生かして 取り組みたいですね。 ということで、これにて本ブログの投稿を終わろうと思います。 プログラミング初心者の拙いコードではあったと思いますが、ここまでありがとうございました。 それでは、また。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

物語に含みを持たせたかったので、タイトル画面から進むと名前の分からない人物からの意味深な言葉を足しておきました。 最後のマップで光の方に進むと、Map0の初期位置にワープし、主人公であるトーマが「え？？？」と発言し、一歩も動けなくなります。 設定するの忘れてその仕様になったのですが、不気味でそれらしい終わり方だなと感じてしまったのでこれを正規のエンディングとしました。 プログラム自体は今までに使っていたものの応用なので特に紹介はしません。 ということでストーリーについては以上です。 次回はやっとこさの最終回です。 それでは。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

ストーリーの掴みに必要な主人公たちの会話を追加し、そのために会話のプログラムに改良を加えました。 こんな感じです。イベントが起こるタイルに進んだ状態でスペースを押すことで会話が始まり、同じくスペースで会話を進めることができます。会話の途中でプレイヤーが動いて会話が途絶えてしまう可能性があったので、それも予防しています。 以下は該当プログラムです。 今回のコードもchatgptを利用しましたが、望む形にするのに大変苦労しました...。さらに今回扱う会話イベントの数も中々あるので、これを他にも適用させるために理解する必要もあり、Aiに助けられ、Aiに苦しめられる体験を味わいました。今回のコードは私も理解しきれてない部分があるので、解説はできません。ご了承ください。m(_ _)m というわけで、今回はこんな感じで終わります。お疲れ様です。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

二つ目のメインイベントである謎の部屋への入り口を開けるプログラムを作成しました。 タンスの方に進むと「奥の壁なんか違和感あるな、このタンス動かしてみるか。」というテキストが表示され、タンスを動かすことができます。 その状態で壁の方に進むと新たなテキストが表示されます。 この処理は前回の斧と同様に、持っていない場合のセリフです。 ここにあるツルハシを拾い、先程の岩壁に進むと宝石の間に続く穴を空けることが できます。 プログラムに関しては前回の柵を斧で壊すイベントと大きな違いは無いです。 ただ、壁を壊すためにタンスを動かした後の地面に進む必要があったので、歩行可能タイルにフラグを入れてタンスを動かした後、壁が開いた後にその地面を歩けるようにしています。 今回はこんな感じで終わります。 おそらくこのブログの投稿は次回かその次で終わるかと思います。ですが、未だにこのゲームの帰着をどうしようか迷っています。やりたい演出などはあるのですが、やりたいことができるとは限らないのでどこで割り切るかを模索中です。とはいえ、本ゲーム内でやってみたかったメインイベントの動作は今回で終わったので、あとは自分の納得のできる形で終われればといった感じです。 少々長くなりましたが、お疲れさまでした。次回もよろしくお願いします。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

1つ目のイベントを作成しました。 斧を持っていない状態でこのフェンスに進むとこのイベントが発生するようになっています。 その斧は家の近くの切り株に立てかけられており、斧の方に進むと「この斧を持っていこう。」と表示され、取ることができます。 拾うとマップ上から消え、その状態でもう一度拾おうとすると「斧はもう持っている。」と表示されるようになっています。 斧を拾った後先程のフェンスに進むと「斧が壊れないでくれよ。」というセリフに変わり、フェンスを壊して廃坑の中に入れるようになります。 以下は該当プログラムです。 ここには載せてないですが、プログラムの上の方に"fgHaveAxe"などのフラグを列挙してまとめてあります。初期状態で"false"として、その状態では斧が置いてあるマップが描画され、これが"true"になると斧を手に入れたマップが描画されるようになっています。フェンスの方もマップの描画に関しては同じ感じです。 下のプログラムはeventpaint関数の中身で、斧を持っているかフェンスが壊れているかなどを判定し、表示させるセリフを変えています。例えば、"fgHaveAxe == true && fgBreakFence == false"は、斧は持っていてフェンスは壊れていない状態でフェンスの方に進んだ場合に表示されるテキストです。その後"fgBreakFence"を"true"にして終了です。他も矛盾が生まれないように条件分岐がされているはずです。 余談ですが、元々のイベント処理だとマップを更新した後にセリフの無いテキストボックスが表示されるという問題が発生していたので、別に"setContext"関数を用意してセリフの前に毎回呼び出しています。 今回は以上です。次回は2つ目のメインイベントについてです。 お疲れさまでしたー。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

相当今更ですが、やはり正面向いたままマップを移動する様子はあまりに変なので、歩く方向で主人公の見た目が変わるようにしました。 プログラムの説明をしていきます。 方法はとてもシンプルで変数"boyImage"を用意し、fieldkeydownの上下左右それぞれに別々の歩行グラフィック画像を対応させているだけです。初期状態では"boy_down"にしています。今の所問題は出てないのでこのまま行こうと思ってます。 短いですが、今回は細かい改良なのでこんなところで。 お疲れさまでしたー。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

やはりゲーム画面から急に始まるゲームは変だということで、タイトル画面を作りました。 本ゲームを作り始める前から、タイトルは長い言葉の方がそれっぽくなって何となくカッコいいのでは？？！ という極めて浅ましい考えが浮かんでしまい、その欲求に抗えませんでした。 以下は該当するコードです。 まず、100行目で変数"titlescreen"を呼び出し、ゲーム開始時に表示するために初期状態でtrueとしています。そして新たに"TitleKeydown"関数を用意し、いずれかのキー入力で"TitleScreen"を無効にし、通常のゲーム画面、キー入力処理を有効にしています。 118行目から"showtitlescreen"関数の中身を作っています。 ざっくりとした説明にはなりますが、119, 120行目でタイトル画面、背景を用意し、121行目から125行目で文字の設定を行っています。このようにして用意したものを106行目で動かしています。 分かる人は分かると思いますが、今回chatgptを利用してプログラムを組みました。しかし、タイトル画面から動かなくなったり、ゲームが始まったとしてもプレイヤーが動けなくなってしまったりと、色々な不都合が起きました。結果として、ほぼ丸々コードの中身を修正する羽目になるという、便利ではあるものの上手く扱うには、その能力を予め持ち合わせていることが必要なんだと感じる一日でした。 タイトル名に関しては、今のところ特に深い意味が無く、デザインとしても素朴な感じになってしまっているのですが、この雰囲気も気に入っているので、ある程度の改変を加えつつ、これからの展開で意味を持たせて、 何らかの形でタイトル回収ができたらなと考えています。 とりあえず今回はここまでとします。お疲れさまでした。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 　

７つ目のマップとなる「宝石の間」を作成しました。 このマップはmap5にある壊せそうな壁の先にあり、現状最後のマップとなります。 ここに初めて来たプレイヤーは、岩を破壊してここに辿り着くので、 同様にここにある宝石を壊そうとするはずです。 しかし、これは壊せないようにしようと考えています。ストーリーの演出的には「硬すぎて壊せない」とか、「なんとなく壊しちゃいけない気がする」というようなセリフを出したいなと考えています。 そして、奥の光が漏れ出ている道の先に進むとプレイヤーは光に包まれ、少しだけ次のストーリーをセリフなどで匂わせて本編は終了となります。 といっても、現状マップの画像を作っただけなので、このままではこのマップに辿り着くことさえできません。こっからは急ピッチの作業となるので、死ぬ気で頑張ります。 今回はここまでとします。 次回はマップ制作の合間に作ったタイトル画面についての話をしようと思います。 参考文献 素材： ドット絵世界  https://yms.main.jp/

  6つ目のマップとなる「職員たちの寝床」を作成しました。 このマップの左上にあるタンスを動かすことができ、 動かすと、壊すことが出来そうな壁が出てきます。 ここで、洞窟の外の石に立て掛けられているツルハシを使うことで、 ここに穴を空けることができます。 わざわざ取りに行くとなると面倒ですが、 洞窟に入る段階で家のそばに置いてある斧が必要なので、 気付いていたプレイヤーは、止まることなく進めるようになっています。 肝心のプログラムはまだなので、早く完成させなければ...。 フラグの管理などが大変になりそうではありますが、 もう作ってしまったので、頑張っていきたいと思います。 今回はここまでとします。お疲れさまでした。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

 5つ目のマップとなる「洞窟 作業場」を作成しました。 右下が洞窟の入り口です。 奥には採掘場に続きそうな穴がありますが、 洞窟が崩れ、閉ざされてしまったようなデザインになっています。 ここでも特にイベントは起こりませんが、 その代わりに装飾品や構造に特徴を持たせて、 プレイヤーを飽きさせないようにしています。 崖の近くに行ったときには、 「落ちたら危ないな...」というような台詞を表示できたら良いなと考えています。 ストーリー的には、散策しつつ真ん中の橋を渡り、 左上の道に進むというのが正規ルートです。 個人的に全てのマップの中で最も気に入ってるマップで、 細か過ぎるこだわりもありますが、ゲーム性に 全く関係が無いのでここでは割愛します。 ここにも何かイベントを起こせたらいいですねー。 今回はここまでとします。お疲れさまでした。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

 4つ目のマップとなる「廃坑への入り口...？」を作成しました。 初めは入り口にバリケードが張られており、 Map1の切り株に立て掛けられている斧を使うことで、 2枚目の画像のようにバリケードを壊せるようになります。 今のところマップを作っただけなので、 早いとこプログラムを完成させないとですねー...。 マップのこだわりとしては、なんとなく元々使われていた感が出るように、 所々に人為的なものを置いています。 入り口の近くに貼られている紙には、 「立ち...り...止」という文字が読めるギミックを仕込みたいと考えています。 若干マップが大きく、雰囲気が上手く伝わってるか不安なので 変更は加えたいなと考えています。 今回はここまでとします。お疲れ様でした。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

あけましておめでとうございます。 また投稿が少し空いてしまいました。正月の魔力に敗北していました。 とはいえ、その間に全てのマップの制作が完了しました。(一応) 素人ながらですが、自分なりのこだわりを持って制作したので、 個別に紹介をしたいと思います。 ということで、今回は３つ目のマップとなる「岩山へ続く道」についてです。 （名前は適当に付けたので、気付いたら変わってるかもしれません） 今のところ、このマップではイベントは起こさない予定なので、 あまり特徴的なものは置かず、プレイヤーが素通りすることを想定しています。 若干ですが、マップのサイズ自体も小さくしています。 とはいえ、マップとしては余りにも淡泊なので、余裕があれば主人公のセリフで誘導するなどして、プレイヤーを退屈させない工夫をしようと考えています。 余談ですが、Map0に細かい変更を加えたのでここで紹介しちゃいます。 ゲーム開始時に主人公たちの会話をイベントとして起こすので、もう 片方をマップに配置する必要がありました。しかし、私がマップ制作に使っている「Tiled Map Editor」ではこのような配置は難しかったので、自分で加工しました。 マップを一枚の画像で管理していて良かったなと思える瞬間でした。 少し長くなってしまいましたが、今回はここまでとします。 次回はMap4についてです。お疲れさまでした。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/