Search the Community

Hi everyone, I'm currently makind VR apps with BabylonJS, and try to solve the issue of the canvas resolution. I've already found some discussions about this topic, oddly none seems to concern the same issue as I do (it's not about anti-aliasing, as far as I understand, it's more about hardware pixel and css pixel) If I open this playground in my phone : https://www.babylonjs-playground.com/#JPJB3A#2 (not VR, the question is the same for mobile VR and mobile non-VR applications) The pixels are too large. When watching the phone through Google Cardboard it's even worse. This playground https://www.babylonjs-playground.com/#JPJB3A#1 is much better, with hardwareScaling set to 0.25 It's fairly logical, because my phone has 4 hardware pixels per "layout pixel". 1) I'm using a ZTE Axon 7 phone, with 2500*1080 screen. A full screen canvas has width = 900px, height=450px in my browser. Do you encounter the same issues with your phone ? 2) Is there already an automatic built-in way to set the canvas resolution ? Like with the <meta> or something ? (ie : without adding resizing code in the app) 3) If no, should not we add some code to recognize the screen dpi an set the hardwareScaling accordingly ? So it work "out of the box" on mobile. Or is it to CPU-intensive to enforce x16 resolution ? Thanks a lot for you inputs ! Have a nice week-end PS : I've also tried the scenes from @davrous -interesting- article here : https://www.davrous.com/2017/07/07/from-zero-to-hero-creating-webvr-experiences-with-babylon-js-on-all-platforms/ , I'm 90% sure I have the same issues with the examples like Sponza scene, also the fact there are some textures ad lightning make it less obvious.

I appear to have an issue where resizing my game causes my parallax backgrounds to move around, and am looking for some help to see what I may be doing wrong. The game looks generally like this: Onto the problem: I have several layers of background that move at different speeds. The first layer of background (layer0 in the code) moves in unison with the foreground. I can line up the player's character with a background object in layer0 and then resize the screen and the player remains in the exact same relative position to the background object, which is great. Where I run into trouble, is that I can't line up the player with objects in the other parallax layers (layer1 through layer4) and then resize the screen and keep the player lined up with background objects. Perhaps I'm missing a fundamental point about parallax layers, but I figured that resizing the screen would simply shrink or enlarge the entirety of the game view -- NOT cause the background layers to move around relative to everything else. So I assume I've made an error in how I treat these layers. Here are pictures of the discrepancy: The grey cloud adjacent the orange ship is in layer0. The red cloud is layer1 (parallax). The red cloud moves more slowly than the layer0 grey cloud when the ship moves around. I thought everything was working fine until I resized the window. Upon changing the browser window's size, all of the images have resized nicely, and the orange ship remains in the exact same relative position to the cloud in layer0, however the red cloud from layer1 has moved. The top most gray cloud is in layer2 (not included in the code) and has moved even further. To shorten the code, I'm going to remove layers2-4 as all of these layers are logistically the same as layer1; they are all parallax layers. The question becomes: What am I doing wrong with either resizing my game's view, or with my parallax layer1? function Background() { this.layer0 = new PIXI.DisplayObjectContainer() this.layer1 = new PIXI.DisplayObjectContainer() //skipping layer2, layer3, layer4}Background.prototype.initialize = function(stage) { stage.addChild(this.layer0) stage.addChild(this.layer1) var cloud = new PIXI.Sprite(PIXI.Texture.fromFrame('compressed-cloud.png')) cloud.anchor.x = cloud.anchor.y = 0.5 this.layer0.addChild(cloud) var cloud1 = new PIXI.Sprite(PIXI.Texture.fromFrame('compressed-cloud.png')) cloud1.anchor.x = cloud1.anchor.y = 0.5 cloud1.tint = 0xff0000 this.layer1.addChild(cloud1)}Background.prototype.moveBy = function(x, y) { // mapped to foreground this.layer0.x += x this.layer0.y += y // parallax this.layer1.x += x * 0.8 this.layer1.y += y * 0.8}Background.prototype.setScale = function(scale) { this.layer0.scale.x = this.layer0.scale.y = scale this.layer1.scale.x = this.layer1.scale.y = scale}To summarize Background, it is a plain non display object which creates two display objects, layer0 and layer1, which it adds to the stage. Some clouds are added to each of the layers as a test. When the background is moved, layer0 is moved by the same amount as the foreground layer, meanwhile layer0 is moved only 80% as much, creating a parallax effect. When the screen is resized, both layer0 and layer1 are rescaled. Now my display and resizing logic: function Display() { // default, these values need updated if the window is ever resized this.windowWidth = window.innerWidth this.windowHeight = window.innerHeight // a size for the game, applied to a PIXI renderer // changing these values will zoom in/out the game this.gameWidth = 500 this.gameHeight = 500 // scaling ratio between the game and the browser window this.scale = 1 this.recalcuateScale()}Display.prototype.resize = function() { this.windowWidth = window.innerWidth this.windowHeight = window.innerHeight this.recalcuateScale()}Display.prototype.recalcuateScale = function() { var xRatio = this.windowWidth / this.gameWidth var yRatio = this.windowHeight / this.gameHeight this.scale = (xRatio < yRatio) ? xRatio : yRatio}Display keeps track of the actual browser window dimensions, and calculates a scale between them and the game dimensions. The scale calculation is basically to take the smaller of the width or the height ratio. I'll note that the game isn't actually ever a 500x500 pixel square, it'll instead be a 1920x1200 view (or any size) where the graphics have been scaled up to a nice pixelly aesthetic. There's never any horizontal or vertical mashing, all the pixels stay crisp and square. I can't include all the code, but here is where display resize is used: window.onresize = function() { console.log('resizing!') display.resize() renderer.resize(display.windowWidth, display.windowHeight) background.setScale(display.scale) foreground.scale.x = display.scale foreground.scale.y = display.scale hud.resize() }And here is roughly where the actual movement of the foreground/background occurs: var targetX = 0var targetY = 0var cameraX = 0var cameraY = 0function moveCamera(x, y) { targetX = x targetY = y}function updateCamera(delta) { var dx = targetX - cameraX var dy = targetY - cameraY var moveX = dx * delta * 10 var moveY = dy * delta * 10 cameraX += moveX cameraY += moveY background.moveBy(moveX, moveY) foreground.x = cameraX foreground.y = cameraY}It is a little messy, but I doubt the error is in the camera logic. Summary of camera logic: camera gets aimed at a position, and then each frame it moves towards it gently at the rate of delta * 10. The foreground and background move at the exact same rate (despite my having coded it awkwardly where one uses foreground.x = cameraX and the other uses layer0.x += moveX). The parallax effect occurs inside of moveBy(), where moveX is reduced for layers 1 through 4. Anyone know what I've done wrong? Thanks for reading!

Hey guys! I just want to find out if anyone knows why this is happening to my CocoonJS game. I had my physics game running at 60+ FPS no problems on my samsung S3 (720x1280). However once I added a single image (58x62) it dropped the FPS to 42~43. The image is attached to a static box2D obj. Could the screen resolution be too big? I ask because I have made and iPad game with loads of images and no problems on cocoonJS. For now I have made the resolution smaller and planning to scale up however I wanted to see if I could a better reason to why this happens with a single image. Thanks all!