BdR

LCD game simulator engine using html5/js

Recommended Posts

For anyone too young to remember, back in the 1980s there was this thing called LCD games.

generationy29.jpg

 

Before Nintendo introduced the GameBoy, electronics companies including Nintendo were making small handheld toys that used LCD crystals to display flickering shapes, the shapes could only be turned on or off. Using this crude form of animation they were able to create something that kind of resembled a videogame. ;) Companies incl. Gakken, Tandy, Radio Shack, Sunwing, Tiger, Tomy called these games "card game" or just electronic lcd game, while Nintendo called their line "Game & Watch". Over the years hundreds (maybe thousands) of different games were created, see this site: http://handheldempire.com/games.jsp

 

Anyway, why do I bring this up here on html5gamedevs?

 

There is this very cool site called pica-pic by Hipopotam. He's created playable versions of 26 of these games using Flash. -> http://www.pica-pic.com/ Now I was thinking, this could possibly also be done using with html/js right? Ideally there could be some sort of lcdgame.js library, and then for each separate game you'd have just one html file and a javascript to describe the gamelogic. And maybe only 2 png images, one image with and one without the shapes, and the LCD game library is then able to cut out the shapes (also described in the js file as polygons) and display it on a canvas.

 

It could potentially be kind of like MAME but for LCD games. :D Any thought on this?

Share this post


Link to post
Share on other sites

It could be cool- the pngs are basically a sprite atlas though, so I don't think the display is a real challenge.

 

It would be interesting if you could simplify the game logic, so that writing an LCD game became easier.

Share this post


Link to post
Share on other sites

I doubt you could make a mame for these style of games. This is because each device was just hardware so they all have completely different rules.

however you could build a basic grid style game template and then making most of these games would be easy.

Share this post


Link to post
Share on other sites

What I remember from them is that their "graphics" are basically set in place at certain points in the screen, lol. Like standing/running is in the middle, then if you want to jump, your character just appears in the spot for jumping and so on. Really hard if its based on a platformer, as enemies appear in their designated spot, and then you will see the attack appear for a second in its place before your hit. Far more limited than even 8 bit.

Share this post


Link to post
Share on other sites

I don't know if I'd allow the use of PNG's. Someone designing a game for a MAME could cheat, overlapping sprites, turning one on and then one off.  I would make it have some sort of sprite definition, where each sprite's pixel would be marked on a layer, no more than two sprites can share the same pixel... and for a more realistic feature, no sprite can neighbor another sprite, to leave that gap between the body and the legs. I look back at the Super Mario watch that I had, it would be a fun challenge to reproduce that within the proper confines of an LCD screen emulator.

Share this post


Link to post
Share on other sites

There is a certain hope that LCD games will make their comeback when ubiquitous computing will enter the world.

The first candidates are disposable coffee cups at Starbucks made of 4-color LCD paper and featuring some 1 MHz CPU powered by coffee heat.

Share this post


Link to post
Share on other sites

Okay, it's been a long time..  B)

 

These last few weeks I had the time to work on this idea. I've created a tool and a small library for simulating LCD games. It's still very much work-in-progress and you need a keyboard to play so

as of yet it only works on PCs or laptops(!).. I will try to improve this when I have the time, so it also works on tablets and phones, also maybe add highscores and other features.

 

For now, the game "Highway" sort of works :) The graphics still need to be cleaned up, and it doesn't play quite the same as the real thing yet (the "random" generator on the actual game is not really random I suspect)

http://www.bdrgames.nl/lcdgames/highway/

preview.png

Share this post


Link to post
Share on other sites

Okay I've cleaned up lcdgame.js and shapes_editor.html a bit and put it all on github. :)

https://github.com/BdR76/lcdgame.js

 

Reason I put it up there is that I want to concentrate on a few other projects and probably won't work on this for a while. So if someone wants to take a look or even make some improvements, be my guest. :)

 

Share this post


Link to post
Share on other sites

I've updated the lcdgame.js a bit, now with a different workflow to create the spritesheet with LCD segments using GIMP and a python script. See high resolution GIMP edited photos here. :)

Mario Bros Game & Watch is now also playable :) only on pc and laptop, tablet/mobile support is not yet available unfortunately.

preview.png

http://bdrgames.nl/lcdgames/mariobros/

Share this post


Link to post
Share on other sites
On 27-7-2017 at 1:49 AM, SkylarTheNerdYT said:

I would like to know how this is done, because I am collecting Nelsonic game watches and I would like to simulate/emulate them.

Already answered in a DM, but for anyone else interested;

The first thing to do is taking photos and figuring out how the game works, so the time intervals between moves, the scoring etc.
I've written some documentation about how I created and prepared these photos and games, it's on GitHub here (scroll down a bit to read):
https://github.com/BdR76/lcdgame.js/tree/master/utils

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

  • Recently Browsing   0 members

    No registered users viewing this page.