Bobba.io - HTML5 Habbo implementation

[treebeard]

Ooo would love to see an update on this!

Would be reassuring to see someone step to the plate on the whole HTML5 Habbo thing.

[Relevance]

Thank you all for your good messages!

Sorry, these last days of classes were a bit heavy, but I'm back with the development!

And yeah, this is an open source project. Code will be released.

[DannyUK]

Thank you all for your good messages!

Sorry, these last days of classes were a bit heavy, but I'm back with the development!

And yeah, this is an open source project. Code will be released.

Looking good! Can't wait to look at the source.

Any comments on speed? Is that server related or are you looking to optimise?

[Relevance]

Looking good! Can't wait to look at the source.

Any comments on speed? Is that server related or are you looking to optimise?

What speed?

[14yne]

This is promising im glad you have a demo site ive never actually experienced html5 until now

[li4m]

Interesting! This looks nice, good luck.

[lElectrico]

A little bit bugged, lot of work needed but it looks nice :).
Also, do you use any framework? Or vanilla JS?

[Relevance]

A little bit bugged, lot of work needed but it looks nice :).
Also, do you use any framework? Or vanilla JS?

Vanilla JS :)

[lElectrico]

I recommend you to use any framework as fast as you can, I think that will speed up everything and that'll help you a lot :p

[DannyUK]

What speed?

Getting high FPS but slow room load speed. Wondering what could be causing that? Tried it on multiple devices as well.

[lElectrico]

Getting high FPS but slow room load speed. Wondering what could be causing that? Tried it on multiple devices as well.

The slow process is the furni images loading, I think he at some future will optimize it

[lincoln67]

could be because each image is loaded separately, but that's only a guess. Most of the html5 games I've seen use sprite sheets and place a number of images on a single file.

[Konquer]

Loading time can be decreased by at least 50% if you instead of generating an extra full-color image for every sprite just draw the entity's current sprite as a unique color to a new canvas and use that alone for click detection.

Hope you decide to remove the obfuscation, would be a great resource for anyone interested. Also really nice that the images are fetched from swfs on the fly :)

[Relevance]

Thank you all for your feedback :)

I recommend you to use any framework as fast as you can, I think that will speed up everything and that'll help you a lot :p

Thanks, i'll try!

Getting high FPS but slow room load speed. Wondering what could be causing that? Tried it on multiple devices as well.

The slow process is the furni images loading, I think he at some future will optimize it

could be because each image is loaded separately, but that's only a guess. Most of the html5 games I've seen use sprite sheets and place a number of images on a single file.

That's the issue! Right now, each image is downloaded one by one... This could be a huge number of images, considering the amount of sprites of each furni.

e.g:

club_sofa: 8 sprites

Spoiler:

club_sofa_64_a_2_0.pngclub_sofa_64_a_6_0.pngclub_sofa_64_b_2_0.pngclub_sofa_64_b_6_0.pngclub_sofa_64_c_2_0.pngclub_sofa_64_c_6_0.pngclub_sofa_64_d_6_0.pngclub_sofa_64_sd_2_0.png

rare_dragonlamp: 14 sprites

Spoiler:

rare_dragonlamp_64_a_4_0.pngrare_dragonlamp_64_b_4_0.pngrare_dragonlamp_64_c_4_0.pngrare_dragonlamp_64_c_4_1.pngrare_dragonlamp_64_d_4_0.pngrare_dragonlamp_64_e_4_0.pngrare_dragonlamp_64_e_4_1.pngrare_dragonlamp_64_f_4_0.pngrare_dragonlamp_64_f_4_1.pngrare_dragonlamp_64_f_4_2.pngrare_dragonlamp_64_f_4_3.pngrare_dragonlamp_64_f_4_4.pngrare_dragonlamp_64_g_4_1.pngrare_dragonlamp_64_sd_4_0.png

In addition, we must add the processing time of coloring, and some other image processing... but yeah, most of the time is spent on the download. And it could be related with latency, the current server is in SF.


How long does it takes to you to load?

Mine loads in about 40 seconds.

Spoiler:

Loading time can be decreased by at least 50% if you instead of generating an extra full-color image for every sprite just draw the entity's current sprite as a unique color to a new canvas and use that alone for click detection.

Hope you decide to remove the obfuscation, would be a great resource for anyone interested. Also really nice that the images are fetched from swfs on the fly :)

I tried that, but click detection becomes a bit buggy :(

Nice analysis tho :)

[Relevance]

I don't know why my last message needed approval but ok... i'm writting again.

First of all, thank you all for your feedback!

Maybe the speed issues are related with the fact that a furni requires a lot of images to load, and also requires a bit of image processing (like coloring). It may also be related with server latency... Becase of performance, the furni load process ocurs consecutively, a furni, one by one. And the sever could be located a little far away (currently located in SF, moving to NY) from you, (i got 200ms pings), so there's a idle time while waiting for server response...

But maybe there's another reason for those speed issues.

I made some changes, also removed CloudFlare. Please tell me if there any speed improvements :)

It takes me about 25 seconds to load it all.

- - - Updated - - -

Loading time can be decreased by at least 50% if you instead of generating an extra full-color image for every sprite just draw the entity's current sprite as a unique color to a new canvas and use that alone for click detection.

Hope you decide to remove the obfuscation, would be a great resource for anyone interested. Also really nice that the images are fetched from swfs on the fly :)

I tried that, but click tracking becomes a little unaccurate. But we can trying another solutions.

Nice analysis tho. I'll remove the obfuscation soon :)

- - - Updated - - -

I recommend you to use any framework as fast as you can, I think that will speed up everything and that'll help you a lot :p

I'll try :)

I learnt a little from PixiJS, that could help, but could be necessary code almost everything again.