スクラッチでメロディーゲームを描く

Nov 25 2022
Scratchでお絵かきメロディーゲームを作ってみよう。MIT Media Labs によって開発された Scratch を使用すると、誰もがコーディングを学ぶことができます。

Scratchでお絵かきメロディーゲームを作ってみよう。MIT Media Labs によって開発された Scratch を使用すると、誰もがコーディングを学ぶことができます。クールなゲーム、アニメーション、芸術作品、その他のクールなものを作成するのは非常に簡単です。

プロジェクトについて:

マウス/人差し指さまざまな色で画面に描画して、美しいアートワークを作成します。エキサイティングな部分は、各色に異なる曲/音符が割り当てられていることです。デザインが完成したら、スペースバーを押してタイムラインを開始します。バーが絵の色に触れると音が出ます。これにより、異なる音符と旋律の組み合わせでユニークなメロディーが作成されます。

走り書きでも、面白くて心地よい音楽が生まれます。これにより、彼らは好奇心をそそられます。

これは、 ANMOL SRIVASTAVAが教える「機械学習」コースのプロジェクトです。修正版のスクラッチ — ストレッチ (http://stretch3.github.io/)。これにより、より多くの拡張機能を使用できるようになりました。

このプロジェクトでは 4 つの拡張機能を使用しました。

  1. Handpose2スクラッチ
  2. ペン
  3. 音楽
  4. TM2スクラッチ

ゲームを次のステップに分解しましょう:-

  1. スプライト (ペン) を選択し、マウスを使用してその動きを制御します。
  2. マウスがクリックされたときにキャンバスに色を追加します。
  3. 別のキーを使用して色を変更します。
  4. ブロックを作成し、異なる色の異なるサウンドをブロックに割り当てます。
  5. Handpose2Scratch を使用してスプライト (ペン) に指の動きの制御を追加します (最終出力用)。
  6. 人差し指で簡単に描画できるように、ペンの上下にティーチ可能なマシンを追加します。
マウス操作のお絵描きゲーム例

ステップ 1: スプライト (ペン) を選択し、マウスを使用してその動きを制御します。

アニメートできる任意のスプライト (鉛筆) を選択します。名前を付けることもできます。鉛筆を選択し、色と名前 (青) を付けました。位置 X=0 および Y=0 の位置に配置します。つまり、ページの中央に留まります。

デフォルト位置を設定するためのペンの初期コード

上記のように、ユーザーがゲームを開始したときにどのように機能するかについて通知を受けるための簡単な手順も追加しました。

ステップ 2 : マウスがクリックされたときにキャンバスに色を追加します。

スプライトにマウスの移動制御を追加するために、次のコードを記述しました。

マウスを使用してペン スプライトを制御するためのコード ブロック

ユーザーは、マウス ボタンをクリックし、マウス ポインターでペンを移動して描画できるようになりました。

ステップ 3: 別のキーを使用して色を変更します。

特定のキーを押して色を変更すると、目に見える変化を示すために、鉛筆の色ごとに異なるコスチュームを作成しました。

各種キー押下時に色を入れ替えるコード

ステップ 4: ブロックを作成し、異なる色の異なるサウンドをブロックに割り当てます。

ブロックを作成し、それを複製して線を作成し、その位置を左端 (x=-240) に設定し、X 方向に 10 ステップごとに移動させました。これにより、ラインのように見えます

キャンバス上でブロックを移動するためのコード。ラグのため、一部のブロックの動きが遅れています

ステップ 5: スプライト (ペン) に指の動きの制御を追加します。

モーション ブロックの「マウス ポインタ」を「x & y に移動」に置き換えます。ストレッチでは、Handpose2Scratch エクステンションを追加します。

「人差し指のx」と「人差し指のy」をメインプログラムにドラッグし、スペースに入れます。

これにより、スプライトが人差し指にくっつき、キャンバス上を無期限に移動します。

ステップ 6: 人差し指で簡単に描画できるように、ペンの上下に教育可能なマシンを追加します。

教示可能なマシンで、イメージ プロジェクト オプションを選択します。

https://teachablemachine.withgoogle.com/train

モードをトレーニングするために、2 つのクラス (Pen Up、Pen Down) を作成しました。手順は簡単です。クラスを作成し、Web カメラを使用してモデルを作成します。トレーニングの出力は次のようになります。

TM でのイメージ プロジェクト モデルのトレーニング。

次に、モデルをエクスポートし、URL をコピーしました。

Stretch では、Teachable Machine 拡張機能 (TM2Scratch) を追加します。

画像分類モデルの URLブロックをメイン プログラム (コード) にドラッグし、「Mouse down?」を置き換えます。「画像は___」ブロックで。

トレーニング済みの教示可能なマシンリンクをモデル URL に追加します。予測をペンダウンに設定します。

TM によるペン属性の更新されたコード

すべてをフォローした後、これが私たちが思いついたものです。

ここから最終的なコードをダウンロードします。https://drive.google.com/drive/folders/1w4FAdF74Uw74eZG-Fia1GtEOUkHMYfJU?usp=sharing

クレジット

コーディング:イシャーン・グプタ&アナント・パトリック

着想、概念化、ブレインストーミング、計画: Ishaan Gupta & Vedakshiaggarwal

コンテンツ ドキュメント : Ishaan Gupta & Vedakshi Aggarwal

そして、それは完了です!とても簡単ですね。

ここで時間を過ごしてくれてありがとう.❤