JGUtilクラスは、ゲーム制作を手助けする便利クラスです。 利用頻度の高いものだけを格納するようにはしていますが、もしかするとあなたがこれから作ろうとするものがすでにあるかもしれません。 どのようなものがあるか、一通り把握しておくと制作の手間が減らせるかもしれません。
JGUtilを理解するために、CommonOffsetとCommonAreaを正しく理解する必要があります。 CommonOffsetやCommonAreaはTypeScript向けの便宜上の型で、CommonOffsetは「xとyのフィールドを持つオブジェクト」、CommonAreaは「xとyとwidthとheightのフィールドを持つオブジェクト」が該当します。
InputPointEventクラスはCommonOffsetでありCommonAreaではありません。 EクラスはCommonOffsetでありCommonAreaでもあります。 GameクラスはCommonSizeではありますが、xとyが無いためCommonOffsetでもCommonAreaでもありません。 またjgame.js内のオブジェクトに限らず、該当のフィールドさえ持っていれば何でも構いません。
なお、CommonOffsetは日本語表記の時には「座標」、CommonAreaは日本語表記の時には「領域」、CommonSizeは日本語表記はありませんが、カタカナ表記の場合には「サイズ」と記述されます。
このクラスはインスタンスを生成せず、静的なクラス関数を直接利用します。
static getCenterPoint(p:CommonOffset):CommonOffset { p:CommonOffset;//取得する座標または領域 引数にはCommonOffsetまたはCommonAreaが指定出来ます。 引数がCommonAreaの場合、自動的にその領域の大きさから中心点を計算します。 引数がCommonOffsetの場合、pをそのまま返します。 --- static getMargin(p:CommonOffset):CommonOffset { p:CommonOffset;//取得する座標または領域 引数にはCommonOffsetまたはCommonAreaが指定出来ます。 引数がCommonAreaの場合、その領域の大きさを/2した値をセットしたCommonOffsetを返します。 引数がCommonOffsetの場合、xとyが0のCommonOffsetを返します。 --- static intersect(p1:CommonOffset, p2:CommonOffset):bool { p1:CommonOffset;//衝突を検出する座標または領域 p2:CommonOffset;//衝突を検出する座標または領域 引数にはCommonOffsetまたはCommonAreaが指定出来ます。 二つの領域または座標が重なっていればtrue、そうでなければfalseを返します。 オブジェクト同士の衝突判定などに利用出来ますが、領域が指定された場合この関数はその領域を単純な四角形として扱い、また拡大縮小や回転の状態を考慮しない点に注意してください。 --- static getDistance(p1:CommonOffset, p2:CommonOffset):CommonOffset { p1:CommonOffset;//距離を計る座標または領域 p2:CommonOffset;//距離を計る座標または領域 引数にはCommonOffsetまたはCommonAreaが指定出来ます。 オブジェクト同士の中心同士の距離を計ります。戻り値はxの距離とyの距離がそれぞれ格納されているため、最長距離を知りたい場合Math.maxを併用する必要があります。 衝突判定などに利用出来ますが、拡大縮小や回転の状態を考慮しない点に注意してください。 --- static getMovePoint(p1:CommonOffset, p2:CommonOffset, power?:number, maxMove?:number):CommonOffset { p1:CommonOffset;//移動先の座標または領域 p2:CommonOffset;//移動元の座標または領域 power?:number;//1ピクセルごとの係数。この値が4でオブジェクト同士が4ピクセル離れている場合、移動量は16と判定されます maxMove?:number;//最大移動量。この値が40であれば、x, yどちらの移動量も40以内で返されます この関数は主にタッチされた場所へオブジェクトを移動させるために利用される事を想定しています。 二つのオブジェクトの距離から移動量を算出し、x方向とy方向の移動量を返します。 この関数の挙動を理解したい場合、シューティングゲームのサンプルが参考になるかもしれません。 http://jgame-js.sourceforge.jp/examples/vshooting.html --- static getDirectionAngle(p1: CommonOffset, p2:CommonOffset, minDistance?:number):Angle { p1:CommonOffset;//元の座標または領域 p2:CommonOffset;//先の座標または領域 minDistance?:number;//省略可能。最小距離 p1から見てp2がどの方向にあるかをAngle型で返します。距離がminDistance未満の場合、戻り値はnullになります。 タッチ処理での利用が想定されています。4方向のみ対応しています。 --- static getDirectionKeytype(p1: CommonOffset, p2:CommonOffset, minDistance?:number):Keytype { p1:CommonOffset;//元の座標または領域 p2:CommonOffset;//先の座標または領域 minDistance?:number;//省略可能。最小距離 p1から見てp2がどの方向にあるかをKeytype型で返します。距離がminDistance未満の場合、戻り値はnullになります。 タッチ処理でキーボードをエミュレーションする際の利用が想定されています。 --- static homingX(p1:CommonOffset, p2:CommonOffset, speed:number, t:number):bool { p1:CommonOffset;//追尾する座標または領域 p2:CommonOffset;//追尾する座標または領域 speed:number;//1ミリ秒辺りの追尾スピード t:number;//ミリ秒の経過時間。通常、Gameクラスのupdateイベントのイベントパラメータです この関数を実行すると、パラメータp1がパラメータp2をX方向のみ追尾します。 シューティングゲームで、updateイベント内での利用が想定されています。 --- static homingY(p1:CommonOffset, p2:CommonOffset, speed:number, t:number):bool { p1:CommonOffset;//追尾する座標または領域 p2:CommonOffset;//追尾する座標または領域 speed:number;//1ミリ秒辺りの追尾スピード t:number;//ミリ秒の経過時間。通常、Gameクラスのupdateイベントのイベントパラメータです この関数を実行すると、パラメータp1がパラメータp2をY方向のみ追尾します。 シューティングゲームで、updateイベント内での利用が想定されています。 --- static homing(p1:CommonOffset, p2:CommonOffset, speed:number, t:number):bool { p1:CommonOffset;//追尾する座標または領域 p2:CommonOffset;//追尾する座標または領域 speed:number;//1ミリ秒辺りの追尾スピード t:number;//ミリ秒の経過時間。通常、Gameクラスのupdateイベントのイベントパラメータです この関数を実行すると、パラメータp1がパラメータp2を追尾します。 シューティングゲームで、updateイベント内での利用が想定されています。 --- static orderDrawY() { EクラスのorderDrawフィールドに指定することで、Y値が高いものが常に手前に表示されるようになります。 この関数の挙動には注意してください。描画前に常にソート処理が行われるようになるため、スプライト数が極端に多い場面などでは、若干の速度低下の可能性があります。 アルゴリズムはバブルソートの応用を用いており、ゲームにおけるY座標の変動性を考慮した上で最適なアルゴリズムを選択してはいますが、遅くなる場合には別の手段が必要になるかもしれません。 --- static createLinearGradient(rect:any, colors:string[], offsets?:number[]):CanvasGradient { rect:any;//描画領域。Rectangle型で指定 colors:string[];//グラデーションの色 offsets?:number[];//グラデーションのオフセット値 線形グラデーションを生成します。この関数の戻り値は、Shapeなどの色として指定する事が出来ます。 colorsには、グラデーションで利用する色を配列で指定します。 offsetsには、グラデーションで利用する色のオフセットを指定します。値は0〜1の範囲で、必ず、colorsと同じ要素数を指定する必要があります。 --- static createRadialGradient(rect:any, radius1:number, radius2:number, colors:string[], offsets?:number[]):CanvasGradient { rect:any;//描画領域。Rectangle型で指定 radius1:number;//グラデーション内側の半径 radius2:number;//グラデーション外側の半径 colors:string[];//グラデーションの色 offsets?:number[];//グラデーションのオフセット値 円形グラデーションを生成します。この関数の戻り値は、Shapeなどの色として指定する事が出来ます。 colorsには、グラデーションで利用する色を配列で指定します。 offsetsには、グラデーションで利用する色のオフセットを指定します。値は0〜1の範囲で、必ず、colorsと同じ要素数を指定する必要があります。 --- static createPattern(image:any, repeat?:string):CanvasPattern { image:any;//パターンに利用する画像。HTMLImageElement、HTMLCanvasElement、HTMLVideoElementのいずれかが指定可能 repeat?:string;//リピート方法。repeat、repeat-x、repeat-y、no-repeatのいずれかを指定する 画像を用いたパターンを生成します。この関数の戻り値は、Shapeなどの色として指定する事が出来ます。 --- static getBrowser() { ブラウザ情報をjQuery(1.8まで)のbrowserプロパティと同様の形式で返します。一度取得した後はJGUtil.browserフィールドにキャッシュされます。 代表的なブラウザ判別方法は以下の通りです。 Chrome: .chrome Safari: .safari IE: .msie FireFox: .mozilla Opera: .opera Webkit(Chrome or Safari): .webkit --- static setCrispEdges(game:Game, crispEdges:bool) { game:Game;//crisp-edgesを設定するgame crispEdges:bool;//crisp-edgesの値 第二引数をtrueに設定すると、css4のimage-renderer: crisp-edgesと同様の描画方式に変更します。 ブラウザのサポート状況は今一つであり、またChromeのようにサポートしているブラウザでも逆に遅くなる事がありますが、唯一FireFoxでは高速化が見込めます。 高速化ではなく、描画方式の変更という意味合いでは有用かもしれません。 ---