子供向けプログラミング言語Scratch-絵を動かす方法(動作のアニメーション)

このページでは、子供向けプログラミング言語 Scratch(スクラッチ)で、動作をプログラミングしてアニメーションを作成する基本として、[見た目]グループの[コスチュームを■にする]ブロックと[次のコスチュームにする]ブロックなどの使い方を説明します。

下に埋め込んだプロジェクトを使って説明します。
これは、可愛いバレリーナが4個のポーズを繰り返す動きをするプロジェクトです。
このプロジェクト実行は、緑の旗をクリックして行います。
なお、このプロジェクトは永遠に動くように作ってあるので、プロジェクトを止めたいときは、ステージ右上の赤い八角形のボタンをクリックして強制終了します。

Scratchで絵、すなわち、スプライトの動作をプログラミングするには、そのスプライトコスチュームの表示を次々に変えていくという方法をとります。

まず、対象とするスプライトに、形が異なるコスチュームを複数用意しておきます。
その上で、[見た目]グループの[コスチュームを■にする]ブロックや[次のコスチュームにする]ブロックなどを使用して、適当なタイミングで次々にコスチュームを変えて表示します。

バレリーナが4個のポーズを繰り返す動きをするプロジェクトの作成例

まず、スプライトとそのコスチュームを準備します。

  1. 今回使わない猫のスプライトを削除します。
    スプライトリストの猫のスプライトサムネイルの上で右クリックし、[削除]にカーソルを合わせクリックします
  2. 組み込みのライブラリから、スプライト「Ballerina」を選択します。
    ステージ右下の[新しいスプライト]の一番左の図にマウスを合わせ[スプライトをライブラリから選択]と表示されたらクリックします
    スプライトのライブラリが表示されます
    スプライト[Ballerina]をクリックして選択し[OK]をクリックします
  3. スプライト「Ballerina」のコスチュームを表示して確認します。
    ブロックパレットの[コスチューム]タブをクリックします
    コスチューム名「ballerina-a」「ballerina-b」「ballerina-c」「ballerina-d」の4個で構成されているのが確認できました
  4. ブロックパレットの[スクリプト]タブをクリックしてブロックを表示します。
    ブロックパレットの[スクリプト]タブをクリックします
    ブロックパレットブロックが表示されました

次に、スプライト[Ballerina]のスクリプトプログラミングします。

  1. スプライト「Ballerina」の最初の姿をコスチューム「ballerina-a」にします。
    [見た目]グループ[コスチュームを■にする]ブロックコスチュームを「ballerina-a」にするため、[見た目]グループをクリックして表示します
    [コスチュームを■にする]ブロックスクリプトエリアにドラッグ&ドロップします
    [コスチュームを■にする]ブロックの■をクリックして「ballerina-a」を選択します
  2. 永遠に繰り返す処理をつなげます
    [制御]グループの[ずっと]ブロックスクリプトエリアに置くため、[制御]グループをクリックして表示します
    [ずっと]ブロックスクリプトエリアの[コスチュームを■にする]ブロックの下に付けてドラッグ&ドロップします
  3. [ずっと]ブロックの内側に0.5秒毎にコスチュームを変えるプログラミングをします。
    [制御]グループの[○秒待つ]ブロックをドラッグ&ドロップし、○の部分をクリックして「0.5」と半角で入力しエンターキーを押します
    [見た目]グループの[次のコスチュームにする]ブロックコスチュームを変えるため、[見た目]グループをクリックして表示します
    [次のコスチュームにする]ブロックスクリプトエリアの[○秒待つ]ブロックの下に付けてドラッグ&ドロップします
  4. 実行のきっかけを組み入れます。
    [イベント]グループ[緑の旗がクリックされたとき]ブロックスクリプトエリアに置くため、[イベント]グループをクリックして表示します
    [緑の旗がクリックされたとき]ブロックスクリプトエリアスクリプトの先頭に付けてドラッグ&ドロップします。

上記手順の動画はこちらです。

以上、これでプロジェクトが完成しました。
実際のプロジェクトの中身を見たい方は、こちらをクリックしてご覧いただくことができます。

なお、このブログ内容に関連して、オンラインエディターの開き方を確認したい方は、こちらのブログ記事、オンラインエディターでのプロジェクトの保存とオンラインエディターの終了方法を確認したい方は、こちらのブログ記事をご覧ください。

スポンサーリンク

コメント

スポンサーリンク