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!

Bobba.io - HTML5 Habbo implementation

Status
Not open for further replies.
Initiate Mage
Joined
May 7, 2018
Messages
30
Reaction score
52
SKaFSwX - Bobba.io - HTML5 Habbo implementation - RaGEZONE Forums
Hi ther,
I want to introduce you Bobba.io, a HTML5 Habbo Hotel implementation.

Features:
  • Built-in Avatar imager.
  • Built-in Furni imager.
  • Walking, dancing, sitting, waving, blinking and speaking animations.
  • Furni interaction (double click switches states).
  • Furni animations and states.
  • Chat bubbles and scrolling.
  • Own furnidata structure (using json).
  • Virtual camera (you can drag the room).
  • C# Server from scratch.
  • Websockets
plus some other stuff...

All SWF assets are extracted and converted to individual png and json files, so all of these can be drawn in HTML5 Canvas.

Live demo:

Screenshot:
tALiJ2X - Bobba.io - HTML5 Habbo implementation - RaGEZONE Forums



Once you're logged in, you couldn't tell whether is Habbo or not.

Code Snippets (?)
The Furni class...

Code:
Furni.DRAWING_OFFSET_X = -32;Furni.DRAWING_OFFSET_Y = -16;Furni.FURNIDATA_URL = "./furnidata.json";Furni.ROOMITEM = 0;Furni.WALLITEM = 1;Furni.FRAME_SPEED = 80;function Furni(type, id, x, y, z, rot, baseId, state) {  this.type = type;  this.id = id;  this.x = x;  this.y = y;  this.z = z;  this.rot = rot;  this.state = state;  this.nextState = -1;  this.genericFrame = 0;  this.genericFrameCounter = 0;  this.baseId = baseId;  this.ready = false;  this.sprites = new Sprites();}Furni.prototype.loadSprites = function(furnitureImager) {  let allSpritesPromise = null;  if (this.type == Furni.ROOMITEM) {    allSpritesPromise = furnitureImager.generateRoomItem(this.baseId, 64);  } else {    allSpritesPromise = furnitureImager.generateWallItem(this.baseId, 64);  }  allSpritesPromise.then((base) => {    this.baseItem = base;    for (spriteId in this.baseItem.sprites) {      this.sprites.loadLocalImage(spriteId, this.baseItem.sprites[spriteId].sprite);      let i = 0;      for (layer of this.baseItem.sprites[spriteId].layers) {        this.sprites.loadLocalImage(spriteId + "_" + i++, layer.img);      }    }  });  return [allSpritesPromise];};Furni.prototype.prepare = function(furnitureImager) {  return new Promise((resolve, reject) => {    var p = this.loadSprites(furnitureImager);    Promise.all(p).then(function (loaded) {      //updateStatus("Sprites loaded (" + this.baseItem.itemName + " furniId:" + this.id + ")");      this.ready = true;      resolve();    }.bind(this),    function (error) {      updateStatus("Error loading sprites: " + error);      //reject("Error loading sprites: " + error);      resolve("Error loading sprites: " + error);    }.bind(this))  });};Furni.prototype.updateParams = function(x, y, z, baseId) {  this.x = x;  this.y = y;  this.z = z;};Furni.prototype.setState = function(state) {  if (this.baseItem.states[state].transition != null) {    this.state = this.baseItem.states[state].transition;    this.nextState = state;    this.genericFrame = 0;  } else {    this.setActualState(state);  }};Furni.prototype.setActualState = function(state) {  this.state = state;  this.nextState = -1;  this.genericFrame = 0;};Furni.prototype.nextGenericFrame = function() {  this.genericFrame++;  if (this.genericFrame >= this.baseItem.states[this.state].count) {    this.genericFrame = 0;    if (this.nextState != -1) {      this.setActualState(this.nextState);    }  }};Furni.prototype.tick = function(delta) {  this.genericFrameCounter += delta;  if (this.genericFrameCounter >= Furni.FRAME_SPEED) {    this.nextGenericFrame();    this.genericFrameCounter = 0;  }};Furni.prototype.getCurrentBaseSprite = function() {  return this.baseItem.sprites[this.getCurrentFurniSpriteKey()];};Furni.prototype.getCurrentSelectableLayer = function(layerId) {  return this.sprites.getSilhouette(this.getCurrentFurniSpriteKey() + "_" + layerId);};Furni.prototype.getCurrentFurniSpriteKey = function() {  return this.sprites.getFurnitureSpriteKey(this.baseItem.itemId, this.rot, this.state, this.genericFrame);};Furni.prototype.currentSprite = function() {  return this.sprites.getImage(this.getCurrentFurniSpriteKey());};Furni.prototype.currentSpriteAdd = function() {  return this.sprites.getImage(this.getCurrentFurniSpriteKey() + "_add");};Furni.prototype.currentSilhouette = function() {  return this.sprites.getSilhouette(this.getCurrentFurniSpriteKey());};

 

Attachments

You must be registered for see attachments list
Last edited:
Initiate Mage
Joined
May 15, 2016
Messages
19
Reaction score
7
Looks very cool! Is the demo down right now? Would love to try it out.
 
Joined
Nov 21, 2011
Messages
66
Reaction score
12
Hey bro! I let here from you the code of i used for try a few things. I hope u will use this for fix some things :D

Only for the developer (If he pm me i will delete this)

 
Skilled Illusionist
Joined
Mar 26, 2013
Messages
371
Reaction score
280
Nice project, currently the only one started a engine like the real one done by Sulake.

Hey bro! I let here from you the code of i used for try a few things. I hope u will use this for fix some things :D

Only for the developer (If he pm me i will delete this)

As the author said, is just a live demo.
There are not any extra security against things like that, you just created an useless websocket client :mellow:
 
Joined
Nov 21, 2011
Messages
66
Reaction score
12
Nice project, currently the only one started a engine like the real one done by Sulake.



As the author said, is just a live demo.
There are not any extra security against things like that, you just created an useless websocket client :mellow:

Its not useless. Its intresting for see how he work with packets and for me for learn about websockets :blush:
 
Junior Spellweaver
Joined
Jun 1, 2018
Messages
105
Reaction score
40
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.
 
Initiate Mage
Joined
Jun 26, 2011
Messages
16
Reaction score
0
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?
 
Initiate Mage
Joined
Jun 5, 2018
Messages
7
Reaction score
0
This is promising im glad you have a demo site ive never actually experienced html5 until now
 
Status
Not open for further replies.
Back
Top