Bilinear filter toggle & some help with scaling?

Okay, this kinda flies right in the face of the 'Please don't adjust official plugins' sticky Ashley has posted here, so apologies for that. I'd love to be able to add this stuff into a separate plugin somehow but since my changes rely on bypassing some official code I don't think it's possible. So if anyone wants to use this for their own projects you're completely welcome to of course, just know you'll be hacking into official code and you'll need to edit layout.js and preview.js whenever you update C2. Not ideal but a working solution at least for those who really need it.

I've been wanting a couple of graphics settings for C2 for some time, and one of them is the ability to toggle bilinear filtering on and off during runtime. I got this working now for both canvas2d and webgl. The toggle is tied to the high/low-quality fullscreen scaling setting, and for webgl it will only go into effect if no webgl effects are active. This shouldn't be hard to fix, tho I'm not so sure how good non-filtered rendering effects would end up looking. It also pretty much necessitates that pixel rounding is turned on, otherwise objects might draw at non-integer positions and look blurry/bad.

Here are the changes I made for those interested.

In 'layout.js' at line 537 change this:

// Need another canvas to render to. Ensure it is created.

if (!this.runtime.layout_tex)

{

     this.runtime.layout_tex = glw.createEmptyTexture(this.runtime.draw_width, this.runtime.draw_height, this.runtime.linearSampling);

}

// Window size has changed (browser fullscreen mode)

if (this.runtime.layout_tex.c2width !== this.runtime.draw_width || this.runtime.layout_tex.c2height !== this.runtime.draw_height)

              ?{

     glw.deleteTexture(this.runtime.layout_tex);

     this.runtime.layout_tex = glw.createEmptyTexture(this.runtime.draw_width, this.runtime.draw_height, this.runtime.linearSampling);

}

... to this:

// Need another canvas to render to. Ensure it is created.

if (!this.runtime.layout_tex)

{

     this.runtime.layout_tex = glw.createEmptyTexture(this.runtime.draw_width, this.runtime.draw_height, this.runtime.pointSampling);

}

// Window size has changed (browser fullscreen mode)

if (this.runtime.layout_tex.c2width !== this.runtime.draw_width || this.runtime.layout_tex.c2height !== this.runtime.draw_height)

              ?{

     glw.deleteTexture(this.runtime.layout_tex);

     this.runtime.layout_tex = glw.createEmptyTexture(this.runtime.draw_width, this.runtime.draw_height, this.runtime.pointSampling);

}

And in 'preview.js' at line 728 change this:

// Re-apply the image smoothing property, since resizing the canvas resets its state

this.ctx["webkitImageSmoothingEnabled"] = this.linearSampling;

this.ctx["mozImageSmoothingEnabled"] = this.linearSampling;

this.ctx["msImageSmoothingEnabled"] = this.linearSampling;

this.ctx["imageSmoothingEnabled"] = this.linearSampling;

... to this:

// Re-apply the image smoothing property, since resizing the canvas resets its state

if (!this.fullscreenScalingQuality)

{

     this.ctx["webkitImageSmoothingEnabled"] = this.pointSampling;

     this.ctx["mozImageSmoothingEnabled"] = this.pointSampling;

     this.ctx["msImageSmoothingEnabled"] = this.pointSampling;

     this.ctx["imageSmoothingEnabled"] = this.pointSampling;

}

else

{

     this.ctx["webkitImageSmoothingEnabled"] = this.linearSampling;

     this.ctx["mozImageSmoothingEnabled"] = this.linearSampling;

     this.ctx["msImageSmoothingEnabled"] = this.linearSampling;

     this.ctx["imageSmoothingEnabled"] = this.linearSampling;

}

The other thing I want to do is much harder, and I'm not sure I have the brains for it :P I'd like to force the low-quality fullscreen scaling to draw everything at 2X scale before stretching to fullscreen instead of the 1X scale it uses now. But just changing this.runtime.draw_width/height to this.runtime.original_width/height * 2 in preview.js' Runtime.prototype["setSize"] function doesn't work. First off, it only seems to change the render scale after all the post-processing effects have already been applied. Second, draw_width/height don't behave like I expected them to. To scale up, I need to divide them by a number larger than 1 and there doesn't seem to be a 1:1 relationship between draw_width/height and pixel resolution either. Setting draw_width to original_width / 2 gets me 3X scale for instance. I guess I'll need to poke around inside the renderEffectChain function and the whatnot at some point. But it would be much easier to experiment if I knew exactly what kind of values draw_width/height represent. So, does anyone know how these values work? I'd really appreciate the help :o)

I cannot emphasise enough how bad an idea it is to modify the scripts that come with Construct 2. Your .capx project will no longer be portable to a normal installation of Construct 2, and we will not have any regard for these changes as we make (sometimes sweeping) changes to the engine in future.

Alright then. So is any of this achievable through a custom plugin?

You would need to change the runtime.linearSampling value, and then also change the sampler settings on every texture that exists.

Thanks, I've managed to implement it in a separate plugin for canvas2d and (sorta) for webgl. Only the last renderpass seems to be affected by the way I'm doing it, which is actually perfect for low quality scaling.