Project Catraya: Future HTML5 OT like game

[GaTToX]

@Under Influence Hey pretty cool work. I'm startign a similar project in my spare time. Did you find easy to do the effect to hide / show Upper - lower lvl floors in javascript ?. I'm trying to find the easyeast platform to develop the UI. And all fo the GUI I feel like it is easier in JS with HTML, CSS and JS (market, select character, login, backpack system, etcc), but the "in game things" like the UI efects on the map, player movements, attack effects etc will be easier using unity. I could achieve the Effect in unity this is what I did. Would you play Tibia with a different view perspective? (https://otland.net/threads/would-you-play-tibia-with-a-different-view-perspective.286452/) . Regards!

 

[Under Influence]

@Under Influence Hey pretty cool work. I'm startign a similar project in my spare time. Did you find easy to do the effect to hide / show Upper - lower lvl floors in javascript ?. I'm trying to find the easyeast platform to develop the UI. And all fo the GUI I feel like it is easier in JS with HTML, CSS and JS (market, select character, login, backpack system, etcc), but the "in game things" like the UI efects on the map, player movements, attack effects etc will be easier using unity. I could achieve the Effect in unity this is what I did. Would you play Tibia with a different view perspective? (https://otland.net/threads/would-you-play-tibia-with-a-different-view-perspective.286452/) . Regards!

Im checking if there are tiles above the character on the next moving position on the server (if floor is ground or above), if so, the server will only send the sqms of the current floor (or one row / one column )

export const filterItems3D = (pos: PosComponent) => {
  const { x, y, z } = pos;
  const map3D: ItemsGrid = [];
  if (z > GROUND) {
    return [filterItems(pos).map];
  }
  const top = hasTilesAbove(pos) ? z : 0;
  for (let k = GROUND; k >= top; k--) {
    const { flag, map } = filterItems({
      x: x + (z - k),
      y: y + (z - k),
      z: k,
    });
    if (flag) {
      map3D.push(map);
    } else {
      break;
    }
  }
  return map3D;
};


export const filterItems = (pos: PosComponent) => {
  const { x, y, z } = pos;
  const { width, height } = { width: CENTER_X, height: CENTER_Y };
  const map: Array<Array<number[]>> = [];
  const mapIndex = {
    x: -1,
    y: -1,
  };
  let flag = false;
  for (let j = y - height; j <= y + height; j++) {
    map[++mapIndex.y] = [];
    mapIndex.x = -1;
    for (let i = x - width; i <= x + width; i++) {
      const ids = getWorldPos({ x: i, y: j, z }).map(
        (id) => systems.spriteId.get(id) ?? 100,
      );
      map[mapIndex.y][++mapIndex.x] = ids;
      if (getWorldPos({ x: i, y: j, z }).length > 0) {
        flag = true;
      }
    }
  }
  return { map, flag };
}

I paused the project a bit, also my ADHD makes creating big projects difficult

 

[Fjorda]

Im checking if there are tiles above the character on the next moving position on the server (if floor is ground or above), if so, the server will only send the sqms of the current floor (or one row / one column )

export const filterItems3D = (pos: PosComponent) => {
  const { x, y, z } = pos;
  const map3D: ItemsGrid = [];
  if (z > GROUND) {
    return [filterItems(pos).map];
  }
  const top = hasTilesAbove(pos) ? z : 0;
  for (let k = GROUND; k >= top; k--) {
    const { flag, map } = filterItems({
      x: x + (z - k),
      y: y + (z - k),
      z: k,
    });
    if (flag) {
      map3D.push(map);
    } else {
      break;
    }
  }
  return map3D;
};


export const filterItems = (pos: PosComponent) => {
  const { x, y, z } = pos;
  const { width, height } = { width: CENTER_X, height: CENTER_Y };
  const map: Array<Array<number[]>> = [];
  const mapIndex = {
    x: -1,
    y: -1,
  };
  let flag = false;
  for (let j = y - height; j <= y + height; j++) {
    map[++mapIndex.y] = [];
    mapIndex.x = -1;
    for (let i = x - width; i <= x + width; i++) {
      const ids = getWorldPos({ x: i, y: j, z }).map(
        (id) => systems.spriteId.get(id) ?? 100,
      );
      map[mapIndex.y][++mapIndex.x] = ids;
      if (getWorldPos({ x: i, y: j, z }).length > 0) {
        flag = true;
      }
    }
  }
  return { map, flag };
}

I paused the project a bit, also my ADHD makes creating big projects difficult

In my opinion, you are doing this wrong. Waiting for a server check for this is pretty inefficient. The client should simply decide to draw or hide the floors with the data it already has. You should instead work on improving how you are fetching data in the background regarding the environment(other floors etc). The client should already have this data previously before you even render it in the viewport.

 

[renatonolo]

I am working in a very similar project using typescript in client and server side and using websocket to communicate the both.

I made a video showing my project in my YouTube channel, but it's in portuguese language (I am Brazilian).

About the map level to show, I am doing this on client side. It's like the @Fjorda said. I thing that the server meds to send all the map levels and you need to show or hide that in client side to prevent some lags or desync.

This is the video that I did to show my project.

 

[Under Influence]

In my opinion, you are doing this wrong. Waiting for a server check for this is pretty inefficient. The client should simply decide to draw or hide the floors with the data it already has. You should instead work on improving how you are fetching data in the background regarding the environment(other floors etc). The client should already have this data previously before you even render it in the viewport.

Yeah you are right, another way is to put on the map server memory a flag if the client show display the above floor or not on the respective coordinates which is done on map load on server start. But I am trying for the server to stop sending unnecessary data, only the needed floors and when I walk only the rows or columns needed, to prevent floors hacks.

Post automatically merged: Dec 14, 2023

I am working in a very similar project using typescript in client and server side and using websocket to communicate the both.

I made a video showing my project in my YouTube channel, but it's in portuguese language (I am Brazilian).

About the map level to show, I am doing this on client side. It's like the @Fjorda said. I thing that the server meds to send all the map levels and you need to show or hide that in client side to prevent some lags or desync.

This is the video that I did to show my project.

I speak portuguese although I am not from Brazil, do you have a discord where we can exchange some ideas?

I havent updated my project in some time after finishing drag and drop and container system

 

[renatonolo]

Yeah you are right, another way is to put on the map server memory a flag if the client show display the above floor or not on the respective coordinates which is done on map load on server start. But I am trying for the server to stop sending unnecessary data, only the needed floors and when I walk only the rows or columns needed, to prevent floors hacks.

Post automatically merged: Dec 14, 2023

I speak portuguese although I am not from Brazil, do you have a discord where we can exchange some ideas?

Nice to know that you speak portuguese too, but unfortunately I don't have discord. I am using telegram to communicate. Send me a pm if you wanna to talks about. =)

 

[Fjorda]

Yeah you are right, another way is to put on the map server memory a flag if the client show display the above floor or not on the respective coordinates which is done on map load on server start. But I am trying for the server to stop sending unnecessary data, only the needed floors and when I walk only the rows or columns needed, to prevent floors hacks.

Post automatically merged: Dec 14, 2023

I speak portuguese although I am not from Brazil, do you have a discord where we can exchange some ideas?

I havent updated my project in some time after finishing drag and drop and container system

There is seriously no need to do this.

The server should be sending tile data about all floors on both login and on movement. It sends all tile data including an extra 1 or 2 sqm around the viewport.
Then when the player moves, you already have the data of the tiles that are about to come into view, they are already being drawn before...

The client is then solely responsible during the drawing algorithm, to work out if floors above should be drawn or not.

 

[renatonolo]

I agree with @Fjorda . In my game I am sending all the map on login (with all floors) and the client make the decisions when show or hide the above floors. The unique thing that I did different is that when the player walks, I am sending just the tiles from the border of the map and not all the map. This logic saves a lot of network band.

 

[Fjorda]

I agree with @Fjorda . In my game I am sending all the map on login (with all floors) and the client make the decisions when show or hide the above floors. The unique thing that I did different is that when the player walks, I am sending just the tiles from the border of the map and not all the map. This logic saves a lot of network band.

That's not unique, that's a popular way of how 2D tiled client engines work. As I said in my previous answer, on login/teleport you get sent all tile data, including the 2sqm buffer. But when you move, you only receive the edge buffer of the direction you are moving, i.e walking east, you are fetching tile data of the eastern border, +3. You are also correct, it just saves a lot of overhead.

 

[renatonolo]

That's not unique, that's a popular way of how 2D tiled client engines work. As I said in my previous answer, on login/teleport you get sent all tile data, including the 2sqm buffer. But when you move, you only receive the edge buffer of the direction you are moving, i.e walking east, you are fetching tile data of the eastern border, +3. You are also correct, it just saves a lot of overhead.

That is exactly what I am doing.. =)

 

[Under Influence]

I am using fetching the tiles from outside of the screen, top and left 1sqm and right and south 2sqms because you can see a bit from outside. I fetch all tiles only on floor move, login and teleport. I am only getting the minimum necessary sqms. But I havent touch the project in a while, Im working in another app unrelated to OT