2D表現を使おう

TVMLは2D画像や2Dテキストの表示をサポートしており、これを「ドローイング」と呼んでいます。
基本的な仕組みとしては2Dの透明なプレーン(板)を用意し、そこに画像やテキストを貼ります。
ちょうど、パワーポイントなどで画像やフォントを配置するのに似ています。
2Dイメージを、常に最前面に表示したい場合はこの機能を使用してください。

ドローイングを表示しよう

以下のTVMLを追加してください。

drawing: openbase ( name=BASE, x=20%, y=20%, layer=99, color=000000 )
drawing: settext ( name=TEXT1, parent=BASE, text=”<font r=’1.0′ g=’1.0′ b=’1.0′ size=’30%’><border r=’1.0′ g=’0.0′ b=’0.0′ width=’2′>アートですね</border></font>”, x=0%, y=0%, refmode=center, height=50%, width=50%, overtext=clip, basecolor=transparent )
drawing: setimage(name=PICT1, parent=BASE, filename=”./demo/book.jpg”, refmode=center, width=50%,height=50%, x=0%, y=0%, aspect=fit)
drawing: display ( name=BASE, switch=on )
wait ( time=5.0)
drawing: display ( name=BASE, switch=off )

1対多関係プレーン

drawing: openbase ( name=PICTBASE_0, layer=99, color=000000 )
drawing:setimage(name=PICT_00, parent=PICTBASE_0, filename=./sozai/neko.jpg, refmode=bottomright, width=50%,height=50%, aspect=fit)
drawing:setimage(name=PICT_01, parent=PICTBASE_0, filename=./sozai/neko.jpg, refmode=bottomleft, width=50%,height=50%, aspect=fit)
drawing:setimage(name=PICT_02, parent=PICTBASE_0, filename=./sozai/neko.jpg, refmode=topright, width=50%,height=50%, aspect=fit)
drawing:setimage(name=PICT_03, parent=PICTBASE_0, filename=./sozai/neko.jpg, refmode=topleft, width=50%,height=50%, aspect=fit)
drawing: display ( name=PICTBASE_0, switch=on )

wait ( time=4s)
drawing: display ( name=PICTBASE_0, switch=off )

以下のように表示されればOKです。
実行イメージ012
見ての通りかなり煩雑ですが、ここではざっと見て行きましょう。
まず、drawing: openbaseでベースプレーンを作り、BASEという名前をつけます。
次に、parent=BASEとして、このBASEを親にして、そこにdrawing: settextでテキストを、drawing: setimageで画像を配置しています。
これでBASEという2D画像が出来ましたが、これだけでは表示されません。
drawing: displayでswitch=onとして初めて表示されます。
wait(time=5.0)で5秒間表示し、switch=offにして消しています。

パラメータの詳細はTVML言語仕様を参照してください。

2Dの座標ルール

2Dを表示する際の座標は3Dの座標と大きく違うことに注意しましょう。
以下の図のようになっています。
2D座標
図はDrawingにおけるx,yパラメータの図です。
2D画像や2Dテキストの中心を基準点とし、基準点をx,yで指定した位置に移動させます。
単位は%です。
例えば2D画像の中心をスクリーン右側に移動させたい場合は,xパラメータを0以上にするとよいでしょう。

refmodeについて

refmodeというのは2Dの座標ルールででてきた基準点を変更するためのパラメータです。
refmode=rightとすれば2中心点は2Dプレーンの右端となります。
以下の図のようになっています。
2D座標refmode
例えば2D画像を画面左端に合わせて表示したい場合は、refmode=buttomleft,x=-50%,y=-50%とすればよいです。
あくまでx,yパラメータの基準点を決めるパラメータであることを覚えてください。
単位は%です。

alignについて

2Dプレーンに表示する画像またはテキストの位置を変更するパラメータが必要な場合はalignパラメータを使用してください。
ただし、よほど特殊なことをしない限りは本パラメータは使用する機会はないでしょう。

height,widthについて

drawing自体の大きさを制御するパラメータにheight, widthがあります。
2Dプレーンの高さと幅が設定でき、2Dプレーンに親プレーンが存在した場合は、そのプレーンの大きさを基準とした比率で計算されます。
親プレーンがない場合はスクリーンサイズを基準とします。単位は%です。
例えば画面の半分を黒の画像で覆いたい場合は、height=100%,width=50%,refmode=rightと指定すれば表現できます。

プレーンの親子関係

プレーンには親子関係を指定できます。
単色のプレーンに画像を重ねたり、画像に文字を重ねたりといったことが可能です。
親子関係にはルールが存在しており、以下の図でそれを説明しています。
プレーンの親子関係
単純な親子関係は上記4種類しか組めません。また、孫関係までは対応していません。親1に対して複数の子を持つことは可能です。ただし子プレーンのレイヤーは同じとなるので、重なるように画像を配置した場合、最初に呼び出した画像が優先されて表示されます。
親子関係の使い道としては親のプレーンのサイズを変更すると、子は親のプレーンサイズをベースにリアルタイムに変更します。また、親のプレーンを消すと同時に子プレーンも消えるといったことも可能ですので管理が楽になります。

Drawing使用例

タイトル&サブタイトル

skipscript ( switch=on )
drawing: openbase ( name=TITLEBASE_0, layer=99, color=000000 )
drawing: settext ( name=TITLE_00, parent=TITLEBASE_0, text=<font r=’1.0′ g=’1.0′ b=’1.0′ size=’30%’>AAA</font>, x=0%, y=0%, refmode=center, height=50%, width=50%, overtext=clip, basecolor=transparent )
drawing: settext ( name=SUBTITLE_01, parent=TITLEBASE_0, text=<font r=’1.0′ g=’1.0′ b=’1.0′ size=’15%’>BBB</font>, x=0%, y=-20%, refmode=center, height=50%, width=50%, overtext=clip, basecolor=transparent )
drawing: display ( name=TITLEBASE_0, switch=on )
skipscript ( switch=off )
wait ( time=4s)
drawing: display ( name=TITLEBASE_0, switch=off )

対多関係プレーン

drawing: openbase ( name=PICTBASE_0, layer=99, color=000000 )
drawing:setimage(name=PICT_00, parent=PICTBASE_0, filename=./demo/book.jpg, refmode=bottomright, width=50%,height=50%, aspect=fit)
drawing:setimage(name=PICT_01, parent=PICTBASE_0, filename=./demo/book.jpg, refmode=bottomleft, width=50%,height=50%, aspect=fit)
drawing:setimage(name=PICT_02, parent=PICTBASE_0, filename=./demo/book.jpg, refmode=topright, width=50%,height=50%, aspect=fit)
drawing:setimage(name=PICT_03, parent=PICTBASE_0, filename=./demo/book.jpg, refmode=topleft, width=50%,height=50%, aspect=fit)
drawing: display ( name=PICTBASE_0, switch=on )
wait ( time=4s)
drawing: display ( name=PICTBASE_0, switch=off )