导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

2D WebGL renderer Pixi.js v4 入门【第五回】

作者:广树·时间:2018-08-31 15:08:01·分类:JavaScript/jQuery/Vue

前情回顾

上回链接:2D WebGL renderer Pixi.js v4 入门【第四回】》

上回我们说了精灵的编组以及Container和ParticleContainer。

这次我们来说说WebGL的图形绘制吧。


图形绘制的方法

如果懂canvas自带的图形绘制功能的话,大可跳过这里。

首先使用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);

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的时候,换行普遍会使用‘-’,但是这里不行)。

单词会在结束之前全部输出。具体可以看下面的例子。

<点击查看效果>


反过来说,中文的情况下,不会使用半角空格去拆分单词,所以要换行的话就不得不使用半角空格。


PS1 如果中途要改变style的话会覆盖上面的设定,所以要重新定义fill。


PS2 pixi.js可以使用BitmapText,但是深入研究后发型并不简单,非常抱歉,这里先掠过。

这里姑且先放上pixi.js官方文档。

Class: BitmapText


下回将会有涉及到游戏相关的东西!

敬请期待。


本文翻译自:2D WebGL renderer Pixi.js v4【連載第五回】
翻译者:广树
转载请注明出处!


2D WebGL renderer Pixi.js v4 入门【最终回】

#pixi.js
侧边栏
最新评论
广树
2024-06-13
@老张博客:🤭没有被罚款喔,请大佬放心
老张博客
2024-06-13
翘班不怕被罚款呀
广树
2024-06-12
@YuanMoe:不,你已经没有沙发了
YuanMoe
2024-06-12
沙发
广树
2024-06-12
@mikusa:是的,整活类作品还是要靠动画这种形式。
正在攻略

圣兽之王.jpg

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告