スクラッチで順次処理を学ぼう！ネコを左右に動かすアニメーションの作り方【初心者向け】

はじめてのスクラッチ

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

実行を一時停止できる待機ブロックがこの作品の核になっている。移動だけを並べても処理は一瞬で終わってしまい、何が起きたかわからない。秒単位の停止を間に差し込むことで、ブロックが上から下へ順に動いていく様子が肉眼で追える構成になっている。この一見シンプルな設計がどう組み立てられているのか、ひとつずつ見ていこう。

動画で見てみよう

ok-scratch

チャンネル登録して応援よろしく！

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

はじめてのスクラッチ 001

by ok-scratch

プレイしておこう

今回のスクラッチを作る参考作品です。

今回の目標

旗をクリックするとネコが右に100歩進む
左右に往復して元の位置に戻る
各動作の間に1秒待つ

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

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

#1右に行って戻る

ok-scratch

旗を押したらネコが右に歩いて、1秒後にスッと元の位置まで戻ってくるよ。たった4つのブロックでアニメーションが作れちゃうよね。

準備

スプライト「ネコ」を開く

ネコ

スプライトについて
スクラッチのデフォルトキャラ。ブロックの指示通りに動いてくれる、最初のプログラムの主役。
どんな役割か
ブロックを上から順番に並べるだけで、ネコがその通りに動く。プログラミングってまずこれ。旗クリックして「お、動いた！」を体感してみよう。

実装

イベントが押されたときでプログラムをスタートしたら、動き( ) 歩動かすに100を入れて右に100歩進めよう。マイナスの値（-100）を入れると逆方向に動くから、それで元の位置に戻れるんだ。

間に制御( ) 秒待つで1秒の待ち時間を挟んでるのがミソ。これがないと、右に行って戻る動きが一瞬で終わっちゃって何が起きたかわからない。ブロックは上から下へ順番に実行されるから、待ち時間を入れることで1つ1つの動きが目に見えるようになるんだよ。

ok-scratch

スクラッチのステージは横480×縦360の座標系になってるんだ。100歩動くってことは横幅の約5分の1を移動する計算。気になる人はステージの背景をXy-gridに変えてみるとグリッド1マスが30歩分だから、100歩はだいたい3マスちょっと分の移動だね。

確認プレビューしておこう

旗を押したらネコが右に100歩動いて、1秒待ってから元の位置に戻ってきたね。

#2左に飛び出して戻る

中央に戻ってきたネコを今度は左に飛び出させて、最後にまた元の位置に戻すよ。さっきと同じ組み合わせで、制御( ) 秒待つで1秒待ってから動き( ) 歩動かすに-100を入れて左に動かそう。もう1秒待って100歩で右に戻せば完成だよ。

全部の移動を足し算すると、100 + (-100) + (-100) + 100で合計はゼロ。合計がゼロなら、どれだけ動き回ってもネコは元の位置に戻るけど、もしゼロじゃなかったら旗を押すたびにネコの位置がどんどんズレていってしまう。これが座標の基本的な考え方なんだ。

ok-scratch

「行きと帰りで打ち消し合う」っていう発想は、ゲームプログラミングでもめちゃくちゃ使うんだよ。たとえばキャラがダメージで揺れる演出も、右に3歩→左に3歩を高速で繰り返してるだけだったりする。シンプルだけど応用範囲が広い、座標のパワフルな性質だね。

確認プレビューしておこう

さらに左に100歩動いて、最後に右へ100歩戻って元の位置に帰ってきた。

まとめ

旗をクリックするだけでネコが元の位置に戻ってくる、なんかスッキリしてるよね。「100 + (-100) + (-100) + 100 = 0」ってことがコードで表現できると、プログラミングってこういうことか！ってなるんじゃないかな。順次処理はこれから先のすべてのプログラムの基礎になるから、今回つかんだ感覚を大事にして！