#020 リスト操作11種類を全部使う作り方｜追加・削除・検索・置き換え・挿入を完全体験

さぁ、スクラッチでナニ作る！？

動画で見てみよう

チュートリアルの元になった作品

今回の目標

スターター作品をリミックスしよう

このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード

#1リストの初期化

準備

スプライト「キャプテン」を開く

キャプテン

スプライトについて
乗員名簿をリストで管理し、点呼・検索・入退隊などの指示をメッセージで行う艦長スプライト
どんな役割か
リストを使って乗員名簿を管理するよ。追加・削除・検索・置き換えをひとつひとつ覚えながら、他のスプライトに指示を出す司令塔を作ろう！

リスト「■乗員名簿」の追加

全スプライトから参照できる乗員の名前リスト。追加・削除・検索・置き換えの操作対象

実装

イベント が押されたときで開始したら、まずリスト( )のすべてを削除するで「■乗員名簿」リストを空っぽにするんだ。前のデータが残っていると困るから、最初に全消しするのがリスト初期化の定番パターン。リストをステージに表示してから、最初のクルー「アライ」を追加するよ。

[talk]スクラッチの「リスト」って、スマホの連絡先リストと同じ発想なんだ。名前を追加したり、番号で呼び出したり、名前で検索したり。今回の作品ではスクラッチにあるリスト関連ブロック全11種類を使い倒すよ。ここをマスターすればリストは怖いものなしっしょ。[/talk]

#2リストにデータを追加する

リスト( ) を ( ) に追加するでサトウ、スズキ、タナカの3人を続けて名簿に追加するよ。リストに要素を足すたびに、下にどんどん積み重なっていく感じだね。

全員追加したら、リスト( ) の長さで名簿の人数を数えて「現在4名が在籍中」と表示する。そのあと調べる( ) と聞いて待つでユーザーに番号を入力してもらうんだ。

ここから名簿を使ったやりとりが始まるよ。リストは追加した順に番号がつくから、あとから入れた要素ほど大きい番号になる。この仕組みを頭に入れておこう。

#3リスト内の番号で呼び出す

ユーザーが入力した番号をもとに、名簿からクルーの名前を取り出すよ。リスト( ) の ( ) 番目を使うと、リストの○番目に入っている中身を取得できるんだ。

「答え」の値をそのまま番号として渡して、名簿のその位置にいるクルーの名前を引き出しているよ。リストは1番目から始まるから、「2」と入力すれば2番目のサトウが返ってくるんだ。

#4アビーの待機設定

準備

メッセージ「乗員呼び出し」を追加

指定番号の乗員を呼び出したときに送信するメッセージ

実装

イベント が押されたときで座標(-300, -300)の画面外に飛ばして見た目隠すで隠すんだ。呼ばれるまでは見えない場所で待機させておく設定だよ。

アビーの登場

キャプテンが「乗員呼び出し」メッセージを送ったら、アビーが画面に登場するよ。イベント( ) を受け取ったときでメッセージを受け取って、表示してから動き( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで1秒かけて定位置へ滑り込む。

キャプテン側が「メッセージを送って待つ」を使っているのがミソ。アビーの移動アニメーションが終わるまでキャプテンのスクリプトが一時停止するから、セリフと登場のタイミングがきれいに噛み合うんだ。

[talk]この作品では7種類のメッセージを使って、キャプテンとクルーキャラを連携させているよ。「メッセージを送って待つ」と「メッセージを受け取ったとき」のコンビは、スプライト同士の会話みたいなもの。映画の監督が「はい、○○さん登場！」って指示を出すのと同じで、キャプテンが司令塔になって全体の流れをコントロールしているんだ。[/talk]

アビーの返事

準備

メッセージ「乗員発見」を追加

名簿検索で乗員が見つかったときに送信するメッセージ

実装

1つのメッセージに複数のスクリプトを紐づけると、全部が同時に動き出すから、移動しながらセリフを言う自然な演出になるんだ。

#5リスト内の値で検索する

準備

スプライト「アビー（乗員）」を開く

実装

番号指定の次は、名前で検索できるようにしよう。まずイベント( ) を送って待つで「乗員呼び出し」メッセージを送って、あとで作るクルーキャラに合図を出すんだ。

続いて検索したい名前を入力してもらって、リスト( ) に ( ) が含まれるで「■乗員名簿」にその名前があるか調べるよ。このブロックは「ある」か「ない」の2択を返すから、もし〜でなければブロックで処理を分けるしくみだよ。

#6検索成功時の処理

名前が見つかった場合の処理を書くよ。リスト( )中の( )の場所は、指定した名前がリストの何番目にあるかを教えてくれるブロックなんだ。

「答え」の名前と位置番号をつなげて「○○は△番目に在籍中だ。」と表示するよ。さっきのリスト( ) の ( ) 番目は「番号→名前」だったけど、こっちのリスト( )中の( )の場所は「名前→番号」で逆引きみたいな関係だね。

見つかった場合はイベント( ) を送って待つで「乗員発見」メッセージを送って、他のスプライトに知らせるよ。

#7検索失敗時の処理

検索結果に応じてメッセージを送る・送らないを切り替えるのがポイント。この分岐が、あとで作るクルーキャラの登場タイミングを制御するんだ。

#8アモンの待機設定

準備

メッセージ「点呼終了」を追加

すべての点呼処理が完了したときに送信するメッセージ

実装

旗クリックで画面外に配置して隠すのはもう慣れたはず。パッと作っちゃおう。

アモンの登場

準備

スプライト「キャプテン」を開く

メッセージ「ヨシダ任命」を追加

副長をヨシダに交代したときに送信するメッセージ

実装

名前検索が成功したときだけキャプテンからメッセージが送られるから、検索に失敗するとアモンは出てこない。条件分岐とメッセージの組み合わせで登場を制御しているんだ。

アモンの返事

準備

メッセージ「カトウ着任」を追加

カトウを2番目に緊急配属したときに送信するメッセージ

メッセージ「乗員退役」を追加

指定した乗員が名簿から退役したときに送信するメッセージ

実装

これでクルーキャラ全員分の登場・返事のスクリプトが揃ったよ。

#9リストの値を置換する

準備

スプライト「アニナ（カトウ）」を開く

実装

リスト( ) の ( ) 番目を ( ) で置き換えるで名簿の1番目を「ヨシダ」に書き換えるんだ。元の「アライ」は消えて同じ位置にヨシダが入るけど、書き換えだからリストの長さは変わらないよ。そのあと「ヨシダ任命」メッセー���を送信するんだ。

#10ヨシダの待機設定

旗クリックで画面外(-300, -300)に配置して隠す初期設定は、もう何度もやったからサクッとね。

ヨシダの任命登場

クルーごとに移動先の座標が違うから、メッセージが届くたびにキャラクターが画面上のバラバラな位置に集まってきて、にぎやかになっていくよ。

ヨシダのあいさつ

セリフの中身をキャラごとに変えるだけで、それぞれの個性が出せるのが面白いところ。

#11リストにデータを挿入する

準備

スプライト「チャンプ（ヨシダ）」を開く

実装

リスト( ) の ( ) 番目に ( ) を挿入するで2番目の位置に「カトウ」を割り込ませるよ。挿入は既存の要素を後ろにずらして間に入る仕組みだけど、置き換えとの使い分けに気をつけないとカトウの位置にいたクルーが上書きされて消えてしまう。置き換えと違ってリストが1つ長くなるのがポイントだね。

カトウの着任をセリフで伝えたら「カトウ着任」メッセージを送信するよ。

#12カトウの待機設定

アビーと同じパターンで、旗クリック時に画面外(-300, -300)に配置して隠しておくんだ。呼ばれるまで待機するのはクルーキャラ共通の仕組みだね。

カトウの着任登場

「カトウ着任」メッセージを受け取ったら、アニナが画面に登場するよ。表示して(-87, -85)の定位置まで動き( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで1秒かけて滑り込むんだ。

アビーと同じ仕組みだけど、反応するメッセージと移動先の座標が違う。メッセージを使い分けるだけで、どのタイミングで誰が出てくるか自在にコントロールできるんだよ。

カトウのあいさつ

構造はアビーのときと全く同じ。メッセージ名とセリフを差し替えるだけで、別のイベントに反応するキャラが作れるんだ。

#13リストからデータを消す

準備

スプライト「ベン（発見された乗員）」を開く

実装

調べる( ) と聞いて待つでユーザーに退役する乗員の番号を聞くんだ。

入力された番号のクルーをリスト( ) の ( ) 番目を削除するで名簿から消すよ。削除すると後ろの要素が前に詰まって、リストが1つ短くなる。「乗員退役」メッセージを送って、お別れのセリフで区切りをつけるよ。

追加と挿入はリストを長くして、削除は短くする。置き換えだけはリストの長さが変わらない。この違いを頭に入れておくと、要素番号のずれに気づきやすくなるんだ。

#14ベンの待機設定

旗クリックで画面外に飛ばして隠す。もう何回もやったパターンだから、サクッといこう。

ベンの応答登場

ここまで来ると気づくかもしれないけど、クルーキャラは全員同じ4つのスクリプト構成で動いている。反応するメッセージと座標を差し替えるだけで、まったく違うタイミングに登場させられるんだ。

ベンの返事

同じメッセージで移動と返事の2つのスクリプトが並行して走る仕組みも変わらないよ。

#15リストの途中にデータを挿入する

準備

スプライト「キャプテン」を開く

メッセージ「乗員入隊」を追加

新規入隊者が名簿に追加されたときに送信するメッセージ

実装

ベンの設定が終わったから、次はキャプテンに戻って新規入隊の処理を追加しよう。調べる( ) と聞いて待つでユーザーに新しいクルーの名前を入力してもらうんだ。

入力された名前をそのままリスト( ) を ( ) に追加するで「■乗員名簿」に追加するよ。ユーザーが自由に名前を決められるから、「答え」変数がリストの値になるのがポイントだね。

歓迎のセリフを言ったら「乗員入隊」メッセージを送信して、新しいクルーキャラを登場させるんだ。最初に名簿を作ったときと同じリスト( ) を ( ) に追加するを、今度はユーザー入力で使っている形だよ。

#16ルミの待機設定

おなじみの旗クリック初期化で、画面外(-300, -300)に配置して隠しておこう。

ルミの登場

準備

スプライト「ベン2（退役乗員）」を開く

実装

登場メッセージも座標も違うけど、スクリプトの骨組みはこれまでのクルーキャラと全く同じ。パターンの再利用って楽だよね。

ルミの返事

移動と返事が同時に走って、登場しながらセリフが出る。おなじみのコンビネーションだね。

#17最終点呼と解散

リスト( ) の長さで最終的な名簿の人数を確認して「最終人員、○名。」と報告するよ。追加・削除・挿入を繰り返したから、最初の人数とは変わっているはずだね。

「以上、点呼おわり。解散！！」の宣言で、キャプテンのメインストーリーはここまでだよ。リストの全操作を一通り体験したことになるんだ。

#18点呼の終了

全クルーの設定が終わったから、キャプテンに戻ってエンディングを作るよ。リストリスト ( ) を隠すで「■乗員名簿」をステージから非表示にするんだ。

そのあとイベント( ) を送って待つで「点呼終了」メッセージを送るよ。この1つのメッセージで全クルーが一斉に退場して、ロケットが動き出す。最後にキャプテンが「あれ？ロケットは行っちゃダメ…」とつぶやいて、ストーリーのオチになるんだ。

アモンの退場

準備

スプライト「アモン（新入隊員）」を開く

実装

クルーキャラ全6体のスクリプトが完成。いよいよエンディングの仕上げに入ろう。

アビーの退場

これでアビーの「待機→登場→返事→退場」が完成。この4つのスクリプトのセットがクルーキャラの基本パターンだから、ここからは同じ構造を別のキャラに展開していくよ。

ヨシダの退場

カトウの退場

ベンの退場

準備

スプライト「キャプテン」を開く

実装

ルミの退場

準備

スプライト「ロケット」を開く

実装

#19ロケットの打ち上げ

制御( ) 回繰り返すを10回回して、毎回Y座標を20ずつ上げつつ、サイズを10ずつ縮めてコスチュームも切り替えるよ。上昇・縮小・見た目の変化を同時に動かすのがコツで、ロケットが空に飛んでいって遠ざかるリアルな演出になるんだ。

0.05秒のウェイトを入れてアニメーションのスピードを調整しているのもポイントだね。

#20打ち上げ完了

ループが終わったら見た目隠すでロケットを非表示にするよ。飛び去って見えなくなった状態を表現するんだ。

アニメーションの最後に隠すことで、画面上に中途半端な状態で残らないようにしているよ。

#21ロケットの初期設定

見た目画像効果をなくすで画像効果をリセットして、サイズを100%に戻す。コスチュームを待機状態のrocketship-eに切り替えるよ。

初期化処理をちゃんと書いておくと、旗をクリックするたびに毎回同じ状態からスタートできるんだ。アニメーションを使うスプライトでは特に大事な考え方だよ。

#22ロケットの表示

ロケットの位置を座標(0, 0)の画面中央にセットして、見た目表示するで表示するよ。これで打ち上げ前の待機状態が完成。

旗をクリックするたびに初期化→ストーリー進行→打ち上げが一連の流れで動くんだ。次回もスクラッチの新しいテクニックを使って作品を作っていくよ。

まとめ

リストブロック11種類、全部使い切ったね！追加・削除・検索・置き換え・挿入と、操作は多いけど、ひとつのストーリーで全部体験するとグッと覚えやすくなるはず。メッセージを使ってスプライトを連携させるしくみも、今回でバッチリ身についたんじゃないかな。次のスクラッチも楽しみにしてて！それにしてもロケットが飛び立ってしまったあと、どうなったんだろうｗ（自分の好みのストーリーをアニメにする練習にもなったと思う！なにか思いついたら作ってみよう。人には見られたくないなら共有しなければ自分しか見れないから、好き勝手に作っちゃおうぜ！）