Bobba.io - HTML5 Habbo implementation

Page 1 of 4 1234 LastLast
Results 1 to 15 of 60
  1. #1
    Registered Relevance is offline
    MemberRank
    May 2018 Join Date
    24Posts

    Bobba.io - HTML5 Habbo implementation

    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: Bobba

    Screenshot:



    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());};
    https://github.com/Josedn/battleball_server
    https://github.com/Josedn/battleball_client
    Last edited by Relevance; 20-07-18 at 07:02 PM.


  2. #2
    Moderator Quackster is offline
    ModeratorRank
    Dec 2010 Join Date
    AustraliaLocation
    3,319Posts

    Re: Bobba.io - HTML5 Habbo implementation

    Wow this looks AMAZING! Good luck!

    Is it just a client right now?
    The Habbo archives: http://alex-dev.org/archive/

  3. #3
    Registered Relevance is offline
    MemberRank
    May 2018 Join Date
    24Posts

    Re: Bobba.io - HTML5 Habbo implementation

    Thanks!

    It includes client and server!

  4. #4
    Oldskool Resurrector Emily is offline
    Alpha MaleRank
    Oct 2012 Join Date
    The NetherlandsLocation
    2,422Posts

    Re: Bobba.io - HTML5 Habbo implementation

    It um still looks pretty buggy but it surely looks promising! Good luck with it.
    - 22 years young
    - Dutchie
    - Transgender girl
    - Lesbian
    - Habbo developer
    - Pokemon fan
    - C# developer
    - PHP / JS / Node developer
    - C++ developer
    - Python developer

  5. #5
    CHIBRE ! pipitt05000 is offline
    True MemberRank
    Feb 2009 Join Date
    FranceLocation
    264Posts

    Re: Bobba.io - HTML5 Habbo implementation

    Excellent ! Good work man :)

  6. #6
    Registered LukeOx is offline
    MemberRank
    May 2016 Join Date
    18Posts

    Re: Bobba.io - HTML5 Habbo implementation

    Looks very cool! Is the demo down right now? Would love to try it out.

  7. #7
    Registered Relevance is offline
    MemberRank
    May 2018 Join Date
    24Posts

    Re: Bobba.io - HTML5 Habbo implementation

    Quote Originally Posted by LukeOx View Post
    Looks very cool! Is the demo down right now? Would love to try it out.
    Oops, server crashed.

    Online right now!

  8. #8
    Javascript Love LeChris is offline
    True MemberRank
    Sep 2011 Join Date
    United StatesLocation
    724Posts

    Re: Bobba.io - HTML5 Habbo implementation

    It’s pretty amazing man. Good luck with this and I can’t wait to see the finished result after you optimize it all!!

  9. #9
    Hardcore Member cabeludo007 is offline
    MemberRank
    Nov 2013 Join Date
    My HouseLocation
    145Posts

    Re: Bobba.io - HTML5 Habbo implementation

    The greatest engine i've seem. Great job!

  10. #10
    Member Amariconao is offline
    MemberRank
    Nov 2011 Join Date
    66Posts

    Re: Bobba.io - HTML5 Habbo implementation

    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)


  11. #11
    Developer BurakDev is offline
    True MemberRank
    Mar 2013 Join Date
    ParisLocation
    370Posts

    Re: Bobba.io - HTML5 Habbo implementation

    Nice project, currently the only one started a engine like the real one done by Sulake.

    Quote Originally Posted by Amariconao View Post
    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

  12. #12
    Member Amariconao is offline
    MemberRank
    Nov 2011 Join Date
    66Posts

    Re: Bobba.io - HTML5 Habbo implementation

    Quote Originally Posted by BurakDev View Post
    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
    Its not useless. Its intresting for see how he work with packets and for me for learn about websockets

  13. #13
    o/ Konquer is offline
    True MemberRank
    Apr 2014 Join Date
    473Posts

    Re: Bobba.io - HTML5 Habbo implementation

    Looks really good, well done!

  14. #14
    Ultimate Member B3T4T3ST3 is offline
    MemberRank
    Dec 2013 Join Date
    159Posts

    Re: Bobba.io - HTML5 Habbo implementation

    so... this is a dead thread?
    Also, any plans to release it?

  15. #15
    CHIBRE ! pipitt05000 is offline
    True MemberRank
    Feb 2009 Join Date
    FranceLocation
    264Posts

    Re: Bobba.io - HTML5 Habbo implementation

    Quote Originally Posted by B3T4T3ST3 View Post
    so... this is a dead thread?
    Also, any plans to release it?
    I don't think it will be released...
    Maybe an "hotel", maybe nothing Bobba.io - HTML5 Habbo implementation



Page 1 of 4 1234 LastLast

Advertisement