setDrawOption - jgame.js Wiki - jgame.js

setDrawOption

jgame.jsで描画されるあらゆる要素には、setDrawOptionという関数を通して特殊な描画属性を設定出来ます。

これらはHTML5のCANVASの属性値とほぼ同じものなので、より詳しい情報はHTML5の情報サイトをご覧ください。下記ページはお薦めです。

http://www.html5.jp/canvas/ref.html

このWikiでも、簡単に解説します。

rotate

数値型の値をセットする事で、回転させる事が出来ます。少し計算が必要なので注意してください。例えば、下記の値は45度の回転を意味しています。

 e.setDrawOption("rotate", 45 * Math.PI / 180);

translate

x, yの値をセットすることで移動する事が出来ます。

 e.setDrawOption("translate", {x: 10, y: 10});

transform

難しい項目なため本ページでの詳細は割愛します。以下のように設定すれば、「何も変化しません」。

 e.setDrawOption("transform", {m11: 1, m12: 0, m21: 0, m22: 1, dx: 0, dy: 0});

scale

x, yの値をセットすることで拡大、縮小が出来ます。以下の例では、横を２倍、縦を３倍に拡大します。

 e.setDrawOption("scale", {x:2, y: 3});

fillStyle

画像の塗りつぶし色を指定します。Spriteなどでは特に効果がありません。

Shapeでは活躍の機会がありますが、通常はsetDrawOption直接ではなく、ShapeのsetColorを利用する事を推奨します。

font

描画に利用するfontを指定します。通常本項目が影響するのはLabelのみであるため、fontの変更をしたい場合setDrawOptionを直接ではなく、LabelのsetFontやsetFontSizeを利用する事を推奨します。

globalAlpha

0〜1の小数で透明度を指定します。例えば、下記の例のでは50%透過させます。

 e.setDrawOption("globalAlpha", 0.5);

上部にレイヤーを作り、そのレイヤーを半透明にすると綺麗に見えますので活用する機会が多いかもしれません。

lineCap

Shapeでは面白い効果が出ますが、本ページでは説明を省略します。

lineJoin

Shapeでは面白い効果が出ますが、本ページでは説明を省略します。

lineWidth

線の太さを決めます。Shapeでは利用する機会もありますが、setDrawOption直接ではなくShapeのsetLineWidthを利用する事を推奨します。

miterLimit

Shapeで利用機会はありますが、本ページでは説明を省略します。

shadowBlur

shadowColorやshadowOffsetと同時に利用する事で陰を付ける事が出来ます。LabelやShapeのサンプルにはこのオプションを使っているところがありますのでご参照ください。

非常に綺麗な視覚効果を出すため重宝しますが、LabelにはaddShadowという簡単に陰をつける関数もありますので、綺麗な影にこだわらなければそれほど使う機会はないかもしれません。

shadowColor

shadowBlurの解説をご参照ください。

shadowOffsetX

shadowBlurの解説をご参照ください。

shadowOffsetX

shadowBlurの解説をご参照ください。

strokeStyle

線の色を指定します。Spriteなどでは特に効果がありません。

Shapeでは活躍の機会がありますが、通常はsetDrawOption直接ではなく、ShapeのsetColorを利用する事を推奨します。

textAlign

文字描画の書式を指定します。Labelでのみ利用機会があります。

通常はsetDrawOption直接ではなく、LabelのsetTextAlignを利用する事を推奨します。

textBaseline

文字描画の際のベースラインを指定します。Labelでのみ利用機会があります。

通常はsetDrawOption直接ではなく、LabelのsetTextBaselineを利用する事を推奨します。

setDrawOptionについての特記事項

setDrawOptionは指定しない方がより高速になります。このため、rotateやscaleなどの基本的な項目でさえ、jgame.jsはデフォルトではサポートせず、オプション扱いとしています。

とはいえ、ゲーム制作では特にrotate、scaleはよく使うため、必要に応じてラッパーを作るなどしつつ、各位が努力によって積極的な活用をするべきです。しかしフレームワークとしてデフォルトでサポートして欲しい方は、60fpsの夢のためあきらめて下さい。

なお、Tileは特殊なプロパティ（disableTransform）によって、drawOptionの指定自体を無効化します。TileにdrawOptionを指定したい場合、disableTransformをdeleteするか、またはLayerに直接drawOptionを指定してください。

ただしTileは描画範囲が大きいため、全体マップを直接回転させるといった用途には向いていません。マップを回転させるなどの演出が必要な場合のより良い解決方法は、BufferedRendererによってTileの一部分をSprite化した後、そのSpriteを回転させる事です。