Graphics

phaser.io
Phaser - The fast, fun and free HTML5 Game Framework
https://phaser.io/phaser3/api/graphics
Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

一覧へ戻る

Overview

Graphicsゲームオブジェクトは、スクリーンに直接描画する機能を提供します。Canvas描画APIのエミュレート環境が用意されて、moveToやlineTo、arcなどのコマンドが利用できるようになります。この機能は高速に動作するWebGLのカスタムレンダラーを利用しているので、1フレームで何千という線や形状を描画することができます。

image

このGraphics機能だけを使ったゲームを開発することもできます。

Graphicsオブジェクトはそれらのコマンドリストに、transformを加えることが可能です。これにより、形状を回転したり、移動させたり、拡大・縮小させて描画できます。

Phaser3では現在、以下のものが利用できます。

  • setDefaultStyles
  • lineStyle
  • fillStyle
  • beginPath
  • closePath
  • fillPath
  • strokePath
  • fillCircleShape
  • strokeCircleShape
  • fillCircle
  • strokeCircle
  • fillRectShape
  • strokeRectShape
  • fillRect
  • strokeRect
  • fillPointShape
  • fillPoint
  • fillTriangleShape
  • strokeTriangleShape
  • fillTriangle
  • strokeTriangle
  • strokeLineShape
  • lineBetween
  • lineTo
  • moveTo
  • lineFxTo
  • moveFxTo
  • arc
  • save
  • restore
  • translate
  • scale
  • rotate
  • clear
  • generateTexture

Examples

黄色の矩形を描画する例です。

var graphics = this.add.graphics();

var color = 0xffff00;
var thickness = 2;
var alpha = 1;

graphics.lineStyle(thickness, color, alpha);

graphics.strokeRect(32, 32, 256, 256);

一覧へ戻る

Print Friendly, PDF & Email