PIXI js,精灵不显示,没有错误
PIXI js, sprite not showing, no errors
我有以下代码:
var viewWidth, viewHeight, renderer, stage, loader;
var rendererOptions = {
transparent: true
};
function init () {
viewWidth = window.innerWidth;
viewHeight = window.innerHeight;
renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight, rendererOptions);
renderer.view.className = "rendererView";
// add to DOM
document.body.appendChild(renderer.view);
// create stage
stage = new PIXI.Container();
stage.width = viewWidth;
stage.height = viewHeight;
stage.alpha = 0;
// load images
loader = PIXI.loader;
loader.add("images/bg.jpg");
loader.once("complete", onAssetsLoaded);
loader.load();
}
function onAssetsLoaded () {
console.log("assets loaded");
createElements();
update();
}
function createElements () {
console.log("create elements");
var bg = new PIXI.Sprite.fromImage("images/bg.jpg");
bg.position.x = 200;
bg.position.y = 200;
stage.addChild(bg);
}
function update () {
render();
requestAnimationFrame(update);
}
function render () {
renderer.render(stage);
}
但是我的精灵没有出现。只是一片空白canvas。我检查了 chrome 中的网络选项卡,正在加载它。记录阶段,它有一个child;精灵,它有一个正确的 baseUrl 和一切。但它只是空白。我已经把它放在我的网络服务器上了。
我碰壁了。有谁知道这可能是什么?我使用的是最新版本的 Pixi,3.0。
谢谢!
我知道的不多,但我认为你必须将图像加载到纹理,然后再将其加载到精灵。
或者可能是 PIXI.loaders.Loader,而不是 PIXI.loader
解决了,是我的错。我没有意识到我已经将舞台的 alpha 设置为 0...
我有以下代码:
var viewWidth, viewHeight, renderer, stage, loader;
var rendererOptions = {
transparent: true
};
function init () {
viewWidth = window.innerWidth;
viewHeight = window.innerHeight;
renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight, rendererOptions);
renderer.view.className = "rendererView";
// add to DOM
document.body.appendChild(renderer.view);
// create stage
stage = new PIXI.Container();
stage.width = viewWidth;
stage.height = viewHeight;
stage.alpha = 0;
// load images
loader = PIXI.loader;
loader.add("images/bg.jpg");
loader.once("complete", onAssetsLoaded);
loader.load();
}
function onAssetsLoaded () {
console.log("assets loaded");
createElements();
update();
}
function createElements () {
console.log("create elements");
var bg = new PIXI.Sprite.fromImage("images/bg.jpg");
bg.position.x = 200;
bg.position.y = 200;
stage.addChild(bg);
}
function update () {
render();
requestAnimationFrame(update);
}
function render () {
renderer.render(stage);
}
但是我的精灵没有出现。只是一片空白canvas。我检查了 chrome 中的网络选项卡,正在加载它。记录阶段,它有一个child;精灵,它有一个正确的 baseUrl 和一切。但它只是空白。我已经把它放在我的网络服务器上了。
我碰壁了。有谁知道这可能是什么?我使用的是最新版本的 Pixi,3.0。
谢谢!
我知道的不多,但我认为你必须将图像加载到纹理,然后再将其加载到精灵。
或者可能是 PIXI.loaders.Loader,而不是 PIXI.loader
解决了,是我的错。我没有意识到我已经将舞台的 alpha 设置为 0...