Moonblock入門

北九州高専で行われた公開資料で使用した資料です．

1. 高専で学ぶ初めての プログラミング 
 MoonBlock で ゲーム を ゼロ から 作ろう ！ By 北九州高専 コンピュータ研究部
2. 今日の目次 CHAPTER 1 プログラミングってそもそもなんだろう ? CHAPTER 2 MoonBlockでゲームを作ろう ！
3. CHAPTER 1 プログラミングって そもそもなんだろう ? ?
4. 命令① ▪▪▪▪ 命令② ▪▪▪▪ 命令③ ▪▪▪▪ 命令④ ▪▪▪▪ これやって~ OK~ プログラム(命令) コンピューター プログラミング & プログラム って な~に ? プログラミング : プログラムを書いていくこと プログラム : コンピューターに依頼する 「こんなことをしろ!」 という命令
5. プログラム の イメージ図 ① 順次実行 A B C 繰り返し A C B 条件 満たす 満たさない A B C 条件分岐
6. プログラム の イメージ図 ② 関数(サブルーチン) A B C SUB D E SUB SUB D A B B A C C E
7. プログラム の 例 家を出る 街を歩く ネコに会ったか? その猫は ミケネコか? → → → → ↑ ↑ 写真撮影!! 満たす 満たす 満たさない 満たさない 例: ミケネコ の 写真 を 撮影 する プログラム
8. CHAPTER ２ MoonBlockで ゲームを作ろう！
9. ここで質問!! プログラミング をする際 に どんな事 をする 必要 ありそう?
10. こんな感じで ムズかしいコードを 書くと思いました?
11. これは 半分、 正解 半分、 間違い
12. テキストプログラミング (文字でプログラミング) ビジュアルプログラミング (文字以外でプログラミング) いろんな種類のプログラミングの方法がある
13. テキストプログラミング (文字でプログラミング) ビジュアルプログラミング (文字以外でプログラミング) 今回のはこちら
14. MoonBlock って ? 誰でも ビジュアルプログラミング で ゲーム を作れる というサービスです。 ビジュアルプログラミング なので ムズかしい プログラミング の 言語 を覚える必要がなく、 直感的 にゲームを作れます。
15. MoonBlock を開こう 任意のブラウザ(Webページを見るやつ) を開いて, http://www.moonblock.jp/ にアクセスしよう！ (IEだと動作が安定しないので,他のブラウザを推奨) ここにリンクを挿入
16. 画面の構成
17. 各ボタンの説明(1/2) キット: プログラミングに 必要なブロック が 　　　 用途ごとに分かれて入っている。 実行画面: プログラムの 実行結果 が表示される。 　　　　　ゲームの画面。「スクリーン」を押すと拡大。 Run: 作ったプログラムを実行。結果は実行画面に。 リセット: 作ったプログラムを全削除します。 　　　　復元は不可能です。 ここはやりながら覚えるので軽く流し見でOKです。
18. 各ボタンの説明(2/2) ゴミ箱: 配置したブロックをドラッグし削除します。 　　　 (こちらも復元は不可能です) セーブ: 作成したプログラムを次回以降も使えるように 　　 セーブすることが可能です。 ここもやりながら覚えるので軽く流し見でOKです。
19. 結局,どんなのを作るの? プレイヤーがマウスで くま を操作し、 爆弾 や スライム を 避けながら バナナ を回収する ゲームを作成します。
20. STEP1: くまを表示させよう(1/3) キット内の [パペット] ボックスを クリックする。 クッリクすることでブロックが出るので その中の [パペット]ブロック をドラッグ。 これで上記の写真のように パペットブロックが残ればOK！
21. STEP1: くまを表示させよう(2/3) キット内の [ビヘイビア] ボックスを クリックする。 次は [出現]ブロック をクリック。 その [出現]ブロック をドラッグし、 先ほどのパペットブロックに挿入。
22. STEP1: くまを表示させよう(3/3) 画面下部の [RUN] を クリックし実行する。 実行画面をクリックし、 画面中央に くまさん が現れれば成功。
23. STEP2: くまをマウスに追わせよう(1/2) [ビヘイビア]ボックスから [動き]ブロックを取り出す パペットに[出現]同様の方法で [動き]を挿入。
24. [動き]ブロックの 「ジグザグに移動」 というところをクリックし、 「タップしたところに向かって移動」 に変更 これで[RUN]を押し、実行すれば クマがマウスについてきます。 STEP2: くまをマウスに追わせよう(2/2)
25. STEP3: バナナを出現させよう(1/2) くま同様の方法で パペットを出す。 パペットの画像をクリックして、 数字の画像を選択する。 [ビヘイビア]から取り出した スピードブロックを挿入する。 スピードという部分をクリックし、 フレームに変更し、値を16にする。
26. STEP3: バナナを出現させよう(2/2) [出現]ブロック を挿入。 出現方法を 「ひとつだけでる」 から 「たくさんでる」 に変更。 これで実行すれば バナナが10個 表示される
27. STEP4: バナナを消してみよう [ビヘイビア]ボックス から [当たり判定] を取り出し挿入。 当たる相手を[くま],スコアを10に設定。 [ゲーム]ボックス から [スコアボード] を取り出し、 画面に配置 これで実行すれば くまとバナナが衝突すると バナナが消えて、 ゲーム画面の右上の スコアに 10pt が加算される。
28. STEP5: クリア条件を作ろう [リアクション]ボックスから [〇〇した時]ブロックを取り出し、 バナナに挿入。 〇〇の内容を 「パペットがタップされた時」 を 「全滅した時」 に変更する。 これで実行すれば バナナを全て回収すると ゲームクリアするようになる。 挿入したリアクションブロック内に [ゲーム]ボックスから取り出した、 [ゲームクリア]を挿入。
29. STEP6: 障害物を作ろう(1/2) くま同様の方法で パペットを出す。 パペットの画像をクリックして、 数字の画像を選択する。 [ビヘイビア]から取り出した スピードブロックを挿入する。 スピードという部分をクリックし、 フレームに変更し、値を24にする。
30. STEP6: 障害物を作ろう(2/2) [出現]ブロック を挿入。 出現方法は [たくさんでる] で個数はおまかせ。 くまと衝突した時に ゲームオーバー するようにする。 [ゲームオーバー]ブロック は [ゲーム]ボックス 内に存在する。
31. STEP7: 動く障害物を作ろう パペットを新しく作成し、 画像 をクリックして、 スライムの画像 を選択する。 このパペット内のブラック内容は 先ほどの障害物 と同じ ここに[ビヘイビア]ボックス内の [動き]ブロックを挿入して完成
32. STEP8: 背景画像を変更しよう [ゲーム]ボックス から [背景]ブロック を取り出し、 画面に配置 好きな背景画像を選びましょう
33. 今回の作成するゲームはこれで以上です。 MoonBlockを使えば他にも シューティングゲーム や、 アクションゲーム 、 パズルゲーム なども作成できます。