スクラッチプログラミングに挑戦している皆さん、どうも!スクラッチコーチです。
前回は
タイルをスクロールさせることに成功したね!上下左右に
動かすと
画面外にタイルが
移動して、
見えなくなると
同時に
逆側に
回り込んでリサイクルさせる
仕組みを
作り
込んだ。しかも
画面外に
移動するときに
発生するスクラッチ
特有の
問題「突っかかり現象」にBIGコスチュームで
対応する
方法も
学んだ。なかなか
充実した
学びがあったんじゃないかな!
学びの
加速は
止まらない!
今回もぶっ
飛ばしていくからついてきてくれぃ♪
今回の目標「」
地形生成の準備をする
ではスプライト「
地形生成」を
開いてほしい。
このスプライトにはコスチュームはなくて、コーディングだけしていく
用のスプライト。
リスト「★ステージグリッド(タイル設計図)」を用意する
タイルを
規則的に
並べるためにリストを
使って
管理していくので、このタイミングでリストを
作ろう。
リストでグリッドを管理する作戦
でもリストでタテとヨコを
管理することなんて
出来るだろうか?それには
今回の
作戦内容を
事前に
理解しておくことが
大切になってくる。
ここまでの復習
まずグリッドは
前回学んだね。
方眼用紙みたいに
縦横に
整列されたマス(タイル)みたいなイメージのデザインだったよね。こんな↓
で、スクラッチでタイル(マップチップ)をグリッド
状に
並べてスクロールすることまでは
成功しているよね。
グリッドをリストで管理する方法
いまはランダムでいろんなタイルが
並べられているけど、
今回のチュートリアルでは
規則正しく
開発者が
意図したとおりに
整然とタイルを
並べていきたい。こんな↓
これをどうすればリストで
管理できるか、という
作戦内容を
伝える。
グリッドは左下から数える
まずグリッドのマスはどういう
順番で
並んでいるだろうか。
下の
図を
見てほしい。
このようにグリッドは
左下を1として、
上に
向かって2,3,4とカウントアップしていき、
次の
列の一
番下からまた5,6,7……と
数えていくんだ。
グリッドをリストで管理する方法
これをリストで
管理するとこうなる。
画像の
右側に
新しく
表示されたリスト「★ステージグリッド(タイル
設計図)」の
中を
見てほしい。1つ
目には10という
数字が
入ってるよね。これは
ステージグリッドの1つ目のマスにはコスチューム番号10のタイルが入ってますよという意味になるんだ。
続けて2マス
目、3マス
目もコスチューム
番号10のタイルが
入っていることが
見て
取れる。で4つ
目のマスには
何もないので、
空白のタイル(=コスチューム
番号2)が
格納されている。そして5つ
目だ。ここにはステージグリッドの5マス
目のタイルが
入ってる。リストだけ
見ると
何番目から
次の
行になるのか
分からないけど、そこは
変数で管理すればタテが何個のグリッドなのか分かるから
大丈夫。とまぁ
これがグリッドをリストで管理する考え方だ。これをしっかり
頭に
入れておくと、ココからの
実装がより
明確に
理解できると
思う。よぉし
話はここまでにして
手を
動かしていくぞぉ!
ok-scratch
u003cpu003eちなみに3列目と4列目は10,2,2,2だよ。u003c/pu003e
ブロック定義「_地形を生成する」を用意する
じゃ、
再描画なしのブロック
定義を
用意するよ!これが
地形生成のメイン
処理だ。
リストを初期化する
とりあえず
処理の
最初にリストの
初期化を
行おう。
ステージグリッドのサイズを変数化する
グリッドの
横幅と
高さを
変数で
管理していくようにしよう。
初期化する
とりあえずヨコ30、タテ20で
初期化しておこう。
ステージの土台を作る
じゃあグリッドにタイルのコスチューム
番号をどんどん
入れていってステージを
作ってみよう。まずどんなステージを
作るのか
共有するよ。
今から
作るのはこんな
感じの
箱型のステージ↓
左右に
壁があって、
上には
天井、
下には
床がある、こんなシンプルなステージの
枠組みを
作っていくよ。
使うタイルはすべてコスチューム
番号10のもの。
左の壁を作る
まずは
左の
壁から
作ってみよう。
ブロック定義「_壁を追加する」を用意する
壁を
追加する
処理を
再描画なしのブロック
定義にまとめていくよ。
呼び出す
地形を
生成する
処理で
呼び
出そう。
ステージグリッドの高さだけ繰り返すループを作る
壁の
高さはステージグリッドの
高さと
同じだから、さっそくさっき
作った
変数を
利用しよう。
タイルを追加する
壁のタイルは10
番だから、10をリストに
追加していくよ。
床と天井を作る
隣の
列に
移って、
今度は
床と
天井を
作ろうか。
今度はさっきより
複雑だね。まず
一番下にはタイル10の
床があって、
間は
空白だからタイル2がズラッと
並んで、
最後にまたタイル10で
天井を
作る
感じだね。
ブロック定義「_床と天井を追加する」を用意する
これもブロック
定義にしていこう。
床を追加する
まずはタイル10を
追加しようか。
空白を追加する
つぎに
空白だからタイル2をズラッと
追加しよう。
追加する
回数は
床と
天井の2タイル
分を
高さから
引いた
数だ。
タイル2を追加する
中身は
空白とする。
天井を追加する
最後に
天井としてタイル10を
追加しよう。
ブロック定義「_床と天井を追加する」を実行する
ではこのブロック
定義も
実行したいのだけど、
今作ったのは1
列だけだよね。イメージ
通りなら
同じ
地形がヨコにもずっと
続いてほしいのでループで
囲って
一気に
作っちゃいたいよね!
両サイドの壁を除いた回数だけ繰り返す
両サイドに1つずつ
壁があるから
合計2を
横幅から
引いた
回数繰り
返せばOKだね。
実行していくぅ
よしよし、きっと
上手くいってるはず。
右の壁を作る
まだ
実行しても
描画されないけど
右の
壁も
作っちゃおう。
といってもさっき
作ったブロック
定義「_
壁を
追加する」を
実行したらOKだね。
メッセージ「地形を生成します」を作る
この
一連の
処理を
動かすタイミングはメッセージを
受け
取ったときにするよ。こうすることで
他のスプライトの
初期化などが
終わったり、
都合のいいタイミングで
地形生成ができるゆえ。
実行する
スプライト「タイル」からメッセージを送る
このメッセージを
送るのはタイルからにしておこうか。
リストの中身を確認する
よし、これで
緑の
旗を
押したらリスト「★ステージグリッド(タイル
設計図)」の
中にちょうど600
個のデータが
入るようになったはずだからチェックしてみてほしい!
タイルのクローン生成手順を改修する
リストはできたけど、まだ
緑の
旗を
押してもタイルが
設計図通りには
並ばないよね。ということでこのリストをしっかり
使っていくところを
作っていく。その
前提として、すでに
作ったタイルのクローン
生成手順を
少しだけ
変更しておこうと
思う。ここから
開いてほしいスプライトは「タイル」だ。
変数「ステージグリッドのインデックス」を作る
新しく
変数を
作るよ。
この
変数の
役割なんだけど、リスト「★ステージグリッド(タイル
設計図)」のインデックスを
保持することになる。
初期化する
座標を変更する
このタイミングで
座標の
処理も
変更していく。
下に
示した2
箇所をまずは
変えるよ。
この2
箇所の
式を
削除して、シンプルに16にしておいてほしい。
この16はタイルのサイズ(32)の
半分という
意味がある。(あとでリファクタリングのときに
変数化する
予定)16にセットするのは、それがタイルのセンターを
示す
座標だから。
これを32ずつズラせば、すべてのマスにきっちりタイルが
埋まっていく。
ステージグリッドのインデックスを変える
次はインデックスを
変更しよう。
タテ移動する
コーディングは
次の
通り。
「■クローン
生成数Y
回繰り
返す」というループ
内にブロックを
追加したよ。こうすることで
下図のような
動きがデータ
上は
実現できるってこと。
改行する
次はヨコ
移動、ではなくて
改行。
改行する
手順としては、
- まずヨコ移動してから
- 次に一番下に移動する
複雑に
見えるけどコーディングしてみるとカンタン。ステージグリッドのインデックスを
次の
演算結果ずつ
変えればOK。
ステージグリッドのインデックスに
反映するとこうなる↓
演算はシンプルだけど、
直感的に
分かりづらいよね!
演算を2
段階で
考えると
理解しやすいよ。
下図を
見てみて。
2つの変数の役割
ステージグリッドとクローン
生成数Yという2つの
変数を
使っているよね。
復習がてら
各変数の
役割を
思い
出してみよう。
- ステージグリッドの高さは、画面外(見えない範囲)も含めたステージのタテの大きさ
- クローン生成数Yは、画面内(見える範囲)に生成されるクローンのタテの個数
だからステージグリッドの
高さのほうが
基本的に
数字が
大きい。
演算の解説
で、
演算の
解説をしようか。
① ヨコに移動する
まずインデックスにステージグリッドの
高さを
足すことでヨコの
列に
移動できる。この
演算に
来るまでに
変数「■クローン
生成数Y」
回繰り
返すループでインデックスは1ではなくて
画面の1つ
上の
位置、
上の
図だと5になっているはずだ。そこにいったん
変数「■ステージグリッドの
高さ」を
足してみようか。
上の
図を
参考にすると6だね。だから5+6=11ってことだね。これを
視覚化すると
下図のようになるよ↓
② 一番下に移動する
そして
変数「■クローン
生成数Y」をマイナスするんだよね。
上図を
参考にするとクローン
生成数Yは4だね。つまり11ー4=7だ!インデックス7は
ちょうど次の行の一番下の位置だね。
これでステージの
高さとクローン
生成数がどんなにかけ
離れていても
確実に改行処理が上手くいくんだ。
ok-scratch
u003cpu003e改行するのは、この演算が唯一の方法ではないよ。今回はこの方法を採用しているけど、数学的に改行を算出する方法はもっとある。だからキミの考えがこれとは違っててもOK。u003c/pu003e
少しだけ
触れたけどカメラを
実装する
段階になると、こういった
数学的に
確実に
上手くいく
方法を
実装しておいたほうが
何かと
無難になるんだよ。
仕組みが
複雑でも1つ1つは
確実に
動いてくれれば、
バグったときもどこを直せばいいか発見しやすいし。または
土管でワープみたいなマリオの
位置座標がガラリと
一変するような
処理を
作るときも、こういう
計算で
位置を
割り
出す
仕組みが
整っていると
バグが起きにくいんだ。
着替える場所を変える
いまコスチュームをランダムで
着替えているブロックがあるけど、これをメッセージ「タイルを
配置します」を
受け
取ったときに
変えよう。
既存のブロックを削除する
いまのブロックは
削除してOK。
新たにブロックを置く
メッセージ「タイルを
配置します」を
受け
取ったときにコスチュームを
着替えるようにしていくよ。まずはココ↓にブロックを
置こう。
設計図通りのタイルを配置する
リスト「★ステージグリッド(タイル
設計図)」で
指定した
通りのタイルを
配置したいので、リストからコスチューム
番号を
取り
出そう。これを
使うよ↓
ちょい
変数名が
長いけどw
ok-scratch
u003cpu003eステージグリッドのインデックスは各クローンが別々の値を持っている状態だよ。だから自分がどのタイルに着替えるべきか、クローンごとに判断できるように整ってる。u003c/pu003e
カチッとハメていこう↓
うん、
長いねw
ok-scratch
u003cpu003e解説のためにリストの名前にカッコでタイル設計図と書いてあるけど、把握できたならもうカッコ内は消してもOKだよ。u003c/pu003eu003cpu003eあとはステージグリッドのインデックスを、ステージグリッドindexとかステージグリッドidxとか書いてもいいかな。u003c/pu003eu003cpu003e解説記事だからそのままにしておくけど、みんなは自由にしてね。u003c/pu003e
カメラの座標を初期化しておく
テストの
前にカメラの
座標も
初期化しておくね。カメラXは240、カメラYは180にしておくよ。
テストぉ!
いよいよテストで
動かしてみるぞ!
長かった!
やふー!なんかめっちゃステージの
土台っぽいの(
語彙力w)
出てきたぁ!みんなも
出来た?
ステージを洗練させる
とはいえまだまだスクロールしてみると
課題が
山積しているのが
分かる。
次回はこのタイルがループしちゃってる
問題にタックルしていく。もう
少しで
本格的なスクロールゲームの
土台が
手に
入るぜ!
ok-scratch
u003cpu003eこのチュートリアルではみんなが作った作品をスタジオに掲載していこうと思ってるので、もし自分のアレンジを見てほしい!という人がいたらスタジオのコメントで教えてね。u003c/pu003eu003cpu003eあと挑戦したけど上手くいかなくて、自分ではもう無理・挫折寸前、みたいな人もコメントで状況を教えてくれたら、時間が割けるときにチェックしてみるよ。u003c/pu003eu003cpu003eu003ca href=u0022https://scratch.mit.edu/studios/33795511u0022 target=u0022_blanku0022 rel=u0022noreferrer noopener nofollowu0022u003ehttps://scratch.mit.edu/studios/33795511u003c/au003eu003c/pu003e