2D WebGL renderer Pixi.js v4【連載第五回】

前回の話

スプライトのグルーピングとContainerとParticleContainerの話でした。
今日はWebGLで図形を描き方です。

図形の描き方

canvasのjavascript書いたことある方多分この部分飛ばしずつ進んで良いと思います。
まずは、PIXI.Graphicsを使って、色々描いてみます。

// 四角を描く
var rectangle = new Graphics();

// lineStyle(width, color , alpha透明度)
rectangle.lineStyle(4, 0xFF3300, 1);

rectangle.beginFill(0x66CCFF);

// drawRect(x, y, width, height)
rectangle.drawRect(0, 0, 64, 64);

rectangle.endFill();

// 位置（四角の左上が基準として）
rectangle.x = 170;
rectangle.y = 170;
stage.addChild(rectangle);

// 円形を描く
var circle = new Graphics();
circle.beginFill(0x9966FF);

// drawCircle(x, y, radius半径)
circle.drawCircle(0, 0, 32);
circle.endFill();

// 位置（円の中心が基準として）
circle.x = 64;
circle.y = 130;
stage.addChild(circle);

// 楕円を描く
var ellipse = new Graphics();
ellipse.beginFill(0xFFFF00);

// drawEllipse(x, y, width, height);
ellipse.drawEllipse(0, 0, 60, 20);
ellipse.endFill();

// 位置（中心が基準として）
ellipse.x = 180;
ellipse.y = 130;
stage.addChild(ellipse);

// 角丸四角形を描く
var roundBox = new Graphics();
roundBox.lineStyle(4, 0x99CCFF, 1);
roundBox.beginFill(0xFF9933);

// drawRoundedRect(x, y, width, height, cornerRadius)
roundBox.drawRoundedRect(0, 0, 84, 36, 10)
roundBox.endFill();

// 位置（四角の左上が基準として）
roundBox.x = 48;
roundBox.y = 190;
stage.addChild(roundBox);

// 直線を描く
var line = new Graphics();
line.lineStyle(4, 0xFFFFFF, 1);

// スタート
line.moveTo(0, 0);
// エンド
line.lineTo(80, 50);

// 位置
line.x = 32;
line.y = 32;
stage.addChild(line);

// 多角形を描く
var triangle = new Graphics();
triangle.beginFill(0x66FF33);

// var path = [
//   point1X, point1Y,
//   point2X, point2Y,
//   point3X, point3Y
// ];
// 
// graphicsObject.drawPolygon(path);

triangle.drawPolygon([
    -32, 64,             //最初の座標
    32, 64,              //第二の座標
    0, 0                 //第三の座標
]);

triangle.endFill();

// 位置（アンカーは最初の座標を基準する）
triangle.x = 180;
triangle.y = 22;

stage.addChild(triangle);

完成体はこうなります。書き方もcanvasと比べたらあまり変わりがないです。

文字

PIXI.Text functionを使って文字を入れます。書き方もcanvasと似たような感じです。

var message = new Text(
  "Hello Pixi!",
  {fontFamily: "Arial", fontSize: 32, fill: "white"}
);

message.position.set(54, 96);
stage.addChild(message);

途中でテキストとスタイルを再定義することもできます。

message.text = "Text changed!";
message.style = {font: "16px PetMe64", fill: "pink"};

canvas時代から困ってた（自分だけかもしれませんが…）文字の改行問題、ここはスタイルで指定できます。

message.style = {wordWrap: true, wordWrapWidth: 5, align: "left"};

ここの注意点一つ気づきました。
英語の場合には単語一つを途中で切ることできないので（手書きか、Wordとかで書くとき、普通改行する時にハイフンを入れますが。）これはできませんので、単語が終わるまで全部出します。例えばwordWrapWidthが5しかない時でも。

逆に言うと、日本語って、半角スペースあまり入れないので、改行したい時必ず半角スペースを入れないといけません。
テストでやってみましたが、文字制限（ここ5で設定した）も全然超えてますね。

※1 style の下もう一個 style 定義すると上書きされちゃいます。途中で変えたい時もう一回まとめてfillとか入れ直さないといけないみたいです。

※2 pixi.jsにはBitmapTextを使えるようになってますが、掘り下げてみたら結構深いので、申し訳ございませんが、一旦飛ばします。
pixi.jsの公式ドキュメントのBitmap一応貼っておきます。

Class: BitmapText

次回からはやっと実務（ゲームみたいなもの）に近いもの触れます！
嬉しいです。

シリーズ：2D WebGL renderer Pixi.js v4

manmanrai.hatenablog.com

参考サイト

pixi.jsの公式サイト（英語）

www.pixijs.com

参考しているチュートリアル（英語）

github.com