今回はRenderer(GDI)ノードを使ったグラフィック描画について。
GDIってのはGraphic Device Interfaceといって、アプリケーションとディスプレイやプリンタの仲介役みたいなやつ。よく知る必要はないのでv4ではグラフィック描画(簡易版)だと思っておくコトにする。もちろんDirectXを使用しての3Dグラフィック描画をするノードもあるがそれは後回し。

どれ位簡易版かっちゅーと。2Dに画面に線を引いたり、点を打ったり、円を描いたりって感じかな。
じゃあまず、新規パッチを開いてRenderer(GDI)ノードを一つ作る。

パッチウィンドウに長〜いノードが一つ出来る。そして背景が黒いウィンドウが開かれるね(サイズはとりあえずこのまま置いておく)。このウィンドウに図形を描画して行く。どうやって描画するんだっていうと、Renderノードの一番左端のInputPin、Layersって名前のピンに図形情報を送ってやらなければならない。

図形情報を送ってみよう。Circle(GDI)ってノードを一つ作る、名前通り円を描くノードだ。このノードのOutputPinのLayerをRenderノードのInputPinのLayerに繋ぐと、円の出来上がり。

ただこれヒシャゲちゃってるね。もちろん楕円を描いたのではない。試しにCircleノードの3つのOutputPinをマウスオーバーさせると設定可能項目がでる、左からX,Y,Rでつまりx,y座標での位置と半径Rが設定できるだけで楕円な訳ではない。

じゃあ何故ヒシャゲてる?実はグラフィックが描画されているウィンドウの座標の取り扱いにちょっとした決まり事があるそれは、
原点は描画ウィンドウの中心にあり、ウィンドウのx,y軸両方とも-1.0から1.0の間で表記するってこと、普通ならウィンドウの左上端を原点にx方向(画面左方向)へ何pixel、y方向(画面右方向)へ何pixelっていうけど。

なのでできたての描画ウィンドウは400x300pixelの4:3の大きさ、なので縦にひしゃげた見え方になる。もちろん、ウィンドウサイズを正方形にすれば解消できるが、それだけぢゃぁ困る。

でどうするか。Renderer(GDI)ノードの一番右のInputPin’Viewport matrix transformation’ってノードにスクリ−ンアスペクトを調整する行列を入力してやる。ちょっとムヅイけどやり方は簡単、AspectRatio(Transform)ノードをつくりそのOutputPinを先ほどのInputPinへコネクトしてやる。でもそれだけじゃ変わらないのでAspectRatioノードのAspect WidthとAspect HeightのInputPinをそれぞれ3,4に設定しておく。描画ウィンドウの比率を縦横逆にしていれてやればよい。横の図では分かりやすくする為IOBoxを使って設定しているがもちろんInputPinを右クリックor右ドラッグして変更して構わない。これで正円が描画される。
でも描画ウィンドウのサイズ(比率)をかえてしまうとまたひしゃげるので別の方法で対処する必要がある、けどまた後に。

いまのところはRenderノードには一つずつしか図形をコネクトできないんで、Circleノードの接続をはずして別の図形も描いてみよう。

• Line(GDI)は線を描くノード
• Point(GDI)は点を描く、タイプは左から3番目のInputPinで切り替え可能
• RaundRect(GDI)は角丸の長方形を作る。Radiusを0にすれば、普通の長方形。
• Text(GDI)はテキスト

他にカテゴリGDIで表示すると色々あるのが分かる。(カテゴリ表示は空ノードを作った直後に右クリック)

てな感じで終了。次はたくさん図形表示とInspektorノード