Jump to content

CocconJS - Full screen and keep aspect ratio


Recommended Posts

I'm playing around with PIXI and CocoonJS.
I want the game to be centered on screen and keep the aspect ratio. I successfully made that work in the browser, but not quite on the CocoonJS launcher.

I found this thread here on the forum with a similiar issue, but he's not keeping aspect ratios, therefore I modified it a bit.
My source code is as follows:

<html><head> <title> </title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <style type="text/css">        body {            margin: 0px;            background: #000;        }    </style>    <!-- Android fix --></head><body>    <script src="js/lib/pixi.js"></script>    <script type="text/javascript ">        window.onload = function () {           // Get win height and dip          var winWidth = window.innerWidth*window.devicePixelRatio;          var winHeight = window.innerHeight*window.devicePixelRatio;          var dip = window.devicePixelRatio;                    // Create canvas element          var canvas = document.createElement('canvas'),              appWidth = 160,              appHeight = 90;          canvas.screencanvas = true;          canvas.style.cssText="idtkscale:ScaleAspectFill;";          canvas.width = appWidth;          canvas.height = appHeight;           canvas.style.position = 'absolute';          canvas.style.left = '0px';                         canvas.style.top = '0px';                         document.body.appendChild(canvas);          // Create stage          var stage = new PIXI.Stage(0x66FF99);          // Create renderer          var renderer = new PIXI.WebGLRenderer(winWidth, winHeight, canvas);                           requestAnimFrame( animate );          // Create some content          var bunny = PIXI.Sprite.fromImage("bunny.png ");          var crate1 = PIXI.Sprite.fromImage("crate.jpg ");          var crate2 = PIXI.Sprite.fromImage("crate.jpg ");          var crate3 = PIXI.Sprite.fromImage("crate.jpg ");          var crate4 = PIXI.Sprite.fromImage("crate.jpg ");          var crate5 = PIXI.Sprite.fromImage("crate.jpg ");                    bunny.width = bunny.height = 40;          bunny.anchor.x = 0.5;          bunny.anchor.y = 0.5;          bunny.position.x = appWidth / 2;          bunny.position.y = appHeight / 2;          // Position the crates in each corners          crate1.position.x = 0;          crate1.position.y = 0;          crate2.position.x = appWidth-15;          crate2.position.y = 0;          crate3.position.x = 0;          crate3.position.y = appHeight-15;          crate4.position.x = appWidth-15;          crate4.position.y = appHeight-15;          crate5.position.x = appWidth/2 - 7.5;          crate5.position.y = -7.5;          crate1.width = crate1.height = 15;          crate2.width = crate2.height = 15;          crate3.width = crate3.height = 15;          crate4.width = crate4.height = 15;          crate5.width = crate5.height = 15;          // Use a scaler to scale up the view to fit          var scaler = new PIXI.DisplayObjectContainer();          scaler.addChild( bunny );          scaler.addChild(crate1);          scaler.addChild(crate2);          scaler.addChild(crate3);          scaler.addChild(crate4);          scaler.addChild(crate5);          stage.addChild( scaler );          function animate() {              requestAnimFrame( animate );              bunny.rotation += 0.05;              renderer.render(stage);          }          // The re-size method          // Calculates the correct ratio and scales scaler          function resize() {              var wW = window.innerWidth*dip,                  wH = window.innerHeight*dip;              var newWidth = wW;              var newHeight = wH;              var widthToHeight = appWidth/appHeight;              var newWidthToHeight = newWidth/newHeight;              if (newWidthToHeight > widthToHeight) {                  newWidth = newHeight * widthToHeight;              } else {                  newHeight = newWidth / widthToHeight;              }              // Apply scales to fit the screen              scaler.scale.x = newWidth/appWidth;              scaler.scale.y = newHeight/appHeight;                            // Make sure it's centered on the screen              // If it's browser, we center the canvas on screen              if (!navigator.isCocoonJS) {                  renderer.resize(newWidth, newHeight);                  canvas.style.left = (wW - newWidth)/2 + 'px';                  canvas.style.top = (wH - newHeight)/2 + 'px';              } else {                  // In CocconJS, the view starts on top-left                  // But since we want it centered, change the scaler                  // TODO: Implement letterboxes here?                  // There's no clip being done here, and thus, elements are being drawn                  // outside of the scale container                  scaler.position.x = (wW - newWidth)/2;                  scaler.position.y = (wH - newHeight)/2;                        }          }           // Hook re-size event          window.addEventListener('resize', resize, false);          resize();           };    </script></body></html>

I'm looking for a solution where the container is centered on screen, keeping aspect ratios, and no objects are being drawn outside the scale container.
I tried to use a Graphics mask which works perfect, but gave me terrible terrible terrible performance on the mobile, so that is not an option...

Take a look at these screenshots and you will see.
Browser (works fine)

CocoonJS (currently)

CocconJS (want I want, letterboxes)

I guess I just can render two black textures as letterboxes, but is that really the way to go?
Cocoonjs requires that the whole screen is being rendered, and therefore stretches the canvas to max width and height, I guess that's why everything turns out green as background.

So what is the "proper" solution to achieve this? Performance-wise that is.

Thank you in advance!

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.

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.


  • Recently Browsing   0 members

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