Bobba.io - HTML5 Habbo implementation

Relevance · Aug 31, 2018

PeacefulDreams said:
Nice work so far! Looks really promising. An implementation like this could also provide much more creative freedom regarding customs when it's stable. Keep up the good work! I'm excited to see how this turns out.

Might as well offer the client to Sulake then, they might pay a good amount for it lol. Nice idea though! I see a possible Arcturus & Bobba.io collab here..

Thanks!!

Actually some messages are very similar to the original ones, or maybe a bit simpler.

Code:

Communication.OUTGOING_LOGIN = 1;
Communication.OUTGOING_REQUEST_MAP = 2;
Communication.OUTGOING_REQUEST_MOVEMENT = 7;
Communication.OUTGOING_REQUEST_CHAT = 9;
Communication.OUTGOING_REQUEST_LOOK_AT = 12;
Communication.OUTGOING_REQUEST_WAVE = 13;
Communication.OUTGOING_REQUEST_ROOM_DATA = 15;
Communication.OUTGOING_REQUEST_ITEM_INTERACT = 18;

Communication.INCOMING_LOGIN_OK = 3;
Communication.INCOMING_MAP_DATA = 4;
Communication.INCOMING_PLAYERS_DATA = 6;
Communication.INCOMING_PLAYER_STATUS = 8;
Communication.INCOMING_CHAT = 10;
Communication.INCOMING_PLAYER_REMOVE = 11;
Communication.INCOMING_PLAYER_WAVE = 14;
Communication.INCOMING_ROOM_ITEM_DATA = 16;
Communication.INCOMING_ITEM_REMOVE = 17;
Communication.INCOMING_ITEM_STATE = 19;
Communication.INCOMING_WALL_ITEM_DATA = 20;

function Communication(game) {
  this.game = game;
}

Communication.prototype.doLogin = function(username, look) {
  var message = new ClientMessage(Communication.OUTGOING_LOGIN);
  message.appendString(username);
  message.appendString(look);
  this.game.connection.sendMessage(message);
};

Communication.prototype.requestMap = function() {
  this.game.connection.sendMessage(new ClientMessage(Communication.OUTGOING_REQUEST_MAP));
};

Communication.prototype.requestRoomData = function() {
  this.game.connection.sendMessage(new ClientMessage(Communication.OUTGOING_REQUEST_ROOM_DATA));
};

Communication.prototype.requestMovement = function(x, y) {
  var message = new ClientMessage(Communication.OUTGOING_REQUEST_MOVEMENT);
  message.appendInt(x);
  message.appendInt(y);
  this.game.connection.sendMessage(message);
};

Communication.prototype.requestChat = function(chat) {
  if (chat.length > 0) {
    var message = new ClientMessage(Communication.OUTGOING_REQUEST_CHAT);
    message.appendString(chat);
    this.game.connection.sendMessage(message);
  }
};

Communication.prototype.requestLookAt = function(userId) {
  var message = new ClientMessage(Communication.OUTGOING_REQUEST_LOOK_AT);
  message.appendInt(userId);
  this.game.connection.sendMessage(message);
};

Communication.prototype.requestWave = function() {
  var message = new ClientMessage(Communication.OUTGOING_REQUEST_WAVE);
  this.game.connection.sendMessage(message);
};

Communication.prototype.requestInteractFurni = function(itemId) {
  var message = new ClientMessage(Communication.OUTGOING_REQUEST_ITEM_INTERACT);
  message.appendInt(itemId);
  this.game.connection.sendMessage(message);
};

Communication.prototype.handleMessage = function(data) {
  var request = new ServerMessage(data);
  switch (request.id)
  {
    case Communication.INCOMING_LOGIN_OK:
      this.handleLoggedIn(request);
      break;
    case Communication.INCOMING_MAP_DATA:
      this.handleMap(request);
      break;
    case Communication.INCOMING_PLAYERS_DATA:
      this.handlePlayers(request);
      break;
    case Communication.INCOMING_PLAYER_STATUS:
      this.handleStatus(request);
      break;
    case Communication.INCOMING_PLAYER_REMOVE:
      this.handleRemovePlayer(request);
      break;
    case Communication.INCOMING_CHAT:
      this.handleChat(request);
      break;
    case Communication.INCOMING_PLAYER_WAVE:
      this.handleWave(request);
      break;
    case Communication.INCOMING_ROOM_ITEM_DATA:
      this.handleRoomItems(request);
      break;
    case Communication.INCOMING_ITEM_REMOVE:
      this.handleRemoveFurni(request);
      break;
    case Communication.INCOMING_ITEM_STATE:
      this.handleFurniState(request);
      break;
    case Communication.INCOMING_WALL_ITEM_DATA:
      this.handleWallItems(request);
  }
};

Communication.prototype.handleLoggedIn = function(request) {
  this.game.onLoggedIn();
};

Communication.prototype.handleMap = function(request) {
  updateStatus("Received map");
  var cols = request.popInt();
  var rows = request.popInt();
  var doorX = request.popInt();
  var doorY = request.popInt();

  var heightmap = [];
  for (var i = 0; i < cols; i++) {
    heightmap.push([]);
    for (var j = 0; j < rows; j++) {
      heightmap[i].push(request.popInt());
    }
  }

  this.game.setMap(cols, rows, doorX, doorY, heightmap);
};

Communication.prototype.handlePlayers = function(request) {
  var count = request.popInt();
  //updateStatus("Received (" + count + ") players");

  for (var i = 0; i < count; i++) {
    var id = request.popInt();
    var x = request.popInt();
    var y  = request.popInt();
    var z  = request.popFloat();
    var rot = request.popInt();
    var name = request.popString();
    var look = request.popString();

    if (this.game.currentRoom != null) {
      this.game.currentRoom.setPlayer(id, x, y, z, rot, name, look);
    }
  }
};

Communication.prototype.handleRoomItems = function(request) {
  var count = request.popInt();
  //updateStatus("Received (" + count + ") room items");
  for (var i = 0; i < count; i++) {
    var id = request.popInt();
    var x = request.popInt();
    var y  = request.popInt();
    var z  = request.popFloat();
    var rot = request.popInt();
    var baseId = request.popInt();
    var state = request.popInt();

    if (this.game.currentRoom != null) {
      this.game.currentRoom.setRoomItem(id, x, y, z, rot, baseId, state);
    }
  }
};

Communication.prototype.handleWallItems = function(request) {
  var count = request.popInt();
  //updateStatus("Received (" + count + ") wall items");
  for (var i = 0; i < count; i++) {
    var id = request.popInt();
    var x = request.popInt();
    var y  = request.popInt();
    var rot = request.popInt();
    var baseId = request.popInt();
    var state = request.popInt();

    if (this.game.currentRoom != null) {
      this.game.currentRoom.setWallItem(id, x, y, rot, baseId, state);
    }
  }
};

Communication.prototype.handleFurniState = function(request) {
  var itemId = request.popInt();
  var state = request.popInt();
  if (this.game.currentRoom != null) {
    this.game.currentRoom.setFurniState(itemId, state);
  }
};

Communication.prototype.handleStatus = function(request) {
  var count = request.popInt();
  //updateStatus("Received (" + count + ") statusses");

  for (var i = 0; i < count; i++) {
    var userId = request.popInt();
    var x = request.popInt();
    var y  = request.popInt();
    var z  = request.popFloat();
    var rot = request.popInt();
    var statussesCount = request.popInt();
    var statusses = {};
    for (var j = 0; j < statussesCount; j++) {
      var key = request.popString();
      var value = request.popString();
      statusses[key] = value;
    }
    this.game.currentRoom.updateUserStatus(userId, x, y, z, rot, statusses);
  }
  /*var userId = request.popInt();
  var x = request.popInt();
  var y = request.popInt();
  var rot = request.popInt();
  if (this.game.currentRoom != null) {
    this.game.currentRoom.movePlayer(userId, x, y, rot);
  }*/
};

Communication.prototype.handleRemovePlayer = function(request) {
  var userId = request.popInt();
  if (this.game.currentRoom != null) {
    this.game.currentRoom.removePlayer(userId);
  }
};

Communication.prototype.handleRemoveFurni = function(request) {
  var furniId = request.popInt();
  if (this.game.currentRoom != null) {
    this.game.currentRoom.removeFurni(furniId);
  }
};

Communication.prototype.handleChat = function(request) {
  var userId = request.popInt();
  var text = request.popString();
  if (this.game.currentRoom != null) {
    this.game.currentRoom.addChat(userId, text);
  }
};

Communication.prototype.handleWave = function(request) {
  var userId = request.popInt();
  if (this.game.currentRoom != null) {
    this.game.currentRoom.addWave(userId);
  }
[COLOR=#000000]};[/COLOR]

You must be registered to see links

So an integration is possible

N0tis · Sep 8, 2018

I love the 60 fps. Github?

The General · Sep 12, 2018

Whats the performance when you turn off hardware acceleration in chrome?

Relevance · Sep 14, 2018

The General said:
Whats the performance when you turn off hardware acceleration in chrome?

Tested on a Core i5 - 7200U, it's about 60fps.

Hardware acceleration off

LuQ8KI - Bobba.io - HTML5 Habbo implementation - RaGEZONE Forums

Hardware acceletation on

P6fvTVk - Bobba.io - HTML5 Habbo implementation - RaGEZONE Forums

N0tis said:
I love the 60 fps. Github?

Github links on the initial post

DiMitry · Dec 25, 2018

This is Amazing!
Where can I get the resource and hof_furni files??

seanrom · Dec 25, 2018

DiMitry said:
This is Amazing!
Where can I get the resource and hof_furni files??

I think you could just scrape whatever is under

You must be registered to see links

with some software, if you need the gamedata. However i don't think the gamerserver is released, so you would write your own packet manager.

Btw, really awesome project.

Relevance · Dec 27, 2018

DiMitry said:
This is Amazing!
Where can I get the resource and hof_furni files??

You must be registered to see links

seanrom said:
I think you could just scrape whatever is under
You must be registered to see links
with some software, if you need the gamedata. However i don't think the gamerserver is released, so you would write your own packet manager.

Btw, really awesome project.

Game server is actually released too, check github links

Thanks

Leonson · Dec 27, 2018

is the live demo the final version from Github? also.. said repositories haven't been updated for months, any idea on new updates, or do you hold it as unfinished?

DiMitry · Dec 27, 2018

Relevance said:
You must be registered to see links

Wow! Thank you so much! <3

Jeihden · Dec 27, 2018

I read out there that you're working with pixijs, and that this involved recoding almost everything.

Do you think that it will only be an update or a new project from 0?

What are you working on the project at this time?

PD: Forgive me for my bad English, I speak Spanish.

Relevance · Dec 27, 2018

Leonson said:
is the live demo the final version from Github? also.. said repositories haven't been updated for months, any idea on new updates, or do you hold it as unfinished?

Yes, the live demo is the final version from github but with a mod to make it work with SSL / HTTPS.
The project haven't received updates because i was a little busy with the college, but as I'm on vacations, there will be some updates soon

Jeihden said:
I read out there that you're working with pixijs, and that this involved recoding almost everything.

Do you think that it will only be an update or a new project from 0?

What are you working on the project at this time?

PD: Forgive me for my bad English, I speak Spanish.

Actually I haven't started working with pixijs, but I will. This is like a proof of concept.
It will be a complete recode

Jeihden · Dec 29, 2018

Relevance said:
Actually I haven't started working with pixijs, but I will. This is like a proof of concept.
It will be a complete recode

I'm was working in your release, especifictly in the DrawWall. I Connected the emulator to a database to looking for rooms & room models, so, my logic was:
1 = black hole (x)
0 = Tile (0)
Maybe, later I'll need to change this for the height of the tiles, stairs, etc.

What do you think about this algorithm? I don't know if this is the most optimal, but, its works fine with whatever room model.

Code:

Room.prototype.drawWall = function() {    
   for (var i = 0; i < this.cols; i++) {    
      for (var j = 0; j < this.rows; j++) {      
         var tile = this.heightmap[i][j];      
         if (tile != 1) {        
            // corners        
            //   1 2        
           //   ? ?        
           // 3 ? 0        
           var isValid1 = this.heightmap[(i-1)][(j-1)];//1        
           var isValid2 = this.heightmap[i][(j-1)];//2        
           var isValid3 = this.heightmap[(i-1)][(j)];//3   
     
           // black_hole      
           var black_hole = this.heightmap[(i-2)][j];                

          // wall_l        
          if(isValid3 == 1 && == 1){          
             this.drawQueue.queue(new IsometricDrawableSprite(this.sprites.getImage('room_wall_l'), null, i, j, 0, -8, -119, DrawableSprite.PRIORITY_WALL));        
          }        

          // corner        
          //   1 2       
          //   x x        
         // 3 x 0        
         if(isValid1 == 1 && isValid2 == 1 && isValid3 == 1){          
            // corner_r          
           this.drawQueue.queue(new IsometricDrawableSprite(this.sprites.getImage('room_wall_corner'), null, i, j, 0, 0, -123.7, DrawableSprite.PRIORITY_WALL));        
         }         
      
         // wall_r        
         else if(isValid1 == 1 && isValid2 == 1){          
            this.drawQueue.queue(new IsometricDrawableSprite(this.sprites.getImage('room_wall_r'), null, i, j, 0, 31, -119, DrawableSprite.PRIORITY_WALL));        
         }      
      }    
   }  
  }
};

This is the room model:

Code:

xxxxxxxxxxxxxxxxx00000xxxxxx00000xxx0000x000xx00x000x00xx000000x00xx00x000x00xx00000x000xx000000000

The Result

Relevance - Bobba.io - HTML5 Habbo implementation - RaGEZONE Forums

Relevance · Dec 29, 2018

Jeihden said:

I'm was working in your release, especifictly in the DrawWall. I Connected the emulator to a database to looking for rooms & room models, so, my logic was:
1 = black hole (x)
0 = Tile (0)
Maybe, later I'll need to change this for the height of the tiles, stairs, etc.

What do you think about this algorithm? I don't know if this is the most optimal, but, its works fine with whatever room model.

Code:

Room.prototype.drawWall = function() {    
for (var i = 0; i < this.cols; i++) {    
for (var j = 0; j < this.rows; j++) {      
var tile = this.heightmap[i][j];      
if (tile != 1) {        
// corners        
//   1 2        
//   ? ?        
// 3 ? 0        
var isValid1 = this.heightmap[(i-1)][(j-1)];//1        
var isValid2 = this.heightmap[i][(j-1)];//2        
var isValid3 = this.heightmap[(i-1)][(j)];//3   
     
// black_hole      
var black_hole = this.heightmap[(i-2)][j];                

// wall_l        
if(isValid3 == 1 && == 1){          
this.drawQueue.queue(new IsometricDrawableSprite(this.sprites.getImage('room_wall_l'), null, i, j, 0, -8, -119, DrawableSprite.PRIORITY_WALL));        
}        

// corner        
//   1 2       
 //   x x        
// 3 x 0        
if(isValid1 == 1 && isValid2 == 1 && isValid3 == 1){          
// corner_r          
this.drawQueue.queue(new IsometricDrawableSprite(this.sprites.getImage('room_wall_corner'), null, i, j, 0, 0, -123.7, DrawableSprite.PRIORITY_WALL));        
}         
     
// wall_r        
else if(isValid1 == 1 && isValid2 == 1){          
this.drawQueue.queue(new IsometricDrawableSprite(this.sprites.getImage('room_wall_r'), null, i, j, 0, 31, -119, DrawableSprite.PRIORITY_WALL));        
}      
}    
}  
}
};

This is the room model:

Code:

xxxxxxxxxxx 
xxxxxx00000 
xxxxxx00000 
xxx0000x000 
xx00x000x00 
xx000000x00 
xx00x000x00 
xx00000x000 
xx000000000

The Result

[IMG]https://forum.ragezone.com/ima...is the best code, but for know it could work!

Kodamas · Mar 7, 2019

Nice projet, really good. I share a small update if someone is interested

-Draw tile without img
-Improvement of the drawing order
-Stair right and left
-Tilemap shadow
-:lay position (rot 2 and 4)
-Camera follow user walking
-Bubble chat follow camera y

Client:

You must be registered to see links

Server:

You must be registered to see links

Jeihden · Mar 11, 2019

Kodamas said:
Nice projet, really good. I share a small update if someone is interested

-Draw tile without img
-Improvement of the drawing order
-Stair right and left
-Tilemap shadow
-:lay position (rot 2 and 4)
-Camera follow user walking
-Bubble chat follow camera y

Client:
You must be registered to see links

Server:
You must be registered to see links

I used your update but... What does this means?

Kodamas · Mar 11, 2019

Edit web-gallery/js/avatarimager/AvatarImager.js lign 414

B3T4T3ST3 · Mar 11, 2019

Kodamas said:
Nice projet, really good. I share a small update if someone is interested

-Draw tile without img
-Improvement of the drawing order
-Stair right and left
-Tilemap shadow
-:lay position (rot 2 and 4)
-Camera follow user walking
-Bubble chat follow camera y

Client:
You must be registered to see links

Server:
You must be registered to see links

A pull request would be better than links

Relevance · Mar 20, 2019

Kodamas said:
Nice projet, really good. I share a small update if someone is interested

-Draw tile without img
-Improvement of the drawing order
-Stair right and left
-Tilemap shadow
-:lay position (rot 2 and 4)
-Camera follow user walking
-Bubble chat follow camera y

Client:
You must be registered to see links

Server:
You must be registered to see links

Nice updates, but do not forget the performance, I got some performance issues.
I really liked the tile drawing thing.

Kodamas · Mar 20, 2019

Relevance said:
Nice updates, but do not forget the performance, I got some performance issues.
I really liked the tile drawing thing.

Thank you. Yes I tried to optimize but I failed to do better, so I'm stopped there

B3T4T3ST3 · Apr 6, 2019

8 months since the last commit... so, is dead?

Welcome!

Bobba.io - HTML5 Habbo implementation

Newbie Spellweaver

Experienced Elementalist

Developer

Newbie Spellweaver

Attachments

Initiate Mage

☮TAKU????

Newbie Spellweaver

Newbie Spellweaver

Initiate Mage

Newbie Spellweaver

Newbie Spellweaver

Newbie Spellweaver

Newbie Spellweaver

Newbie Spellweaver

Newbie Spellweaver

Newbie Spellweaver

Attachments

Junior Spellweaver

Newbie Spellweaver

Newbie Spellweaver

Junior Spellweaver

About Us

Online statistics

Forum statistics

RaGEZONE Sponsor