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

    #002 ネコが描く正方形の旅

    #002 ネコが描く正方形の旅
    この記事は スクラッチコーチで掲載されているオリジナル記事 のバックアップです。
    スターター作品
    なし
    今回の完成サンプル
    なし
    [soy-series name="はじめてのスクラッチ"]

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

    100歩移動→1秒待機→左90度回転を4回並べると、ネコがきれいな正方形を描いて起点に戻る構成が効いている。90°×4で向きが一周するという数学的な必然が、そのままブロックの並びとして見えるのが面白い。「待つ」を入れないと動きが一瞬で消えてしまう点も、順次処理の本質をコンパクトに体現している。この組み立てがどうなっているのか、作り方を見ていこう。

    動画で見てみよう

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

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

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

    今回の目標

    ネコが正方形の軌道を描いて元の位置に戻るアニメーションを作ろう。

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

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

    #1スタート位置を決める

    [talk class="m-l-n"]前回はブロックを上から順に並べてネコを動かしたよね。今回はそこに「旗を押したらスタート」する仕組みと、座標でネコの居場所を指定する方法を加えていくよ。[/talk]

    準備

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

    ネコネコ
    スプライトについて
    旗がクリックされると四角形の軌跡を描くように動くネコ。(-50, -50)から右方向に100歩進んでは左に90度曲がることを4回繰り返す。
    どんな役割か
    ネコが正方形を描くように歩くよ!右に100歩進んだら左に曲がって、また100歩進んで…を4回繰り返して、きれいな四角のルートを完成させるんだ。

    実装

    step-0

    イベントgreenflag が押されたときを置いて、その下に動きx座標を ( ) 、y座標を ( ) にするで座標(-50, -50)に移動させよう。座標っていうのはステージ上の住所みたいなもので、xが横、yが縦の位置を表してる。

    仕上げに動き( ) 度に向けるで向きを90度(右向き)にセット。向きを決めておかないと、前に実行したときの向きが残ったまま動いちゃうから、最初にリセットしておくのが大事なんだ。

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    旗を押すとネコが座標(-50, -50)に移動して、右向きにセットされたね。

    #2最初の一辺を歩く

    [talk class="m-l-n"]ここからネコに正方形の道を歩かせていくよ。まずは右方向に1辺分。[/talk] step-1

    動き( ) 歩動かすで100歩前に進んで、制御( ) 秒待つで1秒ストップ。待ち時間を入れないと全部一瞬で終わっちゃって、どう動いたか全然見えないんだよね。

    そのあと動き( ) ( ) 度回すで左に90度回転させるよ。これでネコの向きが上になるから、次のステップで上方向に進む準備ができた感じ。

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    ネコが右に100歩進んで、1秒待ってから左に90度回転したね。

    #3上に進んで曲がる

    [talk class="m-l-n"]2辺目もやることは同じ、「100歩進む→1秒待つ→左に90度回す」のセットだよ。さっき左に90度回したからネコは上を向いていて、100歩進むと上方向に移動するってわけ。[/talk] step-2

    同じブロックの繰り返しなんだけど、向きが変わってるから進む方向が違うのがポイント。動き( ) 歩動かすの「100歩」って、「今ネコが向いてる方向に100歩」っていう意味なんだ。[talk]Scratchの「向き」は0度が上、90度が右、180度が下、-90度が左っていう時計回りの数え方になってる。数学で習う角度は反時計回りで右が0度だから、最初は混乱するかも。でもゲームでキャラを動かすときは「上が正面」のほうが自然だから、Scratchはこっちの方式を採用してるんだよね。[/talk]

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    今度は上に100歩進んで、また左に90度回転。正方形の2辺目ができたね。

    #43辺目を進む

    [talk class="m-l-n"]もう1セット追加して3辺目。ネコは今、左を向いてるから100歩進むと左方向に戻っていくよ。[/talk] step-3

    右→上→左と3辺歩いて、あと1辺で四角が完成するのが見えてきたっしょ?[talk]90度ずつ左に曲がると4回で360度、つまりぐるっと1周して元の向きに戻るんだ。正方形だけの話じゃなくて、正三角形なら120度×3回、正六角形なら60度×6回でも1周する。外角の合計が必ず360度になるっていう数学の法則があるんだよ。[/talk]

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    左に100歩進んで回転、これで3辺目。正方形がだいぶ見えてきたっしょ。

    #5四角を完成させる

    [talk class="m-l-n"]ラスト1辺を追加して正方形の完成。同じ「100歩→1秒待つ→90度回す」をもう1セット追加しよう。[/talk] step-4

    ネコは下方向に100歩進んで、最後の左90度回転で再び右向きに戻るよ。スタート地点の(-50, -50)にきっちり帰ってくる。同じ動きを4回繰り返すだけで、きれいな正方形の軌道が描けるんだ。

    ってか、同じコードを4回もコピペしてるの気づいた?次回は「繰り返し」の仕組みを使って、このコードをスッキリまとめる方法をやるよ!

    まとめ

    正方形を描くだけのシンプルなコードだけど、「順番に動かす」「待つ」「向きを変える」の3つが揃って初めてきれいな動きになるのが伝わったかな。90度×4回で360度、つまり1周して元の向きに戻るっていうのも、実際に並べてみると体でわかる感じがするよね。同じコードを4回コピペしてるのに気づいたと思うけど、次回はそこを「繰り返し」ブロックでスッキリまとめる方法をやるよ!

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