Sign in to follow this  
nikolayku

Right way for whole screen scaling

Recommended Posts

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 approach

var 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?

 

 

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.63

and 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 

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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). 

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.