案件獲得できなかったら全額返金!未経験からプロのエンジニアスキルを身につけ、フリーエンジニアとして稼げるまで徹底サポート。オンラインでも教室でも学習可

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

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

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

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

マップを増やす

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

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

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

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

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

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

マップを追加する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「下りかいだん」をおく

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

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

それは階段です!

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

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

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

マップの見た目をかえる

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

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

d108ed56009fc58ee233b504b2297d86 - これなら誰でも簡単にプログラミングが始められる!HackforPlayの紹介【マップを増やす】こんな風に、322という数字がたくさん書いてあるところに注目してください。この322という数字は、草原を表しているのです。この表を見てください

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

投稿者:プログラミング教育ナビ編集部

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

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

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

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

あわせて読みたい

関連記事

イベントのご案内

☆=LOVE&≠MEメンバーも出演☆
めざせ!プログラミングスターLIVE
BS日テレ / Hulu で好評の番組 『めざせ!プログラミングスター』が スタジオを飛び出し、ついに課外授業(LIVE)を開催 ‼

 ▷ イベント詳細はこちら♪
ページ上部へ戻る
ja 日本語
X