LCD game simulator engine using html5/js

[BdR]

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

 

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. Any thought on this?

[Kai]

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.

[Froton X]

Lol. I definately had an LCD game as a kid, probably 2. I had Sonic 2 and 3 LCD games, lol. I remember thinking I could build one myself from cardboard and transparent plastic sheets for the screen.

[jamessimo]

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.

[amuseum]

the rules can be a separate script that is loaded manually. so you can choose from a library of games within the game menu. you could put each subgame in a zip, with rules and images.

[Froton X]

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.

[robomatix]

I had a lot of fun playing this kind of game when I was a child !

 

Could be fun to do a game like that using html5 game frame work !

[GBeebe]

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.

[joocom]

Why not just use an Array for holding the pixels. If pixels are changed, update a Canvas element and voila: easy pixel based graphics. Take a look at this tutorial here http://www.joocom.de/blog/emulator-tutorial .

 

Have fun coding =)

[Red Spark]

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.

[ptdnet]

LCD? You kids... in my days we played LED games.

 

 

For what it's worth, modelling this particular game would be hilariously easy. The entire game "grid" is 9 columns by 3 rows.

[BdR]

Okay, it's been a long time.. 

 

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/

[BdR]

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.

 

[BdR]

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.

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

[SkylarTheNerdYT]

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

[BdR]

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

[SuperGBA]

Hey BdR, I don't know if you still reply to people, but is there any chance you can add more games to http://bdrgames.nl/lcdgames/ Because Pica Pic doesn't work anymore due to flash shutting down. maybe you could add Zelda, Rain Shower, Bomb Sweeper, Parachute, Mario's Bombs Away or Donkey Kong Jr.!

Reply when you have the time, Thanks.

[BdR]

On 7/24/2021 at 10:02 PM, SuperGBA said:

Hey BdR, I don't know if you still reply to people, but is there any chance you can add more games

Sorry for the late reply. I don't actively develop the lcdgame.js anymore because I don't have the time (and motivation). Although I also would also like to see more games be available, especially Bomb Sweeper or obscure ones like these or these. But in the end it took me about 3 to 4 weeks of spare time to add just one game. Especially figuring out the gameplay and timing takes a lot of effort, which I figure is better spent on other things.

All the source is available on GitHub and other developers can create/convert more games using the library. But other than this "fake" lcd game (which looks pretty good) and this fork I haven't seen any new additions.

Edited December 28, 2021 by BdR