Scratchと顔認識AIでつくるおにごっこゲーム@praxiSpace

>100 Views

April 04, 25

スライド概要

praxiSpaceのイベントでの投影資料です。
Scratchで画像認識を使ったゲームを作ります。

▍対象者
9~12歳前後のScratch経験者(ブロックをつなげてプログラミングできること)

▍ゴール
顔を動かして遊ぶ、おにごっこゲームをつくる

▍内容
・キャラクターを動かす
・おにごっこゲームをつくる
・タイマーをつくる

profile-image

オンラインで無料の教育・学習系イベントを開催しています。主に子ども向けで、学校教育・受験勉強から少し離れた役に立つ学びを提供しています。 [運営]株式会社まなび梯 https://www.manabibashi.co/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
2.

イベントのゴール 顔を動かして遊ぶ、おにごっこゲームをつくります。 1.キャラクターを動かす 2.おにごっこゲームをつくる 3.タイマーをつくる 流れ 1 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

3.

使うツール とくべつなScratch(https://stretch3.github.io/)でプログラミングします。 カメラを通して、鼻や手などの場所を調べられます。 [新しいブロックをふやす] 2 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

4.

キャラクターを動かす 3 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

5.

ネコを動かす 座標(ざひょう)を使って、スプライト(キャラクター)を動かします。 座標とは、場所をあらわす数字のことです。 [プログラムをつくる場所] スプライト(キャラクター)やステージにプログラミングします。 4 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

6.

座標(ざひょう) スプライトの場所は X(よこ)と Y(たて)2つの数字で表します。 に動くと がふえる ネコの場所は が 150 が 0 画面中央は が 0 が 0 に動くと がふえる ネコの場所は が 0 が 150 5 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

7.

マウスの場所にネコを動かす マウスがある座標を調べて、その場所にネコを動かします。 「ずっと」と組み合わせると マウスの動きにネコがついて動くようになります 6 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

8.

鼻の場所にネコを動かす 鼻がある座標を調べて、その場所にネコを動かします。 7 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

9.

おにごっこゲームをつくる 8 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

10.

これからつくるゲーム 自分の顔を動かして、ネコが鳥からにげるゲームをつくります。 顔を動かして鳥からにげる (プログラミングずみ) ネコを追いかける 9 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

11.

鳥がネコを追いかける 鼻がある座標を調べて、その場所に鳥を動かします。 はたがおされたときの鼻の場所に向かって1秒かけて動かします。 (とちゅうで鼻の場所がかわっても、動く方向はかわりません) 10 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

12.

ネコと鳥のプログラムのちがい 時間 顔の場所 0 秒 (はたをおす) 0.5 秒 1秒 顔の場所に合わせて ずっと動く 11 顔が動いても 動く向きはかわらない 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

13.

タイマーをつくる 12 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

14.

タイマーをつくる にげる時間を計るタイマーをつくります。 1. きほん ゲームスタートからの時間を計る 2. はってん 20秒たったらゲームを止める 13 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

15.

「タイマー」ブロック タイマーブロックを使うと、時間を計れます。 タイマーを出す タイマーはプログラムとはべつに いつも動きつづけます。 14 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

16.

タイマーをつくる(きほん) ゲームスタートからの時間を計ります。 0 から時間を計りなおします。 15 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

17.

[おまけ]タイマーをつくる(はってん) 20秒たったらゲームを止めます。 プログラムの流れ タイマーが20をこえている? いいえ はい プログラムを止める 16 くりかえす 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

18.

「もし~なら」ブロック 場合によって動きをかえられます。 はい ニャー いいえ Parrot(鳥)にふれた? … 17 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

19.

時間を計って動きを止めるプログラム 「>ブロック」(~より大きい)と組み合わせて時間を計ります。 ネコと鳥の動きが止まります。 (タイマーは止まりません) 18 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

20.

「ずっと」と「もし~なら」の組み合わせ タイマー 0.001秒 「 」だけ 「 > もし タイマー>20 なら すべてを止める 」と「 」 > ずっと もし タイマー>20 なら すべてを止める (プログラムが止まる) ずっと > もし タイマー>20 なら すべてを止める > ずっと もし タイマー>20 なら すべてを止める 0.002秒 ずっと > もし タイマー>20 なら すべてを止める … … 20.001秒 ずっと > もし タイマー>20 なら すべてを止める ずっと もし タイマー>20 なら > すべてを止める (タイマーの時間はイメージです) 19 ずっとに もどってくりかえす ずっとに もどってくりかえす タイマー>20 なので すべてを止める を行う 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

21.

おわりに 20 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

22.

まとめ 座標やタイマーを使って、おにごっこゲームをつくりました。 21 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

23.

ふり返り 学んだことをふり返りましょう(1分) [れい] • どんなところが、面白かった? • どんなところが、むずかしかった? • 学んだことを今後どうしていきたい? 22 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

24.

本資料の権利と留意事項 [使用画像の出典] 画像・イラストは以下のサイトよりダウンロードして利用しております。 • Loose Drawing https://loosedrawing.com/ [本資料のライセンス] • 注記があるものを除いて本資料の「文章」は、株式会社まなび梯(以下「当社」)よりクリエイティブ・コモンズ・ライセンス (CC-BY 4.0)のもとに提供されています。 • なお、本資料のほかの部分(画像・ロゴなど)には、他の条件でライセンスされている第三者の コンテンツが含まれている場合があります。 [留意事項] • 本資料に掲載されている会社名、製品名などの固有名詞は、各団体の商標または登録商標です。 • 本資料に掲載されている製品名などには、必ずしも商標表示(™、®)を付記しておりません。 • 本資料の内容について正確な記述につとめましたが、当社は本資料の内容に対して何らかの保証をするものではありません。 • 本資料で得られた情報の使用から生じるいかなる損害についても、当社は責任を負わないものとします。 23 株主会社まなび梯 Some Rights Reserved. (CC-BY 4.0)