Rectangle - from Riverside

Phaser - The fast, fun and free HTML5 Game Framework

Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

一覧へ戻る

Overview

Rectangleクラスは矩形の情報を持つオブジェクトです。矩形はx座標、y座標、幅、高さの値で定義します。これは純粋な形状オブジェクトで、直接描画することはできません(補足参照)。

現在、以下の関数が利用できます。

Area
Ceil
CeilAll
CenterOn
Clone
Contains
ContainsPoint
ContainsRect
CopyFrom
Decompose
Equals
FitInside
FitOutside
Floor
FloorAll
GetAspectRatio
GetCenter
GetSize
Inflate
MarchingAnts
MergePoints
MergeRect
MergeXY
Offset
OffsetPoint
Overlaps
Perimeter
PerimeterPoint
Random
Scale
Union

Examples

128 x 256の座標に、幅32,高さ32の矩形のオブジェクトを作成する例です:

var rect = new Phaser.Geom.Rectangle(32, 32, 128, 256);

補足

以下、https://labs.phaser.ioからの例の抜粋です。

labs.phaser.io

Phaser 3

http://labs.phaser.io/view.html?src=srcgeomectanglerea.js&v=dev

var config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

function create ()
{
    var rect = new Phaser.Geom.Rectangle(250, 200, 300, 200);

    var graphics = this.add.graphics({ fillStyle: { color: 0x0000ff } });

    graphics.fillRectShape(rect);
}

Geometryは単独では描画できません。this.add.graphcs()でグラフィックオブジェクトを作成して、その関数に対して、作成したGeometryオブジェクトを引数で渡して描画しています。

Graphicsゲームオブジェクトの関数で、基本的な描画は可能なので、Geometryオブジェクトを利用しなくても矩形を描くことは可能です。

一覧へ戻る