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

Status
Not open for further replies.

Sapphire

Member
Apr 7, 2019
6
42
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.

  • 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.
The full technology stack can be found on:

Ai2469r.gif

f17bb508a843c24b5e8ae14f1573b2df.gif

Please note these are very early prototypes.

Join the development on Discord:


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.
 
Last edited:

romanXday

- Mac Miller -
Sep 23, 2018
20
15
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:

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

LaPatron

Smile, because it confuses people.
Nov 23, 2017
72
155
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.

f983c1389bbea3fd94aa848a3bfe1bec.png


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'.

We can now play around with different floor thicknesses: (5)
0797341c0c6dc607ebf59adf7e6e46e4.png


Floor Thickness (3)
9f504721a95d2b598190ebd308e9b332.png


Floor Thickness (1)
936fba17b9f6fcf6b6798fe2d4a0c78a.png


Floor Thickness (0)
8d70999972d916523d10267963089221.png
Default floor thickness of (7.5) with anti aliasing, which is optional
d0a55031268ae7a4678edf9cd4fc503d.png


Weekly Discussion:

Created a StackShare page for those interested:

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. )
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
6b67911c7bd6123e6607071a6d5ce044.png
 
Last edited:

Sapphire

Member
Apr 7, 2019
6
42
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.

f983c1389bbea3fd94aa848a3bfe1bec.png


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'.

We can now play around with different floor thicknesses: (5)
0797341c0c6dc607ebf59adf7e6e46e4.png


Floor Thickness (3)
9f504721a95d2b598190ebd308e9b332.png


Floor Thickness (1)
936fba17b9f6fcf6b6798fe2d4a0c78a.png


Floor Thickness (0)
8d70999972d916523d10267963089221.png
Default floor thickness of (7.5) with anti aliasing, which is optional
d0a55031268ae7a4678edf9cd4fc503d.png


Weekly Discussion:

Created a StackShare page for those interested:

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. )
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
6b67911c7bd6123e6607071a6d5ce044.png
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. :p
 
Last edited:

LaPatron

Smile, because it confuses people.
Nov 23, 2017
72
155
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)

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

2c73ee85a7a474604726c276fbe7f4c8.png


unknown.png


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.
Vci7D6L.gif


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:
5b3d6cb4009980cc10019dd3abf939d8.png


The result:

or


Please note this is still a WIP

WIP (Within the next 7 Days):

- [UI][Custom] Custom UI - Messenger complete (Progress: )
✅ [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: )
✅ [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
7e20551299c3cecb322ae79d73d7a462.png
YAML:
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 ( ) - 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.
 
Last edited:

LaPatron

Smile, because it confuses people.
Nov 23, 2017
72
155
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

  • 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 ( ) - 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
Post automatically merged:

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:

JavaScript:
[
    [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!
 
Last edited:

LaPatron

Smile, because it confuses people.
Nov 23, 2017
72
155
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:


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.

dd7deececd0d0a0245b5343f0649c9a7.png

Cheers!
Post automatically merged:

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.
vRnmFku.png

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

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!
 
Last edited:

Benden

maging ang maganda mamatay
Jun 4, 2010
2,280
1,480
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

Active Member
Oct 28, 2013
128
59
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.
 

LaPatron

Smile, because it confuses people.
Nov 23, 2017
72
155
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: - 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 ( )
  • (Static) Furniture
  • Further UI Components (i.e. Mod Tools, Habbo Talents, Quests, Inventory)
  • Hotel View
    • Add drape
    • Add news / windows
  • CMS
  • Housekeeping
Prisma / GraphQL playground
7795658f3c344f2594181d568d0c8f2e.png


Hotel view:
489c0b08aa189ef7a85795634479c606.jpg


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

Upside down camera:
unknown.png


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


Pretty minor but better console logging and formatting
68ed28369564d3191756a76f109ac43b.png
YAML:
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
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:

Staircase complete:

Peek_2019-04-20_18-34.gif


Working on staircase thickness and mapping!
Post automatically merged:

Started on the Habbo (Figure) Imaging



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!
 
Last edited:
Status
Not open for further replies.

Users who are viewing this thread

Top