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

mygame

2-(4) 長方形を描こう

長方形は左上座標(始点)と幅、高さを指定します。「MyGame」→「描画」から「長方形を描画」ブロックを「直線を描画」ブロックの下に接続します。座標(X, Y)が始点となります。始点座標(20, 10)、幅30、高さ15の長方形を描いてください。 図2-7  長方形を描画 プログラム 値をいろいろ変えて実行してみてください。長方形の一部が画面からはみ出しても大丈夫ですが、幅と高さに負の値を設定することはできません。 また「長方形を塗りつぶし」ブロックを使うと長方形の内部を塗りつぶすことができます。           図2-8  長方形(50,10) W=30 H=15を描画 インデックス 2-(5)円を描こう

2-(3) 直線を描こう

直線(線分)は始点と終点を指定します。「MyGame」→「描画」から「直線を描画」ブロックを「点を描画」ブロックの下に接続します。座標(X0, Y0)が始点、(X1, Y1)が終点となります。(0, 0)と(30, 30)を結ぶ直線を描いてください。 図2-5  直線を描画 プログラム (X0, Y0)と(X1, Y1)の値をいろいろ変えて実行してみてください。始点と終点の上下左右の位置関係は気にする必要はありません。 また「描画」のカテゴリにある「縦線を描画」と「横線を描画」は垂直線と水平線を高速に描画したいときに使います。 図2-6  直線(0,0)-(50, 50)を描画 インデックス 2-(4)長方形を描こう

2-(2) 点を描こう

座標の仕組みがわかったところで画面に点を打ってみます。第1章のときと同様に「BlocklyCreator」でプログラムを作成してください。「文字列を描画」ブロックの代わりに「点を描画」ブロックを使います。 図2-3  点を描画 プログラム パソコンと「My Game」ボードをマイクロUSBケーブルで接続し、「Arduino IDE」を起動します。「Copy Code」ボタンでソースコードをコピー、「Arduino IDE」に貼り付け、「矢印ボタン」でボードにアップロードして確認しましょう。   XとYの値をいろいろと変えて座標と画面上の位置を確認してください。 図2-4  点(64,32)を描画 インデックス 2-(3)直線を描こう

2-(1) 座標を知ろう - いろいろ描いてみる

第1章で液晶画面に「Hello, world!」と表示させるのに、その表示位置を「X = 0, Y = 0」としました。このX、Yのように二つの数値を使って平面上の位置を表す方法を「座標」と呼びます。将棋盤上の駒の位置を表す方法と同じです。 図2-1  将棋盤 ただし将棋盤の場合横方向は右から左に数えますが、コンピュータ画面では通常左から右に数えます。またコンピュータ画面では「1」始まりではなく「0」始まりとなります。座標を表現するときには、 ( 横方向位置, 縦方向位置 ) のように書きます。 「My Game」ボードの液晶は横128ドットx縦64ドットですから、画面左上の座標は(0, 0)、画面右下の座標は(127,63)となります。 またほとんど例外なく横方向をX軸、縦方向をY軸と表現します。 図2-2  液晶画面の座標   インデックス 2-(2)点を描こう

1-(4) アップロードと実行

それでは「My Game」ボードにこのプログラムを書き込んでみましょう。Micro-B USBケーブルでパソコンと「My Game」ボードを接続します。 図1-21  ArduinoIDE設定 デスクトップのアイコンをダブルクリックして「Arduino IDE」を開いてください。メニューの「ツール」を開き、「ボード」を「Arduino Pro or Pro Mini」に設定、プロセッサを「ATMega328P(3.3V, 8MHz)」に設定します。また「シリアルポート」でボードがつながっているポートを選択します。ポートの番号はそれぞれで異なります。   次に「BlocklyCreator」上で「Copy Code」ボタンをクリックすると、生成されたArduino用のソースコードがパソコンのクリップボードにコピーされます。これをArduino IDEに持っていき、すべて上書きで貼り付けます。(Arduino IDE画面を一度クリックしてから、Ctrl+A(すべて選択)→  Ctrl+V(貼り付け)でもOKです。) 図1-22  ソースコードを貼り付け Arduino IDEの矢印ボタンでプログラムを「MyGame」ボードに書き込みます。ファイルの保存について聞かれますので「chapter1」などの名前で保存してください。 図1-24のように表示されれば成功です。   ここでいったん中断する場合は、「BlocklyCreator」画面上部の「Save XML」ボタンを押して「chapter1」と名前を付けて保存しておきましょう。「xml」という拡張子がつきます。次回開くときは、「Load XML」ボタンです。 図1-23  プログラムを書き込み 図1-24  実行画面 図1-25  プロジェクトを保存 インデックス 2-(1)座標を知ろう

1-(2) ソフトウェアの準備

「MyGame」ボードは、Arduino IDE開発環境でプログラム開発できるようになっていますが、これをさらに親しみやすくしたものがビジュアルプログラミング環境「Blockly Creator」(ブロックリークリエーター)です。本書では、「Blockly Creator」と一般的なArduino IDEを併用していきますが、プログラミングはすべて「Blockly Creator」で行いますのでご安心ください。 こちらの「Blockly Creator」サイト https://meuse.co.jp/blockly-creator にアクセスしてみてください。使い方は次節から説明していきます。 まずは、Arduino IDEのインストールを行ないます。これは「MyGame」ボードへのプログラムの書き込みに使います。 ダウンロードサイト: https://arduino.cc/en/Main/Software にアクセスし、Windows Installer, for Windows 7 and upをクリックします。 Macの場合はMac OS Xです。 図1-2  Arduinoダウンロード画面 ドネーションしない場合は、JUST DOWNLOADをクリックします。 図1-3  Arduinoダウンロード画面 ダウンロードしたファイル(arduino-1.8.13-windows.exe / arduino-1.8.13-macosx.zip)を実行してインストールを開始します。(数字の部分は変わります。) 図1-4  Arduinoインストール画面 I Agree → Next → Installと進みこの画面でインストール完了です。 図1-5  Arduinoインストール完了 デスクトップにできたArduinoのアイコンをダブルクリックして、Arduino IDEが開くことを確認してください。今はまだ使いませんので閉じておきましょう。 図1-6  Arduino起動画面   インデックス 1-(3)Hello world !

1-(3) Hello, world !

それでは最初のプログラムを作っていきましょう。「My Game」ボードの液晶画面に「Hello, world !」と表示するプログラムです。 パソコンのブラウザで https://www.meuse.co.jp/blockly-creator/ にアクセスして「BlocklyCreator」の画面を開きます。 最初は英語の表記になっていますが難しくありませんので慣れていきましょう。 図1-7  BlocklyCreator起動画面 まず言語の設定をします。右上の「English」となっているドロップダウンリストから「日本語」を選択します。表示が日本語になります。 以上で準備は終わりです。画面に「Hello, world!」と表示するプログラムを作っていきます。プログラムは、右側の空白のエリアに左側からブロックを選んで配置していくことによって作ります。 まず、「MyGame」→「機能」とクリックして現れるブロックの中から「ゲーム初期化」ブロックを選択して空白エリアのどこかに配置します。場所はどこでもOKです。「ゲーム初期化」ブロックは液晶画面に各種表示を行うための準備をするブロックでゲームを作成する際には常に必要です。 図1-8  「MyGame」→「機能」→「ゲーム初期化」 図1-9  「ゲーム初期化」ブロックを配置 続いて、「MyGame」→「描画」とクリックして現れるブロックの中から「文字列を描画」ブロックを選択して「ゲーム初期化」ブロックの下に接続します。 図1-10  「MyGame」→「描画」→「文字列を描画」 図1-11  「文字列を描画」ブロックを接続 「文字列を描画」ブロックはいくつか指定する項目があります。「X」と「Y」で文字列を描画する位置を、「文字列」で文字列の内容を、「サイズ」で文字列の大きさを、「W/B」で描画色(白/黒)を指定します。 「数学」から「123」と書かれた「数値」ブロックを選択して、「X」、「Y」、「サイズ」に配置します。「X」、「Y」は「0」に、「サイズ」は「1」に変更します。 図1-12  「数値」ブロック 図1-13  X、Y、サイズを設定 なお、ブロックは右クリックして複製することができます。 図1-14  ブロックを複製 また不要になったブロックは「ゴミ箱」か、ブロックのエリアにドラッグして削除することができます。画面内のブロックをすべて削除したいときは、上段のゴミ箱ボタンです。 次に文字列を指定します。「テキスト」カテゴリ―の中から「”_”」ブロックを選んで「文字列を描画」ブロックの「文字列」の空欄に配置します。ブロックをクリックして「Hello, world!」と入力してください。 図1-15  「文字」→「文字列」ブロック 図1-16  文字列を設定 次に描画色の設定です。こちらは「論理」カテゴリ―の「true / false(真/偽)」ブロックを使います。「true」なら黒地に白で描画、「false」なら白地に黒で描画です。(白地に黒で描画の場合は、あらかじめ白でベタに塗っておく必要があります。) 描画色の白/黒に「真」や「偽」の意味はありませんが、ここでは単に2種類あるものを区別するために「true / false」ブロックを使っています。 図1-17  「論理」→「true / false」ブロック 図1-18  描画色を設定 図1-19  「MyGame」→「機能」→「画面描画」ブロック 最後に「MyGame」→「機能」カテゴリ―の中の「画面描画」ブロックを「文字列の描画」ブロックの下に接続します。これはプログラムで設定した内容を実際の液晶画面に書き込むために必要です。 図1-20  プログラム完成 インデックス 1-(4)アップロードと実行

1-(1) MyGameボードの紹介 - はじめよう

「MyGame」ボードはプログラミング学習用のゲームボードです。128 × 64ドットのOLED(有機EL)ディスプレイを搭載し、Arduino(アルデュイーノ)システムで動く手のひらサイズのゲームボードです。 プログラミングは、初心者の方にもわかりやすく作られたブロック形式の開発環境「Blockly Creator」を使っていきます。入門用ですがきちんと動くゲームを制作することが可能です。 ゆっくり着実に学習していきましょう。 「MyGame」ボードは下記にて購入できます。 ミューズ・ロボティクス ショップ https://store.shopping.yahoo.co.jp/meuse-robotics/ *Micro-B USBケーブルが必要となります。 図1-1  「MyGame」ボード インデックス 1-(2)ソフトウェアの準備

Page 2 / 212
contact


ゲームでプログラミング入門!


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

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