スクラッチでマリオっぽいスクロールゲームを作る上級技⑫ ステージの保存コードが座布団みたいにペチャンコだぜ!

スクラッチでマリオっぽいスクロールゲームを作る上級技⑫ ステージの保存コードが座布団みたいにペチャンコだぜ!
グリフパッチ(動画)
ok-scratch(解説)

和訳解説は動画作者のグリフパッチさんご本人から許可をいただいて掲載しております。
チャンネルはYOUTUBE ( by griffpatch )からどうぞ。

ステージを複数作れるようにして、ゲームに深みをもたせるよ。しかも自作ステージをコメントで共有できるようなセーブコードも生成できるようにするぞ!
スターター
プロジェクト
なし
難しさ

任意)自分の作業中のスクラッチ作品URLを記録しておこう!再開するときに便利だよ。

LOADING...

※ この記録は今使ってるPCに保存されます。別のPCで作業するときは表示されません。

スクラッチに挑戦している皆さん、どうも!スクラッチコーチです。

前回は落ちる挙動を作ってリスポーン出来るようにしたね!

これで一通りのマリオの動きとゲームの最低限の仕様が固まってきた。あとはステージを増やしていけるようにすれば土台は整うね。

今回の目標「ステージの保存コードを作る、しかもスマートに」

ということで2面を作れるようにしていくために、ステージの保存コードっていうのを実装していきたい。これがあればステージをクリアしたタイミングで次ステージのコードを読み込む、みたいなプログラムを組んでいける。

まぁ2といわず3も4も、この方法の延長で作れるから安心してほしい。やっぱりステージがどんどん進んでいくってワクワクするよね。1面はシンプル、2面から海!3面はマグマワールド!みたいな発想もどんどん出てくるよね。

まずはバックアップからスタート

さて、これから色々いじるまえに、いまのステージグリッドの設計図をバックアップしておこう。方法は、リストを右クリックして書き出しを選択すればOK。これでテキストファイルにデータが保存されるよ。

このデータの中身をチェックすると……

うわ、長いし空白で区切られててなんか操作しづらい……。これだと友達にシェアするときにもちょっとファイルが重たくてうまく行かないこととかあったり、スクラッチのコメント欄で「僕が作ったステージを遊んでみて」ってシェアするのにも長すぎて無理だったりする。

そこで、この保存ファイルをギュギュッと圧縮する処理もスクラッチで作ってしまおうと思う!

今回もマニアックで高度だけど、一緒に頑張ろう!

ステージ保存場所を作る

では新しくスプライトを作っていくよ。

名前は「ステージ保存場所」とか……ちょっとセンス無いかもw

ステージのデータを保存する役割を持つスプライトなんだけど、自分が分かりやすい名前ならなんでもOKだよ。

いくつか新しい要素を作るよ

ではココで使うものを、とりあえず3つだけ先にダダダっと作っていこう。

リスト「ステージ一覧」

このスプライトのみ、でOKだよ。

変数「エンコード文字列」

こちらも、このスプライトのみ、でOK。

ブロック定義「エンコードする」

画面を再描画せずに実行する、にチェックを付けて引数を2つ用意しよう。

エンコード処理を作る

ではこのブロック定義の中身を作っていくよ。

まずはエンコード文字列を作っていくね。「◯と◯」を複数使って分かりづらいから小分けにワンステップずつ見ていくよ。

まずはこちら、引数の「値」と「区切り文字」をくっつけよう。

そしてこれを変数「エンコード文字列」と組み合わせよう。

出来上がったものを、変数「エンコード文字列」にセットするよ。

これで基本的なエンコード文字列の作りはOK、ここまではカンタン!

ブロック定義「ステージを保存する」を作る

さらに新しい定義を、画面を再描画せずに実行するようにして作るよ。引数も1つ使うよ。

エンコード文字列をカラにする

この定義内では最初にエンコード文字列をカラにするよ。

変数「タイルのインデックス」を作る

タイルの場所を調べるためのインデックスを用意するよ。

  • インデックスってなに? インデックスってなに?

    インデックスというのはリストの何番目かという数字です。リストじゃなくても例えば図書館の本棚を想像してみて。本棚の5番目にある本のインデックスは5。19番目にある本のインデックスは19みたいなイメージ。

    プログラミングだとインデックスという言葉は必須知識の1つだから、もし知らなかったらこの機会に覚えよう。

    ちなみにメジャーなプログラミング言語だとインデックスは1番目が0になる。2番目が1になる。でもスクラッチだと1番目は1だし、2番目は2になってるから注意。

初期化する

初期値として1をセットしておこう。

エンコードする

この次にエンコードをしていくよ。さっき作ったブロック定義もココで使っていくからね。

まずはループを作るよ。「★ステージグリッドの高さ」回繰り返すループを作ろう。

さらに!「★ステージグリッドの横幅」回繰り返すループを内包させる。

そしてここでブロック定義「エンコードする」を呼び出そう。

引数を渡す

第一引数には、ちょっと分かりづらいけど、リスト「ステージグリッド」の変数「タイルのインデックス」番目のデータを渡すよ。

第二引数には、アンダーバーを渡しておこう。

インデックスを加算する

変数「タイルのインデックス」に1を加算するよ。

ok-scratch ok-scratch

こういうループで使うインデックスを1加算する処理をインクリメンタルとかインクリメントって呼んだりする。逆に1引くときはデクリメンタル。インクリメンタルは超頻出用語だよ。デクリメンタルは滅多に会話にはでてこないけど。

ループの外でリストを削除する

ループを2つとも抜けたところで、リスト「ステージ一覧」をすべて削除するよ。

新しいデータをリストに加える

まっさらになったリストに、新しいエンコード文字列を加えよう。

保存データがどう変わったかテストする

このブロック定義「ステージを保存する」をクリックしてみよう。そうするとリスト「ステージ一覧」の中身が確認できる。

きっと下記のようになっていると思う。

さっきは数字の区切りが空白だったけど、アンダーバーになっているね!

連続している数字を短縮する

上のスクショを見ると、2とか4とか、けっこう連続している数字があるよね。今度はこれを短縮していく技を作るぞ!

変数「タイルのコスチューム番号」を作る

新しい変数を作るよ。

初期化する

まずはタイルのコスチューム番号を↓ここに入れよう。値は次で変えるよ。

値は、さっきブロック定義「エンコードする」の引数に渡していたものと同じでリスト「ステージグリッド」の変数「タイルのインデックス」番目、っていう値にしよう。分かりづらいw

変数「連続数」を作る

初期化する

タイルのコスチューム番号のすぐ下で初期化しておこう。

連続してるかどうかで処理を分岐する

条件分岐を追加して、連続している場合とそうでない場合で処理を分けるよ。

変更前

変更後

条件式で連続しているか調べる

条件式には、変数「タイルのコスチューム番号」と、リストの現在地を調べる演算を割り当てよう。

連続していたら

連続していたら変数「連続数」に1加算するよ。

連続してなければ

連続してない場合は、今割り当ててる長いブロックは冗長だから、もっと分かりやすく変数「タイルのコスチューム番号」を割り当てるようにしよう。

変更前
変更後
連続数も書き込む

さらに、何回連続していたのか、っていうデータも書き込むようにするよ。

タイルのコスチューム番号を更新する

そして変数「タイルのコスチューム番号」に新たにリストの現在地の値を割り当てよう。

これは次のタイルを調べる準備になるよ。

連続数もリセットする

連続数はゼロではなくて1にリセットしよう。

これでこの条件分岐は終わりだよ。

最後のデータを書き込む

この条件分岐のループには欠点があって、最後の数字だけ書き込めないんだ。なぜなら、最後の数字が2だとして、それが書き込まれる条件って2以外の数字が見つかったタイミングでしょ?でも最後だから見つかることはないんだ……。忘れられていく最後の数字……ってならないように、ラストに1回書き込み処理を実行しておくよ。

どのくらいデータが減ったかテストする

また定義「ステージを保存する」をクリックしてからリストを書き出して、どのくらいデータ量が減ったかを確認してみよう。

左のピンクの枠がBEFOREで、右のピンクの枠がAFTERだよ。めっちゃ減ったね!これだけでもいいくらい。

でももっともっと減らしていくぜ!

ok-scratch ok-scratch

あんまり長いとスクラッチのコメント欄に書き込めないからね。少ないに越したことはない。

タテとヨコを反転させる

ステージの保存する仕組みをタテからヨコに変える……なんのこっちゃって感じだよね!

今ってさ、タテにタイルを調べてるんだよ。だからステージのタテが16マスだとしたら、タイルが連続する限界もだいたい16になるんだよね。

それをヨコに調べるようにしたら、普通のステージはタテよりヨコのほうが長いから、タイルが連続する可能性もめっちゃあがるじゃん?

だから今作った処理を使えば、その分だけファイルが軽くなるよね、っていう理論!

ok-scratch ok-scratch

もし分かりづらかったら、そこまで重要じゃないから理解はしなくても大丈夫。「どういうことだったんだろー」って今日お風呂に入りながら思い出してみるくらいでOK(のぼせないでね)

ちなみにアルキメデスは風呂に入ってるときに大発見して「エウレカ!エウレカ!(≒ 見つけた)」って叫んだらしいよ。風呂って偉大w

タイルのインデックスの加算方法を変える

まずはすでに置いてあるブロックの値を変えるよ。

新しい加算ブロックを置く

そしてループを1つ抜けたところに、同じくタイルのインデックスに加算するブロックを置く。

この中身は、↓こんな感じの式にしよう。これでタテとヨコを転換できるぞ!

どのくらいデータが減ったかテストする

再びクリック&リスト書き出しでデータ量を調べる。すると……

さらなる激減!これはいい感じ。でもまだ止まらないぜ!

連続数をアルファベット化する

さぁもっとデータ数を減らしていくぞ!

上のスクショの一部を見ると↓こんな感じになってる。

10_1_7_8_2_3……

これは次のような意味だよ。

  • タイル10が1個
  • タイル7が8個
  • タイル2が3個

アンダーバーで区切られてこんな感じの意味合いになってる。

奇数個目はタイルのコスチューム番号で、偶数個目は連続数みたいな法則だね。

この連続数の方の数字をアルファベット化していこうと思う。どういうことかというと下のとおり。

  • 連続数が1ならa
  • 連続数が2ならb
  • 連続数が3ならc
  • 連続数が26ならz

っていう感じで、abc……zを1から26までの数字として使うよ。

上のサンプルを直すと次のようになる予定。

10a7h2c……

よっし、やってみよう。

リスト「AからZ」を作る

初期化する

手動でリストにAからZまでアルファベットを入れていこう。小文字でいいかなと。

ok-scratch ok-scratch

ならリスト名も小文字にすればよかったかも……。ということで次で名前を変えてるm(_ _)m

リストのブロックと組み合わせる

どう使われるかを感覚的に理解するために、リストの◯番目っていうブロックに1とか3とか入れてみよう。そしてクリックすると、そこに入っているアルファベットが表示されるよね。下は3だからCが表示されているよ。

次に「リスト中の◯の場所」ブロックにアルファベットを入れてクリックしてみよう。そうするとさっきの逆でCって入れれば3が取れるよね。

この仕組みを利用して連続数をアルファベットに置き換えていくぞ!

アルファベットに置き換える

連続数をアルファベット化するよ。

1つ目の定義「エンコードする」を変える

さっき作った条件分岐の中で使われる定義「エンコードする」を変えるよ。まずは1つ目。

変更前
変更後

2つ目の定義「エンコードする」を変える

そのスグ下で使っている2つ目の定義は、削除しよう。

条件分岐のあとで実行する最後の数字用エンコードも変える

条件分岐を抜けたあとに最後の1文字のためにエンコードする処理を呼んでいたよね。こっちも変えるよ。

変更と削除、両方同時に載せておくね。

変更前
変更後

最大26連続までを短縮するようにしておく

この処理の最大の欠点は、アルファベットがZまでしかないって点。だから27とか連続する場合は、また1から数え直すように条件式を変えるよ。

これでOK。

空白のタイル「2」の場合は数字を消す

ぶっちゃけステージで一番多いのは空白のタイルなんだよね。だいたい。だからこの「2」っていう数字は省略しちゃう。

条件ブロックをここに追加してみて。

条件式を変えよう。

そしてタイルのコスチューム番号を空白しておこう。これで2っていう文字数だけデータが減る。

最終的にどのくらいデータが減ったかテストする

またクリック&書き出しでデータ量を調べるよ。

するとまぁペチャンコ!

最初に出力した膨大なデータ量が、こーーんなに減りました!最高!

次はデコード

次回はこのエンコードされた文字列をデコードするところを作るよ。それにしてもセーブデータがこんなに少なくなるなんて、ミラクルだよね。この方法はいろんなゲームで活用できそうだね。

セーブコードってやりこみ要素との相性がいいから、作る人も遊ぶ人もみんなハッピーになれる仕組みの1つって思う。

では次回またアップするからお待ちあれ。

ok-scratch ok-scratch

このチュートリアルではみんなが作った作品をスタジオに掲載していこうと思ってるので、もし自分のアレンジを見てほしい!という人がいたらスタジオのコメントで作品URLを教えてね。

あと挑戦したけど上手くいかなくて、自分ではもう無理・挫折寸前、みたいな人もコメントで状況を教えてくれたら、時間が割けるときにチェックしてみるよ。

https://scratch.mit.edu/studios/33795511

完成サンプルがあるよ
おつかれさま!今回のチュートリアルには完成サンプルがあるから、作ってて分からなくなったり、 動作確認をしたいときはチェックしてみてね。
ブクマよろしくお願いします! ブクマよろしくお願いします!
どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!

スクラッチゲーム攻略

スクラッチゲーム

    • 厳選されたスクラッチ人気作品リストがレビュー付きで楽しめます
      趣味に関するスクラッチ作品例
      勉強になるスクラッチ作品