javascript - 如何移动 PIXI DisplayObject？-6ren

javascript - 如何移动 PIXI DisplayObject？

转载作者：行者123 更新时间：2023-11-28 00:27:27

24

4

我有以下文件(使用最新的 PIXI.js 版本):

index.html

<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 1</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
            width:100%;
            height:100%;
        }
        canvas {
            display:block;
        }
    </style>
    <script src="js/pixi.js"></script>
    <script src="js/XALUI/XALUI.js"></script>
    <script src="js/XALUI/Button.js"></script>
</head>
<body>
    <script>

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x66FF99);

    // create a renderer instance
    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);

    requestAnimFrame( animate );

    // create a texture from an image path
    var texture = PIXI.Texture.fromImage("bunny.png");

    // XALUI
    var button = new XALUI.Button(texture);
    stage.addChild(button);

    function animate() {
        button.position.x = button.position.x + 20;

        // render the stage   
        renderer.render(stage);

        requestAnimFrame( animate );
    }

    </script>

    </body>
</html>

js/XALUI/Button.js

XALUI.Button = function(texture) {
    PIXI.DisplayObject.call(this);

    this._button = new PIXI.Sprite(texture);
}

XALUI.Button.prototype = Object.create(PIXI.DisplayObject.prototype);
XALUI.Button.prototype.constructor = XALUI.Button;

XALUI.Button.prototype._renderWebGL = function(renderSession) {
    this._button._renderWebGL(renderSession);
}

XALUI.Button.prototype._renderCanvas = function(renderSession) {     
    this._button._renderCanvas(renderSession);
};

如何将按钮移动到另一个位置或另一个初始位置？我尝试设置 position.x:

    var button = new XALUI.Button(texture);
    button.position.x = 100;

还尝试设置 Sprite 的位置:

    this._button = new PIXI.Sprite(texture);
    this._button.position.x = 100;

但是这不起作用。请帮忙。

最佳答案

问题在于您附加并移动的是 XALUI.Button 而不是内部的 PIXI.Sprite。仅当您已将该 PIXI.Sprite 添加到舞台时，设置内部 Sprite (this._button.position.x) 上的位置才有效。由于 DisplayObject 不包含多个 DisplayObject，因此舞台没有对实际 Sprite 的引用。有几种方法可以解决这个问题。首先，您可以继承 PIXI.Sprite

XALUI.Button = function(texture) {
  PIXI.Sprite.call(this, texture);
};
XALUI.Button.prototype = Object.create(PIXI.Sprite.prototype);
XALUI.Button.prototype.constructor = XALUI.Button;

或者以与上述相同的方式从 DisplayObjectContainer 继承，但这意味着一个按钮将容纳多个图形对象，因此请采取最适合您的方式。这是第一种方法的工作示例。

var XALUI = {};

// Inherits from PIXI.Sprite
XALUI.Button = function(texture) {
  PIXI.Sprite.call(this, texture);
};
XALUI.Button.prototype = Object.create(PIXI.Sprite.prototype);
XALUI.Button.prototype.constructor = XALUI.Button;

// Prepare the stage
var stage = new PIXI.Stage(0x66FF99);
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
var texture = PIXI.Texture.fromImage("http://www.goodboydigital.com/pixijs/examples/1/bunny.png");
var button = new XALUI.Button(texture);

document.body.appendChild(renderer.view);
requestAnimationFrame(animate);
stage.addChild(button);

// Animate the button
function animate() {
  button.position.x = button.position.x + 5;
  if (button.position.x > window.innerWidth + button.width) {
    button.position.x = -button.width;
  }
  renderer.render(stage);
  requestAnimationFrame(animate);
}

<script src="https://cdn.rawgit.com/GoodBoyDigital/pixi.js/v2.0.0/bin/pixi.js"></script>

关于javascript - 如何移动 PIXI DisplayObject？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29348047/

24

4

0

文章推荐： html - 在默认视口(viewport)下方放置一个 div 容器

文章推荐： c++ - 在 C++ 中使用回溯的背包解决方案

文章推荐： c++ - std::regex_search() 不接受我的论点

文章推荐： javascript - 从 Canvas 上的 SVG 导出 PNG

pixi.js - PIXI.js-如何绘制半个圆？
我不熟悉PIXI.js进行游戏。如何在不使用图像的情况下绘制半个圆形？先感谢您! 最佳答案在使用stackoverflow之前，请确保已阅读the official documentation。
pixi.js - PIXI 如何彻底删除一个 Sprite
我正在尝试从我的游戏中完全删除一个 Sprite (充当死亡角色)。我在网上能找到的只有: sprite.parent.removeChild(sprite); 当我这样做时， Sprite 停止渲染
pixi.js - 用 pixi.js 画一个矩形
[Chrome v32] 如何使用 PIXI.js 库绘制基本的红色矩形？我试过这个(不工作) var stage = new PIXI.Stage(0xFFFFFF); var renderer
pixi.js - Pixi Js, CanvasRenderer 错误
我使用的是 pixi.js v 3.0.0我的简单代码是 (function () { document.addEventListener('DOMContentLoaded', functi
typescript - PIXI 导入不起作用 : Cannot find module pixi. js
我 npm 将 pixi.js 安装到了一个 typescript 项目中。此行(在许多示例中都可以找到)不起作用: import * as PIXI from 'pixi.js'; 我收到错误“找不
javascript - 是否可以从 pixi.js 中的多个图像源创建 PIXI.Texture？
我有大约 10 个不同的图像文件需要动态加载到一个 PIXI.Texture 对象中。 pixi.js 有这种可能性吗？想想老虎机卷轴；我将每个单独的插槽符号作为图像，需要从这些图像构建卷轴条纹理。
javascript - Pixi.js 在使用 PIXI ticker 时使浏览器崩溃
我的问题是 chrome 浏览器在 ticker 开始大约 2 分钟后停止了。 const renderer = new PIXI.Renderer({ width: window.inner
pixi.js - 在 PIXI.js 中如何增加 Sprite 的亮度？
我有一个通过 new PIXI.Sprite.fromImage(path) 创建的 Sprite ，如何实时增加它的亮度？最佳答案您可以使用 PIXI ColorMatrixFilter 执行此
javascript - 如何使用 pixi.js 获取 PIXI.Graphics 实例的边界？
我正在尝试使用 pixi.js 应用世界变换来获取 Graphics 实例的边界框我对使用PIXI.Graphics documentation有点困惑。据我所知，它应该继承width，height
javascript - 如何绘制箭头以通过 ngraph.pixi 与 PIXI.js 与 webgl 链接？
我画了直接图，所以我画了线的箭头，我是 pixi.js 和 javascript 的新手，我想学习它，你能帮助我如何画一个箭头吗是吗？这是一个demo我想将箭头添加到链接。这是绘制链接的代码，位于
Pixi.js 图片拖动时跳转
我在使用 pixi.js 时遇到问题我正在创建一个类似 http://www.wolverineunleashed.com/#muscles 的页面我创建了一个大舞台，用户可以使用他们的拖动方式，除
javascript - PIXI 冲击波滤波器
开始使用 PIXI 并快速了解文档并没有多大帮助。至少对我来说。尝试使用冲击波过滤器... var shock = new PIXI.filters.ShockwaveFilter(); image
c++ - 可以像普通相机一样使用 pixy
我有 pixy(CMUcam5)。是否可以从相机或类似的东西中获取矩阵，而无需从 charmed labs 重新编码预编码代码？最佳答案我认为你不能。在 pixy 论坛上有几个人要求提供视频源，开
javascript - pixi 无限滚动条
有没有办法让 Canvas 对象滚动到内容之外。例子:用 1000*1000 创建的 Canvas 。并在 Canvas 上启用 PAN 和 Zoom。在 Canvas 上绘制一个矩形并用鼠标将矩形移
javascript - PIXI.RenderTexture 无渲染
我构建了一个简单的 PIXI.js 应用程序来实现 PIXI.RenderTexture，但它不起作用。它应该渲染两个方形 Sprite ，黑色和白色。黑色的添加了常规的stage.addChild
typescript - PIXI.js 加载器共享资源纹理检测名称中的错字
在我们的游戏中，我们使用 typescript、pixi.js、vscode、eslint。我们有一个像这样的图像文件字典 export function getAllImages(): {name
pixi.js - 如何在pixijs中将图形转换为 Sprite
有没有办法将图形转换为 Sprite ？我有一个包含单个矩形的图形，并希望将其转换为 Sprite 以启用复杂的动画。我试过做 let p= new Graphics(); p.beginFill
javascript - Pixi.js 阶段父级
我有一个 JavaScript 图形对象。在这里面我有一个 pixi js 阶段作为私有(private)成员。在舞台上，我有一个 PIXI.Graphics() 对象，我将在其中保持两条垂直线。我在
javascript - PIXI.js 渲染不工作
我正在使用 Chrome 学习本教程 ( http://www.yeahbutisitflash.com/?p=5226 )，但不明白为什么这不起作用。这是我的控制台输出: init() succes
javascript - Meteor + Phaser/Pixi
我有两个问题要揭露。首先:我正在开发一个网站，我正在使用 Meteor 来构建其结构来处理前端后端和数据库，因为我没有太多使用各种界面的经验。我喜欢 Meteor，但我需要添加动画图形(主要是 2d

首页

博学

6Ren·AI

商城

javascript - 如何移动 PIXI DisplayObject？