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

マップを増やす

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

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

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

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

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

マップを追加する

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

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

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

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

これでマップが追加されました！（赤枠の部分）

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

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

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

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

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

「下りかいだん」をおく

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

それは階段です！

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

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

マップの見た目をかえる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

投稿者：プロナビ編集部

• 
• tweet
•