Hi all. My PIXI.js code doesn't render my sprite. What is the problem? I checked the all file directions and all of them are correct. I get just only black screen. Here is my code:
let visibleObjects = [];
let pixelDimensionWidth = 1.0;
let pixelDimensionHeight = 1.0;
let Sprite = PIXI.Sprite;
let Application = PIXI.Application;
let Rectangle = PIXI.Rectangle;
let resources = PIXI.loader.resources;
let loader = PIXI.loader;
let player = {};
function getWidth() {
if(mainContainer != null) {
return mainContainer.offsetWidth;
} else {
return 0;
}
}
function getHeight() {
if(mainContainer != null) {
return mainContainer.offsetWidth / 2;
} else {
return 0;
}
}
function resizeCanvas() {
if(app != null) {
app.renderer.resize(getWidth(), getHeight());
pixelDimensionWidth = mainContainer.offsetWidth/100.0;
pixelDimensionHeight = mainContainer.offsetHeight/100.0;
}
for(let i=0; i<visibleObjects.length; i++) {
if(visibleObjects[i] != null) {
if(visibleObjects[i].hasOwnProperty('xPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
visibleObjects[i].sprite.x = visibleObjects[i].xPercent * pixelDimensionWidth;
}
if(visibleObjects[i].hasOwnProperty('yPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
visibleObjects[i].sprite.y = visibleObjects[i].yPercent * pixelDimensionHeight;
}
if(visibleObjects[i].hasOwnProperty('widthPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
visibleObjects[i].sprite.width = visibleObjects[i].widthPercent * pixelDimensionWidth;
}
if(visibleObjects[i].hasOwnProperty('heightPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
visibleObjects[i].sprite.height = visibleObjects[i].heightPercent * pixelDimensionHeight;
}
}
}
}
let mainContainer = document.getElementById('main-container');
let canvasContainer = document.getElementById('canvas-container');
let app = new Application({
width: getWidth(),
height: getHeight(),
antialias: false,
resolution: 1,
autoResize: true,
});
canvasContainer.appendChild(app.view);
window.addEventListener("resize", resizeCanvas);
loader
.add([
"images/games/test/objects.png",
"images/games/test/buttons.png",
"images/games/test/control.png",
])
.load(setup);
function setup() {
player = {
id: "player",
rectangle: new Rectangle(0, 1, 6, 6),
texture: resources["images/games/test/objects.png"].texture,
sprite: new Sprite(this.texture),
xPercent: 50.0,
yPercent: 50.0,
widthPercent: 3.0,
heightPercent: 6.0,
};
player.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
player.texture.frame = player.rectangle;
visibleObjects.push(player);
app.stage.addChild(player.sprite);
resizeCanvas();
/*objectCoin = new Sprite(PIXI.loader.resources["/images/games/test/objects.png"].texture);
buttonTouch = new Sprite(PIXI.loader.resources["/images/games/test/buttons.png"].texture);
buttonKeyboard = new Sprite(PIXI.loader.resources["/images/games/test/buttons.png"].texture);
controlLeft = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);
controlRight = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);
controlUp = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);
controlDown = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);*/
}
Thank you. I'm new to the forum by the way.