Search the Community

Hi, i'm looking to get any solution form resizing the 'game' correctly in desktop and mobile screens but no way. I get the background image (sprite) non centralized and zoomed stage. Anyone can tell me please what's the wrong? CSS body { background-color: rgb(0, 0, 0); width: 100%; height: 100%; overflow: hidden; } #pixi-canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } JS const logicalWidth = 1280 // window.innerWidth; const logicalHeight = 720 // window.innerHeight; // Init Application let app: PIXI.Application = new PIXI.Application(logicalWidth, logicalHeight, { backgroundColor: 0x2c3e50, roundPixels: true, resolution: window.devicePixelRatio, autoResize: true }); app.view.id = 'pixi-canvas'; // Add canvas to DOM document.body.appendChild(app.view); { ... } let background: PIXI.Sprite = PIXI.Sprite.fromImage("bg"); rootContainer.addChild(background); app.stage.addChild(background); { ... } this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth); window.addEventListener('resize', () => { this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth); }); private resizeHandler(stage: PIXI.Container, renderer: any, logicalHeight: number, logicalWidth: number) { const scaleFactor = Math.min( window.innerWidth / logicalWidth, window.innerHeight / logicalHeight ); let newWidth: number = Math.ceil(logicalWidth * scaleFactor); let newHeight: number = Math.ceil(logicalHeight * scaleFactor); console.log('size', {w: logicalWidth, h: logicalHeight, newW: newWidth, newH: newHeight, scaleFactor: scaleFactor}); renderer.resize(newWidth, newHeight); stage.scale.set(scaleFactor); }; RESULT

Hi there, Just a short intro, big fan of BabylonJS library! It got me excited to work on a new project of mine which is my first game. Bear with me now please, as I am fairly new to it, although I'd say I have done my studies on your API and documentation, which looks very attractive. The issue I am having is that when I scale objects bigger, collision goes wrong; Moving objects collide when they have already overlapped. What I expect is that the collision happens as soon as any face of a bounding box touches any face of the other bounding box The more I scale my objects, the worse things look. Please take a look at this playground which is hopefully self explanatory: http://www.babylonjs-playground.com/#10IKS#1 Further worse, uncomment line 29 which scales the ball bigger and see the obvious overlap with the wall. I messed with the methods and properties in the BoundingInfo but nothing helped. It does not look to me that the BoundingInfo is missing something anyway; as you can see, showBoundingBox = true (i.e. the wireframe) reveals nothing unexpected to my eyes. It's the whatever shape/thing that is used to calculate collision is what seems wrong and does not seem to update with the scaled ball. Shouldn't it?