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


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