こんにちはgrandstreamです。
今回もJavaScript初心者である僕が、YouTube動画を見ながら「スーパーマ◯オ」を作成してみるシリーズをお届けします。
第六弾の今回は、「背景をスクロールさせる」部分を実装していきます。
なお、前回の記事はこちら↓
参考動画
参考にさせていただいたのは「Akichonプログラミング講座」さんの動画です。
背景をスクロールさせる部分の解説は本動画シリーズの第10回です。
「背景をスクロールさせる」コード解説
では、「背景をスクロールさせる」部分のコードについて解説してみたいと思います。
こちらが今完成している部分までの全コードです。
見た目
コードを見ていく前に、現段階での見た目はこんな感じです。
キーボードの「S」を押すと画面が右に、「A」を押すと左に動きます。
またマ◯オが画面真ん中まで進むと、画面も一緒に移動するようになります。
結構それっぽくなってきましたね！
今回やったことをざっくりまとめてみますね。
- 「Tiled Map Editor」で背景のデータを作成
- 上記のデータを用い、背景描画のコードを作成（map.js）
- フィールドのサイズを変更（const.js）
- スクリーンをスクロールさせる記述を追加（main.js）
- スクロール時におじさんがついてこないようにする（ojisan.js）
では、もう少し詳しく見ていきましょう。
「Tiled Map Editor」で背景のデータを作成
Akichonさんの動画内でこのソフトの使い方が説明されています。
スプライトデータなどを用いて、マップを1次元配列データに変換してくれるやつみたいですね…！
確かに、複雑な背景をいちいち手作業で数字に置き換えてやるなんて面倒くさくてできないですもんね。
ただ、今回は、Akichonさんのコードからコピペさせてもらいました。
背景描画のコードを作成（map.js）
先にmap.jsの全体のコードを載せておきます。
fieldDataの設定
Tiled Map Editorで作成したデータをfieldData内にコピペします。
スクロールのX,Y座標を定義
スクロール時の座標、scxとscyを定義します。
フィールドの左端の座標を設定
おじさんが画面真ん中より右に進んだときは、スクリーンの左端の座標をおじさんの位置からスクリーンサイズの半分を引いた位置になるよう設定します。
つまり、おじさんが真ん中まで進むと、あとはスクリーンが追いかけてきてくれるようになります。
背景ブロック描画の関数設定
背景ブロックを実際に描画する関数です。後ほど描画処理の部分で呼び出して使います。
背景の描画処理
ここでは、背景の描画処理を記述しています。先程のfieldDataを1つずつ回していって、現在のスクロール分を考慮した領域がスクリーンに表示されるように設定しています。
フィールドのサイズを変更（const.js）
前回までは、フィールドの横幅が16ブロック分（256ピクセル）でした。今回はスクロールするので、横幅をフィールドサイズ分拡張しないといけません。
今回は256ブロック分（つまり、横幅4096ピクセル）のフィールドとなります。
スクリーンをスクロールさせる記述を追加（main.js）
とりあえずmain.jsの全コードを載せますね。
追記したのは、黄色マーカー部分のコードです。
キーボードの「A」「S」を押すと、スクリーンの座標が左または右に1ピクセル移動します。
スクロール時におじさんがついてこないようにする（ojisan.js）
ojisan.jsの全コードです。マーカー部分が今回変更した部分です。
おじさんの座標から、field.scx等を差し引くことで、フィールドの移動を打ち消すことができます。
これがないと、「A」「S」でスクロールしたときにおじさんもついてきてしまします。
まとめ
前回から久しぶりに続きをやったので、何が何やら、ちょっと混乱しました。
でも、一つ一つのコードが何をやっているのか、じっくり解きほぐしていけばなんとか理解できます。
次回も頑張って挑戦したいと思います。
コメント