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

Scratchと顔認識AIでつくる おにごっこゲーム 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)

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

使うツール とくべつなScratchでプログラミングします。 カメラを通して、鼻や手などの場所を調べられます。 https://stretch3.champierre.com/ 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 3

• https://stretch3.champierre.com/

キャラクターを動かす ● ● ● ● 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) ネコを動かす 座標（ざひょう） マウスの場所にネコを動 かす 鼻の場所にネコを動かす 4

ネコを動かす 座標（ざひょう）を使って、スプライト（キャラクター）を動かします。 座標とは、場所をあらわす数字のことです。 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 5

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

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

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

おにごっこゲームをつくる ● ● 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 鳥がネコを追いかける ネコと鳥のプログラムの ちがい 9

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

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

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

タイマーをつくる ● ● ● ● ● 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) タイマーをつくる 「タイマー」ブロック 時間を計って動きを止め る 「もし～なら」ブロック 「ずっと」と「もし～な ら」の組み合わせ 13

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

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

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

［おまけ］タイマーをつくる（はってん） 20秒たったらゲームを止めます。 プログラムの流れ ゲームをうごかす くりかえす タイマーが 20より大きい？ いいえ はい ゲームを止める 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 17

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

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

「ずっと」と「もし～なら」の組み合わせ〔1/2〕 ずっとにより、プログラムがくりかえされます。 タイマー もし タイマー > 20 なら すべてを止める ずっと もし タイマー > 20 なら すべてを止める 0.001秒 もし タイマー > 20 なら すべてを止める ずっと もし タイマー > 20 なら すべてを止める 0.002秒 （プログラムが終わる） ずっと もし タイマー > 20 なら すべてを止める 0.003秒 (時間はイメージ) 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) ずっと もし タイマー > 20 なら すべてを止める ずっと にもどる 20

「ずっと」と「もし～なら」の組み合わせ〔2/2〕 もしタイマーが20よりも大きいなら、すべてを止めます。 タイマー 20.000 もし タイマー > 20 なら すべてを止める ずっと もし タイマー > 20 なら すべてを止める （プログラムは止まっている） ずっと もし タイマー > 20 なら すべてを止める 秒 20.001 秒 20.002 秒 (時間はイメージ) 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) ずっと もし タイマー > 20 なら すべてを止める ずっと もし タイマー > 20 なら すべてを止める 21

おわりに ● ● ● 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) まとめ ふり返り ごあんない 22

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

ふり返り 学んだことをふり返りましょう（1分） たとえば... ● どんなところが、面白かった？ ● どんなところが、むずかしかった？ ● 学んだことを、今後どうしていきたい？ 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 24

プログラムのほぞん 作ったプログラムはパソコンにほぞんできます。 [ファイル] > [コンピューターに保存する] をえらびます。 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 25

praxiSpaceのご紹介 学校教育・受験勉強から少し離れた役に立つ学びを提供しています。 （イベントの例） 区分 小学生 低学年 中学年 高学年 中学生～ イベントの一覧や中身を 知りたい方は、公開資料 をご覧ください。 プログラミ ングとIT 考える力、 伝える力 https://www.docswell.com/c/ a9b43222-f5bd-441b-864b -c6f35cd1d950 (注) 画像は過去のイベントです。 対象学年の区分は目安です。実際にはより広い学年を対象としています。 株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0) 26

• https://www.docswell.com/c/a9b43222-f5bd-441b-864b-c6f35cd1d950

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

• https://loosedrawing.com/
• https://creativecommons.org/licenses/by/4.0/deed.ja

株式会社まなび梯 Some Rights Reserved. (CC-BY 4.0)