Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

[SOLVED] - Stage Width and Height

MackeyK24

By MackeyK24,
in Questions & Answers

 Share

Recommended Posts

MackeyK24 Newbie

MackeyK24

Posted
Posted

Is there anything like "Stage Width and Height"... I am asking because i am getting some weird scaling where the X scale looks like it "real skinny" ONLY when i change the #renderCanvas to try and make 600 x 900 canvas center in page... Centers and looks great but my models look "SQEEZED":

Screen Shot 2016-12-20 at 3.12.02 AM.png

 

For now i get by by just adding a little KLUDGE to the scaling.x by giving it an offset... Should look more like this:

Screen Shot 2016-12-20 at 3.13.40 AM.png

 

Is there some kind of stage width and height and or scaling options we have to set when not using a canvas at 100%

Here my my #css: 

        #cvs {
            position: absolute;
            width: 600px;
            height: 900px;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0;
            opacity: 0;
            z-index: 0;
            outline: none;
            touch-action: none;
            -ms-touch-action: none;
            background-color: #000000;
        }

 

Anyone Got Any Ideas On This One ???

 

Link to comment
Share on other sites
Pryme8 Newbie

Pryme8

Posted
Posted

are you doing an engine,resize()?

Ohh nm I know!~

Just make a container div for your scene, and set its width and height, then leave your canvas to 100% and 100% so that way the offsetWidth and height still work otherwise your breaking the engine resize.

Link to comment
Share on other sites
Pryme8 Newbie

Pryme8

Posted
Posted

I have no problem making a container div setting it to absolute and the size I want then placing the canvas inside of the div and doing the normal process, I've had to manual fire the resize event before but other then that I've never seen the behavior you have described.

Link to comment
Share on other sites
Pryme8 Newbie

Pryme8

Posted
Posted

Yes, let me do a write up really quick... I could show you the quick and dirty but let me set up a nice sheet for you that has some tricks applied (ill explain them) like a fixed wrapper to keep the "bump" navigation off on touch-clients and the such.  

 

Link to comment
Share on other sites
Pryme8 Newbie

Pryme8

Posted
Posted

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Size Game</title>
</head>
<style>
@charset "utf-8";
      html, body {
         overflow: hidden;
         width: 100%;
         height: 100%;
         min-height: 100%;/*IE hack...*/
         margin: 0;
         padding: 0;
         background:black;
         color:white;         
         letter-spacing:0.15em;
         line-height:1.225em;
         font-size:16px;
      }
      
      body *{
          box-sizing:border-box;  
          -moz-box-sizing:border-box;  
          -webkit-box-sizing:border-box;  
      }
      .main-wrap{
        position:fixed;/*Bump Fix*/
        z-index:1;
        width:600px;
        min-height:100%;
        top:0;left:50%;
        /*Old Browser support*/ 
        /*margin-left:-300px;*/
        /*Modern Browser support*/ 
        transform:translateX(-50%);
        -moz-transform:translateX(-50%);
        -webkit-transform:translateX(-50%);
        background:rgba(255,255,255,0.2);
        overflow:hidden;        
      }
      .game-block{
        position:absolute;
        width:100%;
        height:100%;
        top:0;left:0;        
        border-left:1px solid rgba(255,255,255,0.6);
        border-right:1px solid rgba(255,255,255,0.6);
      }
      
      .game-block canvas{
         width: 100%;
         height: 100%;
         touch-action: none;  
      }

</style>

<script src="../babylon.custom.js"></script> <!-- BJS location -->
<body>
<div class='main-wrap'>
    <div class='game-block'>
        <canvas id='game-canvas'></canvas>
    </div>
</div>
</body>
<script>
 document.addEventListener("DOMContentLoaded", function() {
         var canvas = document.getElementById('game-canvas');
        var engine = new BABYLON.Engine(canvas, true);
        var scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3(0, 0, 0);
        
        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
        camera.setTarget(BABYLON.Vector3.Zero());
        camera.attachControl(canvas, false);
        
        var lights = [new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0.5), scene),
                       new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, -0.2, -0.35), scene)]
          
                    
        lights[0].intensity = .85;
        lights[1].intensity = .35;
    

        var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
        sphere.position.y = 1;

        var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

      engine.runRenderLoop(function () {
         scene.render();
      });

      window.addEventListener("resize", function () {
         engine.resize();
      });
            
    
  }, false);
</script>
</html>




Give this a shot, its very basic, but it shows you correct css structure and blah...  I would rework how the scene is built and make it a called function that is on a separate script.  But this works at least.

Link to comment
Share on other sites
Pryme8 Newbie

Pryme8

Posted
Posted

I think its in how the engine.resize works...

The quick and dirty way that gl resizes its context is thorough canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight;

Im not sure how babylon handles its engine resize but Id assume its something like this, so to make a set width scene just have a set width container for the canvas and have the canvas set to 100% 100% on its styling.

Now the Ortho cameras perspective will not be the same because its is a different projection, you can tailor it by setting the cameras settings to be in relation to the ratio of height vs width and it will not distort.

Link to comment
Share on other sites
MackeyK24 Newbie

MackeyK24

Posted
  • Author
Posted
6 hours ago, Pryme8 said:

Now the Ortho cameras perspective will not be the same because its is a different projection, you can tailor it by setting the cameras settings to be in relation to the ratio of height vs width and it will not distort.

That is interesting... is there some formula for calculating the correct... Right now I make the orthographic view based on he one size field you have in unity:

  

            if (camera.orthographic)
            {
                float size = camera.orthographicSize;
                babylonCamera.orthoTop = size;
                babylonCamera.orthoBottom = -size;
                babylonCamera.orthoLeft = -size;
                babylonCamera.orthoRight = size;
                babylonCamera.mode = 1;
            }
            else
            {
                babylonCamera.mode = 0;
            }

 

So there should be some kinda of OFFSET with WIDTH and HEIGHT based on the BOX i am creating for the ortho view ???

 

Link to comment
Share on other sites
Kesshi Newbie

Kesshi

Posted
Posted
49 minutes ago, MackeyK24 said:

Same problem... It is ONLY with Orthographic View... I thinks is how i make the box out of Otho Top,Left,Right and Bottom

Currently BabylonJs doesn't update the aspect ratio of orthographic cameras during the resize. This is what i'm doing manually afterwards:
  

private updateOrthoAspectRatio(): void
{
    let tAspect = this.mEngine.getAspectRatio(this.mCamera);
    let tOrtho = this.mCamera.orthoTop;
    this.mCamera.orthoBottom = -tOrtho;
    this.mCamera.orthoLeft = -tOrtho * tAspect;
    this.mCamera.orthoRight = tOrtho * tAspect;
}

 

Link to comment
Share on other sites
MackeyK24 Newbie

MackeyK24

Posted
  • Author
Posted

Holyshit ... I think i got it: 

float vert = camera.orthographicSize;
float horz = vert * exportationOptions.CameraAspectRatio;
babylonCamera.orthoTop = vert;
babylonCamera.orthoBottom = -vert;
babylonCamera.orthoLeft = -horz;
babylonCamera.orthoRight = horz;

The camera aspect ratio would the the canvas width and height ratio... 600 x 900 = .66

So if unity ortho vertical size = 10 the horizontal size would be vert * ratio or 6.66

So BabylonJS Ortho Box (top: 10, bottom: -10, left: 6.66, right: -6.66)  

So far... working great... trying other screen dimensions to make sure :)

NOTE: You have to manually set (in the scene exporter panel) the "default camera aspect ratio" for your project... So if you set your canvas to 600 x 900 (global for all scenes)... And your are going to use a ORTHOGRAPHIC CAMERA... You have to set the Camera Aspect Ratio to .66 to sync up things... There is NO WAY for me to tell at Export time WHAT YOU CANVAS size is... so you gotta set... Again.. For ORTHO camera.  Defaults to 1.0

 

Link to comment
Share on other sites
MackeyK24 Newbie

MackeyK24

Posted
  • Author
Posted

@Kesshi ... I think we figured it out at the same exact time... How weird is that :)

Just as i got a notification from you... I just hit save with my solution as well... And they are basically the same...

Except i can't use your engine.GetAspectRatio... Unless i move my other camera stuff to client code and not the exporter...

 

EDIT: But i don't seem to have to change in RESIZE event... I just set the orthoTop-Left-Right-Bottom in C# unity toolkit and serialize to the scene file... It seems to work even when browser window resized... But I DONT call any kind of UpdateCameraOtherView on resize.  Note the exporter snippet: 

            if (camera.orthographic)
            {
                float vert = camera.orthographicSize;
                float horz = vert * exportationOptions.CameraAspectRatio;
                babylonCamera.orthoTop = vert;
                babylonCamera.orthoBottom = -vert;
                babylonCamera.orthoLeft = -horz;
                babylonCamera.orthoRight = horz;
                babylonCamera.mode = 1;
            }
            else
            {
                babylonCamera.mode = 0;
            }

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...