如何调整精灵大小 pixi.js
How to resize a sprite pixi.js
我有一些生成精灵的 PixiJS 代码:
let type = "WebGL";
if (!PIXI.utils.isWebGLSupported()) {
type = "canvas"
}
PIXI.utils.sayHello(type);
const app = new PIXI.Application({
width: 1000, height: 600, backgroundColor: 0x1099bb, resolution: window.devicePixelRatio || 1,
});
document.body.appendChild(app.view);
function renderSprite() {
const sprite = new PIXI.Sprite(PIXI.Texture.from("BEE-e1414622656271.png",));
sprite.anchor.set(0.5);
app.stage.addChild(sprite);
sprite.x = app.screen.width/2;
sprite.y = app.screen.height/2;
}
renderSprite();
代码有效。但是,生成的精灵太大,超出了容器的边界。
我需要设置精灵的大小,所以我尝试使用 baseTexture
:
的高度和宽度选项
const sprite = new PIXI.Sprite(PIXI.Texture("BEE-e1414622656271.png", baseTexture=PIXI.baseTexture(options={
"height": 100,
"width": 100
})));
但我收到一条错误消息,指出 PIXI.baseTexture 不是一个函数。
如何调整 sprite 的大小以使其适合容器?
创建精灵后可以控制精灵的位置和大小:
var sprites = {};
sprites.cat = new PIXI.Sprite(catTexture);
//Change the sprite's position
sprites.cat.x = 96;
sprites.cat.y = 96;
//Change the sprite's size
sprites.cat.width = 30;
sprites.cat.height = 150;
//Add the cat to the stage so you can see it
stage.addChild(sprites.cat);
之后 - 即使将此精灵添加到舞台容器中 - 您也可以进一步修改其宽度和高度。
尝试在你的游戏循环中加入如下内容:
sprites.cat.width += 0.5;
在文档中查看更多信息:https://github.com/kittykatattack/learningPixi#size-and-scale
我有一些生成精灵的 PixiJS 代码:
let type = "WebGL";
if (!PIXI.utils.isWebGLSupported()) {
type = "canvas"
}
PIXI.utils.sayHello(type);
const app = new PIXI.Application({
width: 1000, height: 600, backgroundColor: 0x1099bb, resolution: window.devicePixelRatio || 1,
});
document.body.appendChild(app.view);
function renderSprite() {
const sprite = new PIXI.Sprite(PIXI.Texture.from("BEE-e1414622656271.png",));
sprite.anchor.set(0.5);
app.stage.addChild(sprite);
sprite.x = app.screen.width/2;
sprite.y = app.screen.height/2;
}
renderSprite();
代码有效。但是,生成的精灵太大,超出了容器的边界。
我需要设置精灵的大小,所以我尝试使用 baseTexture
:
const sprite = new PIXI.Sprite(PIXI.Texture("BEE-e1414622656271.png", baseTexture=PIXI.baseTexture(options={
"height": 100,
"width": 100
})));
但我收到一条错误消息,指出 PIXI.baseTexture 不是一个函数。
如何调整 sprite 的大小以使其适合容器?
创建精灵后可以控制精灵的位置和大小:
var sprites = {};
sprites.cat = new PIXI.Sprite(catTexture);
//Change the sprite's position
sprites.cat.x = 96;
sprites.cat.y = 96;
//Change the sprite's size
sprites.cat.width = 30;
sprites.cat.height = 150;
//Add the cat to the stage so you can see it
stage.addChild(sprites.cat);
之后 - 即使将此精灵添加到舞台容器中 - 您也可以进一步修改其宽度和高度。 尝试在你的游戏循环中加入如下内容:
sprites.cat.width += 0.5;
在文档中查看更多信息:https://github.com/kittykatattack/learningPixi#size-and-scale