🧑‍💻

Scratchでオリジナルキャラクターを動かそう! (5) ハンコの脅威

2022/10/16に公開約2,500字

はじめに

CoderDojoというボランティア団体で、子供達のプログラミングスキル習得の支援をしております。プログラミングの開発環境は、主にScratchを使っていますが、チュートリアルの次のレベルの教材を充実させたいと感じており、本シリーズの執筆を開始しました。

今回は「デジタル戦隊テレんじゃー」敵キャラ、「ハンコまわし」を登場させます!

ハンコの脅威

「デジタル戦隊テレんじゃー」はテレワークを含む新たなワークライフスタイルの確立を目指して、旧来のワークスタイルである「悪の軍団アナローグ」を退治していく物語です。今回は敵キャラの「ハンコまわし」がスピンしながらオフィスを飛び回るところまでを目指します。

今回の成果物は以下になります。見た目や動きがだいぶゲームらしくなってきました。

Scratchのサイト

はんこの脅威

https://youtu.be/K7zyaaLXNrM

今回の教材ではScratchの以下の機能を活用しています;

  1. クローン: ハンコまわしの回転の竜巻に使用ます。
  2. すべてのスプライ用の変数: 竜巻をクローンするときの座標と向きを設定するために使用します。

素材の作成

ハンコまわしのキャラクターはテレッドの時と同様、Affinity Designerで作成しました。作成方法につきましは、(1) テレんじゃー大地に立つ!を参照下さい。Affinity Designerのファイルはこちら

作成のポイントは、

  1. 書き出し用のアートボードを重ねて切り替えることで、Affinity Designer上でもアニメーションが確認できるようにしています。また「ハンコまわし」と「竜巻」は別々に書き出すようにしています。
  2. Scratchでは右方向が直進方向なのでハンコまわしを横にしていますが、いきなり横で描くのは大変ですので、縦向きに描いてシンボル化して、書き出し用のアートボードに横向きに貼り付けています。

素材作成のポイント

素材の読み込みとスクラッチ上での補正

素材の読み込み方法も(1) テレんじゃー大地に立つ!を参照下さい。なお、ハンコまわしと竜巻は別々のスプライトにアップロードして下さい。

コスチュームをアップロードすると線の太さがおかしくなる場合があります。この場合は図形を選択し(グループ化されている場合は解除して選択)線の太さを調整して下さい。

スクラッチ上での補正

ハンコ回しのアニメーション

ハンコまわしのアニメーションは最初のコスチュームを指定して、以降のコスチュームをループで切り替える様にしています(今後、コスチュームが増える可能性を考慮した実装になっています)。ハンコまわしの動きは、45度方向に真っ直ぐ移動して、端に着いたら跳ね返るようにしています。

また、竜巻はクローンで生成するようにしています。クローンされた時の位置、向きを設定するために「ハンコまわしのx座標」、「ハンコまわしのy座標」、「ハンコまわしの向き」を「全てのスプライト用の変数」として作成し、値を設定しています※。竜巻のクローンは少し間引いて、移動の二回に一回のタイミングで生成されるようにしています。

※本来はクローン時に竜巻側にこれらの変数を引数として渡せるといいのですが、Scratchは残念ながらそのような機能はありません。

ハンコまわしのコード

竜巻のアニメーション

竜巻はハンコまわしの移動とともにクローンされて、徐々に小さく、透明になり、最後に消えるようにしています。処理の流れは下記になります。

  1. クローンされた竜巻の位置、向きをハンコまわしと同じに設定。
  2. 竜巻の大きさをランダムに設定。
  3. 竜巻をコスチュームのアニメーションを繰り返すとともに、大きさを徐々に小さく、色も徐々に透明になるようにループを回す。
  4. ループが終わったら竜巻のクローンを削除

竜巻のコード

おわりに

お疲れ様でした。ハンコまわし、中々手強そうな相手ですね。次はいよいよテレッドとハンコまわしの対決です!

GitHubで編集を提案

Discussion

ログインするとコメントできます