如何使用来自PIXI.extras.TilingSprite的Pixi JS中的继承方法“生成纹理”

How do I use the inherited method "generate texture" in Pixi JS from PIXI.extras.TilingSprite?

本文关键字：方法 继承 生成纹理 纹理 JS 何使用 PIXI extras Pixi TilingSprite      更新时间：2023-09-26

我正在尝试遵循学习 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);

我有点挠头，为什么你想从纹理中创建精灵......然后转身从精灵中生成纹理。我想你有你的理由吗？

相关文章：