Moonblock入門 - Speaker Deck

Slide 1

Slide 1 text

高専で学ぶ初めてのプログラミング   MoonBlock でゲームをゼロから作ろう！ By 北九州高専コンピュータ研究部

Slide 2

Slide 2 text

今日の目次 CHAPTER 1 プログラミングってそもそもなんだろう ? CHAPTER 2 MoonBlockでゲームを作ろう！

Slide 3

Slide 3 text

CHAPTER 1 プログラミングってそもそもなんだろう ? ?

Slide 4

Slide 4 text

命令① ■■■■ 命令② ■■■■ 命令③ ■■■■ 命令④ ■■■■ これやって~ OK~ プログラム(命令) コンピュータープログラミング & プログラムってな~に ? プログラミング : プログラムを書いていくことプログラム : コンピューターに依頼する「こんなことをしろ!」という命令

Slide 5

Slide 5 text

プログラムのイメージ図 ① 順次実行 A B C 繰り返し A C B 条件満たす満たさない A B C 条件分岐

Slide 6

Slide 6 text

プログラムのイメージ図 ② 関数(サブルーチン) A B C SUB D E SUB SUB D A B B A C C E

Slide 7

Slide 7 text

プログラムの例家を出る街を歩くネコに会ったか? その猫はミケネコか? → → → → ↑ ↑ 写真撮影!! 満たす満たす満たさない満たさない例: ミケネコの写真を撮影するプログラム

Slide 8

Slide 8 text

CHAPTER ２ MoonBlockでゲームを作ろう！

Slide 9

Slide 9 text

ここで質問!! プログラミングをする際にどんな事をする必要ありそう?

Slide 10

Slide 10 text

こんな感じでムズかしいコードを書くと思いました?

Slide 11

Slide 11 text

これは半分、正解半分、間違い

Slide 12

Slide 12 text

テキストプログラミング (文字でプログラミング) ビジュアルプログラミング (文字以外でプログラミング) いろんな種類のプログラミングの方法がある

Slide 13

Slide 13 text

テキストプログラミング (文字でプログラミング) ビジュアルプログラミング (文字以外でプログラミング) 今回のはこちら

Slide 14

Slide 14 text

MoonBlock って ? 誰でもビジュアルプログラミングでゲームを作れるというサービスです。ビジュアルプログラミングなのでムズかしいプログラミングの言語を覚える必要がなく、直感的にゲームを作れます。

Slide 15

Slide 15 text

MoonBlock を開こう任意のブラウザ(Webページを見るやつ) を開いて, http://www.moonblock.jp/ にアクセスしよう！ (IEだと動作が安定しないので,他のブラウザを推奨) ここにリンクを挿入

Slide 16

Slide 16 text

画面の構成

Slide 17

Slide 17 text

各ボタンの説明(1/2) キット: プログラミングに必要なブロックが　　　用途ごとに分かれて入っている。実行画面: プログラムの実行結果が表示される。　　　　　ゲームの画面。「スクリーン」を押すと拡大。 Run: 作ったプログラムを実行。結果は実行画面に。リセット: 作ったプログラムを全削除します。　　　　復元は不可能です。ここはやりながら覚えるので軽く流し見でOKです。

Slide 18

Slide 18 text

各ボタンの説明(2/2) ゴミ箱: 配置したブロックをドラッグし削除します。　　　 (こちらも復元は不可能です) セーブ: 作成したプログラムを次回以降も使えるように　　セーブすることが可能です。ここもやりながら覚えるので軽く流し見でOKです。

Slide 19

Slide 19 text

結局,どんなのを作るの? プレイヤーがマウスでくまを操作し、爆弾やスライムを避けながらバナナを回収するゲームを作成します。

Slide 20

Slide 20 text

STEP1: くまを表示させよう(1/3) キット内の [パペット] ボックスをクリックする。クッリクすることでブロックが出るのでその中の [パペット]ブロックをドラッグ。これで上記の写真のようにパペットブロックが残ればOK！

Slide 21

Slide 21 text

STEP1: くまを表示させよう(2/3) キット内の [ビヘイビア] ボックスをクリックする。次は [出現]ブロックをクリック。その [出現]ブロックをドラッグし、先ほどのパペットブロックに挿入。

Slide 22

Slide 22 text

STEP1: くまを表示させよう(3/3) 画面下部の [RUN] をクリックし実行する。実行画面をクリックし、画面中央にくまさんが現れれば成功。

Slide 23

Slide 23 text

STEP2: くまをマウスに追わせよう(1/2) [ビヘイビア]ボックスから [動き]ブロックを取り出すパペットに[出現]同様の方法で [動き]を挿入。

Slide 24

Slide 24 text

[動き]ブロックの「ジグザグに移動」というところをクリックし、「タップしたところに向かって移動」に変更これで[RUN]を押し、実行すればクマがマウスについてきます。 STEP2: くまをマウスに追わせよう(2/2)

Slide 25

Slide 25 text

STEP3: バナナを出現させよう(1/2) くま同様の方法でパペットを出す。パペットの画像をクリックして、数字の画像を選択する。 [ビヘイビア]から取り出したスピードブロックを挿入する。スピードという部分をクリックし、フレームに変更し、値を16にする。

Slide 26

Slide 26 text

STEP3: バナナを出現させよう(2/2) [出現]ブロックを挿入。出現方法を「ひとつだけでる」から「たくさんでる」に変更。これで実行すればバナナが10個表示される

Slide 27

Slide 27 text

STEP4: バナナを消してみよう [ビヘイビア]ボックスから [当たり判定] を取り出し挿入。当たる相手を[くま],スコアを10に設定。 [ゲーム]ボックスから [スコアボード] を取り出し、画面に配置これで実行すればくまとバナナが衝突するとバナナが消えて、ゲーム画面の右上のスコアに 10pt が加算される。

Slide 28

Slide 28 text

STEP5: クリア条件を作ろう [リアクション]ボックスから [〇〇した時]ブロックを取り出し、バナナに挿入。〇〇の内容を「パペットがタップされた時」を「全滅した時」に変更する。これで実行すればバナナを全て回収するとゲームクリアするようになる。挿入したリアクションブロック内に [ゲーム]ボックスから取り出した、 [ゲームクリア]を挿入。

Slide 29

Slide 29 text

STEP6: 障害物を作ろう(1/2) くま同様の方法でパペットを出す。パペットの画像をクリックして、数字の画像を選択する。 [ビヘイビア]から取り出したスピードブロックを挿入する。スピードという部分をクリックし、フレームに変更し、値を24にする。

Slide 30

Slide 30 text

STEP6: 障害物を作ろう(2/2) [出現]ブロックを挿入。出現方法は [たくさんでる] で個数はおまかせ。くまと衝突した時にゲームオーバーするようにする。 [ゲームオーバー]ブロックは [ゲーム]ボックス内に存在する。

Slide 31

Slide 31 text

STEP7: 動く障害物を作ろうパペットを新しく作成し、画像をクリックして、スライムの画像を選択する。このパペット内のブラック内容は先ほどの障害物と同じここに[ビヘイビア]ボックス内の [動き]ブロックを挿入して完成

Slide 32

Slide 32 text

STEP8: 背景画像を変更しよう [ゲーム]ボックスから [背景]ブロックを取り出し、画面に配置好きな背景画像を選びましょう

Slide 33

Slide 33 text

今回の作成するゲームはこれで以上です。 MoonBlockを使えば他にもシューティングゲームや、アクションゲーム、パズルゲームなども作成できます。