nikolayku Posted January 4, 2014 Share Posted January 4, 2014 Hi to all.I have one question: When user change brouser screen size, is there a way to scale all screen(scene) ? for example I use next approachvar renderer = new PIXI.CanvasRenderer(400, 300, document.getElementById("maincanvas"));renderer.view.style.width = '800px';renderer.view.style.height = '600px';and when screen change it resolution, just update renderer.view.style.width and renderer.view.style.height with new values (of course I calculate aspect ratio) This work fine BUT perforce is bad if I twice screen resolution(as in example above) firefox(or chrome, or opera) will use 75-80% of my cpu. What I do wrong? Quote Link to comment Share on other sites More sharing options...
xerver Posted January 5, 2014 Share Posted January 5, 2014 You should really be using the renderer's resize method instead of doing that on your own. Quote Link to comment Share on other sites More sharing options...
nikolayku Posted January 5, 2014 Author Share Posted January 5, 2014 You should really be using the renderer's resize method instead of doing that on your own. resize method only resize render viewport(not proportionally scale all objects in scene). For example if render has size: 400X300 and i place some object to 200, 150 it will in center, but if i resize screen to 800x600:- in your method object will in top left quadrant of screen- in my method object will in center - but it cost cpu usage probably something else ? Quote Link to comment Share on other sites More sharing options...
xerver Posted January 5, 2014 Share Posted January 5, 2014 You should be using the resize method, and scale properties. Your entire scene should be in a single DisplayObjectContainer, which you can then change the scale properties of to scale up/down. Quote Link to comment Share on other sites More sharing options...
Mat Groves Posted January 5, 2014 Share Posted January 5, 2014 Hi guys Depending on your requirements both methods are correct. Although resizing the canvas renderer using like this ->var renderer = new PIXI.CanvasRenderer(400, 300, document.getElementById("maincanvas"));renderer.view.style.width = '800px';renderer.view.style.height = '600px';Should run faster than as it using native upscaling. Do you have a link to share? I would be curious to see how poorly it is performing? Thanks! Quote Link to comment Share on other sites More sharing options...
nikolayku Posted January 5, 2014 Author Share Posted January 5, 2014 Hi guys Depending on your requirements both methods are correct. Although resizing the canvas renderer using like this ->var renderer = new PIXI.CanvasRenderer(400, 300, document.getElementById("maincanvas"));renderer.view.style.width = '800px';renderer.view.style.height = '600px';Should run faster than as it using native upscaling. Do you have a link to share? I would be curious to see how poorly it is performing? Thanks! I modify pixi example 1 - Basics<!DOCTYPE HTML><html><head> <title>pixi.js example 1</title> <style> body { margin: 0; padding: 0; background-color: #000000; } </style> <script src="pixi.js"></script> <script> function Start() { // create an new instance of a pixi stage var stage = new PIXI.Stage(0x66FF99); // create a renderer instance //var renderer = PIXI.autoDetectRenderer(400, 300); var renderer = new PIXI.CanvasRenderer(400, 300, document.getElementById("maincanvas")); // approach 1 renderer.view.style.width = '800px'; renderer.view.style.height = '600px'; // approach 2 //renderer.resize(800, 600, document.getElementById("maincanvas")); // add the renderer view element to the DOM document.body.appendChild(renderer.view); requestAnimFrame( animate ); // create a texture from an image path var texture = PIXI.Texture.fromImage("bunny.png"); // create a new Sprite using the texture var bunny = new PIXI.Sprite(texture); // center the sprites anchor point bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; // move the sprite t the center of the screen bunny.position.x = 200; bunny.position.y = 150; stage.addChild(bunny); function animate() { requestAnimFrame( animate ); // just for fun, lets rotate mr rabbit a little bunny.rotation += 0.1; // render the stage renderer.render(stage); } } </script> </head><body onload="Start();"> <canvas id="maincanvas" >Sorry, your brouser does not support html5 canvas</canvas> </body></html>I run it in chrome Version 31.0.1650.63and linux top command (analog System Monitor in Windows) show that chrome eat 78-80% of my cpu with code above:PID USER PR NI VIRT RES SHR S %CPU %MEM TIME+ COMMAND 6173 nikolay 20 0 923m 43m 21m R 80.6 1.2 0:38.81 chrome <-------------------------- 1497 root 20 0 179m 59m 19m R 24.6 1.7 58:53.95 Xorg 2332 nikolay 20 0 1620m 149m 28m R 13.6 4.2 34:48.97 cinnamon 6070 nikolay 20 0 765m 71m 41m S 6.3 2.0 0:08.56 chrome 2605 nikolay 20 0 1226m 364m 55m S 2.5 10.3 50:16.62 firefox Quote Link to comment Share on other sites More sharing options...
rolyataylor2 Posted January 14, 2014 Share Posted January 14, 2014 What about making two DisplayObjectContainer's the inner one is for the cameras x and y position the outer one is for rotation and zoom; source.Draw.Stage = new PIXI.Stage(0x0FFFF0); source.Camera.Container = new PIXI.DisplayObjectContainer(); source.Camera.Object = new PIXI.DisplayObjectContainer(); source.Camera.Container.addChild(source.Camera.Object); source.Draw.Stage.addChild(source.Camera.Container);To change the zoom and rotation you would manipulate the camera.container object, to change the views position you would change the camera.object object. EDIT: Oh nevermind you said when you change the browser size.... my bad... Quote Link to comment Share on other sites More sharing options...
nikolayku Posted January 16, 2014 Author Share Posted January 16, 2014 I found solution.First of all problem is not in pixi or code above - problem in ..... and problem in .... PROBLEM IN GPU ACCELERATION which disabled on Linux in all browsers by default(for my ATI video card I install additionally proprietary driver and enable acceleration in browser settings). 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.