プログラミング体験

プログラミング体験学習を随時受付中です（＾＾）
毎週水曜日　午後７時半〜午後９時までの２時間半（2,000円）
電話もしくはメールにて受付しております。お気軽にお問い合わせ下さい。

プログラミングの体験ということでMOONBlockを用いたゲームづくりを
行なっていただきます。

MOOBlockは株式会社ユビキタスエンターテインメントが開発する教育用のプログラミング言語です。一般的に皆さんが想像するプログラミングのように文字をたくさん入力するのではなく、
パズルのようなブロックを並べるだけで簡単にプログラミングできるという特徴があります。

そして今回作っていただくゲームのイメージは次のようなものです。

追い抜いて行く車を避けてくゲームです。
途中で落ちているコインを拾うとスコアが増えますが、
自分が操作する車が大きくなるのでかわしにくくなっていきます。
他の車とぶつかるとゲームオーバーです。

では早速作っていきましょう。
下のリンクからムーンブロックの画面を開いてください。

http://moonblock.jp/

こんな画面が出てきますね。
「START」と書かれている四角が実際のゲーム画面になります。
それ以外の黒い画面にブロックを置くことでゲームが作れます。
まずは操作に慣れるため、自分の操作する車を表示してみましょう。

上の手順が完了すると次の画面が出てきます。
クマの見た目になってるので変更していきます。

オレンジのパペットブロックのクマをクリックすると車の絵柄が選択できます。
車を選んでみましょう。
灰色の車が表示されます。
車のいろを変更するために先ほどビヘイビアブロックから出した
パペットの表示を変更するブロックをくっつけます。
ここまでできたら画面に表示する処理を入れましょう。
START画面に赤い車が表示されて入ればOKです。

このようにブロックを組み合わせることで色々な処理を作成していきます。
MOONBlockの使い方が理解できたところで、今回作るゲームに必要な処理を
整理しましょう。

自分の操作する車を画面に表示する。
背景を表示する
車を操作できるようにする。
敵の車を表示する
敵の車を動かす
敵の車とぶつかったらゲームオーバーにする
スコアを表示する
コインを表示する
コインをとったらスコアを増やして自分を大きくする。

1番目は先ほど行なったので2番目から順に実施していきます。

背景の表示

背景はゲームキットの中に入っていいます。
背景ブロックの中から「道路」を選択して「RUN」をクリックすると
背景が変わります。
背景ブロックは単体で使うので邪魔にならないところに移動させておいてください。背景の表示は以上で完了です。

3.車を操作できるようにする

一番はじめに追加した赤い車を操作できるようにします。
操作させる場合は「ビヘイビアキット」の動きブロックで行います。

ブロックが取り出せたら、選択肢の中から「タップしたところに向かって移動」
を選択して「くるま」ブロックにくっつけます。
これで「RUN」を押すと画面上でクリック、またはタップしたところに
車を移動させることができます。

車を動かすことができましたが、実際に車が画面上を動いているだけで
前に進んでいるようには見えません。
動いているように見せるため、上から下に白線が流れるようにして車が動いているように見せます。
MoonBlockに道路用の白線はないので、もともと用意されている白文字の0の画像を小さくして白線にします。

まずは数字の0を表示します。
車を表示した時と同じように「パペットキット」から「パペットブロック」を取り出します。そして、今回は車ではなく数字を選んでください。

数字のアイコンにした場合、初期が「１」になっているので「０」に変更します。車の色を変更した時とやり方は同じです。ビヘイビアブロックの中から
クマの絵が書かれたブロックを取り出します。
取り出したブロックを数字のブロックにくっつけると
クマの絵が「１」に変わるので、「１」をクリックします。
そして、アイコンを「０」に変更します
3-10の手順がわかりにくいですが、下記画像のようになっていればOKです。
それでは画面に表示してみます。
画面の上から下に流したいので一番上に表示してみましょう。
「ビヘイビアキット」からスピードとかかれたブロックを取り出します。
「スピード」と書かれている部分を「y軸」に変更して「０」のアイコンに
くっつけます。y軸は縦の位置を表ており、0が一番上となります。
これで0は一番上に設定されましたが、このままでは0のままなので
横幅をうんと縮めて線にします。
ビヘイビキットから先ほどと同じ「スピード」ブロックを取り出してください。
その中から横の拡大率を選択して値を0.2にして0のブロックにくっつけます。
そして、もう一つ「スピード」ブロックを取り出してください。
その中から縦の拡大率を選択して値を0.2にして0のブロックにくっつけます。
これで「0」を線のような形に変更できました。
次に0の動き方ですが、上から下に移動させる必要があるので
動きを追加します。
取り出したブロックの「ジグザグに移動」を「一方向に移動」で方向を下にして
「０」のブロックとくっつける。
次に下に動くスピートを設定します。
ビヘイビアキットからスピードブロックを取り出してスピードに80を設定して
アイコンのブロックにくっつけます。
0のアイコンは以下のようになります。

この段階ではまだ0はゲーム画面に表示されません。
画面に表示する処理を入れる必要があります
表示する方法は車の表示で利用した方法が利用できますが、今回は
一定時間経過後に２つの0を画面に表示させるため「クローン」という
方法を利用します。

次に条件を追加するため、「制御キット」から「もし」ブロックを取り出す
少し時間が進んだ場合に白線を表示したいのでロジックキットの「100コマに1度」を取り出して「10コマに1度」に変更して先ほど取り出したもしブロックに
はめ込みます。そしてそれをくるまブロックに組み込みます。
くるまブロックに追加するとこんな感じになります

次に数字を表示するクローン処理を追加します。
パペットキットから「クローン」を取り出してクローンする「アイコン」にして
くるまブロックに追加
この状態で「RUN」をクリックすると細い線状のアイコンが次々と流れていきますがくるまのいる上から出現してしまいます。
原因は「アイコン」のx座標が固定されていないためです。
そこでx座標を固定しましょう。
結果は次の通りです。
線が後ろに流れていくので、前に進んでいる感が増しました。
くるまのブロックは次のようになります。

タップして動作するところは理解しやすいと思います。
「０」の文字を出力する部分ついてですが、MoonBlockは1秒間に
30コマ流れるので、1秒間に3回白線をクローンしていく処理になります。
クローンされた「０」の文字は「アイコン」のブロックに従って
下に向かって流れていきます。
車の操作は以上です。

４.敵の車を表示する

車の表示については一番初めに実施した自分の車を表示する方法と
全く同じです。
思い出しながら青い車と灰色の車の２つを表示してみましょう。

上のようにを作れましたか？
出現位置が青の車と灰色の車で被ってしまうので、１台しか見えないですが
大丈夫です。次で動かしていきましょう。

５.敵の車を動かす

それでは敵の車を動かします。
動かせる敵の車は青と灰色の２種類ですね。
この２つの敵について動かし方を考えましょう。

青い車は上から出てくる。（自分の車が追い越す車）
まっすぐ走る車
灰色の車は下から出てくる（自分の車が追い抜かれる）
どこに走るかわからない車

これで作っていきます。
まずは青い車の方作っていきます。
「ビヘイビアキット」からスピードを取り出してスピードを80に変更して
「くるま_2」にくっつけてください。そして、出現を「上からたくさん出てくる」に変更。

青い車は上から降りてくるのですが、自分の車が追い抜いていくように
見えます。実際に「RUN」を押してみてみてください。

続いて灰色の車です。
くっつけると以下のようになります。

「RUN」を押して実行すると下から灰色の車が飛び出してきます。

６.敵の車とぶつかったらゲームオーバーにする。

敵の動きも完成したのでゲームオーバーの処理を入れていきます。
リアクションキットの「〜と当たったとき」を取り出し選択肢から「くるま_2」
を選択してくるまにくっつける
「〜と当たった時」ゲームなんかでよく聞く当たり判定というものです。
自分の車と敵の車がぶつかった時に実行処理を組み込みます。
「ゲームオーバー」はゲームキットの中に入っています。
これで青い車と自分の車がぶつかった時にゲームオーバーになります。

上記のようになります。
同じように灰色の車とぶつかった時にもゲームオーバになるように変更
してみてください。

７.スコアの表示

スコアはゲームキットに入っていいます。単体で（どこにもくっつけないで）
使用できます。

8.コインの表示

スコアは表示できたので、スコアの機能を入れていきます。
今回はコインを自分の車がとったら100点スコアに加算されるという
処理にしたいので、コインを表示させましょう。
コインの表示方法は「くるま、数字の0の表示方法と同じです」
手順の3-4〜3-10を参考に上からコインが出てくるようにブロックを
組み合わせてみてください。
下のようなブロックになります。

9.コインをとったらスコアを増やす

いよいよ最後のステップです。
今回はコインを自分の車がとったら100点スコアに加算されるという
処理にします。
今までに習った組み方が使えそうですね。

コインを取るということはコインとぶつかるということですね。
コインをとった後は消さないといけないですね。

組み方は１パターンではなくたくさんあります。
自分なりの組み方でスコアの計算を実現させてみましょう。