2016年09月04日

インベーダーゲームを作ってみる(2)Arduboy向けの画面設計

Wikipediaによると、初代のインベーダーゲームは白黒で、画面を縦に使い、解像度は横224×縦260ドットだったそうです。
上下のスペースを得点表示と残機表示に使っています。
iv01.png
(画像はWikipediaより)

Arduboy用の画面は白黒128×64ドットですので、もちろんそのままでは表示できません。
ちなみにゲームボーイの画面は4階調160×144ドットだったそうなので、それよりさらに低スペックです。
2:1という横長のアスペクト比をどう活かすかが難しいところです。

ペイントソフトでドット絵を描きながら、悩んだ末に下図のような画面設計としました。
iv02.png

縦が64ピクセルですので、アスペクト比を4:3とするなら横86ピクセル程度となりますが、わずかに広げて横88ピクセルをゲーム画面に使うことにしました。
残りはスコア表示と残機表示に使っています。

ゲーム画面の中身ですが、インベーダー一匹を横5ドット×縦3ドット、インベーダー同士の隙間を横2ドット、縦3ドットとしました。
従って、インベーダーは横7×縦6ドットの中に一匹ということになります。
ちなみにオリジナルでは、インベーダーは16×16ドットの中に一匹だったようです。

インベーダーは沢山いるほうが本物の雰囲気に近づけるように思いましたので、一匹あたりの表現力は捨てて、インベーダーの数を重視しました。
インベーダーのデザインは、オンラインで公開されている「Pixel Invaders」を参考にしています。(少しだけ変更しましたが。)

Yoda's Video Arcade - Play 8-Bit Retro Game Pixel Invaders - free online retro game | free online game 8-bit style

オリジナルのインベーダーゲームは横11匹×縦5行ですが、一列減らして10匹×5行にしました。
これでも、編隊全体としては横68ドット×縦27ドット必要になります。
iv03.png

インベーダーの移動距離は、横方向は1ドット、縦に下がるときは3ドットとしました。
Wikipediaの画像などを見ると、オリジナルの移動距離は横2ドット、縦8ドットだったようです。
iv04.png


インベーダー以外のキャラクタの移動は、UFOと自機は1ドット、自機弾と敵弾は2ドットです。


敵弾は、オリジナルでは3種類あるということでしたので、3種類×2通りのグラフィックスを作成しました。(ここはちょっとこだわりポイントです。)
幅1ドットだとさすがに表現力に限界があるので、横2ドットにしています。
オリジナルでは、敵弾は横3ドット縦8ドットを4ドットずつ移動させているように(ビデオを見る限りでは)思われます。

また、自機弾も敵弾も陣地に当たると爆発しますので、そのパターンを用意しています。
敵弾の爆発パターンは下図に載せていませんが、2×2ドットの正方形です。
iv05.png


最後にUFOですが、倒したときに点数がUFOに重なって表示されます。
「UFOの得点」はインベーダーゲームの攻略の非常に大きなポイントだったらしいので、点数の表示は再現したいところです。
UFOは7×3ドットにしたので、3桁の数を表現するにはドット数が足りないのですが、かなり無理やり「50・100・150・300」を表現してみました。
iv06.png
タグ:Arduboy
posted by boochow at 17:09| Comment(0) | Arduino | このブログの読者になる | 更新情報をチェックする

2016年09月03日

インベーダーゲームを作ってみる(1)どんなゲームだったのか

picovaders.png


先日MFT2016で購入したArduboyですが、作ったゲームがブロック崩しの移植だけでは寂しいので、Arduboyをターゲットにしたインベーダーゲームを作ってみました。

もう一応完成していて、コードは以下のGitHubで公開しています。

boochow/picovaders

HTML5用のシミュレータはこちらです。(移動はカーソルキー←→、弾発射はCTRLキー)

picovaders.html


ここでは備忘録を兼ねて、中身の解説を書いておこうと思います。

まず「インベーダーゲームの分析」について情報収集しました。
ゲームそのものについては、Wikipediaや、作者の西角友宏氏のインタビュー記事が詳しいです。

スペースインベーダー・今明かす開発秘話――開発者・西角友宏氏、タイトー・和田洋一社長対談 - 日経トレンディネット

インベーダーゲーム開発秘話! - 週刊アスキー

スペースインベーダー - Wikipedia

Space Invaders - Wikipedia, the free encyclopedia

インベーダー発案

上の記事にもあるように、インベーダーゲームがブロック崩しから発想を得て作られた、というのは有名な話です。

しかし、実際には当時のハードウェアでたくさんのキャラクタを動かすのは大変です。
そのために行われたプログラミング上の工夫が、結果的にインベーダーゲームの独特の画面や、数々の裏技を作り出しているようです。

そのような、インベーダーゲームの実装が垣間見える情報は「2ちゃんねる」が参考になります。

■ 「インベーダー」をトコトン追及したい ■

ここにいろいろ書かれていることの中から、当時のプログラムを知るうえで参考になる情報を引用してみます。

・インベーダは、左下のヤツから1int(1/60秒)に1匹ずつ移動する。
 ゆえに、インベーダーが少なくなると移動が速まる。
・インベーダーの弾は3種類ある。画面上同時に存在するのはこの3つ。
 A.左右非対称にトゲが付いているもの
 B.左右対称にトゲが付いているもの
 C.波形のもの
 弾Aは、砲台に一番近い列から発射される。
 弾B・Cは、あらかじめ決まった列から順次発射される
・UFOは25秒おきに出現する。左右どちらから出るかは、自機のショット
 回数(奇数偶数)で決まる。インベーダーが7匹以下だと出ない。
・UFOの得点は、自機のショット回数で決まる。
 50 50 100 150 100 100 50 300 100 100 100 50 150 100 100 (以降ループ)
・UFOの出現中は、弾Cは発射されない。つまり、この時は同時に2発しか出ない。
・面クリアするごとにインベーダーの初期位置が下がるが、9面をクリア
 すると2面の配置に戻る。
・インベーダの消滅音は毎回微妙に異なる。これは基板上の発振回路のタイミング
 に依存しいるため。(希に2回鳴ることがあるのもこのせい)

インベーダーは、最初に出現したら、まず右方向に動きます。
これを間違えると、名古屋のときに、方向がおかしくなります。

最下段のインベーダーの最初の出現位置は、ビーム砲台から、

 1面 : −10段目
 2面 : −8段目
 3面 : −6段目
 4・5・6面 : −5段目
 7・8・9面 : −4段目

となります。

そうすれば、名古屋の際、4・5・6面は、
方向が逆になるのも再現されます。

敵の弾、相殺できるのとできないのがあるけど何か法則はあるの?

 当たり判定の順番の問題だったような。
 自弾移動ー>当たり判定ー>消滅  が先か
 敵弾移動ー>当たり判定ー>消滅  が先かという。

因みに、当たり判定は描画データをグラフィック画面とANDする事で
判定していますので、1ドット単位で正確です。


インベーダーは、下から上に向かって波打つように動きますが、一回の描画処理が1/60秒で終わるように、一度に1匹ずつ動かしていたのですね。
スタート時のインベーダーは全部で55匹ですから、1秒近くかけて全体を動かしていることになります。

1/60秒という制約があるのは、昔のブラウン管は電子線が画面を毎秒60回、左から右、上から下へスキャンすることによって描画しており、表示内容の変更は下まで行った電子線を上まで戻す間に行っていたからです。
今では、あまり実態のない制約だと思いますが、ゲームでは今でも1/60秒という周期を便利に使っているようです。
Arduboyも、画面更新速度(フレームレート)は最速で1/60秒ごととなっています。

タグ:Arduboy
posted by boochow at 22:18| Comment(0) | Arduino | このブログの読者になる | 更新情報をチェックする

2016年08月20日

Visual Studio用のArduino開発プラグインを試してみた

Arduinoの開発環境は、PCなどの環境と比べるとデバッグが大変です。
iPhoneやAndroidはエミュレータを使って開発できますが、Arduinoはデバイスが外部につながっているのでエミュレーションが通用する範囲は限界があります。

とはいえ、ステップ実行や実行中に変数の内容を確認するくらいは、できて欲しいものです。
以前も書いたように、私もESP8266用PNGデコーダはVisual Studioで開発してからESP8266へポーティングしていました。

今回Arduboyの開発を調べていたら、Visual Studio 2015にはArduino開発用プラグインがあることを知り、試してみました。
これはサードパーティ製のツールのようで、無料で使えます。有償のプロフェッショナル版もあります。

インストール方法など、参考にした記事はこちらです。

Arduboy開発にVisual Studioを使う - Qiita

また、本家のマニュアルはこちらです。

Table of Contents - Arduino IDE for Visual Studio and Atmel Studio

このプラグインを入れると、一応ブレークポイントを設定したり、実行時の変数の内容を確認することができるようになります。
(ただし、確認したい内容が変わるごとにビルドしてアップロードしなければならないようですが・・・)

このデバッガ機能は有償版にしかありませんが、インストール後45日間は無料で使えます。
有償版の料金は、学生/ホビイスト向けは$25/1CPU、$45/3CPU、商用版は$75/1CPU〜となっています。


というわけで45日間しか使えないデバッグ機能を試してみました。

インストール後はVisual Studioに下図のようなツールボタンが追加されます。
ハイライトされているのがビルド&アップロード&実行のボタンです。

vMicro01.png


また、「開く」メニューに「Arduino Project」が追加されます。
Arduino用.inoファイルを選択すると、Visual Studio用のプロジェクトファイルが生成されます。
(このファイルにはArduino IDE関係の情報なども書き込まれているようで、Arduino IDEのディレクトリを変更するなどしたときは、プロジェクトファイルを一旦削除しないと動作がおかしくなることがありました。)

vMicro02.png



これでどの程度デバッグができるのか、試してみました。
実験に使うコードはArduboy用ブロック崩しです。

まず、ブレークポイントを設定します。
すると、ブレークポイントの右上に歯車アイコンが現れます。
ここでブレークポイントでの処理内容を設定をします。

vMicro03.png


処理内容として、ラケットの位置を表す変数racketの内容を監視してみます。

「アクション」にチェックを入れます。
「出力ウインドウにメッセージを記録する」の欄は、
{変数名=?}
という文字列があると、変数名で指定した変数の値を観測できます。
今回は
racket={racket=?}
と記入しておきます。
「実行を続行します」をチェックすると、ブレークポイントでも停止しなくなります。

vMicro04.png


この状態でプログラムをビルドしてアップロードすると、Arduboy側で動作しているプログラムのログがPC側の画面に出力されます。
ログに含まれている変数の値は、別ウインドウで確認することができます。

vMicro05.png


同時に1つ以上の変数をチェックすることもできます。
ボールの座標を表示させてみました。

vMicro06.png
vMicro07.png


また、「条件」を設定すると、条件が成立したときのみブレークポイントを有効にすることができます。
以下の例では、ボールのY座標がSCRNHEIGHT-1より大きいとき、Y座標を出力して停止します。

vMicro08.png


設定できる条件には、変数の値の条件以外にHit Countでも行えます。
これは関数milis()の値が、(1)指定した値のとき(2)指定した値の整数倍のとき(3)指定した値以上のとき に成立します。
milis()は時間ですので、一定時間おきにブレークポイントを有効にすることができます。
また、milis()の代わりに自分でヒットカウンターを指定することもできます。この設定はプロパティウインドウで行えます。

vMicro09.png


ブレークポイント全体の管理は、Visual Studioのブレークポイントウインドウで行えます。

vMicro10.png



感想ですが、とりあえず変数の内容が確認できるだけでも大助かり、というところではあります。

しかし、一旦ビルドしたプログラムを後からあれこれブレークポイントを設定したり、好きなところで一時停止させてその時点の変数の値を調べる、といったことはできないようです。
かろうじて、設定したブレークポイントを無効にすることはできます(歯車アイコンの隣のアイコン)。
その場合でもログファイル自体は出力され続けますので、コンティニューボタンを押しっぱなしにすることに相当するようです。
それ以上の変更(ブレークポイントの追加や条件の変更)を行った場合、再度ビルド→アップロードの手順が必要になります。

自分で手間をかけてシリアルポートにprintfしても、まあまあ同じようなことはできます。
ソースコードを汚さずにGUIから各種設定をできるところが大きなメリットだと思います。
ボードにデバッグ機能が付いたArduino M0 Pro Atmel Studioでもデバッグはできますので、用途に合わせてということになるでしょう。

なお、今回使用したVisual MicroはESP8266版Arduinoでも使えるようですので、そのうち試してみたいと思います。

Arduino ESP8266 in the Visual Studio IDE

posted by boochow at 00:53| Comment(0) | Arduino | このブログの読者になる | 更新情報をチェックする

2016年08月19日

Arduino Web EditorでGenuino 101を使ってみた

現在仕事は夏休みで、しかも暑くて出歩くどころではない、ということで、日頃の余暇不足を取り戻すべく連日ブログを更新しているわけですが、もう一つ放置していたボードがあったのを思い出しました。

Genuino 101です。

genuino101.jpg


これはインテルのCurieというチップを使ったボードで、「Arduino UNOの後継」という触れ込みです。
CPUも全く異なるのですが、ボード単体の機能面としては

・Bluetooth Low Energyを標準搭載
・6軸加速度センサを標準搭載

といったあたりが目新しいところです。
詳しい解説としては下記の記事があります。

Curie搭載の開発ボード「Genuino 101」を試す - Arduino UnoやGalileoとの比較から性能を検証する (1) Intelが注力するIoT分野の新製品 | マイナビニュース

私は単に新製品、というだけで発売時(3月の末ごろでした)に購入したのですが、仕事が忙しく、放置したまま忘れていました。
まあ、上記の新機能だけでは実はそれほど情熱が湧かなかったというのも本音なのですが・・・。


さてそれとは別に、先日新しく「Arduino Create」なるサービスが開始されました。
これはmbedなどと同じく、Arduinoの開発をオンラインで行えるというサービスです。
こちらの記事で知りました。

Arduino Createが正式リリースされました | スイッチサイエンス マガジン

サービスとしては開発環境「Web Editor」の他に、Arduinoから接続できるクラウドサービスなどもあるようです。

arduinocreate.png


しかし、クラウドのほうは対応ボード(現在のところYUN Shield、MKR1000、WiFi Shield 101)が必要なようです。
クラウドはMKR1000が国内発売されたら考えることにして、まずはWeb EditorでGenuino 101を動かしてみました。


現在、Web Editorは「招待制」になっていますが、実際には招待を希望すると翌日にはアカウントがもらえました。
立ち上げると、こんな感じの画面です。
左側がメニュー、右側が編集領域になっています。
mbedの環境よりもデザインは整理されている印象です。

webeditor01b.png


この状態では、まだボードが認識されていません。
Web Editorは、開発はWeb上ですが、ボードとWeb Editorを接続するために、PCに常駐ソフト(プラグイン)のインストールが必要です。
証明書の警告が出るなど、相変わらず微妙な感じではありますが、とにかくインストールします。
あとは普通にボードをUSBでPCに接続すると、常駐ソフトが認識してくれました。

ボードの種類と接続先のシリアルポートを選択できたら、まずはLチカです。
画面左の「Examples」から「01.Basics」を選ぶと、その中に「Blink」があります。

webeditor02b.png


コンパイルとボードへの書き込みは、右側のエディット領域の上部の「→」のボタンです。
このあたりは、IDEと同じなので、IDEに慣れていれば分かりやすいですね。

ボタンをクリックすると、コンパイルから書き込みまで自動で行われます。
処理中はボタンがBUSYの表示に変わります。

webeditor03b.png


これだけで、ボードにスケッチをアップロードできました。
mbedに比べるとファイルコピーの手間がない分、お手軽な感じです。

ちなみにGenuino101はLEDが緑色でした。

genuino101b.jpg



Lチカの次は、Genuino101特有の機能を試してみました。
画面左のLibrariesを選択し、検索フィールドに「Curie」と入力するとCurieの機能をサポートするライブラリとサンプルがいろいろ出てきます。

webeditor04b.png


まずは加速度センサを試してみます。
ライブラリ「CURIEIMU」の例題から「Accelerometer」を選びます。
webeditor05b.png

そして先ほど同様、ボードにアップロードします。

このスケッチは、シリアルポートに結果を出力しています。
シリアルポートの出力も、Web Editorから確認することができます。
画面左の「Serial Monitor」を選択すると、ボードのシリアルポートの出力がリアルタイムに表示されます。
これはなんだか不思議な感じです。

webeditor06b.png


なお、シリアルポートに出力するスケッチの場合、Web Editor側でSerial Monitorを表示するまで、動作がブロックされるようです。
最初いくつかのスケッチがうまく動作せず、悩んでしまいましたが、原因はこれでした。


ローカルでシリアルポートの出力を確認したい場合は、常駐ソフト(タスクバーにアイコンがあります)のメニューからシリアルモニタを開くことができます。
これは実際には常駐ソフトへブラウザからアクセスすることで実現されているようです。
下はサンプル「ASCIITable」の出力をローカルの画面で確認した様子です。

webeditor07b.png
webeditor08b.png



Bluetoothのサンプルも試してみました。
ライブラリ「CURIEBLE」にサンプルがあります。

webeditor09b.png


「LED」はスマホのアプリからBLE経由でGenuino101のLEDをオン・オフするものです。
下記に非常に分かりやすい記事がありますので、ここでは省略します。

Genuino (Arduino) 101 で BLE 経由でLチカさせる - Qiita


さて、ちょっと使ってみての感想です。
まずmbedと比べると後発ですが、その分よくできているように思います。
IDEでできることは、大体できるようです。

また、純正のライブラリやツールが常に最新の状態に保たれることも大きなメリットです。
最近もGenuino 101関連のアップデートがあったようです。

Arduino Blog – Intel releases an improved version of the Arduino 101 core!

ESP8266も、Arduinoからモデムとして使うだけであれば、そのうちライブラリが整備されそうです。

一方で、ESP8266をArduinoボードとして使うような、非純正のボードは現在サポートされていないようです。
ESP8266のCPUは他のボードとは異なりますので、専用のコンパイラが必要です。
ということは、オンラインコンパイラにESP8266用のコンパイラとライブラリを用意しなければならないわけで、ここらへんが課題なのではないかと思います。

オープンソースで公開されている様々なライブラリや、非純正のボードなども、Arduino環境の魅力の一つです。
そちらを重視するのであれば、まだIDE環境のほうに分があるようです。

Arduino Web Editor、純正のボードとライブラリだけで開発するには、結構良さそうな開発環境です。
リリースされたばかりのツールですから、今後に期待です。
posted by boochow at 00:48| Comment(0) | Arduino | このブログの読者になる | 更新情報をチェックする

2016年08月18日

GitHubを利用開始、Arduboy用ブロック崩しを公開

Arduboy用に作ったブロック崩しですが、せっかく作ったのでArduboyのコミュニティに投稿してみました。

ガイドラインを読むと、コードの公開先はGitHubを推奨されていましたので、昨日アップロードしたのと同じコードを拙い英語の説明をつけて以下で公開しました。

boochow/breakout-v: Simple breakout game for Arduboy

コミュニティに投稿したページはこちらです。

Breakout-v - vertical screen breakout - Arduboy / Games/Apps - Community

GitHubのアカウントはだいぶ以前に作ってあったのですが、活用していませんでした。
今回再びチュートリアルからやり直しました。
マークダウン記法もずっと昔は使っていたのですが、すっかり忘れていました・・・。
posted by boochow at 20:55| Comment(0) | Arduino | このブログの読者になる | 更新情報をチェックする
人気記事