Search the Community

I have found a very strange issue in regards to positioning the containers on the screen on different screen size. For example, I have set my screen size as window.innerWidth X window.innerHeight. So the center of the screen is centerPoint = (window.innerWidth / 2, window.innerHeight / 2). When I place some circle shape container at (centerPoint.x + 570, centerPoint.y + 370), I expect that it would be displayed at the bottom right corner of the browser screen. But the display is different on my macbook and PC. On my Macbook it display correctly and I can see the entire container. But on PC I can only see the left edge of the container at the bottom right. The rest of container is outside the screen, I have to move it back to (centerPoint.x + 510, centerPoint.y + 370) to display it fully on PC. However this change makes it shift left on my Macbook browser screen. How can I make them work like the same? I use a camera so I hope I can position containers relative to the camera center.

I'm creating a game targeted at multiple mobile devices including ios, android and RIM blackberry. All these devices have multiple screen resolutions and varying aspect ratio's. My game is a side scroller, similar to Run-Pixie-Run. I quite like the idea of scaling the tiles / sprites up to match the vertical resolution of the screen, and then just exposing more or less of the right-hand-side depending on the horizontal resolution, as is done in Run-Pixie-Run. What is the best strategy for this? Is there support in Phaser / Pixi to assist with this? I attach 3 image examples of how Run-Pixie-Run scales.

Hi. First I must say this is awesome engine, so simple, so fast ... thank you very much But I have problem with your Simple physics example, the canvas is not full screen (nor landscape nor portrait), I further tested it with mousedown and the canvas is truly not extended to the edges (at lease 1/3 of screen is out of bounds in landscape mode). I tried adding X and Y values to game.start() but this causes part of the screen that is outside to flicker and/or show multiple objects from game going in reverse direction. I also tried to set size with window.innerWidth and window.innerHeight but that causes game to be overstretched and almost 1/3 of canvas falls out of screen. So my question is, what is the best way to set screen size for multiple devices (from 320px up)? My second question is why is there "game.DebugDraw.enabled = true" in Simple physics example, but not in Flying Dog? My app does not render anything without game.DebugDraw.enabled set to true? I am working on Sony Ericsson Xperia Arc S (LT18i), android 4.0.4 with CocoonJS Launcher. Thank you and keep up the good work!