The beginning

If I had to say which game had the biggest impact on my life, I wouldn't hesitate for a second: Habbo Hotel.
The latest available Windows was Windows XP. The internet was full of Flash games and experiments.

Habbo Hotel was a world in itself: you explored labyrinthine rooms, made friends, and learned big lessons when you got scammed and lost all your "furnis".
I wanted more. I dreamed of one day leaving the hotel and exploring this screen and the rest of the Habbo world:

Habbo Hotel EspaƱa

So it was clear. I had to create my own hotel, I had to learn to program.

Habbo shaped my life not only because of the world it introduced me to, but because it gave me a profession.
While most of my friends spent high school not knowing what they'd do, I already knew: I would be a programmer.

Choosing the Technology

Choosing technology is a boring process for me, because if you want to be sure of your choice, you have to list and test every option.

First, you have to think about what you expect from the engine, how you want your workflow to be:

  • I want it to be easy to add new models.
  • No binaries in between (i.e., being able to understand and trace each error without much difficulty).
  • Low compilation times to iterate quickly.

Although today I should say mobile, the target for the game will be the browser.

Unity is a bad idea here because its WebGL support is quite secondary. It's very likely you'll compile your game and get an unreadable error, then compile again without changing anything and it suddenly works...
The compilation times and the number of intermediate layers you don't control make it very unappealing.

We need to go with a framework that's already JS-based.

I know the work done by people like Johnix and Kozen whose foundations are built on PIXI.js. The problem is that PIXI isn't a framework, it's a piece of one: a renderer.

I also know BitHotel. A game that looked like it was going to be Habbo 2.0 but remained just a promise. It's made with Phaser and is 2.5D.

BitHotel Screenshot

When working with 2.5D, adding new models is quite laborious because you have to cut them based on the tiles they occupy to later generate the third dimension effect.

You also have to prerender the model in every possible orientation. Or if it's not a 3D model, you have to paint it multiple times.

Furni Parts

(how a bithotel sofa looks behind the scenes)

I'm not a modeler so I have zero patience for doing this.
In my case, it has to be real 3D so I can make and plug in simple models.
If the setup has to be 3D and in JS, we'll have to go with three.js.

First Steps

The most basic part of the game is having rooms with tiles and being able to walk in them, so that's what we'll do first.
For that, we'll use EasyStar.js, a simple and lightweight pathfinding system.

The next step is multiplayer.
Nowadays there's a good selection of game servers like Nakama or Colyseus that make the process much easier.

I also took some time to calculate count furni heights while moving around.

First Furni

And while we're at it, we should also try making and adding our first model from scratch.
The simplest software for editing in voxel mode is MagicaVoxel.

First Furni Model First Furni Model

In just a few minutes I was able to make and add my first custom model.

It's the first time I can say that modeling has been simple and fun!

SUPPORT

Help us deliver the game!

DONATE
RADIO
music off
----------