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

    #001 ネコが行ったり来たり

    #001 ネコが行ったり来たり
    この記事は スクラッチコーチで掲載されているオリジナル記事 のバックアップです。
    スターター作品
    なし
    今回の完成サンプル
    なし

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

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

    動画で見てみよう

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

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

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

    今回の目標

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

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

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

    #1右に行って戻る

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

    準備

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

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

    実装

    step-0

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

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

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

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    旗を押したらネコが右に100歩動いて、1秒待ってから元の位置に戻ってきたね。

    #2左に飛び出して戻る

    step-1

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

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

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

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    さらに左に100歩動いて、最後に右へ100歩戻って元の位置に帰ってきた。

    まとめ

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

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