Using typescript and pixi.js v4.8.2, I have implemented the following code to create containers:
let appWidth = app.renderer.view.width
let appHeight = app.renderer.view.height
mapContainer = new PIXI.Sprite(PIXI.loader.resources.water_pattern.texture);
mapContainer.height = app.renderer.view.height
mapContainer.width = appWidth - appWidth / 5 - appWidth / 14
mapContainer.x = app.renderer.view.width / 14
cardContainer = new PIXI.Sprite(PIXI.Texture.WHITE);
cardContainer.tint = 0x3C2415;
cardContainer.height = app.renderer.view.height / 2
cardContainer.width = app.renderer.view.width / 14
actionContainer = new PIXI.Sprite(PIXI.Texture.WHITE);
actionContainer.tint = 0x00FF00;
actionContainer.height = app.renderer.view.height / 2
actionContainer.width = app.renderer.view.width / 14
actionContainer.y = app.renderer.view.height / 2
chatContainer = new PIXI.Sprite(PIXI.Texture.WHITE);
chatContainer.tint = 0x008080;
chatContainer.height = app.renderer.view.height / 2
chatContainer.width = app.renderer.view.width / 5
chatContainer.x = app.renderer.view.width * 4 / 5
playerContainer = new PIXI.Sprite(PIXI.Texture.WHITE);
playerContainer.tint = 0xCCCCCC;
playerContainer.height = app.renderer.view.height / 2
playerContainer.width = app.renderer.view.width / 5
playerContainer.y = app.renderer.view.height / 2
playerContainer.x = app.renderer.view.width * 4 / 5
app.stage.addChild(mapContainer, cardContainer, actionContainer, chatContainer, playerContainer)
Next, I attempted to create sprites within these containers:
let settlement = new PIXI.Sprite(PIXI.loader.resources.settlement_red.texture)
settlement.height = 10
settlement.width = 10
settlement.x = 0
settlement.y = 0
chatContainer.addChild(settlement)
However, the output does not match the expected result:
https://i.sstatic.net/FE13y.png
The positioning and size of the house sprite appear incorrect. What could be causing this issue and how can it be resolved?
It should be noted that despite the option to use PIXI.Container, I prefer using sprites for background images within containers. I believe it provides a better structure for integrating background images directly into the container.
Finally, here is a snippet of my application code:
app = new PIXI.Application({ // http://pixijs.download/release/docs/PIXI.Application.html
antialias: true, // default: false
forceCanvas: true, // default: false (forces canvas rendering instead of webgl rendering)
}
);
app.renderer.autoResize = true;
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);
document.body.appendChild(app.view);