Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

Habbo Hotel: C# Server .NET Core, Sockets - Web App. (Canvas)

Status
Not open for further replies.
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

Luicy By now I bet you have thought to yourself that adding all script tags to the index in the correct order is a pain in the butt. A module bundler and taskrunner (and preferably a transpiler) is going to be a lifesaver for this project in the long run and is pretty much used for all modern js projects regardless of size.

The standard in the js community now a days is using with .

It's 100% worth investing some time understanding how it works, and once you do, you're never going to not use it!

Good luck on your project :)
 
Joined
Sep 10, 2011
Messages
778
Reaction score
138
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

@Luicy By now I bet you have thought to yourself that adding all script tags to the index in the correct order is a pain in the butt. A module bundler and taskrunner (and preferably a transpiler) is going to be a lifesaver for this project in the long run and is pretty much used for all modern js projects regardless of size.

The standard in the js community now a days is using with .

It's 100% worth investing some time understanding how it works, and once you do, you're never going to not use it!

Good luck on your project :)
I tried telling her that a few days ago and even attempted to hook her up with a basic setup - where she said that doing it in ES5 with <script> would be better for her project
 
Developer
Loyal Member
Joined
Jul 28, 2009
Messages
983
Reaction score
133
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

Good luck, by the way. I noticed you are using SQL query's. You could use the ORM Entity Framework. Makes live hell of a lot easier.
 
Newbie Spellweaver
Joined
Feb 3, 2018
Messages
47
Reaction score
16
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

@Taiga stop censoring. The math.floor is an alternative for reinventing the wheel. No need to just delete my posts....
He deleted all three of ours posts, mine, yours, and Chris's, and I see why he did it. So that, this wasn't gonna happen.
 
Newbie Spellweaver
Joined
Feb 3, 2018
Messages
47
Reaction score
16
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

Git 1.0.1
  • Created a simple Image2Array console application, converts a bitmap to a pixel array with color & position.
  • Implemented a client sided image caching class, this is ran every single time the client loads.
  • Moved the loading action messages to a single client_config.json.
  • Implemented dynamic landing views, meaning they are defined in the client_config.json
  • Implemented text variables: bottom tool bar, generic alerts, catalogue title.
  • Changed font from WOFF to default TTF.
  • Modified the canvas handler to work asyncronously.
  • Added a CanvasHandler.drawImageSprite, works as defined.
  • Added a CanvasHandler.setContextShadow, to allow image and object shadows.
  • Added a CanvasHandler.calculateImage which both caches and calculates an image's width and heigth.
  • Moved almost all configuration to a single class.
  • Implemented a few socket handlings.
  • Implemented the bottom bar and landing view.
  • And more, review the GitHub link below.
See all changes on the .​
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]


  • Modified the canvas handler to work asyncronously.

You probably want to avoid drawing images async in a renderloop as your images will appear in the wrong order.
 
Newbie Spellweaver
Joined
Feb 3, 2018
Messages
47
Reaction score
16
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

You probably want to avoid drawing images async in a renderloop as your images will appear in the wrong order.

I meant Async between canvas's.
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

I meant Async between canvas's.

All your drawImage/drawSprite methods are async when the image has not been loaded yet.

Code:
[COLOR=#6F42C1]$[/COLOR][COLOR=#24292E](image).[/COLOR][COLOR=#6F42C1]on[/COLOR][COLOR=#24292E]([/COLOR][COLOR=#032F62]"load"[/COLOR][COLOR=#24292E], [/COLOR][COLOR=#D73A49]function[/COLOR][COLOR=#24292E]() {
// draw the image
}[/COLOR]

inside a function that will be called 30+ times a second
 
Newbie Spellweaver
Joined
Feb 3, 2018
Messages
47
Reaction score
16
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

All your drawImage/drawSprite methods are async when the image has not been loaded yet.

Code:
[COLOR=#6F42C1]$[/COLOR][COLOR=#24292E](image).[/COLOR][COLOR=#6F42C1]on[/COLOR][COLOR=#24292E]([/COLOR][COLOR=#032F62]"load"[/COLOR][COLOR=#24292E], [/COLOR][COLOR=#D73A49]function[/COLOR][COLOR=#24292E]() {
// draw the image
}[/COLOR]

inside a function that will be called 30+ times a second

That am I aware of, what I meant was that, the context unique ID is stored in an local array where it's used, often I may do so that I link this array through functions as it won't hurt the system. However, before I stored the context ID locally, I stored everything in the CanvasHandler class, and that resulted in images overlapping eachother as you just demonstrated, so I added a callback to the CanvasHandler drawImage(sprite), and that's called when as said, the bitmap image loads in, however, as I try to cache all images I can before booting up the landing view, these images are stored in a global GameData(i think) class, and they're active infintitively and that results in just the client using the method of "sure, we've got this image already open, copy it to our context." instead of "aww, we gotta download the image, hold on.......done! let's draw it now!" and that'll result in the overlapping.



1c624f58a4a677f6d440ae39bce9168e - Habbo Hotel: C# Server .NET Core, Sockets  - Web App. (Canvas) - RaGEZONE Forums


Catalogue works right now ith promos, tabs and headers.
 

Attachments

You must be registered for see attachments list
Joined
Jun 23, 2010
Messages
2,318
Reaction score
2,195
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

Git 1.0.1
  • Created a simple Image2Array console application, converts a bitmap to a pixel array with color & position.
  • Implemented a client sided image caching class, this is ran every single time the client loads.
  • Moved the loading action messages to a single client_config.json.
  • Implemented dynamic landing views, meaning they are defined in the client_config.json
  • Implemented text variables: bottom tool bar, generic alerts, catalogue title.
  • Changed font from WOFF to default TTF.
  • Modified the canvas handler to work asyncronously.
  • Added a CanvasHandler.drawImageSprite, works as defined.
  • Added a CanvasHandler.setContextShadow, to allow image and object shadows.
  • Added a CanvasHandler.calculateImage which both caches and calculates an image's width and heigth.
  • Moved almost all configuration to a single class.
  • Implemented a few socket handlings.
  • Implemented the bottom bar and landing view.
  • And more, review the GitHub link below.
See all changes on the .​

I just have a few questions and comments..
- What is the purpose of converting images to a json format?
- Be careful to not make the CanvasHandler to big/have much responsibility. I suggest to splits things up in smaller and manageable chunks.
- Why not send JSON via WebSockets instead of just strings (anything else to make your life easier works too)? Or atleast make something to make message handling alot easier.
- Whats the reason of making new canvasses? The "newCanvas" and "newContext" is quite worring me..
- Make sure you code maintanable. I see alot of hardcoded numbers and stuff. For example the Catalog contains lots of rectangle positions and stuff. I've no clue what it does.
- Your main.js is just a pain to see (sorry). There are libraries which solve that problem (or atleast the solution is better). For example: async-waterfall.
 
Joined
Sep 10, 2011
Messages
778
Reaction score
138
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

I just have a few questions and comments..
- What is the purpose of converting images to a json format?
- Be careful to not make the CanvasHandler to big/have much responsibility. I suggest to splits things up in smaller and manageable chunks.
- Why not send JSON via WebSockets instead of just strings (anything else to make your life easier works too)? Or atleast make something to make message handling alot easier.
- Whats the reason of making new canvasses? The "newCanvas" and "newContext" is quite worring me..
- Make sure you code maintanable. I see alot of hardcoded numbers and stuff. For example the Catalog contains lots of rectangle positions and stuff. I've no clue what it does.
- Your main.js is just a pain to see (sorry). There are libraries which solve that problem (or atleast the solution is better). For example: async-waterfall.
It'll probably be a better idea to stack Async/Await tasks then use Async.waterfall
 
Elite Diviner
Joined
Apr 5, 2014
Messages
464
Reaction score
223
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

- Whats the reason of making new canvasses? The "newCanvas" and "newContext" is quite worring me..

Aside from the fact that those functions are a bit misleading and just returns an existing canvas element; using multiple canvasses is fairly common and probably essential for a habbo replica. No need to redraw the floor and walls of a room on every frame.


It'll probably be a better idea to stack Async/Await tasks then use Async.waterfall

#es5life
 
Last edited:
Newbie Spellweaver
Joined
Feb 3, 2018
Messages
47
Reaction score
16
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

I just have a few questions and comments..
- What is the purpose of converting images to a json format?
- Be careful to not make the CanvasHandler to big/have much responsibility. I suggest to splits things up in smaller and manageable chunks.
- Why not send JSON via WebSockets instead of just strings (anything else to make your life easier works too)? Or atleast make something to make message handling alot easier.
- Whats the reason of making new canvasses? The "newCanvas" and "newContext" is quite worring me..
- Make sure you code maintanable. I see alot of hardcoded numbers and stuff. For example the Catalog contains lots of rectangle positions and stuff. I've no clue what it does.
- Your main.js is just a pain to see (sorry). There are libraries which solve that problem (or atleast the solution is better). For example: async-waterfall.

The converting to pixel bytes was just a tool for me to calculate corners quickier, I'm using mostly PNG images anyway.

The CanvasHandler is just a replacement for the default javascript defined canvas's to minimize the code and make it easier to use.

The server is actually sending JSON objects through the Web Socket for specific parts, however, one or two messages contains only one parameter, and therefore I skipped the JSON convertion as I've heavily noticed the JSON library I'm using in C# may be very slow at some points.

The name of newCanvas and newContext may be confusing indeed, they're basically used to identify a canvas element and a canvas context, useless in some views however I find it useful.

Having to documentate every single pixel I'm using will just slow the proccess down and will just end up being a waste of time. See this for example:


I'll have a look and see what I can do about the main.js.
 
Newbie Spellweaver
Joined
Feb 3, 2018
Messages
47
Reaction score
16
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

I've re written the core to work with better compability, now also supporting dynamic mobile usage. The GitHub hasn't been updated as I'm still debugging the code on different browsers and amount of memory usage. A statistic post will be given in the GutHub push including 3 different modern browsers and devices.

Basically what this update is that every class was rewritten and cleaned under 2-3 days, keep in mind that this has been a slow process since I'm tired every day from being in school and this will indeed affect this development where as the most time will be spent on weekends.
 
Newbie Spellweaver
Joined
Feb 3, 2018
Messages
47
Reaction score
16
Re: Habbo Hotel: [ C# Server (.NET Core, Sockets) ] - [ Web App. (Canvas) ]

I've ceased the development for about a week due to in-real-life issues, this won't be any problem for upcoming development to happen within one or two weeks depending on what happens when my relationship. However, the development is not dead but it's slow. A board moderator may take the decision whether to close this thread upon further notice or keep it unlocked, either one works. I just wanted to imply that the development is not dead, it's only ceased for a moment.
 
Status
Not open for further replies.
Back
Top