时间戳

首页 > 解决方案 > PIXI.JS 新手，正在寻找有关纹理缓存、加载程序问题的建议和故障排除

javascript - PIXI.JS 新手，正在寻找有关纹理缓存、加载程序问题的建议和故障排除

问题描述

我冒险进入了 PIXI 和 JS 的世界，这对我来说是一种新的编程语言，喜欢它现在的方式，但我有一个问题。

我对 TextureCache 和加载器有点困惑。如果您查看我的部分代码，我会尝试在屏幕上添加 3 个不同的图像。我一直在关注 pixi 网站的“入门部分”。我想添加他们的猫图像，我有，tileset 图像（全部）*，然后是 tileset 图像的一个图块。

问题是，我创建了 3 个新的精灵实例，当我希望它显示整个图块集时，图块集图像显示了我为图块（火箭）设置的区域。我已经在cahce 和加载器中加载了tileset。

为什么平铺显示裁剪的图像而不是整个图像？
我是否正确使用缓存来存储图像？
我是否正确使用资源方法从缓存或加载器中定位图像？
有没有一点缓存？

我的想法**当您使用矩形方法时，它会破坏原始图像并且裁剪后的版本现在是tileset1（我的图像的名称）？

<html>
<body>

<script src="pixi.js"></script>

<script>
//Aliases
let Application = PIXI.Application,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    Sprite = PIXI.Sprite,
	Rectangle = PIXI.Rectangle,
	TextureCache = PIXI.utils.TextureCache;
	

let app = new PIXI.Application({ 
    width: 1000, 
    height: 600,                       
    antialias: true, 
    transparent: false, 
    resolution: 1
  }
);

//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
TextureCache["tileset1.png","images/3.png"];
//load an image and run the `setup` function when it's done
loader.add(["images/3.png","tileset1.png"]).load(setup);

//This `setup` function will run when the image has loaded
function setup() {
	let texture = TextureCache["tileset1.png"];
	let rectangle = new Rectangle(96,64,32,32);
	texture.frame = rectangle;
	

  //Create the cat sprite, use a texture from the loader
  let card = new Sprite(resources["images/3.png"].texture);
  let tile = new Sprite(resources["tileset1.png"].texture);
  let rocket = new Sprite(texture);
  
  card.scale.set(0.06,0.06);
  
  tile.x=400;
  tile.y=400;
  
  rocket.x=100;
  rocket.y=100;
  
  //Add the cat to the stage
  app.stage.addChild(card);
  app.stage.addChild(tile);
  app.stage.addChild(rocket);
  
  app.renderer.render(app.stage);
}

</script>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.4/pixi.js"></script>

标签： javascripttexturesspriteloaderpixi.js

解决方案

Is there any point of the cache?- 从你的问题来看，这个问题似乎是最重要的:)

搜索“pixi.js”和“TextureCache”会给出以下答案，例如：

TLDR：通常不应直接使用 TextureCache :)

也可以看看：

推荐阅读