How do I scale non-uniformly a layer?

Hi,

How can I resize a layer without constrain proportions?

Like this:

It's very easy to do this on Scirra Construct Classic (New action -> System -> Set Zoom -- and then adjust X and Y independently) but I have no idea on how it can be done on Construct 2. I've found out only how to proportionally scale a layer on C2 (New action -> System -> Set layer scale).

Thanks in advance! =D

I take it you would like to fill the viewport with an image? If yes, how about setting the image dimensions === to the Layout dimensions... What do you reckon??

I take it you would like to fill the viewport with an image? If yes, how about setting the image dimensions === to the Layout dimensions... What do you reckon??

Thanks for your reply - but I guess it won't work.

I need to resize an entire layout (all graphics there) to a specific aspect ratio.

I'm making a game that simulates an old 8-bit Nintendo game.

NES games were designed in a 8:7 aspect ratio - however they were played in a wider, 4:3 aspect ratio.

Super Mario 3 was designed this way:

But in a television the image looks different. Something like this:

I've designed "Tcheco" (

Any help is welcome! Thanks!

I perfectly get how you mean, I do not have expert knowledge but see if this helps- https://www.scirra.com/tutorials/73/sup ... zes/page-2.

Also the 4:3 aspect ratio scales to 8:6 as in [2(4:3)] and which is != 8:7 hence it will not be a perfect fit. I will like to see how this is resolved so I will appreciate it if you find a working solution post it on here still. Good luck!

You might be able to overwrite the width/height of the canvas that is used when drawing the game to adjust it to the desired proportions (you'd use javascript to do so).. I'm not sure if it would have any side-effects though.

edit: I think you'd modify the css width/height.

I am not sure it would work but perhaps pasting the layers with the canvas plugin, loading the result in a sprite, and setting it's size on both axis could work, however It could be really slow.

Also keep in mind that 8:7 to 4:3 can work (as it is a slight change of aspect ratio), but 8:7 to 16:9 will not be pleasant for anyone involved (Manos is an exemple of a game that scales completely like that, and... it is disturbing), and as 16:9 screen are now something common, it is something to think about.

Thank you very much for all replies!

• ij3m, this tutorial is very good, but I couldn't find anything about resizing an entire layer or layout there.

• Thanks for the tip, Prominent - but any javascript solution seems to be way too advanced for my skills.

I wish there was a simple action or plugin to resize "X" and "Y" of my layers independently.

• Aphrodite, your idea (to use Canvas plugin) was pretty good - but I couldn't make it work. When I paste a layer on canvas it simply doesn't appear (I don't know what I'm doing wrong since other actions like "paste object" or "draw square" are working).

And yes, my plan is to make an 8:7 to 4:3 conversion (since my game tries to look like an 8-bit NES title).

I'm aware it would look ugly in 16:9.

My game ("Tcheco") was made in Construct Classic since I had no money to buy a C2 license.

I could change the aspect ratio just like I wanted:

Now I have a C2 license and would love to convert it from Construct Classic to Construct 2. All I get is this:

I'ts very frustrating not being able to resize my layouts. If it's not really possible I won't even bother to convert the game (keeping the correct aspect ratio and being faithful to NES aesthetics is very important to me).

Thanks again for your help and any new ideia is welcome!

It might take a bit of work, but you could maybe use families to help reduce the amount of events:

You could set up a function that checks the position of an object in relation to the entire screen width/height.

Get the distance via a percentage of the width and height..

So if the object has x position of 25 and y position of 10, and the screen at original scale is 100 x 100..

25/100 is 0.25

10/100 is 0.10

Then you take the stretched scale.. say the screen should be 130x110..

the object's new position would be 0.25x130 for the x axis, and 0.10x110 for the y axis.

You'd then have to adjust the object's height and width by doing the same calculations.

130/100 is 1.3 , so the size increase by 1.3 times.

the object's new width should be 1.3 times bigger. 16x1.3 is 20.8 for the new width

Do similarly for the height..

Do this for every object in the game that needs resizing/repositioned..

Thanks Prominent! Your solution looks way too advanced for me but I'll see if I can make it work.

Meanwhile I'll wait for an update/plugin/effect that freely resizes layers or layouts.

Thanks again for all the help!

Macbee

I'm kinda confused as to what you want exactly but maybe you're looking for the "letterbox scale" option in the project properties? It's under "fullscreen in browser".

https://dl.dropboxusercontent.com/u/238 ... ratio.capx

example of how it looks: http://i.imgur.com/Fu5eTkG.png

Thanks andreyin - but it's not exactly what I need.

I want to stretch a layer (or layout) horizontally. To make it "fatter" instead of scale it proportionally.

Old videogames like NES and SNES had stretched images when played on CRT TVs - and I want to simulate this on C2.

Here Macbee ,

Use the browser plugin and run a javascript event at start of layout with the following code:

Make sure to replace the 320 and 180 values throughout the code with the desired sizes..

It will stretch the screen.

"
var w,h;
       if(window.innerWidth>window.innerHeight){
            var aspect = 320/180;
            w = Math.round(Math.max(180,180*Math.floor(window.innerHeight/180))*aspect);
            h = Math.max(180,180*Math.floor(window.innerHeight/180));
       }else{
            var aspect = 180/320;
            w = Math.max(320,320*Math.floor(window.innerWidth/320));
            h = Math.round(Math.max(320,320*Math.floor(window.innerWidth/320))*aspect);
       }
       c2canvas.style.width= w+'px';
       c2canvas.style.height= h+'px';
       var c2div = document.getElementById('c2canvasdiv');
       c2div.style.width= w+'px';
       c2div.style.height= h+'px';
       c2div.style.marginLeft= Math.round((window.innerWidth-w)*0.5)+'px';
       c2div.style.marginTop= Math.round((window.innerHeight-h)*0.5)+'px';

if(window.attachEvent) {
    window.attachEvent('onresize', function() {
       var w,h;
       if(window.innerWidth>window.innerHeight){
            var aspect = 320/180;
            w = Math.round(Math.max(180,180*Math.floor(window.innerHeight/180))*aspect);
            h = Math.max(180,180*Math.floor(window.innerHeight/180));
       }else{
            var aspect = 180/320;
            w = Math.max(320,320*Math.floor(window.innerWidth/320));
            h = Math.round(Math.max(320,320*Math.floor(window.innerWidth/320))*aspect);
       }
       c2canvas.style.width= w+'px';
       c2canvas.style.height= h+'px';
       var c2div = document.getElementById('c2canvasdiv');
       c2div.style.width= w+'px';
       c2div.style.height= h+'px';
       c2div.style.marginLeft= Math.round((window.innerWidth-w)*0.5)+'px';
       c2div.style.marginTop= Math.round((window.innerHeight-h)*0.5)+'px';
    });
}
else if(window.addEventListener) {
    window.addEventListener('resize', function() {
       var w,h;
       if(window.innerWidth>window.innerHeight){
            var aspect = 320/180;
            w = Math.round(Math.max(180,180*Math.floor(window.innerHeight/180))*aspect);
            h = Math.max(180,180*Math.floor(window.innerHeight/180));
       }else{
            var aspect = 180/320;
            w = Math.max(320,320*Math.floor(window.innerWidth/320));
            h = Math.round(Math.max(320,320*Math.floor(window.innerWidth/320))*aspect);
       }
       c2canvas.style.width= w+'px';
       c2canvas.style.height= h+'px';
       var c2div = document.getElementById('c2canvasdiv');
       c2div.style.width= w+'px';
       c2div.style.height= h+'px';
       c2div.style.marginLeft= Math.round((window.innerWidth-w)*0.5)+'px';
       c2div.style.marginTop= Math.round((window.innerHeight-h)*0.5)+'px';
    }, true);
}
else {
    //The browser does not support Javascript event binding
}
"
[/code:jvv3wckq]

Ooh, now I get it, you're talking about overscan!

If what Prominent said doesn't work, I think your best bet would be getting someone to program a WebGL filter that simulates what overscan does.

This explains very well what happens in overscan:

http://wiki.nesdev.com/w/index.php/Overscan

If you could find the WebGL effect that does something like this on the web you could just port it over to C2 by opening the .fx in a text editor, too.

Thanks Prominent!! I'll try it right now!! =D

EDIT: HA, IT WORKS!! You're a genius, thank you very much!!!!