New Year 2023: Interactive greeting card project

Categories: [Dev] [Log] [2023cards]

As I did last year, I'm trying to put together some minimalist game to "wrap" my season greetings cards. If you think you might get sent one and want to avoid spoilers, please stop reading ;)

Where it all comes from

Playing with Rewtro

I have been going through some troubles in the last few years due to pandemics and a lot of personal stuff going on at the same time. Long story short, I haven't been able to do much useful or productive stuff for almost two years.

At some point in 2021, I came across Kesiev's Rewtro fantasy console[1]. I had a great time hacking small game stuff with his akihabara lib a loooong time ago, I was thrilled to find out he had been keeping himself busy[2].

We got in touch and I ended up trying to make a rudimentary dungeon crawler fit an A4 sheet. I spent a full week focusing on this project without any real objective or strategy. I just kept tweaking a PoC which ended up as a new demo in main source tree[3]. I had not been able to focus that much for years, it felt great.

[1] Rewtro main repository

[2] KesieV's homepage, with a lot of game and/or retro projects

[3] PDF version of my dungeon crawler game

2022 Greeting cards

Fast forward to Christmas 2021. Feeling low again, wanting to do stuff but struggling with focus issues. While explaining my previous project to a friend, it occurred to me that Rewtro had been originaly created for interactive grreting cards. As I already knew the tricks and limitations, it would be pretty easy to do the same thing. I then copied one of the demo games, started modifying it to change theme, tweaked music and sfx (which were not implemented in my dungeon game due to size constraints). In the end, I had a customizable 2-minutes platform game with a lot of customizabe elements for each person I wanted to gift[4][5].

During the next few weeks, a few dozen minutes at a time, I made a dozen variations on this game with custom graphics, texts, music and sfx. All in all, I guess it took me 2 days to make the first few games, and maybe as much for the next batch. I had some help from a friend who allowed me to use her printer (mine wouldn't print on heavy 200g/m² paper) and papercraft tools. I sent most of these paper cartridges by physical mail to friends all around the world and sort extra (or late :p) PDF by email to others. I got great feedback, most people loved it and told me they were expecting something similar in 2023. So be it!

[4] Base game version

[5] Combined screenshots from variations of [4]

Here we go again

Fast forward to last month when an inexpected surge of motivation made me think that maybe it was the right time to start working on something so I can see "bigger" for next season. Stumbled upon an old dev magazine with a tutorial for some tamagotchi-like widget, and it all started before I even realized what I was doing.

The concept

I don't really know yet how all of it will fit together, but I have some base concepts I really want to implement.

Web-based, portable, minimalistic dependencies

I wanted this project to be different from previous one: no fantasy console this time, only pure web stuff. I want it to be useable on low-power devices, old phone or whatever device my friends would think about (and trust me, they can get *really* weird ideas). This means no heavy JS framework and such. For now, only utility libs such as moment.js and jquery are used, I will probably ditch them too before releasing greeting cards.

Old-school LCD display

As someone old enough to remember when 14-segment LCD displays where the best one could hope from a pocket-size device, I wanted to give the whole project this kind of look&feel. I stumbled upon DSEG font[6] and felt in love with it right away. Adding some pseudo-shading as hinted by the author[7] give me the right "game&watch" feel I wanted.

[6] "DSEG": Original 7-segment and 14-segment fonts

[7] DSEG sample (taken from official website)

Multi-player !

I really wanted players to be able to interact -- in a very limited way. This means setting up some server stuff, handling communication and limiting who anyone can reach. There are some people I love I would not leave tohether in the same room... nor on the same server ;)

Tamagotchi

To be honest, I was already too old when tamagotchis were released. Nevertheless, the concept is mind-blowing: simulate living creatures you have to take care of with very limited pixel-space and 3 buttons. Some of them can even visit each other ! I got inspiration from an old magazine I found cleaning up my desk, researched the tech berhgind it and found some crazy projects like Tamahive[8]. But as I'm in now way affiliated to Bandai, we'll havei creatures named "pets".

[8] Tamagotchi Hive, a basic IA taking care of tamgotchis in a web page

The current state

I started fiddling with LCD-like widgets on a webpage mi-july. I have then started implementing a basic framework for animations, then added a loader to fetch pet informations, animations and behavior from a config file. Next step will be adding a basic backend service to manage access, data and pet interactions.

UI Widgets

I first built a dot-matrix screen emulator[9]. This will be where the pets will be living. It comes with some code to render images (writing image to a canvas then ready pixel values and changing LCD display as needed). I soon added 4-color (greyscale) support to make it more readable.

[9] Dot-matrix LCD display emulator

I then started putting together a 14-segment text pager/ticker/display to give text feedback to the player[10]. I made some scrolling to accomodate long lines. it works fine as a debug tool too.

[10] LCD Pager scrolling a long line (animated GIF)

I added some more generic LCD-like widgets, like iconsi[11] or gauges[12]. I don't know yet which ones will be in final product, I'll have to make a choice later. Gauges are parametric and look nice, but I'm considering removing those to use some sort of status alternative display on LCD dot-matrix.

[11] LCD icons and text zones

[12] LCD Gauges

Game logic

I started by hardcoding every aspect of the game before refactoring it one part at a time. I first added an external JSON file to load pet specifics[13]. This JSON File has multiple sections:

Headers, including sprite size

Graphics definition, referencing external image files and palette mapping

Frames definition, naming parts of these graphics

Animations, making use of frames, screen coordinates and rudimentary timing

Status, mapping animations (weighted) to specific pet status

Later, I added player definition file to specify which pet template should be loaded and set pet's specifics (name, status, etc.). This file is static for now but will be later provided by backend software[14].

Today, everything come from JSON files. Only background image is still hardcoded.

[13] Sample pet configuration file.

[14] Sample player configuration file.

Putting everything together

Current game is a nice frontend animated pet[15]. I'm currently creating content, adding animations to existing pets, adding new pets and backgrounds. Most of those are obvious ripoffs but I'll be getting some help with original content pretty soon.

I've been cleaning up and refactoring a lot too, and I now have a minimalist raodmap incoming.

[15] Demo on 2022-08-25 (animated GIF)

What's next

I *might* writed a full post about my previous greeting card system (or even rewtro dungeon) if anyone is interested, but I will mostly try to keep up writing a dev log for current project. Anyway, feel free to keep in touch or send feedback (see capsule home for contact info).

Back home