スクラッチコーチキャンプ スクラッチで使える無料素材集
  • 素材
  • 修行
  • はじめての方へ
  • スクラッチゲームの作り方

    #012 キャラが順番に集合するアニメの作り方|「送って待つ」でシーケンス制御

    #012 キャラが順番に集合するアニメの作り方|「送って待つ」でシーケンス制御
    この記事は スクラッチコーチで掲載されているオリジナル記事 のバックアップです。
    スターター作品
    なし
    今回の完成サンプル
    なし
    [soy-series name="はじめてのスクラッチ"]

    さぁ、スクラッチでナニ作る!?

    MCが「送って待つ」で女の子チームの集合を待ってから男の子チームへ次の指示を出す設計が効いている。スプライトごとに独立して動いているように見えて、全体の進行はMC1体が制御しており、メッセージの同期・非同期を使い分けることで自然なシーケンスが生まれている。このタイムラインを1か所でまとめる発想が、どう組み立てられているのか見ていこう。 参考資料:スクラッチプログラミング事例大全集

    動画で見てみよう

    [talk]チャンネル登録して応援よろしく!チャンネル登録する[/talk]

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

    [prj-embed prj="1312183099" mini="1" title="プレイしておこう" prj-title="はじめてのスクラッチ #012" prj-author="ok-scratch"]今回の[prj-link prj="1312183099" title="はじめてのスクラッチ #012" author="ok-scratch"]スクラッチを作る参考作品[/prj-link]です。[/prj-embed]

    今回の目標

    MCが号令を出すと、女の子たちが先に集合し、次に男の子たちが集合するアニメーションを作ります。

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

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

    #1MCの準備

    [talk class="m-l-n"]前回はメッセージを使ってスプライト同士にあいさつさせたよね。今回はそのメッセージの仕組みをパワーアップさせて、キャラクターたちがMCのもとに集合するアニメーションを作るよ。[/talk]

    準備

    スプライト「エムシー」を開く

    エムシーエムシー
    スプライトについて
    フラグが立つと背景をStarsに切り替え、女子と男子を順番に呼び集める司会キャラクター
    どんな役割か
    みんなを呼び集めるMCを作るよ!旗を押したら女の子を先に呼んで、次に男の子も呼ぶよ。全員がMCのところに集まる仕組みを作ってみよう!

    メッセージ「女の子登場」を追加

    女の子スプライトを表示させるメッセージ

    メッセージ「女の子登場」を追加

    実装

    step-0

    旗が押されたら見た目背景を ( ) にするで背景を「Stars」にして、MCを左下の位置(x:-150, y:-110)にセットするよ。準備ができたらイベント( ) を送るで「女の子登場」メッセージを送って、女の子たちに登場の合図を出すんだ。

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    旗を押すと背景がStarsに切り替わって、エムシーが左下に移動したね。

    #2女の子1の初期化

    [talk class="m-l-n"]MCの準備ができたから、次は女の子1のスプライトを作っていくよ。[/talk]

    準備

    スプライト「女の子1」を開く

    女の子1女の子1
    スプライトについて
    girls_appearで表示され、girls_gatherでMCの元へグライドして隠れる女の子キャラクター
    どんな役割か
    女の子1のキャラを作るよ!最初の合図でパッと現れて、次の合図でMCのところに集まるよ。2段階の動きがポイント!

    実装

    step-1

    旗が押されたら見た目隠すで隠して、大きさを60%にセットして、画面右上(x:150, y:110)に配置するよ。合図が来るまでは見えないように、最初から隠しておくのがポイントだね。

    [talk]スクラッチで旗を2回押すと、2回目の動きがおかしくなったことない?「隠す」「大きさを戻す」「位置を決める」を旗クリック時にまとめてやっておけば、何回押しても毎回同じ状態からスタートできるんだ。プロのゲーム開発でも「初期化バグ」は定番のやらかしなんだよ。[/talk]

    #3女の子1の登場

    step-2

    「女の子登場」メッセージを受け取ったら見た目表示するでパッと表示するよ。イベント( ) を受け取ったときがMCからの合図をキャッチして動き出す仕組みだね。

    ここではまだ表示するだけ。集合の動きは後のステップで追加するよ。

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    女の子1が右上にパッと現れた。「女の子登場」メッセージで表示される仕組み。

    #4女の子2の初期化

    [talk class="m-l-n"]女の子1ができたから、女の子2も同じように準備しよう。[/talk]

    準備

    スプライト「女の子2」を開く

    女の子2女の子2
    スプライトについて
    girls_appearで表示され、girls_gatherでMCの元へグライドして隠れる女の子キャラクター(2人目)
    どんな役割か
    女の子2のキャラを作るよ!Girl1と同じく、登場してからMCのそばに集まる動きを作るよ。

    実装

    step-3

    旗が押されたら隠して、大きさ60%にして、画面右下(x:150, y:-110)に配置するよ。女の子1が右上にいるから、2人が上下にわかれてスタンバイしている形だね。

    #5女の子2の登場

    [talk class="m-l-n"]女の子1と同じく、「女の子登場」メッセージを受け取ったら表示するよ。[/talk] step-4

    1つのメッセージで複数のスプライトを同時に動かせるのがメッセージの強みだね。MCが「女の子登場」を1回送るだけで、女の子1も女の子2も一斉にリアクションするんだ。

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    女の子2も右下に出てきたね。同じメッセージで2人とも登場するってわけ。

    #6MCのセリフと指示

    [talk class="m-l-n"]女の子たちの登場準備ができたから、MCに戻ってセリフと指示を追加するよ。[/talk]

    準備

    スプライト「エムシー」を開く

    エムシー
    エムシー

    メッセージ「女の子集合」を追加

    女の子スプライトをMCの元へグライドさせるメッセージ

    メッセージ「女の子集合」を追加

    メッセージ「男の子集合」を追加

    男の子スプライトをMCの元へグライドさせるメッセージ

    メッセージ「男の子集合」を追加

    実装

    step-5

    まず見た目( ) と ( ) 秒言うで「みんな集合!」と2秒間言ってから、イベント( ) を送って待つで「女の子集合」メッセージを送るよ。ここが今回の大事なところ。「送って待つ」は、受け取った側の処理が全部終わるまで次に進まないんだ。

    女の子たちが集まり終えたら「ちょっと男子ぃ!」と2秒間言って、最後にイベント( ) を送るで「男の子集合」を送るよ。こっちは普通の「送る」だから、メッセージを飛ばしたらそれでおしまいだね。

    [talk]「送って待つ」と「送る」って名前は似てるけど、動きが全然違うんだ。「送って待つ」は映画の監督みたいなもので、「アクション!」って号令をかけたら役者が演じ終わるまで次の指示を出さないんだよ。「送る」はただの伝令で、メッセージを飛ばしたら結果を待たずにすぐ次に移るんだ。[/talk]

    #7女の子1の集合

    [talk class="m-l-n"]MCがセリフと合図を出せるようになったね。今度は女の子1がMCのところに集まる動きをつけるよ。[/talk]

    準備

    スプライト「女の子1」を開く

    女の子1
    女の子1

    実装

    step-6

    「女の子集合」メッセージを受け取ったら表示して、動き( ) 秒で ( ) へ行くで2秒かけてエムシーの位置まで滑らかに移動するよ。到着したら見た目隠すで隠れるんだ。

    グライドの秒数が大きいほどゆっくり移動するよ。2秒だと、ゆったり歩み寄ってくる感じだね。

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    エムシーが「みんな集合!」って言った後、女の子1がスーッとエムシーのところに集まってきた。

    #8女の子2の集合

    [talk class="m-l-n"]女の子1の集合ができたから、次は女の子2だよ。MCのところに同じように集合させよう。[/talk]

    準備

    スプライト「女の子2」を開く

    女の子2
    女の子2

    実装

    step-7

    やることは女の子1とまったく同じで、「女の子集合」を受け取ったら表示して2秒かけてエムシーへグライドして隠れるよ。スタート位置が右下だから、女の子1とは別方向から集まってくるのが面白いところ。

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    女の子2も一緒にエムシーへグライドしてくるようになったね。

    #9男の子1の初期化

    [talk class="m-l-n"]女の子チームの動きが完成したから、ここからは男の子チームを作っていくよ。[/talk]

    準備

    スプライト「男の子1」を開く

    男の子1男の子1
    スプライトについて
    boys_gatherを受け取ったらMCの元へグライドして隠れる男の子キャラクター
    どんな役割か
    男の子1のキャラを作るよ!「男の子集合」の合図が届いたら、MCのところまでスーッと近づいていく動きをつけるよ。

    実装

    step-8

    旗が押されたら隠して、大きさを50%に設定して、画面右上(x:150, y:110)に配置するよ。女の子たちが60%だったのに対して男の子は50%で、キャラの個性に合わせてサイズを調整しているんだ。

    #10男の子1の集合

    step-9

    「男の子集合」メッセージを受け取ったら表示して、動き( ) 秒で ( ) へ行くで1秒かけてエムシーのところまで移動し、到着したら隠れるんだ。

    女の子は2秒でゆっくり集まったけど、男の子は1秒でサッと駆けつける。グライドの秒数を変えるだけでキャラの動きに個性が出せるんだよ。

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    男の子1もエムシーのところにグライドしてきた。「男の子集合」メッセージで集合開始。

    #11男の子2の初期化

    [talk class="m-l-n"]男の子1ができたから、男の子2も同じように初期化しよう。[/talk]

    準備

    スプライト「男の子2」を開く

    男の子2男の子2
    スプライトについて
    boys_gatherを受け取ったらMCの元へグライドして隠れる男の子キャラクター(2人目)
    どんな役割か
    男の子2のキャラを作るよ!Boy1と同じように、合図を受けてMCのそばまでグライドする動きを実装するよ。

    実装

    step-10

    旗が押されたら隠して、大きさ50%にして、画面右下(x:150, y:-110)に配置するよ。男の子1が右上、男の子2が右下にスタンバイだね。

    #12男の子2の集合

    [talk class="m-l-n"]最後に男の子2もMCのところに集合させよう。[/talk] step-11

    「男の子集合」を受け取ったら表示して、1秒でエムシーへグライドして隠れるよ。男の子1と同じ動きだけど、下からMCに向かっていく軌道になるんだ。

    これでMCが「送って待つ」で女の子を集めてから「送る」で男の子を呼ぶ、順番どおりのアニメーションが完成!次回はスプライトが分裂する仕組みを作るよ。

    まとめ

    「送って待つ」と「送る」の2つを使い分けるだけで、こんなに整ったシーケンスが組めるんだ。メッセージはスプライトを超えてコミュニケーションできる仕組みだから、キャラの数が増えても応用が利くよ。次回はボールが分裂する仕組みに挑戦しよう!

    ブクマよろしくお願いします!という口コミを寄せてくれた方 ブクマよろしくお願いします!
    どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!