マッププレビュー用プログラムを作ってみた。

-

 新年あけましておめでとうございます。今年もゲーム制作やっていきます。

今回は、マップの作成とマップ試作用のプログラムを作ってみました。

マップ試作用のプログラムは、ゲームが開始されるinit()の前に、マップIDを指定しキャラクター移動やイベント発動用の関数が実行されないようにし、マップのみが描画されるようになっています。

画面左上のテキストボックスに、マップの内部IDを入力して表示ボタンを押すと、指定した

マップが表示されます。

表示ボタンを押すとpreviewb()が実行されます↓


↓これはマップ試作用プログラムの画面です。


これはmap0の画面です。


これはmap1の画面です。

map1は作りかけですが、民家を二軒作ろうと考えています。

map0には「中田電気」と書かれた建物があります。電気屋には見えませんが、電気屋という設定です。（笑）

思ったより1つのマップを作るのに時間がかかりました。こんなにマップ作成が大変だったとは...

今後は建物の中に入れるようなプログラムを作り、内装も作っていこうと思います。


マップタイルはこちらのサイトのものを使用しています。

参考文献
ドット絵世界https://yms.main.jp/



このブログの人気の投稿

ブログを開設しました。

-
 皆さんはじめまして。東京経済大学のTOSHIと申します。 このブログでは、卒業研究で取り組んでいるプログラム開発の記録を日誌形式で公開していきます。 まずはじめに、自己紹介をしたいと思います。 東京経済大学3年のTOSHIです。プログラミングは大学2年生から始めました。プログラミングは、友人がプログラミングしている姿を見て興味を持ち自分でもやりたいと思い、始めました。このブログではjavascriptを使ったプログラムを開発していきますが、最近はjavaも勉強中です。 参考文献 田中賢一郎『ゲームで学ぶJavaScript入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べるHTML5＋CSS＋JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶJavaScript入門増補改訂版～ブラウザゲームづくりでHTML＆CSSも身につく！』インプレス, 2022年 今は、道に落ちているアイテムを拾い、それをフィールドの各所にいるキャラに渡していくとストーリーが展開するというゲームを作っています。まだストーリーの内容は考え中です。
続きを読む

キャラクターの歩行アニメーションを作ってみた。

-
イメージ
 前回の「キャラクターの向きを増やしてみた。」では、主人公が移動すると、向きだけが変わり、歩いたというより瞬間移動に近いものとなっていました。 自分の中で少し違和感があったため、主人公の歩行アニメーションを作った方が良いと考えました。 今回もキャラ画像は前回と同じものを使用します。 プログラムの改造は前回行った「主人公が描画される」の部分です。 主人公の歩行アニメーションをつける方法は２パターンあると考えました。 一つ目の方法は、キーを押して一マス移動するごとにキャラの画像が変わるというものです。 この方法では、キーを押す→歩き画像１、キーを押す→歩き画像２というように描画されます。 しかしこれでは、歩いていない状態でも歩いている画像になってしまう場面があります。これでは少し不自然です。 二つ目の方法は、キーを押して一マス移動するときにキャラの画像を複数枚描画し、歩いているように見せるという方法です。この方法にすると、キーを押す→歩き画像１→歩き画像２→停止画像というように描画できるので、歩いていない状態で歩き画像になるという状態にはなりません。 私は二つ目の方法で、歩行アニメーションの実装を行いました。 私は最初、アニメーション画像を順番に描画すれば歩いたように見えると考えていましたが、プログラムを実行してみると、歩き画像１、２、停止画像が重なって描画されてしまいました。このとき私は、キャラが移動する度にマップの更新が入っていることを忘れていました... つまりどうすれば良いのかというと、 移動キーを押す ↓ マップを描画する ↓ 歩き画像１を描画する ↓ マップを描画する ↓ 歩き画像２を描画する ↓ マップを描画する ↓ 停止画像を描画する. このようにすれば、キャラが重なって描画されることなくアニメーションが描画できると考えました。 移動キーを押した後を、for文でループさせたら良いと考えた私は、早速プログラムを作ってみました。プログラム自体は動きましたが、移動キーを押しても前回と同じ動作内容で、アニメーションが実装出来ていないように見えました。 エラー無く動作しているのになぜ、アニメーションが表示されなかったのか。しばらく考えてみた結果、「for文のループ速度が速すぎて、すぐに停止画像が描画されている」ということに気が付きました。アニメーションは表...
続きを読む

Enterキーを押して会話を進められるようにしてみた。

-
イメージ
 今回は、ストーリーの会話をEnterキーを押して進められるように改良しました。 民家にいるおばあさんに話しかけると、会話が始まります。 このとき、移動キーを押しても主人公は動きません。 Enterキーを押すと、次の会話に進むことが出来ます。 最後の会話まで行くと、移動キーで主人公を動かせるようになり、会話を終了できます。 会話の進行が無く、単発の会話の場合は移動キーの制限はありません。 単発会話と、会話進行の違いは、以下の通りです。 ・単発会話 caseの値の会話テキストを表示する。 【終了】 ・進行会話 caseの値の会話IDが設定される。(case 80の場合は会話ID 80 ) 会話の進行回数 conversationStep　に0が代入される 会話判定 ConversationActive が trueとなる。 移動キーボタンを無効化する Enterキーの入力を受け付ける。 会話1が表示される。 Enterキーを押す→会話進行回数が1になる。 会話2が表示される。 Enterキーを押す→会話進行回数が2になる。 最後の会話が表示される。 Enterキーの入力を受け付けない。 移動キーボタンが有効化される。 会話判定が falseとなる。 【終了】 　 このように、会話の進行を追加するだけでもコードを追加する量が増えることが分かりました。 今回も、一部chatgptの力を借りてみましたが、chatgptのコードをそのまま利用するのは難しいと感じました。理想的なコードを生成するには、指示を細かく伝える必要がありました。また、生成されたコードが動作しなかった場合はそのコードの不具合を自分で見つけ、chatgptに修正点を伝えることで、正常に動作するコードに改良してくれました。
続きを読む