Learn programming.

とりあえずですが、主人公たちの見た目が決まりました。      素材はぴぽや倉庫さんのものを使わせていただきました。 主人公(女)は体調不良で休んでいるという設定なので ベッドで寝ている見た目がデフォルトです。 作業自体は地味ですが、女の子をベッドに配置するために画像を上手く合わせる必要もあり、予期せぬ苦労が割とありました。 余談ですが、今月の25日にインフルエンザに罹ってしまい、ぶっ倒れていました。 ようやっと回復しましたが、何事にも体が資本なので健康にも気を付けつつ作業を進めていきたいですねー。 ということで、短いですが今回はこんなところで終わろうと思います。 お疲れさまでした。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

気付いたら1週間が経っていました。 マップを描画するプログラムをサボり過ぎた為か、マップ移動のプログラムを作るのに大分苦労しました。 とはいえ、何とか完成しました。その過程で行った修正点等もあるので紹介したいと思います。 こちらが今回作成したMap0です。 扉の前で扉の方に進むとマップが移動するようになっています。 var tile = map[stage][dy][dx];         if (tile == 999) { // 歩行可能タイル             px = dx;             py = dy;             fieldpaint();         } else if (tile == 001) {// ステージ1切り替えタイル             stage = 1;             px = 12;             py = 10;             fieldpaint();                 }           else if (tile == 000) {// ステージ0切り替えタイル             stage = 0;             px = 10;             py = 10;         ...

  今回、当たり判定が必要な個所が多い上にバラバラなため、27x20の540マスそれぞれを番号で分け、それをExcel上で起こしてみることにしました。 画像をマス目に合わせるのは少し手間でしたが、数字を照らし合わせるだけなので視覚的にも楽にはなったと思います。 (もっと楽な方法があったら教えて下さい...) 今度はこれをコード上で配列に当てはめていきます。     if (map[dy][dx] == 000) {      px = dx;      py = dy;      fieldpaint();      } このようにして歩行可能な場所を決め、そこに予め用意していた歩行用の要素を当てはめることで矛盾なく動作するようにしています。 (今のところは) 以降このような手順でマップ制作に取り掛かっていきます。 次に作るマップは Map0です。 会話等のフラグは後回しにしているので、マップだけは 早く完成させなければ...。 とはいえ、Map1を作る過程である程度ノウハウは得られたので、これを活かしてどんどん進めていこうと思いますー。 ということで次回のタイトルは「 Map0の完成」です。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

相当銘打ったタイトルになってしまっていますが、そんな大それたたものじゃないです。 今回、マップ制作にあたり、マップチップという小さな画像サイズの部品をパズルのように組み合わせてフィールドを作る手法を選びました。 しかし、プログラム上だけで画像1つ1つを管理して一枚画を作るのは極めて大変ということで、あらかじめ外部ツールで作った画面を貼り付けていく方法をとりました。そこで使ったのが「Tiled Map Editor」です。 以下は実際の画面です。 ざっくりですが、このような感じで地面とその上でレイヤーを分けています。 始めに地面レイヤーをキャンバスに描画し、その次にプレイヤー、最後にその他の建築物を描画し、一枚の画面を作っています。 そうすることで地面の上にはプレイヤーが描画され、建築物の裏にプレイヤーが被さる様にしています。(今回は訳あって個別に描写しているタイルもありますが後々一枚にまとめる予定です。） こんな感じ 以下は該当するコード部分です。 function fieldpaint() { gc.fillStyle = "rgba(0, 0, 0, 1)"; gc.fillRect(0, 0, 864, 640); var y, x; for (y = 0 ; y < map.length ; y++) { for (x = 0 ; x < map[y].length ; x++) { {gc.drawImage(glass, x * 32, y * 32, 32, 32); } if (map[y][x] == 283) { gc.drawImage(Rock1, x * 32, y * 32, 32, 32); } if (map[y][x] == 310) { gc.drawImage(Rock2, x * 32, y * 32, 32, 32); } } } for (y =  15 ; y < 17 ; y++) { for (x = 0 ; x < map[y].length ; x++) { {gc.draw...

お久しぶりです、松井です。 また期間が空いてしまいました。前回の投稿から2週間以上が経っています...。 大学の試験期間にも差し掛かってくるので、それまでに出来るだけ進めていきたいところです。とはいえ、作業自体はかなり進みました（Map1だけですが...）。 以下がゲーム画面です。 細かい変更はあると思いますが、大方こんな感じで行こうと思ってます。 家や背景等のマップチップは「ドット絵世界」さんのものを使わさせていただきました。 「なぜMap0ではなく、Map1からなのか？」という真面目なツッコミが飛んできそうなので補足ですが、このマップは最初の画面にはしない予定です。ストーリーの掴みに主人公たちの家の中での会話を入れたいと考えているので、その後に登場するマップとなります。 主人公の見た目についてのツッコミは受け付けておりません。まだ定まっていないだけです。 さて、この１画面を完成させるだけでもプログラミング初心者の私には様々な苦悩、紆余曲折がありました。 そのすべてをこの投稿にまとめるのは難しく、少し見辛くなると思うので、過去語りにはなってしまうのですが、何個かに分けて投稿したいと思います。 ということで、今回こんなところで終わろうと思います。 次回のタイトルは「Tiled Map Editorとの出会い」です。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/