Cyclone - HTML5 Engine [TypeScript, Phaser, React, SocketIO, MultiDB]

[Sapphire]

Since flash will be deprecated after 2020, it only makes sense to work towards an alternative... Cyclone is the complete HTML5 Habbo Engine it's focused on putting control right in your hands. The project has high standards and therefore we will work towards creating a sustainable and clean codebase that is easy to follow through, with full documentation. In the near future we hope to use React Native to allow for native mobile apps to be ported easily. Cyclone is not just an engine, it is the complete package, featuring a complete CMS, the client with multiple UIs (R26, R63, R63B and concept ones) and the server itself. The project is designed to be run at a large scale from the ground up and therefore we've been doing research over the course of the last few months to get it just right.

Please note that this project is in very early stages, with limited time and resources development may appear slow but that only due to the high standards we set ourselves, which involves us trying 2-3 different ways to achieve the same result and comparing the results and picking the best method.

Spoiler: CMS Features

• Theming System - 3 default themes to pick from!
• Language System
• Forums
• Homes and Group Pages
• Help / Support System
• FindRetros Integration
• Social Media Login (Facebook & Twitter)
• Avatar customisation on registration
• Referrals
• Fully functional API - for unlimited extendibility

Essentially all you need to do is learn Pug and Stylus to customize your website, eventually we plan to make this drag n' drop where possible to build and edit pages.

Spoiler: Technologies

The full technology stack can be found on:

You must be registered for see links

Spoiler: Screenshots

Please note these are very early prototypes.

Join the development on Discord:

You must be registered for see links

Current Maintainers:
@Sapphire (Lead Maintainer)
@EZC
We're looking for contributors with experience in any of the listed technologies.

Why ArangoDB?
ArangoDB is a very flexible database engine, its free and open source, it also boasts SQL like syntax while providing a document store as a well as graphing functionality.

 

[cammy]

Looks fantastic, hope this goes well!

 

[Laynester]

Ooh cannot wait to see where you take this, should maybe try a new UI though.

 

[romanXday]

You've actually got further than anybody else. Incredible work - I never thought anybody would ever finish a HTML5 Habbo, but if you do you've saved habbo retro lifespans for a few more years.

Post automatically merged: Apr 7, 2019

After going through your codepen, even more impressive. Honestly looking forward to where this goes.

 

[Champion]

Cool nice job, I hope it becomes usable some day. HTML5 emu would be the only reason I’d get back into retros for fun

 

[Abdelrahman]

Good luck.

 

[Sam_Otten]

Sounds great! Good luck!

 

[LaPatron]

Update 0.0.1:

Minor improvements, we've completed the room mapping all in the canvas itself rather than using images like before:

We've also added optimizations so that only the tiles on the edges are drawn with borders, instead of drawing them on all tiles like most other engines out there.

We've focused specifically on this because most other engines seem to have ignored the fact that this exists, eventually we will provide functionality to change coloring and textures of the tiles and walls (for wallpapers, backgrounds). Our focus is now on the walls, stairs, the CMS/Website as well as the UI. We still have minor improvements to make to the flooring to make it 'perfect'.

Spoiler: Floor thicknesses

We can now play around with different floor thicknesses: (5)

Floor Thickness (3)

Floor Thickness (1)

Floor Thickness (0)

Spoiler: Anti Aliasing

Default floor thickness of (7.5) with anti aliasing, which is optional

Weekly Discussion:

Created a StackShare page for those interested:

You must be registered for see links

The following features have been planned to be added to the CMS/Website

• BitPay Integration
• PayPal Integration
• Stripe Integration

These have been chosen so that users would be able to pay with Bitcoins, PayPal or a Credit Card and are on the roadmap. Other features include:

• Cloudflare Integration - Should you use cloudflare, you can now manage it right from the Housekeeping
• Housekeeping Themes

and other objectives over the next week:

• Create a basic Database Schema
• Recreate the UI as React Components (on Codepen)
• Start working on concept UIs (i.e.
  You must be registered for see links
  )

We will shortly be publishing more updates on the client environment, UI and the CMS. We've only just begun work on the Database and Housekeeping will be the focus on the CMS side of the project.

----

Bump - Started work on the React components, cleaning everything up, removing jQuery etc. and creating more components

Spoiler: React UI Components

 

[Abdelrahman]

When will you release it?
@Sapphire @DarthVader

 

[Sapphire]

Update 0.0.1:

Minor improvements, we've completed the room mapping all in the canvas itself rather than using images like before:

We've also added optimizations so that only the tiles on the edges are drawn with borders, instead of drawing them on all tiles like most other engines out there.

We've focused specifically on this because most other engines seem to have ignored the fact that this exists, eventually we will provide functionality to change coloring and textures of the tiles and walls (for wallpapers, backgrounds). Our focus is now on the walls, stairs, the CMS/Website as well as the UI. We still have minor improvements to make to the flooring to make it 'perfect'.

Spoiler: Floor thicknesses

We can now play around with different floor thicknesses: (5)

Floor Thickness (3)

Floor Thickness (1)

Floor Thickness (0)

Spoiler: Anti Aliasing

Default floor thickness of (7.5) with anti aliasing, which is optional

Weekly Discussion:

Created a StackShare page for those interested:

You must be registered for see links

The following features have been planned to be added to the CMS/Website

• BitPay Integration
• PayPal Integration
• Stripe Integration

These have been chosen so that users would be able to pay with Bitcoins, PayPal or a Credit Card and are on the roadmap. Other features include:

• Cloudflare Integration - Should you use cloudflare, you can now manage it right from the Housekeeping
• Housekeeping Themes

and other objectives over the next week:

• Create a basic Database Schema
• Recreate the UI as React Components (on Codepen)
• Start working on concept UIs (i.e.
  You must be registered for see links
  )

We will shortly be publishing more updates on the client environment, UI and the CMS. We've only just begun work on the Database and Housekeeping will be the focus on the CMS side of the project.

----

Bump - Started work on the React components, cleaning everything up, removing jQuery etc. and creating more components

Spoiler: React UI Components

When will you release it?
@Sapphire @DarthVader

We don't know yet, please note that we are developing these prototypes with constant commitment. However we planned to finish it in 1 year or less (hopefully). We are trying to give updates every day.

 

[Weasel]

You guys are making great progress. This actually looks really cool. I wonder if you'll actually beat Sulake at creating an HTML5 version. Just imagine, retro's getting ahead of the official hotels.

 

[LaPatron]

Thank you @Wess, much appreciated and we'll give it our best shot haha.

The night isn't over - so there's still more updates to come, and I'll probably update this post later.
So here's todays updates, so far:

Completed:

[CLIENT][ROOM] Hover tile is complete - an SVG that is loaded as a sprite into the game, which you can change of course (the dimensions and how to do this is included in the documentation)
[ROOM] Perfected the tiles 1:1 to Habbo's tile before it was very similar, now it (is / should be) the exact same
[DESKTOP] Electron setup with React (read notes below)

Spoiler: Screenshots of the new updates

We've successfully drawn the hover tile as an SVG and believe me this took alot of time due to the Raster (PNG) -> Vector (SVG) converters being really bad, but we finally got it to work, again this is a 1:1 replica

The next step naturally of course is for the hover interaction on the tiles which we aim to complete in the next 24 hours.

NOTE: we will keep reviewing all created assets (such as the tile and tile hover rectangle) throughout the project to check for any imperfections and go over them. We're more than happy for you to point out any if you find them.

Here is the Desktop Application, pretty simple as of now, but eventually the entire CMS (powered by React) will be powered by it as a Native Application. So you retro will be able to offer a 'Desktop Application' to your players.

Thanks to @Laynester's idea I've been working on concept UI components (I'll get this complete soon as promised mate ;D)
The target:

The result:

You must be registered for see links

or

You must be registered for see links

Please note this is still a WIP

WIP (Within the next 7 Days):

- [UI][Custom] Custom UI - Messenger complete (Progress:

You must be registered for see links

)
[UI][R63B] Converting all components to React Components
[UI][R63B] Polls
[UI][R63B] Purse
[UI][R63B] Creating the loading screen
[DB] Create the schema for Users, Bots, Rooms and Furniture
[CLIENT][ROOM] Multi level flooring
[CLIENT][ROOM] Canvas Stairs
[CLIENT][ROOM] Canvas Walls
- [CLIENT][ROOM] 3D Rotation (as seen on Superplus:

You must be registered for see links

)
[SERVER][LOGGER] New interface which involves more Emoji's, cause why not?
- Implement Unit Testing through the whole project with Jest
Complete creating a Docker Compose file

Spoiler: Server (Logging) Console

Spoiler: docker-compose.yml

version: '3'
services:
    node:
        image: node:11
        user: 'node'
        working_dir: /home/node/cyclone
        environemnt:
            - NODE_ENV=production
        volumes:
            - ./:/home/node/cyclone
        expose:
            - '8081'
        command: 'npm start'

    database:
        image: arangodb:3.4
        expose:
            - '8529'
        environment:
            - ARANGO_RANDOM_ROOT_PASSWORD=1
            - ARANGO_STORAGE_ENGINE=rocksdb

Near Future (Within the next 1-2 weeks):

- [CLIENT][USER] Avatar Imaging (Clothes, Skins, etc.) & Animations (Sit, Lay, Dance, Emotes)
- [CLIENT][ROOM] Moodlight
- [CLIENT][CHAT] Basic User Messenger
- [CLIENT][TRAX] Premade Tracks
- [CLIENT][CAMERA] Basic Camera that allows you to save to Desktop
[CLIENT][FURNITURE] Generate Furniture

Some notes and pointers (which will be updated on the main thread):

- We will be implementing Trax with the Music Mixer, we've just been digging around for the files and attained all of them, we will work on this over the next month or so.
- Although, games like SnowStorm aren't a priority, we will be working on these once the core project is (near) complete.
- We are attempting to reduce the number of raster images used and use SVGs (vectors) and drawings on the canvas itself for better performance and quality, this doesn't mean every single raster image will be replaced, but that is one of the end goals.
- We've spoken to the creator of Holo5 (@Pipitt05000) - great guy, very friendly - about a potential merge, but this is unlikely (as of this moment) to happen due to the differences in programming languages, standards and end goals
- You will see way more updates on the CMS once the database schema is complete (which is largely dependent on the server)
- Cloudflare is not required for the project, the functionality provided in housekeeping is to aid your use of it, if you happen to make use of it
- You are not required to have a TCP Proxy to 'protect' your hotel on this project as Cloudflare allows proxying of Web Sockets (

You must be registered for see links

) - However this does not guarantee that your hotel will be free from 'lag', that's for you to find out and its largely dependent on your plan - more info on the Cloudflare blog post.
- Our only focus right now in terms of the UI is on R63B so while we are more than happy to work on other UIs it will not be our best of priorities
- We do not have a set date to complete the project, but we spend on average 4-6 hours a day on this whether that's on coding, designing, prototyping or researching atleast one of the developers is actively working on the project each day.
- Antialiasing is optional, you can either force this upon all your users or make it optional as from user settings.
- You are more than welcome to use all the code posted on Codepen for your own projects, just remember to credit us, somewhere.
- Everyone who has helped contribute to the project, even if its with ideas, discussion points or even pretty much influenced the project in one way or the other, will be in the credits.
- We will be working on a Docker image towards the end of the project (It's done!)
- We're packaging a Desktop App with Cyclone, so you can now publish 'Desktop' apps of your Retro, soon the same will be possible with Mobile via React Native (and possibly Expo).

We do not simply want another HTML5 Engine, we want the complete package, that's essentially our end goal.

The main post will be updated to be cleaner so you can see what we're working on and a comprehensive list of changes, updates and a roadmap. Once again, thank you for patience and support, much appreciated.

 

[Abdelrahman]

Wow!!

 

[LaPatron]

Update 0.0.2:

We're boosting through, with atleast one milestone achieved each day at the very least and today we bring you the hover tile interaction


Please note, youtube cuts down on quality so the tile shown in the video is not accurate, please refer to the previous post for an accurate representation. Antialiasing can also affect the hover tile, as it's an SVG, which is what we hoped for - again this can be turned off and completely optional.

A little update on the console messenger UI component

Spoiler: Console Messenger TODO

• Restyle inner shadows
• Add input box to send messages
• Make scrollbar consistent across OS and Browsers
• Overlay inner container to prevent shadow overlapping
• Add straightened borders
• Add chevrons so that more chats can be active
• Add beveling to the top left and bottom right corners
• Fix shadows on the friends display

We've also added a 3D Camera in preparation for commands such as ':shake' and the ability for a full 3D rotation (as mentioned on the prior post)
Other noteable accomplishments in the past 48 hours include, completing of the docker compose file, a bright and cheerful logger, and the creation of a new CodePen project for the R63B UI (

You must be registered for see links

) - the reason for this is to have a fresh start with code that is to a much higher standard and use the old codepen project as a reference, upon transferring everything to the new project, the main post will be updated to reflect this change.

Now that's done, we started working on the (canvas) walls and multi level flooring, the custom UI console messenger (boy we really do need a name for it) and transferring of the R63B UI which we aim to complete by the end of tomorrow.

For those interested, we've setup a GitHub repository for all the documentation and the roadmap, this however does not include the code.

This can be see on

You must be registered for see links

Post automatically merged: Apr 14, 2019

Update 0.0.3:

As promised we bring you Height Maps / multi level flooring


As of this stage it has minor issues, but we're hoping to get to fixing them before the end of this week, the issues are very minor i.e. the offset of the tile coords

Here is the room mapping of the room shown in the above video:

Spoiler: Room Map

[
    [1, 1, 1, 1, 1, 1, [1, 1], [1, 2], [1, 3]],
    [1, 1, 1, 1, 1, 1, [1, 1], [1, 2], [1, 3]]
]

It's completely different from the Habbo one you come across everyday.

0 stands for no tile, 1 stands for a normal tile
If an an array is passed however, then the first element becomes the tile type and the second becomes the height mapping of the tile
By default the height map is 0

We've also completely reimplemented the tile generation logic to accommodate the multi level flooring, which took a good 6 hours of playing around, coding and testing. Currently we're still working towards the UI Components, creating canvas walls and stairs. Upon completion of the stairs you will be able to see a much better use of the height maps / multi level flooring.

Stay tuned for more updates!

 

[Sam_Otten]

This is just amazing, I think you guys are gonna beat Sulake with this!

 

[LaPatron]

Thanks @Sam_Otten

0.0.3 Continued:

Completed the the loading screen, currently it is not responsive and is powered by static images, however this is going to be changed very soon, once I draw all of these as SVGs (a good couple of hours there). We've also decided to delete all of the Codepen projects and pens, instead the UIs will be uploaded to the git repo and setup to be for 'demonstration' purposes.

We've decided to add a logo generator in the near future thanks to @Laynester for the idea, and @Platinum for finding the npm module, that's right! Cyclone will be able to generate you (generic) logos in the near future!


We've been working very hard on the room walls, which will be completed later this afternoon and posted here!

Complete roadmap can be found here on:

You must be registered for see links

Over the last few hours we've figured out the perfect calculation of the offset for the room tiles, so the room map is now fixed and 1:1 to Habbo's map height and offsets - Later on, when we add the stairs, you will better understand the approach we took.

Spoiler: Multi Level flooring - FIXED

Cheers!

Post automatically merged: Apr 15, 2019

Update 0.0.3.1

We've decided to bring our focus to two UIs, the R63B and the mobile UI, upon completion of these we will focus on the other UIs

We've ported all the UI elements into React Components, as can be seen here from the loading screen to hotel view, this will later be populated and an update will be posted very soon when this is done.

We've added PostCSS (and Autoprefixer) to our stack and will soon publish a browserlist of all supported browsers

Also please welcome @Platinum as our QA Inspector



Walls are nearly done, but no where near 1:1 we hoped for, but we're still working on it and should have this resolved pretty soon.

Spoiler: Wall (Imperfect - Prototype)

We've also setup a Rancher (Kubernetes) environment to start testing the scalability of the project

Spoiler: Rancher environment with 1 server

Our next milestones are getting the walls to be 1:1 clone of Habbos, mapping of the walls and then the stairs (for Thursday) and we will be using Wednesday to review all existing code and to improve on it, including all the stylesheets and mostly for admin work.

Many Thanks!

 

[Benden]

Definitely interested to watch the development of this project! As a housekeeping item it would be nice if we had full control over call for help categories and how they're treated.
It would also be cool if a lot of UI stuff was customization on the users end so they could use say the messenger style they liked, inventory, etc

I wish you guys all the luck! I hope this project is finished as it looks promising.

 

[Parse]

Great updates. I strongly hope you guys ride this project to the end. The Habbo section has been dead for the past few years since Flash is soon to be unsupported. This may give us hope.

 

[Ecko]

Nicely done

 

[LaPatron]

Update: 0.0.4

Completed

• Walls
  • Wall Generation
  • Wall Mapping
• Tiles
  • Tile Generation - Redone after @Pipitt05000 pointed out Habbo's room rendering was off
  • Tile Mapping
• Room
  • Background Color (RGBA friendly)
  • (Camera) Shake
  • (Camera) Zoom
  • (Camera) Up side down
• UI
  • Alert
  • Purse
  • Toolbar
  • Converted all UI components to React
• Core
  • Database change (Primary: Postgres, Secondary: MySQL, MongoDB | Future: ArangoDB)
  • GraphQL with Apollo and Prisma
• Assets(Web Build):
  • Fonts
    • Ubuntu
    • Ubuntu Condensed
    • Ubuntu Mono
    • Volter (Goldfish)
  • Audio
    • Achievements
    • Chat
    • Credits
    • Message
    • Report
    • Respect

Updated

• Docker Compose file for Prisma

For those who wish to use ArangoDB, this will be possible as soon as there is a connector for ArangoDB, once Cyclone is (near) complete and there is no ArangoDB connector for Prisma, I will be coding one myself, this issue can be tracked here:

You must be registered for see links

- As for others, you can now use MySQL, PostgreSQL or MongoDB - you can thank @LeChris for changing our minds.

We're back to working on the following (within the next week):

• Staircase
  • Staircase Mapping
• Door
• [UI] Catalogue
  • Need to complete the styling and create 'layouts' basically sub-components in React for each type of page, and add a placeholder (empty Phaser scene) for the furniture preview
• Room Messenger
• SVG Habbo Imager (
  You must be registered for see links
  )
• (Static) Furniture
• Further UI Components (i.e. Mod Tools, Habbo Talents, Quests, Inventory)
• Hotel View
  • Add drape
  • Add news / windows
• CMS
• Housekeeping

Spoiler: Screenshots

Prisma / GraphQL playground

Hotel view:

Camera (Shake):

You must be registered for see links

- This isn't officially in Habbo but useful for RPs that would like to have an 'earthquake' effect

Upside down camera:

You can now dynamically change the overall room camera background color to your liking

Pretty minor but better console logging and formatting

Spoiler: New docker compose

version: '3'
services:
    postgres:
        image: postgres
        restart: always
        environment:
            POSTGRES_USER: root
            POSTGRES_PASSWORD: password

    prisma:
        image: prismagraphql/prisma:1.31
        restart: always
        ports:
            - '4466:4466'
        environment:
            PRISMA_CONFIG: |
                port: 4466
                databases:
                    default:
                        connector: postgres
                        host: postgres
                        port: 5432
                        user: root
                        password: password
                        migrations: true

Spoiler: Catalogue - UNDER DEVELOPMENT

Excuse the lag

Special thanks to the following: @Zodiak and @LeChris for all the advice and feedback on the server side of development.

Post automatically merged: Apr 21, 2019

Staircase complete:

Working on staircase thickness and mapping!

Post automatically merged: Apr 21, 2019

Started on the Habbo (Figure) Imaging

You must be registered for see links

So far we've managed to attain all the assets needed, I will be spending the next few weeks redesigning all of the images into SVGs, thanks to @Rebel from Zabbo for all the assets, eventually it will automatically grab all of these directly from Habbo without manual intervention. While i'm working on converting all the images to SVGs I will also be working on the PNG/GIF imaging.

Progress is looking great at the moment!