mechatronics / robotics
Blog
  • HOME »
  • Blog »
  • mygame

mygame

MyGame ボード チュートリアル

●● はじめよう ●● (1) MyGameボードの紹介 (2) ソフトウェアの準備 (3) Hello world ! (4) アップロードと実行 ●● いろいろ描いてみる ●● (1) 座標を知ろう (2) 点を描こう (3) 直線を描こう (4) 長方形を描こう (5) 円を描こう (6) 画像を表示しよう ●● 基本のプログラム ●● (1) 何もしないプログラム (2) 図形を動かす (3) ボタンを使う ●● PONG ●● (1) ボールを往復させる (2) 2次元に拡張 (3) パドルを追加 (4) パドルで打ち返す (5) 効果音と点数表示

4-(5) 効果音と点数表示

本機は圧電スピーカーを搭載していますのでビープ音を鳴らすことができます。ブロックは、「Arduino」→「入出力」カテゴリ―の中にある「サウンド ピン__ 周波数 __ 長さ__」を使います。「ピン」の番号は回路で「8」と決まっています。「周波数」は音の高さのことで、だいたい500~1000ぐらいの値にすると「ピー」という感じの音が鳴ります。880とすると上の「ラ」の音になります。「長さ」は音を鳴らす時間です。単位が「ms(ミリ秒)」ですので1000とすると1秒間です。ここでは短く「ピッ」という感じにしたいので100としました。 このブロックをパドルでボールを打ち返した部分に接続します。 点数も、パドルでボールを打ち返したら1点を加えることにします。点数を数える変数「score」を作って「0」で初期化します。「サウンド出力」を追加した同じところに「score」に「1」を加えるブロックを接続します。点数の表示はボールやパドルの描画を行なっているところで「数値を描画」ブロックを使って行います。 さらにゲーム終了時点で画面に「Game Over」の文字を表示します。パドルで打ち損なったところの「ずっと待つ(プログラム終了)」ブロックの前に「文字列を描画」ブロックを追加します。改行は「\」マークです。MACの場合は「option + \」で「\」です。 図4ー16 「初期設定」に変数「score」を追加 図4ー17 関数「bounceBall」を変更 図4ー18 ループに得点表示を追加 図4ー19 ゲームオーバー(実行画面) 以上で「PONG」ゲームは一応の完成とします。「意外と簡単」でしたか? それとも「こんな単純なゲームでも結構たいへん」でしたでしょうか。 終了するときには忘れずに「Save XML」ボタンで保存しておきましょう。 ■モバイル仕様 ゲームが完成したら「MyGame」ボードをモバイル(乾電池)仕様にして、家族や友人にプレイしてもらおう 図4ー20 乾電池駆動 インデックス

4-(4) パドルで打ち返す

パドルでボールを打ち返します。パドルとボールの当たり判定は図4-13を参照してください。ボールが上から落ちてきて縦方向の位置(ボール中心のY座標)が 画面高さ – padH – ballRad となったときに、横方向の位置(ボール中心のX座標)が padX 以上 (padX + padW)以下 ならばボールの縦方向速度「spdY」を「-1」にする、という方法で良さそうです。 図4ー13 ボールとパドルの接触 上の関係をプログラムします。3個の条件 ・posY = ( 画面高さ – padH – ballRad )          (A) ・posX ≧ padX                        (B) ・posX ≦ ( padX + padW )             (C) を同時に満たすことをプログラムで表現する方法はいくつか考えられますが、ここではこのようにしてみました。 「もし (A) なら」 YES → 「もし (B) かつ (C) なら」    YES → spdY = -1    NO → 何もしない NO → 何もしない あるいは、 「もし (A) かつ (B) かつ (C) なら」 YES → spdY = -1 NO → 何もしない でもOKです。「かつ」というのは「両方当てはまる」という意味です。 例)「東京都民」かつ「中学生」 →  東京都に住んでいる中学生 ここでは使いませんがもうひとつ「または」というのがあります。こちらは「少なくともどちらか一方が当てはまる」となります。 例)「東京都民」または「中学生」 →  全東京都民と日本中の中学生全員 図4-14を参考に関数「bounceBall」の中にブロックを追加してください。「かつ」のブロックは「論理」カテゴリ―の中にあります。 posY = ( 画面高さ – padH – ballRad ) のところが、 posY ≧ ( 画面高さ – padH – ballRad ) となっていますが、これはボールのY方向スピードとパドルの高さ寸法によってはボールがパドルの上面にぴったり載らない場合もあるのでその対策です。また( 画面高さ – padH – ballRad ) の引き算ですが、連続して引き算をするブロックがありませんので( ( 画面高さ …

4-(3) パドルを追加

画面下端でボールを打ち返すパドル(ラケット)を追加します。とりあえず画面下の中央付近に固定で描画します。 パドルの縦横寸法を表す変数(定数)「padW」(paddle width)、「padH」(paddle height)、パドルの位置を表す変数「padX」(paddle x)、「padY」(paddle y)を作成して、「初期設定」ブロックの中で初期化してください。具体的な値については図4-11を参照してください。パドルの描画は「長方形を塗りつぶし」ブロックを使います。 図4ー9 パドルの初期位置 図4ー10 パドルを追加(実行画面) 図4ー11 パドルを追加 プログラム パドルが追加できましたので、左右方向の位置を「L」「R」ボタンで変えられるようにします。ボタンの押し下げを検出するブロックは第3章で「_押された」ブロックを使いました。今回はボタンのクリックではなく押し下げを連続的に検出したいので、「ボタン__状態」ブロックを使用します。 ・もし「L」ボタンが押されていればパドルの横方向位置「padX」をマイナスする ・もし「R」ボタンが押されていればパドルの横方向位置「padX」をプラスする という内容でブロックを構成し、「アップデート50ms」ブロックの下に追加します。パドルの移動量は少なくともボールのスピードより速くなければ追いつけませんので、ここでは「2」としました。 また、プログラム内容がすぐにわかるように「コメント文」を追加しました。「コメント」ブロックは「Arduino」→「一般」カテゴリ―の中にあります。コメント文はプログラムの実行には関係しません。人が見てわかりやすくする目的で追加するものです。 図4-12を参考にブロックを追加してください。ゲーム機にアップロードして実行し、「L」「R」ボタンでパドルが左右に動くことを確認してください。 図4ー12 ボタン操作を追加 プログラム なお実際にプレイしてみるとわかりますが、ボタンを押し続けるとパドルが画面から消えて出て行ってしまいます。これはちょっと品位がありません。本来はパドルが画面端に到達したところでその位置「padX」をキープするようにプログラムするべきです。今回は、特に実害がありませんのでこれはこのままにしておきます。 インデックス 4-(4)パドルで打ち返す

4-(2) 2次元に拡張

続いてボールの動きを2次元に拡張します。これまではボールを水平方向に動かして左右の壁で跳ね返らせていましたが、今度はボールを斜め45度に動かして上下の壁でも跳ね返るようにします。ちょっと複雑になりそうですが実は非常に簡単です。横方向(X方向)のブロックをそのまま残しつつ、同じ内容の縦方向(Y方向)のブロックを追加するだけです。 変数「posY」(position Y)、「spdY」(speed Y)を新たに作成して、図4-7を参考にプログラムを完成させてください。「円を塗りつぶし」ブロックの「Y」のところを「posY」に、また「画面幅」を「画面高さ」に変更するのを忘れないでください。プログラムの中で壁に当たって跳ね返るところもボールを移動させるところも、横(X)方向と縦(Y)方向でまったく独立に互いに無関係にコントロールしていることを確認しましょう。ゲーム機にアップロードして、ボールが斜め45度に動いて四方の壁できちんとバウンドすることを確認してください。 図4ー6 円の2次元運動(実行画面) 図4ー7 Y方向の動きを追加 プログラム プログラムが少し長くなってきましたので、「関数」というものを使って見栄えを整えます。関数は、ひとまとまりの仕事を誰かに頼んでやってもらうようなイメージです。 「関数」カテゴリーから一番上のブロックをドラッグして「なにかする」となっているボックスを「bounceBall」に変更します。これがこの関数の名前となります。そして「ループ」の中のボールをバウンドさせている部分(「もし~実行」のかたまり)を丸ごと「bounceBall」のブロックの中に移動します。移動元には「関数」カテゴリの中にできている「bounceBall」ブロックを接続します。これは、ループの中から関数「bounceBall」を呼び出している、と表現します。 図4ー8 関数「bounceBall」プログラム 「MyGame」ボードに書き込んで同じ動作をすることを確認してください。 インデックス 4-(3)パドルを追加

4-(1) ボールを往復させる - PONG!

ここからはいよいよゲームプログラミングの世界に入っていきます。最初に作るのは、「PONG」と呼ばれるピンポンゲームです。壁に跳ね返って上から落ちてくるボールを左右に動く「パドル」で打ち返します。打ち返すごとに点数が入りますが、受け損なってボールが下に落ちたらゲーム終了です。 それでは順番に少しづつ作っていきます。まず、第3章で作った「正方形が左右を往復するプログラム」と同じものを作ります。 図4ー1 正方形の往復動作プログラム プログラム中で前回のものから2か所変更しています。図形が左右端に来たときのチェックを行っていた「posX = (画面幅 – 8)」と「posX = 0」をそれぞれ「posX  ≧ (画面幅 – 8)」、「posX ≦ 0」にしています。これは移動のスピードを3などにした場合に画面端への到達を拾い損ねる(例えば128は3で割り切れないため)ことを防ぐ目的です。 ゲーム機にアップロードして、一辺「8」の正方形が左右に跳ね返って動くことを確認してください。 せっかくですのでボールの形を「正方形」から「丸」に変更しておきましょう。「長 方形を描画」ブロックを削除して代わりに「円を塗りつぶし」ブロックを追加します。 円の半径は「4」としてください。 ブロックを削除するときに「Ctrl」キーを押しながらつまむと、下のブロックがくっついてきません。 図4ー2 円に変更 なお長方形の場合の作画位置の基準は左上の角でしたが、円の場合には位置の基準が 円の中心となります。このため「円を塗りつぶし」ブロックの「Y」には、円が画面か らはみ出ないように「4」を設定します。また右と左の壁との衝突判定に用いる値は、 それぞれ「画面幅 – 4」、「4」となります。 ゲーム機にアップロードして、半径4の円が左右に往復することを確認してください。 図4ー3 円の座標 図4ー4 円の往復動作(実行画面) ここでひとつ変更しておきます。例えば円の大きさが少し小さいなと感じて、円の半径を「4」から「5」に変更する場合を考えます。前のプログラムでは円の半径を直接「4」としましたから、プログラムの中で「円の半径」の意味で使っている「4」をすべて探してそれらを「5」に書き換える必要があります。今のところで5箇所の変更が必要です。これはプログラムの分量が増えてきたときにはなかなか面倒ですし、さらにミス(プログラムの場合「バグ」と言います。)の温床となります。 このようなときには「円の半径」に対しても「変数」を使って、意味のある名前(変数名)をつけておくと便利です。ただしこの場合「円の半径」は一応ゲームの実行中に変化しないということで、「定数」となります。 新たに「ballRad」(ball radius(半径))という名前で変数を作り、「ballRadに4をセット」のブロックを「ゲーム初期化」ブロックの下につなげてください。そしてプログラム中の5箇所の「4」を「ballRad」ブロックに変更します。 今後もし「円の半径」を変更したい場合には、「ballRadに4をセット」ブロックの数値のみを書き換えればよいことになります。 図4ー5 「ballRad」を導入 インデックス 4-(2)2次元に拡張

3-(3) ボタンを使う!

ボタンの入力を試してみます。「A」ボタンを押すたびに長方形が「縦長」に変形する、というプログラムを追加します。言葉で書くと、 ・もし「A」ボタンが押されたら、長方形の「縦」をプラス1する となります。 前節と同様に長方形の「縦」長さを変数「rectV」(rectangle vertical length)として、「もし」ブロックを使います。図3-11を参考にプログラムを改造してください。 ボタンの「A 押された」ブロックは、「MyGame」→「ボタン」のカテゴリーにあります。 図3-10  ボタンを使うプログラム実行画面 図3-11  ボタンを使うプログラム 第3章の最後は、長方形の縦の長さを画面に数字で表示してみます。ゲームを作成したときの得点表示などに利用できます。プログラムの最後の部分に「MyGame」→「描画」カテゴリ―から「数値を描画」ブロックを接続してください。表示する場所(X、Y)は適当で、数値には「rectV」を接続してください。 図3-12  数値の表示プログラム 図3-13  数値の表示プログラム実行画面 以上でプログラミングの基本練習は終了です。次章からいよいよゲームプログラミングを行なっていきます。 ■エラーが出たら・・・ プログラムをArduino IDEにコピーして「MyGame」ボードに書き込もうとして画面がオレンジ色になったときは、プログラムに間違いがあります。もう一度プログラムを見直してエラーを取り除いてください。ブロックの接続忘れ、あるいはArduino IDEの設定間違いなどをチェックしてみましょう。単純ミスの場合がほとんどです。 もう一つ少し厄介なのは、無事ボードに書き込みができたのに動作(画面の表示)が思っていたのと違うという場合です。こちらの場合も地道にプログラムを見直します。プラス/マイナス、不等号の向きの間違いなど原因はいろいろ考えられます。動作の様子から原因が予測できる場合もあります。 このようにプログラムの間違いを見つけて修正する作業を「デバッグ」(バグ(虫)を取り除く)と呼んでいます。プログラミングでデバッグは普通のことですから、気落ちせずに頑張りましょう。 図3-14  Arduino IDEでエラー インデックス 4-(1)ボールを往復させる – PONG!

3-(2) 図形を動かす!

図形をアニメーションで動かしてみます。長方形を表示する横方向の位置(X)を1コマに1ドット(1ピクセル)ずつ右方向にずらしていきます。ここで、プログラムの中で値が変化する「長方形を描画」ブロックのXの値を、「変数」というものを使って表現します。 「変数」は、書き換え可能なメモ用紙のようなものでその時々で何かの数字を書いておき、必要に応じて書き換えることができます。通常はアルファベットの文字(文字列)で名前をつけます。 まず、その「変数」をひとつ作ります。「変数」のカテゴリから「整数の変数を作る…」をクリックして、「posX」(position X)と入れて「OK」します。「posX」という名前の変数が作られます。 図3-4  変数「posX」を作成 変数「posX」を使う形にプログラムを修正していきます。 まず「長方形を描画」ブロックの「X」に接続されている数値「0」を削除して、代わりに「変数」カテゴリの中の「posX」ブロックを接続します。「X」の値をいろいろ変更したいからです。 この状態では変数「posX」に何も値が入っていませんので、「初期設定」のところで「posX」に「0」を書き込んでおくことにします。「変数」カテゴリから「posXに_をセット」ブロックを持ってきて「ゲーム初期化」ブロックの下に接続します。空白部分には数値の「0」を接続します。 さらに「アップデート50ms」の下にも「posXに_をセット」ブロックを接続し、「数値」カテゴリから「_+_」ブロックを空白部にに接続、空欄に「posX」を配置して「posX + 1」となるようにします。「posX」用紙に書かれている数字を消して、「その数字プラス1」を新たに書き込む感じです。 この部分が、フレーム(1コマ (50ミリ秒))ごとに長方形の描画位置(posX)を右方向に「1」ずつ移動させていきます。 図3-5  長方形を移動するプログラム 図3-6  長方形を移動 「My Game」ボードにアップロードして実行してみてください。長方形(正方形)が左から右に移動していけば成功です。 *図形が右端から消えてしばらくするとまた左端から現れることに気づくと思います。図形が消えてもプログラムはまだ続いていて、「posX」の値が最大値(255)を超えるとまた「0」から再開してしまうのです。普通の10進数で100の位を隠してしまうと、数値が100になったところでまた0に戻ったように見えるのと似ています。 次に長方形が画面の右端で跳ね返るようにしてみます。図形が右端に到達したら「posX + 1」を「posX – 1」にすれば良さそうです。ここではこの「+1」と「-1」を表す変数「spdX」(speed X)を用意して、最初は「spdX = 1」とし、右端に来たら「spdX = -1」に変更します。 「posX」のときと同様に「spdX」という名前で整数の変数を作ってください。初期設定のところで「spdXに1をセット」、ループの中の「posX + 1」の「1」の部分に「spdX」を接続します。とりあえずこれで実行して前と同じ動きをすることを確認しましょう。「Copy Code」ボタンでArduino IDEに貼り付け、矢印ボタンでボードに書き込みです。 図3-7  変数「spdX」を使う それでは跳ね返る部分のプログラムを作ります。やることは、 ・長方形が右端に来たら(「posX」が「画面の横幅 – 長方形の一辺」になったら)「spdX」を「-1」にする。 です。ついでに、 ・長方形が左端に来たら(「posX」が「0」になったら)「spdX」を「1」にする。 も加えておきましょう。 このように「もし~なら~をする」ということをやりたい場合は、「論理」の中にある「もし_実行」ブロックを使います。「もし_実行」ブロックを「アップデート50ms」の下に接続してください。今回画面の右端と左端で「もし」が二つありますので、「もし_実行」ブロックを少し変形します。歯車のマークをクリックして左側の「そうでなくもし」を右側の「もし」の下にくっつけます。これで2種類の「もし」をキャッチできるようになりました。もう一度歯車をクリックして閉じます。 図3-8  「もし」ブロックを使う 図3-9を参考に跳ね返り部分のプログラムを完成させてください。「もし」の横には右端での跳ね返りを実施するための条件を、「そうでなくもし」の横には左端での跳ね返りを実施するための条件を記述します。「_ = _」(イコール)のブロックは「論理」に、「画面幅」のブロックは「MyGame」→「機能」にあります。「_ – _」(マイナス)のブロックは「数学」にある「_ + _」(プラス)のブロックを持ってきてドロップダウンリストから「-」を選択します。「画面幅」のところは普通に数値で「128」としても同じ意味です。 「実行」の部分で、「spdX」の値「-1」または「1」を設定します。「もし」のブロックは、その条件に合致しなければそのまま素通りです。 「MyGame」ボードにプログラムを書き込んで実行してみましょう。図形が画面の左右端でバウンドして往復動作をすれば成功です。 図3-9  跳ね返りのプログラム インデックス 3-(3)ボタンを使う

3-(1) 何もしないプログラム!

本章ではゲームプログラミングの準備をしていきます。画面右上の「ゴミ箱」ボタンで表示されているブロックをすべて削除し、新たに図3-1のプログラムを作成してください。 図3-1  ゲームの基本プログラム 「初期設定」ブロック、「ループ」ブロックは「Arduino」→「一般」カテゴリの中にあります。「ゲーム初期化」、「アップデート」、「画面クリア」、「画面描画」ブロックは「My Game」→「機能」カテゴリーです。 「初期設定」ブロックの中でゲームの各種設定を1回だけ行い、「ループ」ブロックの中でゲームを進めていきます。「アップデート」ブロックを置くことで「ループ」の中を指定した時間(この場合50ms(ミリ秒)、1秒間に20回)ごとに実行することができるようになります。これを利用してゲーム画面のアニメーションを行ないます。 画面への表示内容は、「画面クリア」ブロックと「画面描画」ブロックの間に挿入します。「画面クリア」には「false」を設定することで、画面に表示されている内容をいったんすべて消去(黒で塗りつぶす)します。 このプログラムで「My Game」ボードにアップロードし実行してみてください。何も表示されないのが正解です。 続いて図形を表示してみます。「画面クリア」ブロックと「画面書き換え」ブロックの間に「長方形を描画」ブロックを挿入してください。 図3-2  長方形を描画プログラム 「My Game」ボードで実行してみましょう。第2章でやった時と同様に長方形(正方形)が表示されますが、前回とは表示の仕方が異なります。第2章の方式は1回表示してそれっきりでしたが、こちらは画面を消して新たに表示、を50ms(ミリ秒)ごとに繰り返しています。 図3-3  長方形を描画 インデックス 3-(2)図形を動かす

2-(6) 画像を表示しよう

小さな画像を作って表示することができます。「MyGame」→「描画」から「ビットマップ作成」ブロックと「ビットマップを描画」ブロックをドラッグして、「円を描画」ブロックの下に接続します。 図2-11  ビットマップ作成、描画ブロックを追加 まず作成する画像に名前を付けます。「ビットマップを作成」ブロックの下向き矢印をクリックして「変数の名前を変える…」をクリック、出てくるボックスに名前(例えば「pic1」)を入力して「OK」します。 図2-12  画像に名前を付ける 画像は8 x 8のマス目をクリックして作成します。チェックマークが入ったマスが白ドットに表示されます。画像の大きさ(ドット数)は「縦」と「横」の数値で変更することができます。8 x 8から16 x 16までとなります。 「ビットマップを描画」にはX、Yで表示画像の左上の座標を、「* 縦」、「* 横」で表示倍率を、「ビットマップ」で画像の名前を指定します。画像の名前は、ドロップダウンリストの中に先ほど命名した名前がありますので、それを指定します。 図2-13  ビットマップ作成、描画ブロックを設定 図2-14  画像を描画 インデックス 3-(1)何もしないプログラム

Page 1 / 212
contact


自作派のための本格指南書
好評発売中です

PAGETOP
Copyright © Meuse Robotics All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.