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);

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

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

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

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

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

subの左上の点は図のＢの座標に相当し、これを-offsetだけ移動することによって、スクリーン上での位置であるＡの座標が得られます。