Scale down but not up [possible solution]

The project I'm working on requires scaling for all sorts of screen sizes and letterbox integer scale proved to scale down too much on odd screen sizes (mobile). While I like the Letterbox scale - it solves that problem - I would only like it to scale down, so when its at it's native resolution it won't scale past that and be too large.

Is there something I can do to the exported HTML (or the project) to specify a maximum size for the canvas?

I basically want to have it at a max size so the art doesn't distort on large screens but also would like this so I can put a webpage behind it.

Any suggestions?

Found a plausible solution if anyone was wondering.

Inside C2:

1 - System > compare two values > WindowWidth (greater than) [your max window width]

1 - System > compare two values > WindowHeight (greater than) [your max window height]

   Action > set Canvas size [your max window width and height]

outside of C2 (once your project is exported) you can add -[amount of px you want as padding]

Query(window).resize(function() {

cr_sizeCanvas(jQuery(window).width()-25, jQuery(window).height()-25);

          });

for percentage of the screen, bracket and times by the percentage as a decimal (this is 90%):

Query(window).resize(function() {

cr_sizeCanvas((jQuery(window).width()*0.9), (jQuery(window).height()*0.9));

          });

(Sorry I had a mistake in previous post, now I have re-edited it, this is the correct version).

Nice solution!

I was looking for that a while ago and came to an alternative solution.

It may be useful.

If you do not minify the exported javascript code, you can just add a few lines in c2runtime.js file and it will only scale down and not up the specified size. Here is, how it works:

You make the project, put the fullscreen mode to letterbox scale and export the project, without minifying the javascript.

After the export, you should open the c2runtime.js and find the blocks of code, corresponding to letterbox scale. Usually they start with this:

"

if (mode >= 4)

     {

     var orig_aspect = this.original_width /

     this.original_height;

     var cur_aspect = w / h;

     if (cur_aspect > orig_aspect)

          {

...

"

Now, you find the following two blocks:

1. " if (mode === 5)     // integer scaling

     {

     intscale = neww / this.original_width;

     if (intscale > 1)

          intscale = Math.floor(intscale);

     else if (intscale < 1)

          ...

     ...

     }

2. if (mode === 5)     // integer scaling

     {

     intscale = newh / this.original_height;

     if (intscale > 1)

          intscale = Math.floor(intscale);

     else if (intscale < 1)

          ...

     ...

     }

In both above-mentioned blocks, right after the closing bracket "}" and just above the blocks

1. else

     {

          offx = (w - neww) / 2;

          w = neww;

     }

2. else

     {

          offy = (h - newh) / 2;

          h = newh;

     }

you should add the following block (the same thing in both cases):

else if (w > CertainWidthValue && h > CertainHeightValue)

     {

          offx = (w - CertainWidthValue) / 2;

          offy = (h - CertainHeightValue) / 2;

          w = CertainWidthValue;

          h = CertainHeightValue;

     }

So, the latter block appears twice in the script.

Instead of CertainWidthValue and CertainHeightValue you can write in any desired values (e.g. the real size of the game), above which the project will not scale up, even if the window is enlarged. But be sure, to keep the original aspect ratio, when writing in the maximum width and height values for scaling up, in order not to distort the game.

Save the file and you are done! Before testing, do not forget to clear the browser cache :)

Have a nice day!