A month ago I went to visit my sister and her soon-to-be 4 year old in the middle of Germany. I didn’t expect that the visit would not only give me a peek into a toddler’s world; it was also a journey of discovery through the fascinating realm of the Swiss railway system.
Building worlds is the most fun part of our start-up Dibulo and we have enough ideas for what we could do for at least the next 5 years. However, we also want to create something for kids and not just what our own inner children think is cool (I like dinosaurs!). Inspiration hits from the most unexpected places and when my nephew bombarded me with his toy collection, I saw this as an opportunity to tap into my nephew’s mind for a new interactive coloring world.
Mockup
While my nephew rolled in his 3 big boxes filled with all kinds of trains, rail tracks and cars, I questioned what exactly it is he likes and is fascinated about. Obviously you can’t just ask a toddler and conduct an adult-like user interview. So I sat down with a small sheet of paper and a pen to take visual notes and simply started to observe him like a weird uncle. Amidst the toy parade, trains emerged as the clear favorite — at least for that moment.
Fortunately he was very pro active in helping me out and the babbling I didn’t understand got translated by his mom. He told me about all kinds of things my sketch should include. Of course there had to be a train, but also a parking garage, some trees and animals and for whatever reason a trophy — which he didn’t recognize as one, but as a mug. Sorry for my bad drawing skills. He was also persisting on having signals, like a stop sign or traffic lights. After half an hour playing together it got late and it was nap time and he also went to bed.
Back at home I felt eager to convert the ideas of my nephew into a digital world. I am a coder, a cool uncle — I like to believe — and his 4th birthday was coming up. I wanted to gift him an interactive train world he could color together with his friends. And also what better deadline could you get than the birthday of a toddler?!
A prototype
On a Saturday morning, I opened my code editor and started to build the train world, which itself was not a huge coding challenge as the world was rather simple and consisted of mostly moving objects from right to left and adding train wagons. As usual the Phaser3 game library got imported and keys got stroked. The challenge we face at Dibulo is not so much the world itself, but to make it right for kids. Is the speed too fast? Is the graphic style appealing? Is it interesting enough or are too many things flying around? Does a 4 year old understand what is happening?
Although my nephew already gave me a pretty good impression of what objects the world should contain, I still needed to think about the setting and what better place is there than the country of Switzerland, which is not only known for its beautiful landscapes but is literally a railway nation as it has the densest rail network in Europe. I could have also gone with Japan, but I kinda live in Switzerland, so that was a big🇨đź‡
More inspiration
In Switzerland you don’t have to go far to get to a train or tracks, and thus it was quite convenient for me to jump on my new e-scooter and to find some inspiration. Just like an old sir, who’s passion is trains, I took a couple of pictures of rails, train stations, crossings and even some cows. New life achievement unlocked.
Feedback loop
The first presentable version was forming shape and included a train which would simply drive through a mountain world. Every now and then things would appear, like animals or buildings. Some objects would play a sound, which we thought is great for kids so they can learn how different animals or objects sound like.
Early feedback is crucial and so I grabbed a short screen recording and sent it to my sister. She replied with a voice message (because parents don’t have time to write) and said “He loves it — he watched the video like 10x already. The animal sounds are great and the speed seems good …” and you could hear my nephew screaming in the background “the signals!”. My sister didn’t even know what he meant, but I was fascinated that he spotted the stop signal and that he was still hyped about it. He is not wrong, stop signals are important!
The world came more and more together. I added new objects, fine tuned the way how they would appear and even added flying stuff to the sky. Kids get bored fast and thus I made sure there is always something to discover.
The Swiss part
Our world looks like fantasy, but so does Switzerland. I wasn’t yet happy with just having green mountains and a train — a scenery which could very well also be Austria or the South of Germany. Not only did I want to have Swiss iconic elements in the world, such as landmarks but get closer to what the Swiss railway system looks like. I added the typical blue platform signs to the train station using the Helvetica font, which the Swiss also invented. And also a clock which resembles the iconic Swiss Federal Railways clock. “Resembles” because even Apple got rightfully sued for using it without permission, and doing the Math I figured that I have like a few lawyers and bucks less than a trillion dollar company.
FYI: The clock was invented in 1944 by Swiss electrical engineer and designer Hans Hilfiker. Of course there was more to the design: The red second hand is in the shape of the disc which controllers previously used to signal to train drivers that they could leave [source]. You may even see it in green soon, as the Swiss train company wants to emphasis that they are running mostly on green energy.
Besides visuals I was looking into audio and while doing so I found out that the notes of the announcement sounds are the Logo-acronyms of the Swiss railway systems: SBB, CFF and FFS. Which means before an announcement is made the notes 🎶 Es B B / C F F / F F Es 🎶 are played (E because S is not a tone but still you pronounce it like “ES BE BE”).
Taking the train now is a different experience as I pay much more attention to all those details. In case you are interested, there is a great post about the integrated timetable of Switzerland which blew my mind about how efficient the whole system works. But wait! First continue reading this one …
The personal Easter Eggs
Every time we build a Dibulo world we also place some personal “easter eggs” into them. Obviously my wife’s dog Chester and our mascot or CBO (Chief Banana Officer) Cheeky monkey had to be included. And lately I somewhat befriended a chubby pigeon which decided to live in my garden (after two crows gave me the cold shoulder) and so she made it also into our new train world.
I also added a counter, which keeps track of the wagons. We are already keen on hearing from our users about how many wagons are too many.
The coloring part
The next challenge would be to turn it into a “Dibulo world”. Our worlds are created by kids uploading colored templates. For example in our SeaLand world you color templates of sea animals and then they are brought alive on a screen.
Coloring templates
It was time to come up with and to create the coloring templates, which is my wife’s favorite part. Super excited she came up with the idea to have cute little animal characters as the train passengers. “Just a few, right?! Like 5–10” … “Yes” she replied and made like 23 in one session:
And then later she added another 17. Our excitement arose when I added the test images to the world and the wagons were not empty anymore but filled with cute passengers.
The first upload
Uploading the first colored template is always truly a magic moment. I printed out the elephant and colored the little guy with my markers, as if I was 5 again. Then started the Dibulo session (still hidden from the public), took a picture of it and there it was: the elephant was rolling-in and started his journey in the Swiss mountains. I was happy that the base functionality was working out on the first try. A couple of things however were still to be done.
A theme soundtrack with generative AI
We are living in a fantastic time in which you can generate your own songs within seconds and without having to know anything about music. I asked ChatGPT politely to generate the lyrics for a children song about a train world and this was the result:
[Verse]
Hop aboard the Dibulo Express,
With animals and pets, it's quite a fest!
Through mountains high and valleys low,
We'll see the world with a cheerful glow.
[Chorus]
Dibulo Express, chugging along,
Singing our song, toot-toot, ding-dong!
Zoo animals and pets, all in a line,
On this magical train, we're gonna shine!
[Verse]
The conductor's a monkey, swinging from bars,
While the lion roars, "All aboard, all stars!"
Elephants trumpet, and giraffes peer down,
As we journey through this scenic town.
...The next step was to turn the lyrics into a real song and for that I went to Udio.com. The results are incredible:
More features
Now we should have left it here and simply release it, but we can get easily carried away as we come up with more and more ideas.
Boarding tickets
Kids love to imitate the real world and because going on a train ride is not for free, they need to have a boarding ticket:
Mariana did an excellent job to create first and second class train tickets, which parents can edit and print out. The only small detail she missed is that in Switzerland you can not reserve any seats, but simply sit where something is free. The price of CHF 180 (~196 USD) however is not even exaggerated. A one-way ticket from Zurich to Geneva can cost around CHF 95. That is why pretty much all people living in Switzerland have a half-fare subscription, which reduces the price by, well, a half.
Validating your boarding pass
So you buy this expensive ticket and then nobody is gonna even check it? Not on our train! You can actually scan the QR Code with your phone and it opens a “Valid ticket” page. Kids can now go on an use the in-built scanner to validate other boarding passes.
Voice announcements
Dibulo has a feature which lets you record your voice after you have uploaded a template. This way kids can not only provide visuals, but also sounds for the e.g. animals. In our train world it made sense to let kids make their own train announcements — of course by playing the announcement sound first.
The “final” product
In total I spent two weekends and a couple of evenings building the Dibulo Express world and I am happy about how it turned out considering the limited resources. I am sure we are gonna extend it at some point. I could imagine sending the train on a real journey through the world, visiting cities, stopping at stations and letting passengers board. Kids should also be able to color all other kinds of objects in the world such as buildings or passing objects.
You can try it yourself on dibulo.com/train. We offer a free coloring template so you can try the experience with your kids — or without. You will need a printer though!
The result was not just a nice birthday gift for my nephew, but a small homage to the amazing Swiss railway system and I hope I was able to show a glimpse of the process of how a Dibulo world comes to life.
Try the world here: dibulo.com/train
Tools and libraries used:
- Phaser3 game engine
- Dibulo API (not yet public)
- Music & sound effects: Envato.com
- Sound tracks: udio.com
- Voices: elevenlabs.com
- Graphics: Freepik & Canva (premium accounts)
In case you are wondering, we have a Dibulo JS Api — which hasn’t been made public yet, but would allow you to also create a Dibulo coloring world. If you are a (web + game) developer and interested let us know!
Happy birthday!
