Jump to content

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?

Link to post
Share on other sites
  • 2 weeks later...

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.

Link to post
Share on other sites
  • 2 weeks later...

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.

Link to post
Share on other sites
  • 5 months later...
  • 3 months later...

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

Link to post
Share on other sites
  • 5 months later...

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. :)

 

Link to post
Share on other sites
  • 1 year later...

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/

Link to post
Share on other sites
  • 3 months later...
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

Link to post
Share on other sites
  • 3 years later...

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...