Better Rendering

[FailSafeNow]

First, I know there's all kinds of stuff about Apple II scaling, but it should be possible to get the renderer to a nice 4:3 aspect ratio. I've actually gotten it there myself with CSS, and it looks fine. I've also used CSS to upscale to a friendly 800 by 600. Could features like that be built into the emulator, so anyone who uses it can have good scaling?

Second, can we have the option to turn the pixelated image rendering on or off?

Third, I like the way the GL rendering blends the colors. It looks much better that way. But also, it adds some unnecessary things, like barrel distortion, more black border, a change of aspect ratio, chroma noise, and some kind of glitchiness down the left side of the screen. Can we have a version that keeps the color blending but gets rid of some of the other stuff?

[iflan]

I can only talk about the GL rendering because I'm not really sure what you want from the other two points. If you have some CSS to share, please do!

For the GL rendering, it's possible to adjust the barrel distortion and so forth as they are all parameters to the screen configuration:

https://github.com/whscullin/apple2js/blob/main/js/gl.ts#L596-L625

There aren't any controls for these in the settings yet. That could be a project if you wanted to take it on.

[FailSafeNow]

Oh, I'm not that good with coding. But I could share a little CSS. Pretty rudimentary, but that's all I need.

I'll even share a little Auto Hot Key code, to change your controls from the very awkward IJMK that certain games liked to use to the more common WASD or direction arrows.

:root {
  --hres: 800px;
  --vres: 600px;
  /* Adjust these to any 4:3 aspect ratio you want. */
}

.overscan {
  width: var(--hres);
  height: var(--vres);
  overflow: hidden;
}

.outer {
  width: fit-content;
}

.inset div:has(#keyboard) {
  margin: auto;
}

#header {
  text-align: center;
}

#screen {
  width: var(--hres);
  height: var(--vres);
  /* Remove comment tags to turn on the next option for non-GL rendering, or the one after it for GL rendering. They scale differently. */
  /* transform: scale(1.05) scaleY(1.023); */ /* non-GL*/
  /* transform: scale(1.10) scaleY(1.06) translateX(-.2%) translateY(.35%); */ /* GL */
  /* image-rendering: unset; */ /* Turn this on or off to taste. */
}

w::i
a::j
d::k
s::m
up::i
left::j
right::k
down::m