How do I scale non-uniformly a layer?

Just started using Construct 2? Post your questions here

Post » Wed Aug 26, 2015 2:28 am

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.
B
19
S
6
G
1
Posts: 59
Reputation: 1,853

Post » Wed Aug 26, 2015 4:18 am

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.
Code: Select all
"
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
}
"
B
43
S
19
G
65
Posts: 1,098
Reputation: 37,933

Post » Wed Aug 26, 2015 5:00 am

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.
B
123
S
43
G
41
Posts: 846
Reputation: 28,204

Post » Wed Aug 26, 2015 4:28 pm

Thanks Prominent!! I'll try it right now!! =D
EDIT: HA, IT WORKS!! You're a genius, thank you very much!!!! :D :D :D

Image
B
19
S
6
G
1
Posts: 59
Reputation: 1,853

Previous

Return to Beginner's Questions

Who is online

Users browsing this forum: No registered users and 0 guests