キャラクターの向きを増やしてみた。

-

 今回は、キャラクター（主人公）の向きを増やそうと思います。

現在、主人公のキャラは黒いモンスターとなっています。





これを人型のキャラに変えて、さらに歩いた方向を向くようにしたいと思います。



今回使用するキャラクターです。前、後ろ、右、左の画像を用意しました。

主人公キャラの向きを増やすためにはプログラムを改造する必要があります。

今のプログラムの仕様をザックリと表すと、

移動キーを押す

↓

主人公の座標が変化する

↓

マップを描画する

↓

主人公が描画される


といった感じです。

改造する箇所は、「主人公の座標が変化する」と「主人公が描画される」の部分だと私は考えました。

「主人公の座標が変化する」↓






「主人公が描画される」↓






まず、「主人公の座標が変化する」部分では、新たに"向き"を判定する変数を追加したいと思います。
グローバル変数playerpovを追加し、
左向き    1
後ろ向き 2
右向き    3
前向き    4
のように、主人公の方向を1~4の数字で判定します。

改造後のプログラムがこちらです。↓





続いて、「主人公が描画される」部分の改造を行います。

playerpovが1なら左向きの画像を描画する、playerpovが2なら後ろ向きの画像を描画する...といったように、上下左右四方向に分岐させれば良いと私は考えました。

改造後のプログラム↓









多分これで大丈夫だと思います。

では実際にゲームを動かしてみます。





デフォルトの前向き状態から、右キーを入力すると...






右向きになりました！！！！（嬉しい）

ただ進む方向に向きが変わっただけですが、これだけで主人公が動いているような感じがします。

歩くアニメーションがあればもっとクオリティが上がると思います。時間があれば実現したいアイデアです。


今回のアイデアは、不具合やエラーなく実装できました。

こうして自分で考えたアイデアが実際に動くようになると達成感がありますね！


引き続き、ゲーム制作頑張っていきます！


参考文献
ドット絵世界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に修正点を伝えることで、正常に動作するコードに改良してくれました。
続きを読む