Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Scratch でゲームプログラミング

#BMXUG 市川IT勉強会 2019.12.07 Scratch ゲームプログラミングのハンズオン資料

  • Login to see the comments

  • Be the first to like this

Scratch でゲームプログラミング

  1. 1. Scratch でゲームプログラミング 2019.12.07 #bmxug #bmxgg
  2. 2. (自己紹介) 木村 桂(きむら けい) 日本アイ・ビー・エム 平社員 趣味: - プログラミング - マンホール - 折り紙
  3. 3. Scratch(「スクラッチ」) • MIT メディアラボが開発したプログラミングの学習環境 • 基本的には個々の機能を持った「ブロック」を組み合わせ、「スプライト」と呼 ばれるキャラクターの挙動を制御する • ゲームの見た目を意識しながら作りはじめることができる • プログラミングにおける、いわゆる「構文」やその書き方を知らなくても使うこ とができる • 条件分岐や繰り返しといった、プログラミングの基礎的な要素を学ぶことが できる • オンラインで利用することもでき、特別な環境構築や準備をしなくても始める ことができる • プログラミング開始時点のハードルが非常に低い
  4. 4. Scratch にアクセス https://scratch.mit.edu/
  5. 5. Scratch 初期画面 ブロックパレット エディター ゲーム画面 ブロック 設定パネル
  6. 6. ブロックを使う ①設定パネルで 「スプライト1」を選択 ②「動き」カテゴリーの 「10歩動かす」ブロックを何度かクリック ③スプライト1の猫が少しずつ右に動く
  7. 7. エディターを使う ①「10歩動かす」ブロックを エディターにドラッグ&ドロップ ②エディター内の 「10歩動かす」ブロックを 何度かクリック ③スプライト1の猫が少しずつ右に動く
  8. 8. 繰り返し制御する ①「制御」カテゴリーの「ずっと」ブロックを 「10歩動かす」の周りを囲むようにドラッグ&ドロップ ②エディター内の 「ずっと」ブロックをクリック ③スプライト1の猫が右に移動し続ける ④赤ボタンで止める スプライト1の猫をゲーム画面の 中心に移動させる
  9. 9. ゲーム開始イベントを加える ①「イベント」カテゴリーの「緑旗が押されたとき」ブロックを 「ずっと」の上にドラッグ&ドロップ ②緑旗をクリックしてゲームスタートする ③スプライト1の猫が右に移動し続ける ④赤ボタンで止める スプライト1の猫をゲーム画面の 中心に移動させる
  10. 10. 猫が端まで移動したら向きを変える ①「動き」カテゴリーの 「もし端についたら、跳ね返る」ブロックと 「回転方法を左右のみにする」ブロックを 「10歩動かす」の下にドラッグ&ドロップ ②緑旗をクリックしてゲームスタートする ③スプライト1の猫が右に移動し続け、 端までいくと反対方向へ移動する ④赤ボタンで止める スプライト1の猫をゲーム画面の 中心に移動させる
  11. 11. 猫を縦方向にも移動させる ①設定パネルの「向き 90」 と書かれている部分をクリックして、 角度を 60 くらいに設定する ②緑旗をクリックしてゲームスタートする ③スプライト1の猫が壁にぶつかる たびに角度を変えて移動する ④赤ボタンで止める
  12. 12. コスチュームを確認する ①「コスチューム」タブを選択 ②2つのコスチュームがあることを確認 それぞれを交互に選択する ③コスチュームが切り替わるたびに 猫が歩いているように見える
  13. 13. コスチュームを入れ替える ②「見た目」カテゴリーの 「次のコスチュームにする」ブロックを 「10歩動かす」の下にドラッグ&ドロップ ③緑旗をクリックしてゲームスタートする ④猫が歩いているように見える ⑤赤ボタンで止める①「コード」タブを選択し直す
  14. 14. 猫を2匹に増やす ①設定パネルの「スプライト1」を 右クリックして、「複製」を選択する ③スプライト2の位置を調整して、 向きを 30 くらいにする ②「スプライト2」が追加される ④緑旗をクリックしてゲームスタートする ⑤2匹の猫が画面内を動き回る ⑥赤ボタンで止める
  15. 15. 主人公キャラクターを描く(1) ①画面右下のアイコンをクリックし、 「描く」を選択
  16. 16. 主人公キャラクターを描く(2) ①「スプライト3」が追加され、 画面左がコスチューム編集画面に ②猫から逃げる主人公の キャラクターをがんばって描く
  17. 17. 主人公キャラクターを描く(3) ①「スプライト3」の大きさを調整する (猫より少し小さくなる程度に)
  18. 18. 主人公の動きを設定(1) ①「スプライト3」を」選択したまま、 ②「コード」を選んで、 スプライト3の動きをプログラミングできるようにする ③「動き」カテゴリー内の「どこかの場所へ行く」の 「どこかの場所」と書かれた部分をクリックして、 「マウスのポインター」を選ぶ
  19. 19. 主人公の動きを設定(2) ①スプライト3のエディター画面で、 「緑旗が押されたとき」ブロック、 「ずっと」ブロック、 「マウスのポインターへ行く」ブロックを 図のように配置 ②緑旗をクリックしてゲームスタートする ④赤ボタンで止める ③主人公がマウスの位置に 合わせて移動することを確認する
  20. 20. 衝突判定を付ける(1) ①「制御」カテゴリから 「もし◇なら」ブロックと、 「すべてを止める」ブロックを 図のように配置する
  21. 21. 衝突判定を付ける(2) ①「調べる」カテゴリから 「○色に触れた」ブロックを選び、 「もし◇なら」の「◇」部分に ドラッグ&ドロップして格納する。
  22. 22. 衝突判定を付ける(3) ①「○色に触れた」ブロックの 「○」部分をクリックして、 色選択ダイアログを表示し、 一番下のスポイト部分をクリックする ②画面が暗転したら、 猫のオレンジ色の部分を 指定する
  23. 23. 衝突判定を付ける(4) ①「猫のオレンジ色に触ったら止まる」 というブロック群が完成したので、 まとめて「マウスポインターへ行く」の 下に移動する ②緑旗をクリックしてゲームスタートする ③主人公が猫にぶつかると止まることを確認
  24. 24. 音を鳴らす(1) ①「スプライト3」を選ぶ ②「音」タブを選択 ③左下のスピーカーから 「音を選ぶ」を選択
  25. 25. 音を鳴らす(2) ①(どれでもいいですが・・・) 「動物」カテゴリーの「Meow」あたりを選ぶ ②選んだ音が追加される
  26. 26. 音を鳴らす(3) ①「コード」タブを選択 ②「音」カテゴリーから 「ポップの音を鳴らす」を選んで、 「すべてを止める」の上にドラッグ&ドロップ ③「ポップ」と書かれた 部分をクリックして、 「Meow」を選択 ④緑旗をクリックしてゲームスタートする ⑤主人公が猫にぶつかると 選択した音が鳴ることを確認
  27. 27. 得点を記録する(1) ①「制御パネル」の「背景」を選択 ②「変数を作る」をクリック ③新しい変数名を “score” と入力して OK
  28. 28. 得点を記録する(2) ①ゲーム画面内に score の値が 表示される ②「緑旗が押されたとき」ブロック、 「score を 0 にする」ブロック、 「ずっと」ブロック、 「1秒待つ」ブロック、 「score を1ずつ変える」ブロックを それぞれ図のように配置
  29. 29. BGM を鳴らす(1) ①(「音を鳴らす」時と同様にして) 背景に BGM となる音を追加する。 (どの音でもよいが、「ループ」カテゴリーから選ぶのがオススメ)
  30. 30. BGM を鳴らす(2) ①「コード」タブを選択 ⑤緑旗をクリックしてゲームスタートする ⑥ゲーム中に BGM が鳴ることを確認 ③「ポップ」と書かれた 部分をクリックして、 BGM 曲を選択 ④「音」カテゴリーから 「終わるまでポップの音を鳴らす」を選んで、 追加した緑旗の下にドラッグ&ドロップ ②緑旗を新たに1つ追加
  31. 31. 背景を設定する(1) ①「背景を選ぶ」を選択
  32. 32. 背景を設定する(2) ②好きな背景を選ぶ
  33. 33. 完成! ①緑旗をクリックしてゲームスタートする ②猫に捕まらないように主人公を動かす。 捕まると、逃げた秒数が得点になる。 緑旗をクリックすると再ゲーム
  34. 34. 保存 ①メニューの「ファイル」-「コンピューターに保存する」を選択して、 作ったゲームをダウンロード
  35. 35. 作ったゲームに戻す ②メニューの「ファイル」-「Load from your computer」を選んで、 ダウンロードしたファイルを指定する ①ブラウザで Scratch のページを開き直す ③保存した時の状態に戻る
  36. 36. (おまけ) IBM Cloud を使ってスクラッチを動かす http://dotnsf.blog.jp/archives/1076306704.html

×