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
これで、すり抜けることはなくなりました
今日はマップの作り方を紹介しました。ここまでで書いたコードは、忘れずに保存しておきましょう

まとめ

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