导航

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

侧边栏
热门文章
1推文
没想到《孤独摇滚》的第二季消息来的如此突然。不过第二季的监督换了,不知道还能不能延续第一季的水平。
热度
559
2推文
今日份的秋叶原,久违的夜景,以及明明禁止live却依然和love live联动的atre🤣。
热度
467
3博文
探访《蜡笔小新》老家——春日部游记
热度
286
4页面
程序员老黄历&求签
热度
286
5推文
看完《孤独摇滚》的总集篇剧场版后篇了。 虽然删减在所难免,但是个人觉得制作组还是在尽量在保留精华。 ED歌曲《Re:Re:》把我惊艳到了,非常熟悉的旋律当时硬是想不起来,回到家查了一下原来第一次听到是在《只有我不在的街道》。 https://www.bilibili.com/video/BV1M5ejeMErR
热度
169
6博文
《孤独摇滚》圣地巡礼——下北泽&下北泽咖喱节2023
热度
156
7推文
2025年2月15日,天气晴,今天去电影院看了《前辈是男孩子 雨过天晴》。 这明明可以做成TV版第二季动画,但是P9不知为何突然选择了做成剧场版,当时看到这个消息我是震惊的。结果不出所料,用的是TV版的制作水准做的剧场版动画。分辨率略低,我坐在最后一排都觉得有些糊。突然的手绘Q版的表现手法也和TV版几乎一致。 不过细腻的心理描绘,出色的氛围营造,也算是一定程度掩盖了制作上的贫穷。 总的来说剧情的满足度还是很不错的。有欢快的剧情,也有感人的桥段。不过更多的是感受到了主角们的成长,青春是真的美好! 另外此次的首周特典是贴纸和漫画小册子。漫画小册子的内容是情人节的小短片,蛮有意思的。
热度
143
8博文
3DS模拟器简体中文字库 | Citra3ds字库 | 符文工房4乱码解决字库 | shared_font.bin
热度
117
9推文
今天去看了首部初音未来的电影《剧场版 世界计划 破碎的世界与无法歌唱的未来》。 说是初音未来的电影,但其实是手游《世界计划》的剧场版。好像有挺多人看到是初音未来的电影就去看了,结果发现并不全是😅。其实在宣传海报中,初音未来后面的那些人才是主角。 不过,我也是那些没玩过手游的观众之一。其实整场看下来问题也不是很大,就是对于人物关系和世界观的设定可能会有些问题。电影其实也很贴心地在剧情开头,大致以剧情的形式展示了手游中的五个团体的人物及其性格,但感觉还是有些杯水车薪,约等于看个眼熟。 此次的电影是第一次购买应援场。所谓的应援场,就是能在电影院里像是听演唱会一样挥舞荧光棒和尽情呐喊。看着前排那些粉丝看到自己喜欢角色时的呐喊,以及演唱会环节的打CALL,应援场确实是很有意思的一种电影观看方式呢! 剧情方面,属于看了开头大概能猜到整部动画的剧情走向。不过,通过演唱会的气氛渲染,甚至还感受到了一丝丝的感动。 总体来说,对于手游的粉丝来说可能是嘉年华般的狂喜,对于没接触过手游的路人来说也能一定程度融入其中,属于一部不错的粉丝向电影(不管是手游粉丝还是初音未来粉丝)。 首周电影特典是CD和游戏内的兑换码。送CD这种形式还第一次遇到,官方大气!
热度
104
10博文
手把手从零开始搭建《泰拉瑞亚》(Terraria)服务器
热度
104
最新评论
广树管理员
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 11:20:49分类:JavaScript

前情回顾

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

介绍了精灵的三种方法。


三种方法:

1.使用图像(一个一个读取进去)

2.将项目内用到的所有图片(sub-image)全部集合成一张大图片(tileset)使用。(就是将大量小图合成一张)

3.通过JSON(texture atlas)指定大图(tileset)中各自图像的位置和大小。


1.使用图像并显示出来吧(一个一个读取) 后篇

在上回中我们在读取图像的基础上又学习了更改PIXI的function来使代码更加简洁易懂的方法。

接下来,我想要让图像表现的更加复杂。

//別名(Aliases)
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite;

//基础代码
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

//读取文件的路径设置与读取后执行的函数
loader
  .add([
    "images/cat.png",
    "images/blob.png",
    "images/explorer.png"
  ])
  .load(setup);

function setup() {
  console.log("setup"); 

  var cat = new Sprite(resources["images/cat.png"].texture),
      blob = new Sprite(resources["images/blob.png"].texture),
      explorer = new Sprite(resources["images/explorer.png"].texture);

  stage.addChild(cat);
  stage.addChild(blob);
  stage.addChild(explorer);

  //指定位置
  blob.position.set(82, 82);
  explorer.position.set(128, 128);
  
  renderer.render(stage);
}


如果不使用position.set(x, y)来指定位置的话,就会全部显示在左上角。

所以上面的代码效果如下

上面例子如果看不了<点这里>


读取的进阶使用

在之前的loader function中追加使用.on(),可以监控读取。

loader
  .add([
    "images/cat.png",
    "images/blob.png",
    "images/explorer.png"
  ])
  .on("progress", loadProgressHandler)
  .load(setup);


追加一个loadProgressHandler function

function loadProgressHandler(loader, resource) {

  //显示外部图像的URL
  console.log("loading: " + resource.url); 

  //如果是用loader.add()function读取的话结果和上面URL一样
  console.log("loading: " + resource.name);

  //显示读取百分比
  console.log("progress: " + loader.progress + "%"); 
}


打开控制台能看到如下信息。(这里使用的是loader.add(),所以resource.url和resource.name显示一样的信息)

关于精灵的style

之前说的有点简略,有关定位position.set(x, y)

其实也可以这么写。

cat.position.set(20, 30);

// 也可以分开写
cat.x = 20;
cat.y = 30;


然后尺寸之类的也可以用类似的方法。(全部基于左上)

cat.width = 30;
cat.height = 50;


试了下,如果只设定width或者height的话,宽高并不会等比例缩放。然后如果写了类似css的“auto”的话,则直接报错。


然后扩大缩小的写法也可以

cat.scale.set(0.5, 0.5);

cat.scale.x = 0.5;
cat.scale.y = 0.5;


最后是旋转的方法。

// 旋转单位不清楚,有可能是π。
cat.rotation = 0.3;


在旋转前如果什么都不设定的话默认左上角为中心旋转,所以想要设置中心点的锚点(anchor)的话要这么写。

cat.anchor.set(0.5, 0.5);

// 可以拆开写
cat.anchor.x = 0.5;
cat.anchor.y = 0.5;

// 旋转
cat.rotation = 0.3;


这里的锚点单位是% 。0%~100%用0~1来表示。也就是说x轴从左到右多少百分比或者y轴从上到下多少百分比,来决定旋转的中心位置。

如果百分比难以正确指定中心点的话,还可以用坐标的方式。也就是pivot来指定。

cat.pivot.set(32, 32)


以上就是使用单个图像制作精灵的说明!!


2.将项目内用到的所有图片(sub-image)全部集合成一张大图片(tileset)使用。(就是将大量小图合成一张) 全篇

早些年响应式布局的网站还没流行的时候,网站为了提升性能,减少图片读取数量,就会将图片全部集结在一张图片中读取,然后使用css背景的position来指定坐标,俗称css雪碧图。

tileset的概念也是一样的。

也有用sprite sheet来称呼tileset的。

上图是pixi官方教程所使用的图片,每小图的尺寸是64*64。

总之先把titleset.png用loader来读取吧。

loader
  .add("images/tileset.png")
  .load(setup);


function setup() {

  // 使用TextureCache functio
  var texture = TextureCache["images/tileset.png"];

  // 新的长方形(x坐标,y坐标,宽度,高度)
  var rectangle = new Rectangle(192, 128, 64, 64);

  // 将切出来的长方形传递
  texture.frame = rectangle;

  // 将火箭作为精灵使用
  var rocket = new Sprite(texture);

  // 放置在canvas的某个位置
  rocket.x = 32;
  rocket.y = 32;

  stage.addChild(rocket);  
  renderer.render(stage);
}


火箭就会如下图所示出现。

上图如果看不了<点这里>

如果自己的计算没出错的话,将tileset中的34张小图片全部通过js一一写出来的话,岂不累死。pixi.js的推荐方法是用JSON文件指定位置和名字。通过读取JSON来实现。


这里有一款官方教程推荐的工具软件

下载地址:https://www.codeandweb.com/texturepacker


只用准备好要用到的图片,就会自动集成并生成包含图像名称的JSON。

虽然还没有实际使用,但是光看说明就觉得很兴奋呢!非常便利!


顺带一提,json文件形式如下:

"blob.png":
{
    "frame": {"x":55,"y":2,"w":32,"h":24},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":32,"h":24},
    "sourceSize": {"w":32,"h":24},
    "pivot": {"x":0.5,"y":0.5}
},


第二回就先到这里!我先装个tileset图片制作软件再回来!


本回的代码:进入git


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


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

#pixi.js

donate.png

1210 x 50(蓝底).png

cloudcone