2016年10月16日

Arduboy用画像作成ツール 解説

前回紹介したツールは基本的には単純なのですが、ウインドウ上に画像を表示する際の処理が若干分かりにくいかもしれません。

自分自身の備忘も兼ねて、解説を書いておきます。

下が表示部分の演算です。
ofRectangle bounds = ofRectangle(0, 0, img.getWidth(), img.getHeight());
ofRectangle sub = ofRectangle(0, 0, 512, 600);
sub.translate(offset);
sub = sub.getIntersection(bounds);

ofSetColor(255,255,255);
img.drawSubsection(sub.x - offset.x, sub.y - offset.y, sub.getWidth(), sub.getHeight(), sub.x, sub.y);

abimager01.png

imgが表示しようとしている画像で、スケーリングなどの処理は済んでいます。
スクリーン上での表示領域は左上が(0,0)、右下が(512, 600)で、これは固定値としています。

imgを実際に表示させるのが最後の行の命令drawSubsectionです。
これは、画像の一部を画面に描画する命令です。
パラメータは最初の2つが画面上の描画領域の左上の点(図のA)です。
次の2つが描画する画像(グレーの領域)の幅と高さです。
その次の二つが描画したい部分(グレーの領域)の左上の「画像データ上での」座標(図のB)です。
上のプログラムは、これら3組のパラメータを求める処理をしています。

img全体の領域(黒枠)を表す矩形がboundsです。

画像の中でスクリーンに表示したい領域(図の赤枠の領域)はスクロールで移動します。
画像の左上を(0,0)とすると、赤枠領域の左上の座標は、スクロールによってoffsetだけずれています。
赤枠の領域の大きさは、スクリーン上での表示領域の大きさ(512×600)と同じです。

赤枠と画像が重なっている領域が実際に描画すべき領域で、図ではグレーで表しています。
この領域は矩形同士の重なり部分を算出する演算getIntersectionで求めています。
その結果をsubに代入していますので、最終的にはsubはグレーの領域を表す矩形となります。

subの左上の点は図のBの座標に相当し、これを-offsetだけ移動することによって、スクリーン上での位置であるAの座標が得られます。
ラベル:Arduboy
posted by boochow at 21:33| Comment(0) | Windows | このブログの読者になる | 更新情報をチェックする

openFrameworksでArduboy用画像作成ツール

abimager.png

Arduboy用の画像変換ツールについては以前もちらっと書きましたが、一応動作するようになりました。
いつものことながら、コードはGitHubに上げてあります。

boochow/ArduboyImager

コンパイル済みのバイナリも一応こちらに置いておきます。
[2016/11/12追記]Mac版はこちらです。

説明ビデオも作りました。


ファイルを開いて、マウスの左クリックで切り取り、右下の「a C array」をクリックすればC言語用の配列定数が、「AbShell commands」をクリックすればabshell用のコマンド列が、クリップボードにコピーされます。

C arrayの例:
{
//width = 16, height = 16
0x09, 0xb0, 0x06, 0x49, 0x09, 0x36, 0x46, 0x48, 0x19, 0x07, 0x32, 0x08, 0x05, 0x13, 0x4e, 0x2d,
0x00, 0x00, 0x40, 0x00, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x60, 0xc8, 0x90,
};


AbShell commandsの例:
clear
bitmap 0 0 16 16
.x 09b00649093646481907320805134e2d0000400008000000000040000060c890


カラー画像を白黒へ変換するディザリングの処理は、下記で公開されていたライブラリを使わせていただきました。(古いためか、そのままだと動作しなかったので、若干修正しています。)

ofxDither | julapy

今回使ったのはopenFrameworksという以前も紹介したツールキットです。
画像処理に関しては、かなり機能が充実していますし、Javaではなくネイティブで動作するので高速です。

今回作ったアプリケーションは、画像処理はopenFrameworksとofxDitherですべて行っていますので、実質的には200行程度のものです。
その内、かなりの部分をGUIのハンドリングが占めており、開発の所要時間も、GUIライブラリの学習とユーザーインタフェースのデザインが半分以上だと思います。

使用したGUIライブラリは、標準的に用意されているofxGuiです。
ドキュメントはあまり整備されていないのですが、openFrameworksの付属のサンプルを見れば何とかなります。
提供されるGUI部品は、CGを生成するアプリを作るために必要な本当の最低限という感じで、ボタンもチェックボックスも見かけは同じですし、扱えるのは数値と論理値だけで、テキストを入出力する部品もありません。

典型的な、数値をスライダーで設定する場合、画像のスケーリングを例にとると、GUIに関するコードは以下のようになります。(抜粋です。)

ofApp.h :
		ofxPanel imageGui;
ofParameter<float> scale;
void scaleChanged(float & v);


ofApp.c :
void ofApp::setup() {
imageGui.setup("Image","settings-image.xml");
scale.addListener(this, &ofApp::scaleChanged);
imageGui.add(scale.set("Scale", 1.0, 0.125, 2));
}

void ofApp::scaleChanged(float &v) {
updateImages();
}

void ofApp::draw(){
imageGui.draw();
}


上記のコードでは、変数scaleはそれ単体でfloat型の変数として動作しますが、Listenerが設定されていて、値が変化するとofApp::scaleChangedが自動で呼ばれます。
(自動で呼びたくない場合は、値の変更にsetWithoutEventNotificationsを用います。)

ofxPanelは複数のGUIコンポーネントをまとめるオブジェクトで、scaleの値を変更するスライダーがofxPanelのインスタンスであるimageGuiへaddによって追加されています。


マウス操作のユーザーインタフェースデザインをどうするかは、一週間ばかり悩みました。

・マウスポインタの直下のエリアが自動で白黒化されるインタフェースが気に入ったので、これを活かしたい
・クリックすると、そのとき白黒になっている部分が取り込まれてデータを出力するのも自然で良い
・白黒化された状態の画像をウインドウ右側で常に確認できる機能も捨てがたい
・クリック&ドラッグで画像をスクロールさせたい

を全部実現するにはどうするか。
最終版では、白黒化された画像の領域を3つ(マウスポインタ直下、その画像を定位置で表示して確認、クリックして取り込んだ画像の確認)用意することで落ち着きました。
これによって、取り込んだ画像と現在の画像の比較をすることもできるようになりました。
ラベル:openFrameworks Arduboy
posted by boochow at 17:22| Comment(0) | Windows | このブログの読者になる | 更新情報をチェックする

2016年08月20日

Arduboyのシミュレータを試してみた

Arduboyのコミュニティサイトを見ていたら、Arduboy用のスケッチをVisual Studioでコンパイルして動作させるシミュレータがあったので試してみました。

Proton Arduboy Simulator (for Windows Visual C++ 2005) - Arduboy / Development - Community

Protonというクロスプラットホームのゲーム開発プラットホームを開発されている方が作られたようです。
エミュレーションではなくシミュレータなので、ArduboyのライブラリのAPIと互換のライブラリをWindows上に作成し、Arduboy用に書かれたスケッチファイルをコンパイルしてWindows用のアプリを生成します。


Proton Arduboy SimulatorをダウンロードするにはSVNクライアントが必要です。
以下の説明にあるように「TortoiseSVN」をインストールし、ダウンロード先のフォルダで右クリックから「SVN Checkout...」を選択します。
するとリポジトリのURLを入力するウインドウが出るので、下記のリンク先にあるとおり「svn://〜」のURLを入力します。

proton:download [RTsoft Wiki]

arduboysym00.png

ファイルにはArduboyのサンプルにあるブロック崩しが最初から含まれています。
プロジェクトファイルは「ArduboySim\windows」の中にあります。
Visual Studio 2015 Communityで問題なく実行できました。

arduboysym01.png


次に、自分で作ったブロック崩しを動作させてみました。
設定の仕方は以下のページに書かれています。

proton:arduboysim [RTsoft Wiki]

スケッチファイルは「ArduboySim\Arduboy」フォルダの中に、「ardu_main.cpp」というファイル名で入れます。
そして、スケッチファイルの「setup()」と「loop()」をそれぞれ「main_setup()」「main_loop()」という名前に変更します。

次に、Visual Studioでプロジェクトファイルを開き、プロジェクトエクスプローラで「ardu_main.cpp」ファイルを探します。
そして、右クリックで「プロパティ」を選択します。

arduboysym03.png


プロパティウインドウが開いたら、「C/C++」の「プリコンパイル済みヘッダー」を「使用しない」に設定します。

arduboysym02.png


なお、もともとのサンプルに含まれていた「bitmaps.h」「bitmaps.cpp」はプロジェクトから削除しておきます。


これで準備OKです。実行するとシミュレータ上でArduboy用スケッチが動作します。
カーソルキーとCTRLとZが十字ボタン・Aボタン・Bボタンに対応します。

arduboysym04.png


実際にはWindows用のプログラムとして動作していますので、ブレークポイントの設定や変数値の確認なども、下図のように通常のWindowsでのデバッグと同様に行えます。
これは素晴らしいですね。

ちなみに、SDL Debug GLの構成で動作しない場合は、ソリューションエクスプローラーのwinArduboySim上で右クリック→プロパティ→全般 で出力ディレクトリが「..\bin\」になっているかどうか確認してください。

arduboysym05.png


なお、「App.cpp」ファイルの「#define RT_ARDU_LANDSCAPE」の行がコメントアウトされているのを有効にすると、Arduboyを横にした状態で動作を確認することができます。
(ただ、残念ながらカーソルキーの動作までは回転してくれませんでした。)

arduboysym06.png
arduboysym07.png

さらに、この実行コードをHTML5ファイルに変換することができます。
さすがクロスプラットホーム用ツールです。
方法は下記のページに書かれています。

proton:html5_setup [RTsoft Wiki]

まずEmscriptenをインストールします。

Download and install − Emscripten 1.36.5 documentation

インストールしたらスタートメニューのEmscriptenから「Emscripten Command Prompt」を開き、「emsdk」と入力して応答があればインストール完了です。
環境変数PATHにEmscriptenのフォルダが追加されているので、いったんPCを再起動します。

HTMLファイルの生成コマンドは、「ArduboySim\html5」フォルダの中の「build_release.bat」です。
ただし、最初から入っている「build_release.bat」はサンプルのブロック崩しのソースファイルに合わせてありますので、編集が必要です。
現時点では56行目あたりからがその場所になります。
REM **************************************** APP SOURCE CODE FILES
REM set APP_SRC=%APP%\App.cpp %ARDUBOY%\ardu_main.cpp %ARDUBOY%\breakout_bitmaps.cpp
set APP_SRC=%APP%\App.cpp %ARDUBOY%\ardu_main.cpp
REM **************************************** END SOURCE

ソースファイルのリストにbreakout_bitmaps.cppというファイルが含まれていますので、これを取り除いています。


また、現在のバージョンはコンパイル時にSDLのインクルードファイルが見つからないというエラーが出ました。
やむなく音声は無しの指定にしました。(下記引用の赤い部分を削除)

2016/9/15:作者さんが修正してくれました。
SET CUSTOM_FLAGS= -DHAS_SOCKLEN_T -DBOOST_ALL_NO_LIB -DPLATFORM_HTML5 -DRT_USE_SDL_AUDIO -DNDEBUG -DC_GL_MODE -s LEGACY_GL_EMULATION=1 --memory-init-file 0 -Wno-switch -D__AVR_ATmega32U4__ -DRT_ARDUDEV -DRT_RUNS_IN_BACKGROUND -DRT_EMTERPRETER_ENABLED -s EMTERPRETIFY=1 -s EMTERPRETIFY_ASYNC=1


これで、「build_release.bat」ダブルクリックすればHTML5ファイルが生成されます。
(結構時間がかかります。)

結果、こんな感じのHTMLファイルが生成されました。
ちゃんと遊ぶことができます。(実物は→こちら
一緒に生成されたJavaScriptのファイルは3.6MBほどありました。

arduboysym08.png


Arduinoのシミュレータは世の中にはあまりありません。
開発ボードも周辺ボードも数が多いので、実際問題、サポートが困難なのでしょう。
関連のトピックが下記にありました。

Arduino simulator for debugging

しかし、ArduboyはArduinoベースとはいえ、ハードウェアのスペックは固定されており、外付けの機器も無く、用途もゲームのみ、ということでシミュレータが作りやすい条件だったのかもしれません。
かなり実用的なので、ありがたく使わせて頂こうと思います。
ラベル:Arduboy
posted by boochow at 18:36| Comment(0) | Windows | このブログの読者になる | 更新情報をチェックする

2015年10月17日

Visual Studioを触って気分転換

vs2013.png

このところArduino IDEばかり使ってきたので、ちょっと気分転換にMicrosoftのVisual Studioを使ってみました。

といっても、こちらの連載記事を一通りやってみたというだけです。

Insider.NET > 連載:簡単! Visual Studio 2013入門 - @IT

私のWindows上での開発経験は乏しく、5年以上前にTurbo Delphiをしばらく使っていたのみです。
しかし、Visual Studioは感覚的にはTurbo Delphiと大きくは違わず、意外とすんなり入れました。

やっぱりデバッガでステップ実行や変数のインスペクタが使えるのは良いですね。
ArduinoはIDEといっても実質的にはデバッガ機能は皆無ですので、デバッグではストレスが溜まります。
posted by boochow at 20:40| Comment(0) | Windows | このブログの読者になる | 更新情報をチェックする
人気記事