pjuke Posted April 5, 2014 Share Posted April 5, 2014 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! pjuke 1 Quote Link to comment Share on other sites More sharing options...
enpu Posted April 8, 2014 Share Posted April 8, 2014 Try canvas.style.cssText="idtkscale:ScaleAspectFit;"; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.