我正在尝试遵循学习 Pixi JS 书籍,但许多方法不起作用,因为作者使用的是 Pixi vs 3.0.0,而我使用的是 3.0.9,因为旧版本不再可供下载。它希望我使用一个矩形对象来组织我的平铺表,但 Pixi 没有任何这些。所以我听说了PIXI.extrast.TilingSprite中的"生成纹理"方法,但我在调用它时遇到了麻烦。那么我该如何使用它呢?
以下是我尝试过的代码:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>First Attempt</title>
</head>
<body>
<script type="text/javascript" src="pixi.js"> </script>
<script>
renderer = PIXI.autoDetectRenderer(1200, 800 );
//);
// Add the canvas to the HTML document
document.body.appendChild(renderer.view);
// Create a container object called the 'stage'
var stage = new PIXI.Container();
var texture = PIXI.Texture.fromImage("images/png/Tiles/Tile1.png");
setup();
function setup()
{
requestAnimationFrame(setup);
var newtile = new PIXI.extras.TilingSprite.generateTexture(3,2,renderer);
// Position the sprite on the canvas
newtile.x = 0;
newtile.y = 0;
//Scale the sprite up so it's 3 times bigger than the original image
newtile.scale.set(0.3, 0.3);
//Add the sprite to the stage
stage.addChild(newtile);
//Render the stage
renderer.render(stage);
}
</script>
<style>* {padding: 0; margin: 0}</style>
</body>
</html>
我想知道如何使用生成纹理方法,但如果有人有其他做法,那么我可以放置我的瓷砖地图,那也会很有帮助。有人愿意接受挑战吗?我认为用适当的坐标逐个放置每个瓷砖将是一个坏主意?
我们缺少一些关于这里到底出了什么问题的细节,但很明显你滥用了 TilingSprite。
阅读一下官方的Pixi.js文档。
简而言之,generateTexture 不是一个静态方法。"静态"意味着无需先实例化类即可调用该方法。请注意,文档在其名称旁边指示方法是"静态"还是"继承"。
您需要先创建一个 TilingSprite 的实例,然后在该对象上调用 generateTexture 方法,该方法返回一个 PIXI。纹理(生成的纹理。同样,这在文档中明确概述了 - 能够解析这样的文档需要一些练习,但当您使用其他人的库时,这是一项必不可少的技能。
做这样的事情:
var sprite = new PIXI.extras.TilingSprite(texture, textureWidth, textureHeight);
var generatedTexture = sprite.generateTexture(renderer, resolution, scaleMode);
我有点挠头,为什么你想从纹理中创建精灵......然后转身从精灵中生成纹理。我想你有你的理由吗?