Jump to content
  • Advertisement

WebGL Library to emulate retro screens/displays?

Recommended Posts

Hey guys,

I've been using the HTML5 canvas API for a long time, and I've noticed a problem with loading images, drawing lines, etc: depending on the browser, there is always some blurring / anti-aliasing / smoothing going on and (according to several Stack Overflow posts) nothing that can be done about it.  But in the retro style games I like to play and build, you actually want the clean, crisp, and sometimes even pixelated images that were common on those old screens.  And I've seen several emulators that have achieved this, but haven't been able to figure out how.  So I created a little library on top of canvas where you set "pixel" (scaled rectangle) colors individually.  This fixes the blurring problem (mostly), and is not as awful as it sounds to code (lol), but it can really only do about 160x144 (the resolution of the Game Boy) before it starts to have little lines around each rectangle (which sometimes leaves a trail behind some animations); in the attached image, the ship on the right is with the canvas at 160x144 and the one on the right (with the weird lines) is at 320x200.  I haven't hit any performance issues yet, but I expect on less "beefy" computers there would be.

Anyway there's way too much code here to give you some examples, but I did find someone who tried something similar.  In fact, mine is basically based on his, so here's the link to that: http://www.geekonskates.com/apps/lights/

But my question is a bit more general: How do the emulators do it?  They're able to emulate not only the graphical display, but also the sound, and even the code - they can run the ROMs like the original systems, and are not bloated or glitchy, so I'm guessing there's a library somewhere that I just don't know about yet.  Or do they just use WebGL?  I know C well but haven't messed with OpenGL, but that's just because (from what I've read) Open/WebGL are primarily for 3D.  To me it sounds like shaders and textures and all that are overkill for something as simple as putting blocky images/text on the screen, but I've kind of already done it so there must be a better way.  What do you think?


Share this post

Link to post
Share on other sites

Haha I totally forgot about that!  Yeah, that was an e-card I started on for my geeky friends (lol).  And it did end up as the graphics component of a couple games.  Now I hit the weird rectangle thing before too, and I solved it with:

ctx.imageSmoothingEnabled = false;	// Where "ctx" is a canvas element's "context"

And I did get it up to near the "resolution" (aspect ratio?) you were describing.  I think mind ended up working at 256x224, like the old (S)NES.  But yeah, I do kind of wonder how the emulators do make the screens look so much like the originals.


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!