”本気で”エンジニアを目指すなら『TECH BOOST』キャリアから逆算された講座内容で、あなたの未来をサポートします!

これなら誰でも簡単にプログラミングが始められる!HackforPlayの紹介【マップを増やす】

Pocket

https://i.gyazo.com/477914458f68aec00f44e13a6fdbb8bd.png

前回はスライムをおいて位置をかえるところまでやりました。今回は、もっと大きなゲームが作れるように、マップの増やし方を紹介します

マップを増やす

いつも草原のマップでは飽きてしまいますよね? ハックフォープレイでは、新しいマップをいくつでも追加することができます。長いプログラムを書く必要もありません。では、早速やってみましょう

「マップのコード」を開く

まずは、画面全体を少し下にスクロールします。スクロールとは、ページを上や下に移動するという意味です。すると、こういうボタンが見えてくるはずです

https://i.gyazo.com/f93c4e46ae1bc43525cb8b754b804f69.png

見つけられたら、上から3番目にある「マップのコード」をクリックしましょう

これで準備はOKです。では、画面全体を少し上にスクロールして、元のところに戻りましょう(自動的に戻ることもあります)

マップを追加する

エディタの中身が変わっているはずです。これが「マップのコード」です。最初はこのようになっているはずです

Image from Gyazo

くわしくは後で説明しますが、322という数字がたくさん並んでいるオレンジ色の部分が重要です

新しくマップを追加するには、+ マップと書かれたボタンをクリックしましょう。すると、マップの絵がいくつか出てきます

Image from Gyazo

これも、前々回の記事に出てきた「アセット」です。6つのマップが最初から用意されています。好きなものをえらんで、クリックします。そして、中に入れるをクリックして、コードを中に入れましょう

Image from Gyazo

これでマップが追加されました!(赤枠の部分)

しかし……ゲームの方は、全く変化がありません。どうすれば、そのマップに行けるようになるのでしょうか?

「ゲームのコード」に戻る

マップとマップをつなぐには、あるものが必要になります。まずは、元の「ゲームのコード」に戻りましょう

エディタの上にある山のような形をしたボタンが、それぞれ「ゲームのコード」と「マップのコード」を表しています

Image from Gyazo

2つあるうちの、game.jsの方は、「ゲームのコード」を表しています。見つけられたら、game.jsをクリックしましょう。エディタの中身が切りかわったらOKです

「下りかいだん」をおく

マップとマップをつなぐ「あるもの」とは、一体なんでしょうか?

Image from Gyazo

それは階段です!

マップ1(草原)からマップ2(新しいマップ)に行くには、「下りかいだん」を使います。アセットのバーをクリックして、「下りかいだん」を中に入れましょう

階段を降りてみると……新しいマップに行くことができました!

Image from Gyazo

マップの見た目をかえる

マップの見た目を、細かく変えることもできます。最後に、その方法を紹介しましょう

まず、maps.jsの山をクリックして、マップのコードを見てみましょう

Image from Gyazoこんな風に、322という数字がたくさん書いてあるところに注目してください。この322という数字は、草原を表しているのです。この表を見てください

https://embed.hackforplay.xyz/open-source/ogp/mapTipIndex.jpg

たくさん絵が並んでいますね。これはトリセツのマップチップから見ることができます。さて、この表の中で、322という数字を探してみましょう

Image from Gyazo

ここですね。この絵に見覚えはありませんか? ……そう、草原です!

次に、322という数字をひとつだけ323に書きかえてみました(青線部分)

Image from Gyazo

これで実行してみます。すると、

Image from Gyazo

ひとつだけ見た目が変わりました。つまり、オレンジ色の数字は、マップの見た目を表しているのです!

骨の折れる仕事ですが、このオレンジ色の数字を書きかえていけば、マップの見た目を細かく設定することができます

マップの当たり判定をかえる

さっきの方法を使って、壁を作ってみようと思います。壁は321だから、こうやって……

Image from Gyazo

これで実行してみましょう

Image from Gyazo

よし、いい感じ!……と思ったら、**壁をすり抜けてしまいました!**これでは壁じゃなくて床です……

実は、マップの数字で変えられるのは見た目だけなのです。「壁かどうか」を変えるには、別の記号を書く必要があります。このように「壁かどうか」を調べることを、「当たり判定」と呼びます

そのマスを壁にしたい時は、数字の右にたて棒(|)を書きます。壁じゃなくしたい時は、空白()にしておきます。空白にも意味があるので、消してはいけません

Image from Gyazo

これで、すり抜けることはなくなりました

今日はマップの作り方を紹介しました。ここまでで書いたコードは、忘れずに保存しておきましょう

まとめ

  • マップを増やすには「マップのコード」を使う
  • 別のマップに行くには「くだりかいだん」を使う
  • マップの見た目は数字で決められている
  • かべかどうかは、たて棒(|)のあるなしで決まる

投稿者:プロナビ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

プログラミングで挫折しそうなら、現役エンジニアにマンツーマンで相談してみませんか?オンラインのプログラミングスクール「TechAcademy」のメンターが対応。

この記事が気に入ったら
いいね!しよう

プロナビの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る