Storm Engine - WebGL - Canvas - React

Storm Engine

Using the latest technologies Storm Engine powers Habbo in HTML5
The GUI is created using React and Mobx
The game client is powered by Pixi.js and Socket.io
And the server by (MySQL / PostreSQL) and Node.js

For now the repository will be private, so if anyone wants to contribute, just reply and I'll maybe give you access.
I'll do a roadmap soon enough.

https://github.com/marcus-sa/storm-engine

Why do we need this?
Habbo is slow and poorly coded, it's using old and deprecated software and have done that for way too long.
Flash is gonna be unsupported in all browsers by 2020, and if you take a look at the rate of the current Habbo retro development, it's most unlikely there'll ever be one by then if nobody takes the time to actually do it.

Sounds as a great project! How long do you think it will take to see the first progress?

You're saying you are using NodeJS as server software. How are you planning to structure you're NodeJS server as it will be a big project?

Quote:

---

Originally Posted by MikeDev

Sounds as a great project! How long do you think it will take to see the first progress?

You're saying you are using NodeJS as server software. How are you planning to structure you're NodeJS server as it will be a big project?

---

Progress has already been done, I've just copy pasted the thread here aswell.
I'm planning to use https://adonisjs.com with custom service providers and I might switch to https://npmjs.com/primus or https://npmjs.com/cote

I'll post the current progress whenever I wake up.

You may wait for Adonis to release its WS protocol which sounds great and should perform better then socket.io: https://github.com/adonisjs/adonis-websocket-protocol
I may be interested in contributing as I'm following AdonisJs' progress since the early v3 and was searching for a side project to try it out.

Please look at the section rules: here i'll be nice one time and give you 1 day to make your post conform the rules else it'll be deleted.

#PROGRESS
Loading Screen is 100% done and almost identical to the original one, so no screenshot needed for that.
I've almost finished up avatar spritesheet generation using https://npmjs.com/node-gd with inspiration from the Apollo Project (narrowed it down to almost 400 lines in JS instead of 1000+ in PHP)

Floor thickness can be adjusted in pixels.

Drawing the tiles instead of using sprites to generate the floor will result in much smoother and faster rendered looking tiles aswell instead of them being so pixelated on a retina screen.

Currently the standard tile generation is finished, and this is done without sprites aka being drawn to the renderer.
https://codepen.io/veltix/pen/ZrjPYv


Also the room stairs right angle is done.

Spoiler:

https://i.imgur.com/LLWAuYX.png

https://codepen.io/veltix/pen/paZMGz

Draw polygons for tiles instead of sprites. Lets you apply textures to it more easily I think.

Quote:

---

Originally Posted by The General

Draw polygons for tiles instead of sprites. Lets you apply textures to it more easily I think.

---

There'll be no need for adding textures.
The current ones available is poor quality and way too pixelated.
I'm gonna code a handler especially for floor texture that'll draw it instead of using texture, and I'll just use filters when using mood light.

Thought:
The PPIs/bits used in Habbo for all the texture is way too low for how far the modern technology has come.
It can be more or less solved due to drawing it in WebGL, except for all the furniture and avatars because they're images with a static amount of bits used when creating it, so unless someone recreates them all with a higher amount of pixels it'll stay that low quality.

Spoiler:

Idk if I explained it correctly because I'm pree high ������

Quote:

---

Originally Posted by Delight

There'll be no need for adding textures.
The current ones available is poor quality and way too pixelated.
I'm gonna code a handler especially for floor texture that'll draw it instead of using texture, and I'll just use filters when using mood light

Spoiler:

Idk if I explained it correctly because I'm pree high ������

---

Too pixelated? You know Habbo is a pixel art game right?

Quote:

---

Originally Posted by Beny.

Too pixelated? You know Habbo is a pixel art game right?

---

Oh really? That's still not a valid enough statement for it to be so low quality. They haven't even bothered to smoothen the texture lol.
Have you looked at Habbo on a fullhd retina display? Almost hurts my eyes.

Quote:

---

Originally Posted by Delight

Oh really? That's still not a valid enough statement for it to be so low quality. They haven't even bothered to smoothen the texture lol.
Have you looked at Habbo on a PC retina display?

---

Good look with your project. It's a shame that you have this opinion on the nostalgic graphics of Habbo and want to change the feel of the game.

If you wanted high quality graphics you probably should have thought of making a Highrise replica instead of Habbo.

If you want it to look nice on retina display you need to draw your image at x2 and scale it by 50% in the browser (draw at 100x100, display scaled to 50x50).

Quote:

---

Originally Posted by Beny.

If you want it to look nice on retina display you need to draw your image at x2 and scale it by 50% in the browser (draw at 100x100, display scaled to 50x50).

---

This is actually true. It's just how the canvas works in browsers (https://www.html5rocks.com/en/tutorials/canvas/hidpi/). A few ways to fix this issue is by setting the resolution to 2 or change the scale mode to nearest.

I would really like to collaborate to this project, I'm good in making HTML5+CSS3+JS GUI's.
I already made a GUI for a similar project (that I abandoned because I didn't find someone that could keep care of Server part of the project), the "backend/dynamical" part it's made using OOP JS.

If by smoothing out the graphics you actually mean smoothing out the graphics it's going to look like when you zoom in a browser. Hideous.

Nice to see people working on js clients though :)

Great project, if it work ^^

I'm sure, you'll need some help.