一个基于JavaScript的快速2D渲染库
我在文档中发现有这样的更改： SCALE_MODES 替换为 ScaleMode 字符串 SCALE_MODES.NEAREST -> '最近', SCALE_MODES.LINEAR -> '线性', 所以，是支持的。但我不...
我有一个简单的 PixiJS 代码来向场景添加平铺精灵。问题是，普通精灵渲染正常（这意味着资源纹理存在并且加载正常），但平铺精灵却不能。我用的是Pix...
我想使用 Vitest 对创建 Pixi-JS 应用程序的代码进行单元测试，但是我收到“Worker not Defined”错误。 其他代码被剥离，这是我尝试过的（在 vite 项目中）： /*...
我想将 Pixi.js 添加到我的 VueJs 组件之一，但它不起作用。我现在想做的是实现 Pixi.js 网站的基本示例之一。 问题是...
当光标快速移动时，使用 PIXI + React + ts 拖动无法正常工作
我想像这里一样进行拖放操作 主要代码： 从“反应”导入{FC} 从“./DrawPage.module.scss”导入样式 从“@pixi/react”导入{Stage}； 从 & 导入块
在Javascript文件中调用appendChild(app.view)时出错
我在 HTML 脚本中创建了一个简单的 Javascript 代码块，我尝试加载新创建的 Pixi 应用程序，但出现错误： “未捕获的类型错误：无法在 '... 上执行 'appendChild'
我是 Pixi.js 的新手，但我有一些使用 TypeScript 的经验。我真的很难将 Pixi.js 导入到我的项目中。 我使用 Pixi 和 van 的 CDN 导入运行了一个小型 Pixi.js 项目...
我正在使用此代码添加代码。绘制方法如下所示： this.ticker = this.ticker || this.app.ticker.add(this.draw) 这里的应用程序是 PIXI.Application。绘制方法如下所示： p...
我正在使用 PIXI.js 构建一个游戏，它在我的桌面上看起来不错，但在我的手机上玩时，FOV 非常小，所以我几乎看不到周围的环境。同样在大型显示器上...
我用于精灵的图像比所需的大得多（910px）。我需要动态更改容器的高度，遮盖图像。 有谁知道如何做到这一点？ 我用于精灵的图像比所需的大得多（910 像素）。我需要动态更改容器的高度，遮盖图像。 有人知道该怎么做吗？ <Container x={x} y={y} width={width} height={height}> <Sprite image={image} anchor={[0, 0]} x={0} y={0} width={width} height={910} rotation={0} /> </Container> @inlet/react-pixi: "^1.1.9" pixi.js: "^5.2.0" react: "^16.12.0" react-dom: "^16.12.0" 不幸的是，这也不起作用，因为纹理保持静态，而矩形四处移动 <Graphics draw={(g) => { g.clear() const texture = new PIXI.Texture.from(image) g.beginTextureFill(texture) g.drawRect(x, y, width, height) g.endFill() }} /> 试试这个： const maskRef = useRef() <Container mask={maskRef?.current} x={x} y={y} width={width} height={height}> <Graphics name="mask" draw={React.useCallback( (g) => { g.beginFill(0x000000) g.drawRect(0, 0, size.width + 3, size.height + 3) g.endFill() }, [width, height] )} ref={maskRef} /> <Sprite image={image} anchor={[0, 0]} x={0} y={0} width={width} height={910} rotation={0} /> </Container> 官方文档位于此处，解释其工作原理和局限性
我有一个 UI 层和一个 Game 层。 UI 层透明地落在游戏层上。 当我单击游戏层内的精灵时。 我没有收到事件。 我希望这些事件能够重新发生...
大家好，有人可以告诉我如何在 Phaser 2.7 中应用一般滤镜，特别是模糊滤镜吗？ 我在 chatgpt 上找到的方法是 var BlurYFilter = game.add.filter('BlurY');
我有一张由 pixi.js 渲染器渲染的计算量很大的绘图。 然后，我从渲染器视图创建精灵，以便水平平铺绘图，并将精灵渲染在 on-
如何使用 pixi.js 或 jquery ui 进行自由滚动？
我正在尝试制作一个类似于 https://pharrellwilliams.com/ 的页面，其中的自由滚动必须能够导航到左右上下，我不知道它是否是用画布完成的 什...
PIXI.js 错误`TypeError：无法解构'this.data.meta'的属性'scale'，因为它未定义。`
...</desc> <question vote="0"> <pre><code><!doctype html> <html> <head> <script src="https://pixijs.download/release/pixi.js"></script> </head> <body> <script> let app = new PIXI.Application({ width: 640, height: 360 }); document.body.appendChild(app.view); (async () => { try { const texture_path = '/assets/Robot_Run/spritesheet.png' const texture_data_path = '/assets/Robot_Run/spritesheet.json' let texture_data = await PIXI.Assets.load(texture_data_path) let texture = await PIXI.Assets.load(texture_path) spritesheet = new PIXI.Spritesheet( texture, texture_data ); } catch(err) { console.error(err) } })() </script> </body> </html> </code></pre> <p>错误消息表明故障发生在精灵表加载的行号处。</p> <p>按照此处的示例：<a href="https://pixijs.com/guides/components/sprite-sheets" rel="nofollow noreferrer">https://pixijs.com/guides/components/sprite-sheets</a><br/> 这是 Github 存储库：<a href="https://github.com/0foo/pixi_experiments" rel="nofollow noreferrer">https://github.com/0foo/pixi_experiments</a></p> </question> <answer tick="false" vote="0"> <p>通过资产实用程序加载“spritesheet.json”，它将自动转换为 spritesheet。</p> <pre><code>let app = new PIXI.Application({ width: 640, height: 360 }); document.body.appendChild(app.view); async function start(){ const sheet = await PIXI.Assets.load('./assets/Robot_Run/spritesheet.json') const anim = new PIXI.AnimatedSprite(sheet.animations.enemy); anim.animationSpeed = 0.1666 anim.play() app.stage.addChild(anim) } start() </code></pre> <p>我必须向 JSON 文件添加“动画”属性才能显示动画：</p> <pre><code>{ "frames":{...}, "animations": { "enemy": ["Foozlecc_Robot_Run_8.png","Foozlecc_Robot_Run_9.png"] }, "meta":{...} } </code></pre> </answer> </body></html>
在“pixi.js”中找不到导出“tweenManager”（导入为“PIXI”）
我在导入时遇到此错误，请帮忙。 从“pixi.js”导入 * 作为 PIXI； ./src/App.js 中的错误 45:18-47 在...中找不到导出“tweenManager”（导入为“PIXI”）
我在 https://codesandbox.io/s/fancy-architecture-zsu57?file=/src/index.js:0-696 上提供了简单的娱乐 但实质上，当我单击
文件结构： 索引.html main.js pixi.js 我的index.html： 身体{ 边距：0 像素； 溢出：隐藏； ...</desc> <question vote="0"> <p>文件结构：</p> <ul> <li>index.html</li> <li>main.js</li> <li>pixi.js</li> </ul> <p>我的index.html：</p> <pre><code><!doctype html> <html> <head> <style> body{ margin: 0px; overflow: hidden; } </style> <script src="main.js" type="module" defer></script> </head> <body> </body> </html> </code></pre> <p>main.js：</p> <pre><code>import * as PIXI from './pixi.js'; const app = new PIXI.Application({ resizeTo:window, antialias: true, autoDensity: true, resolution: 2 }); document.body.appendChild(app.view); </code></pre> <blockquote> <p>错误：<pre><code>Uncaught TypeError: PIXI.Application is not a constructor</code></pre></p> </blockquote> <p>尝试过的其他解决方案： 当我作为脚本标签导入时，这可以正常工作，例如<pre><code><script src="pixi.js" type="module"></script></code></pre> 中的 <pre><code>index.html</code></pre> 然后删除 <pre><code>main.js</code></pre> 中的导入语句。这种方法的一个主要缺点是我想使用带有 linting 的 JSDoc，并且在这种导入方法下，它不会将 <pre><code>PIXI</code></pre> 识别为有效类型，尽管它是有效的。 另一种解决方案是使用 jsbundler 和 <pre><code>import * as PIXI from 'pixi.js'</code></pre>，但这种方法需要......一个捆绑器。我可以直接导入它而不需要额外的工具吗？</p> </question> <answer tick="false" vote="0"> <p>要在静态环境中使用 PixiJS，请首先包含指向 CDN 的 <pre><code><script /></code></pre> 链接，或者如果您愿意，也可以包含您自己下载的文件：</p> <pre><code><script src="https://pixijs.download/release/pixi.js"></script> <!-- or --> <script src="/pixi.js"></script> </code></pre> <p>然后，制作您的 <pre><code>main.js</code></pre> 并在以下时间后导入：</p> <pre><code><script src="https://pixijs.download/release/pixi.js"></script> <script src="/main.js"></script> </code></pre> <p>您现在可以在<pre><code>main.js</code></pre>中使用PixiJS。没有必要使用<pre><code>type="module"</code></pre>。如果您想使用 JavaScript <pre><code>import</code></pre> 语句导入库，则需要使用捆绑器。</p> </answer> </body></html>
我想将 pixi.js 作为普通 JS 项目中的模块导入，但我不能
文件结构： 索引.html main.js pixi.js 我的index.html： 身体{ 边距：0 像素； 溢出：隐藏； ...</desc> <question vote="0"> <p>文件结构：</p> <ul> <li>index.html</li> <li>main.js</li> <li>pixi.js</li> </ul> <p>我的index.html：</p> <pre><code><!doctype html> <html> <head> <style> body{ margin: 0px; overflow: hidden; } </style> <script src="main.js" type="module" defer></script> </head> <body> </body> </html> </code></pre> <p>main.js：</p> <pre><code>import * as PIXI from './pixi.js'; const app = new PIXI.Application({ resizeTo:window, antialias: true, autoDensity: true, resolution: 2 }); document.body.appendChild(app.view); </code></pre> <p><strong>错误：<pre><code>Uncaught TypeError: PIXI.Application is not a constructor</code></pre></strong></p> <p>尝试过的其他解决方案： 当我作为脚本标签导入时，这可以正常工作，例如<pre><code><script src="pixi.js" type="module"></script></code></pre> 中的 <pre><code>index.html</code></pre> 然后删除 <pre><code>main.js</code></pre> 中的导入语句。这种方法的一个主要缺点是我想使用带有 linting 的 JSDoc，并且在这种导入方法下，它不会将 <pre><code>PIXI</code></pre> 识别为有效类型，尽管它是有效的。 另一种解决方案是使用 jsbundler 和 <pre><code>import * as PIXI from 'pixi.js'</code></pre>，但这种方法需要......一个捆绑器。我可以直接导入它而不需要额外的工具吗？</p> </question> <answer tick="false" vote="0"> <p>要在静态环境中使用 PixiJS，请首先包含指向 CDN 的 <pre><code><script /></code></pre> 链接，或者如果您愿意，也可以包含您自己下载的文件：</p> <pre><code><script src="https://pixijs.download/release/pixi.js"></script> <!-- or --> <script src="/pixi.js"></script> </code></pre> <p>然后，制作您的 <pre><code>main.js</code></pre> 并在以下时间后导入：</p> <pre><code><script src="https://pixijs.download/release/pixi.js"></script> <script src="/main.js"></script> </code></pre> <p>您现在可以在<pre><code>main.js</code></pre>中使用PixiJS。没有必要使用<pre><code>type="module"</code></pre>。如果您想使用 JavaScript <pre><code>import</code></pre> 语句导入库，则需要使用捆绑器。</p> </answer> </body></html>