导航

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

侧边栏
热门文章
1推文
没想到《孤独摇滚》的第二季消息来的如此突然。不过第二季的监督换了,不知道还能不能延续第一季的水平。
热度
546
2推文
今日份的秋叶原,久违的夜景,以及明明禁止live却依然和love live联动的atre🤣。
热度
467
3博文
探访《蜡笔小新》老家——春日部游记
热度
286
4页面
程序员老黄历&求签
热度
286
5推文
看完《孤独摇滚》的总集篇剧场版后篇了。 虽然删减在所难免,但是个人觉得制作组还是在尽量在保留精华。 ED歌曲《Re:Re:》把我惊艳到了,非常熟悉的旋律当时硬是想不起来,回到家查了一下原来第一次听到是在《只有我不在的街道》。 https://www.bilibili.com/video/BV1M5ejeMErR
热度
156
6博文
《孤独摇滚》圣地巡礼——下北泽&下北泽咖喱节2023
热度
143
7推文
2025年2月15日,天气晴,今天去电影院看了《前辈是男孩子 雨过天晴》。 这明明可以做成TV版第二季动画,但是P9不知为何突然选择了做成剧场版,当时看到这个消息我是震惊的。结果不出所料,用的是TV版的制作水准做的剧场版动画。分辨率略低,我坐在最后一排都觉得有些糊。突然的手绘Q版的表现手法也和TV版几乎一致。 不过细腻的心理描绘,出色的氛围营造,也算是一定程度掩盖了制作上的贫穷。 总的来说剧情的满足度还是很不错的。有欢快的剧情,也有感人的桥段。不过更多的是感受到了主角们的成长,青春是真的美好! 另外此次的首周特典是贴纸和漫画小册子。漫画小册子的内容是情人节的小短片,蛮有意思的。
热度
130
8博文
3DS模拟器简体中文字库 | Citra3ds字库 | 符文工房4乱码解决字库 | shared_font.bin
热度
130
9页面
追番
热度
104
10推文
怎么回事?刚公布了《孤独摇滚》的第二季的消息,第二天就又又又公布了《某科学的超电磁炮》第四季的消息!
热度
103
最新评论
广树管理员
2025-02-17 08:56
@石樱灯笼:那就静观结果吧
石樱灯笼
2025-02-16 23:13
@广树:除了Yoppi的演出之外,这动画最核心的东西就是这个演出,这玩意换一个人很可能就天塌。芙莉莲那边也是一样。
广树管理员
2025-02-16 19:17
@石樱灯笼:太悲观了呀 大佬
石樱灯笼
2025-02-16 19:00
灵魂没了,够呛
广树管理员
2025-02-16 17:21
@小彦:一直都这么多人呀,不要小看东京的商业街。
正在攻略

logo_kai.jpg


PSN奖杯卡

PSN奖杯卡

赞助商广告

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

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

前情回顾

上回链接: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

donate.png

1210 x 50(蓝底).png

cloudcone