Author Archives: kevin

Devlog #1: Viewport, user movement and real-time updates

Prototyping

I’ve made some tech decisions to quickly get something visual, so I can “play” the game asap. I chose React as I’m familiar with it and used Vite as building tool, which makes it insanely quick to get going and it’s hot module replacement feature makes prototyping also very easy.

I don’t have a clear idea yet for what I want the game to be like. And to be honest I’m happy to. Because this is a hobby project I want to keep all options open and develop it the way I feel like step by step.

Viewport and user movement

For now I thought having a 2D grid world with a viewport would be nice. So I gave the user an avatar and navigation controls using the arrow buttons. When moves over half of the screen horizontally or vertically the viewport starts moving with the player. In that way the player can move through a world larger than the viewport only (see video below).

I’ve added some debug tools showing the user position, viewport origin and a moving cooldown. The moving cooldown is a concept that I was thinking of implementing as game feature, but I’m not sure I’ll keep it as I find it pretty annoying tbh.

Real-time updates

I thought it would be cool to have multiple players walking around in the same area and seeing each other and eventually even interact. I knew about websockets as a technical solution for this, but had never actually built something with websockets. So a good reason to try!
I setup a local node server using the ws npm package and made the frontend connect to the websocket server which was fairly easy. The user position was still only stored in the frontend, so I setup a redis server with docker compose to store the user position. For now I disabled the user controls and made the websocket server make the user walk around randomly. When I opened the game in two separate browsers I saw both browsers show the user randomly walking around in the exact same way, so it worked!

What’s next

  • Activate user controls and make it work with the websockets setup
  • Allow new users to join the game
  • Make the game “playable” on mobile

Remote work Curaçao

Bon dia!

In a world with continuous changing COVID restrictions, our trip to Curaçao felt like a welcome getaway from everyday life. I still feel very privileged we got to do this. Of course living on a tropical island for a month is wonderful, but it’s also always somewhat of a challenge and adventure to find your way and setup daily routines. In the end we’re expected to deliver the same amount of work as we would’ve delivered at home.

Working setup in our apartment
Working at the office

For our stay we booked an AirBnB with car rental included. Our colleague (and director of SIM Caribbean) Wesley, who lives in Curaçao helped us pick a good location and provided us with some do’s and don’ts. Having a car is pretty much mandatory. Bicycles and scooters are rarely seen and thus not much anticipated on in traffic. Using a car is your best pick and besides some poorly maintained roads and the blinding high-beam headlights of other cars very doable.
A fun fact: in Curaçao you’ll hear a lot of cars honking to each other. It’s a custom to greet and thank one another, for example when way is given on an intersection.

The time difference with The Netherlands was 6 hours in the first week, when time changed to wintertime it was 5 hours. Curaçao is 5/6 hours behind on The Netherlands, so we always began early in the morning (around 7:00 to 7:30AM). This made us overlap with our team colleagues for like half of the day.

Well earned Friday drinks
At the local snèk “Bugs Bunny”

Wesley invited us to come have a Friday night drink at a local snèk, which is sort of an outside bar. We visited Bugs Bunny snèk, they serve the coldest Amstel Brights on the island with delicious fried chicken wings. I couldn’t imagine a better way to end the work week!

Colourful stairs in Otrabanda
Grote Knip
Tugboat Beach

In our spare time we explored the island; the colourful Otrabanda and Punda, an abundance of beautiful beaches and amazing snorkling along the coast. One other main highlight I would everyone recommend to do is climbing the Christoffelberg. From the parkinglot at the foot of the mountain it takes a fit person around 45-60 minutes to climb up. The hike is fantastic and the view on the top very rewarding!
If you manage to start early (start the hike around 6:15/6:30AM) you might find yourself alone at the top which I imagine would’ve been magical!

Christoffelberg vegetation
Christoffelberg hike route
Christoffelberg
Shete Boka park

Hobby project: Build360Tours

Introduction

During fall 2019 I was working remotely from Thailand for a month. In this period I met some people that were making a living while traveling by maintaining their own business. One of the guys asked me what cool stuff I had been building over the past years. Something that came up first was the 360 tour I (or actually we) had built for Vensterworks (a startup I was in with a couple of friends). Unfortunately the startup diluted due to diverted interests and we all decided to stop. We decided to open source the 360 tour software, but until now it was just biting dust on Github.

It made me wonder if I could use this 360 tour software in a side project. I thought a interactive 360 tour builder would be nice project. There are quite some of these builders available online. Ranging from very high end all-inclusive with images including 3D data like Matterport to some smaller providers like Lapentor where you simply upload 360 images and build a tour. Build360Tours would then aim at the lower segment of the market comparable with Lapentor.

Functional

Product website and user registration

The product website (build360tours.com) is a WordPress website promoting all capabilities of the tour builder application.
Before being able to start building tours, users need to register with an email address and password. Directly after that, just login and start building.

Tour builder

In the tour builder 360 photos can be uploaded and connected by adding arrows in each photo. Just like in Google StreetView, a walkthrough tour can be created this way.
Additionally, branding can be done by adding a logo in the left-bottom, adding a camera overlapping image (if the camera is visible in the photos) and adjusting the preferred color scheme.

Tour presentation

If the tour is ready to be shared there are two options:

  1. Embed the tour in a website (example below)
  2. Share the direct link to the tour

Technical

The tour builder is built in A-frame combined with Meteor framework. Meteor handles both the frontend and backend and is based on NodeJS. A-frame is used for rendering the 360 images and objects in a 3D context.

Roadmap

For now there is no clear roadmap, because I’m in doubt if I can get the project to grow as much as I would like to.
Build360Tours is promoted on Capterra, which happens to lead some traffic to it and resulted in about 15 user registrations over the past year.

Hobby project: HIIT buddy (mobile app)

Introduction

HIIT stands for High Intensity Interval Training. This a well known type of training where you do a streak of exercises with a brief moment of rest in between.

HIIT buddy helps as an audio guide to execute such a training. It’s not a unique app at all, there are loads of apps in the App store. But I always wanted to publish a mobile app in the App store and my girlfriend Fleur started doing HIIT workouts using her phones stopwatch. So if I could build an app for this I would have her as my first user.

HIIT logo

Functional

No user registration

For now the app doesn’t have user login, so the created workouts are bound to the device the app runs on. A benefit is that theres no need to register before using the app. Downside is that app content is also bound to that particular phone, a new phone will mean loss of workouts that were made. To fix that, I’m planning to add a user login part.

Prepare workout

The app allows to create multiple workouts. Each workout can have multiple exercises which can vary in duration. A workout can have multiple rounds, which will repeat all exercises with x seconds rest in between.

Workout execution

Once the workout is fully prepared, it can be executed. The audio guide will give instructions about what exercise to do and show an on screen counter with the total workout time and time until the next exercise.

Technical

The app itself is built with Flutter, which makes it easy to develop for both Android and iOS phones. Persisting workout and exercise data is done through a REST API built in PHP and the Symfony framework. The audio guide utilises the Text-to-Speech client of Google for creating the voice commands.

Roadmap

  • User registration
  • Sharing workouts
  • Workout catalog with predefined workouts
  • Exercise instructions
  • Executed workout history

Download the app

Cover art

HIIT buddy
View in Play store | View in App store

Remote work Thailand

Sawasdee krab! (‘Hello’ in Thai)

As pictures speak more than a thousand words, I decided to just create a photo/video compilation  and write a little text with it.

Earlier this year I was in Bali for two months, to do a combination of work and travel.
In Bali I was together with Sven (my brother) and Fleur (my girlfriend). After my return home, the concept of working remotely stuck with me and I really wanted to do another trip. So I decided to take some action. 
Destination: Thailand (Bangkok and Chiang Mai). I chose this destination after using the website www.nomadlist.com. It’s a website that shows all places around the world with all sorts of ratings regarding working remotely. Chiang Mai and Bangkok are both high on the overall rating list.

After getting allowance from my employer to go, I planned 1 month Thailand.
As I expected.. it a great experience! Chiang Mai and Bangkok were indeed perfect locations to work remotely. I think the ease of living in both places is the thing I enjoyed the most. Nice weather (30C+), great and cheap food all around and very good facilities to work. And outside working hours I could do some tours and get to know Thailand a bit. What more do you want?..

I’m certain this won’t be my last remote work trip. I really like the mix of my life in the Netherlands and these remote work trips for a couple of months a year. Looking forward to the next one already!

Anyway I hope you’ll enjoy the compilation, it’s only 2 minutes as I didn’t take a lot of photos/video’s.