Asteroid Project [HTML5, Angular, Node, Socket]
Hi guys, I recently started developing the Asteroid Project, which is basically Habbo in HTML5.
Client-side:
- Pixi.JS (For Canvas Renderization)
- TweenJS
- Angular
- Socket.IO
Server-Side:
- Written in TypeScript
- Pathfinder (A*)
- Socket.IO
- MySQL
Screenshot's:
Updates:
GitHub: Very soonRederization of the floors (Remake) [02/05]
Basic avatar movement (In progress)
Discord: mtwzim#7912
Bye!
Last edited by mtwzim; 02-05-20 at 11:34 PM. Reason: Updates 2
Goodluck with this project!
Nice to see new developments poping up. We're are more interested about the stuff you've done so far. The post is quite plain and doesn't give much information about your project; other than the stack you're using/going to use.
Non the less, good luck! I hope to see more information "soon".
Nice, good work. i have some questions: How will you handle the communication server-client, (json, habbo's default)?
Is the pathfinder inside client for development purposes only or will it be on releases?
I feel like you should allow the server to handle the path finding, otherwise what will happen is...
Client runs an A* algorithm query to locate a path from A to B but also isn't blocked off by any of the stuff happening in the room.
Client sends the path to the server.
Server received the path, now server validates the path, doing the exact some process as above.
Server sends the path back to the clients.
It's just useless overload for something that can be done just once, on the server.
Why Angular over a smaller library such as Vue or React? Less overhead from Angular would allow for a better performance on the client itself
How will you handle the communication server-client, (json, habbo's default)?Originally Posted by cabeludo007
JSON
Is the pathfinder inside client for development purposes only or will it be on releases?
The pathfinder will be on the server, sorry i was wrong when i wrote the post.
- - - Updated - - -
I really have no reason for it, I'm just very familiar with Angular and I think it can be as good as the other libraries (Although Vue and React are smaller)
Its perfectly fine to use whatever you feel most comfortable with, if it results in a more speedier development then I personally think it it's better than picking a whole new toolchain.
I'm not too familar with the javascript libraries, would it be difficult to switch over? Are there any patterns you could pick that'd make it easier to switch? MVC / MVVM?
What is the blue pixel for?
I think you have a bug in your floor raster drawing as some lines seem twice as thick. Gotta be pixel perfect
Floor:Its perfectly fine to use whatever you feel most comfortable with, if it results in a more speedier development then I personally think it it's better than picking a whole new toolchain.
I'm not too familar with the javascript libraries, would it be difficult to switch over? Are there any patterns you could pick that'd make it easier to switch? MVC / MVVM?
What is the blue pixel for?
I think you have a bug in your floor raster drawing as some lines seem twice as thick. Gotta be pixel perfect- I think the floor is still not perfect, but I made some improvements; * The floor is not a PNG image, I use PIXI.Graphics to draw.
Blue Pixel: This pixel is an intruder, this image is "static" from habbo.com.br, I still need to make an avatar move and consequently make my own avatarimage;
Change framework javascript, would it be difficult to change? (Angular, React and Vue): In the state of development I am in, it would be easy to change frameworks, but at the moment this is not my focus, angular is working very well with the needs.
Last edited by mtwzim; 03-05-20 at 03:15 AM. Reason: Additional information / Image
Actually the blue pixel served me for something, I found that the calculation that moves the player sometimes has small flaws.
Habbo actually DOES use an image for the floor tiles. The plane parser creates a bunch of rectangles (100+ if needed), places this image: https://i.imgur.com/FUsi0wc.png on top of it, then skews the rectangles to appear isometric.
Also to add, even the door is an image that is then made transparent: https://i.imgur.com/l6QAbjk.png
Interesting, I'm still working on the floors with PIXI Graphics, something happened in the code that some floors are on top of each other and the click sometimes went to the wrong floor, this was the main reason for removing the floor images. In addition, I'm also working on the avatar pathfinder.
I really need to make the avatar animations and also finish the pathfinder, currently it does not move correctly in all directions.
about the json communication: the reason habbo use raw byte array buffer using short type headers instead json objects is because it makes the packet length the minimum as it can.
So imagine your emulator will send the client a room 100x100 with 500 objects. Each item is a json object with its keys ({}) and fields (x: , y:, id:, z:, ownerName:) your emulator will send a huge json string data to your client, which will demand more memory and connection band.
Using the raw byte array buffer the communication data will be resumed to its own values in a defined order, eg:
id (int) [0 0 0 1]
x (int) [0 0 1 4]
y (int) [0 1 4 5]
ownerName (string) {length (short) [0 5] string to byte data [ l u c a s ]
that's why i think u should use the old habbo communication.
ah and it can make easy the compatibility with flash emulators
i hope you get my point about it.
I think Habbo already uses this notation for packets because it's an architectural choice from the roots of the game (we should remember that Habbo born in 2000 when the most common connection speed was 56k and we still measured RAM in MB than GB) today we don't have these problems anymore.
Also, because there's only one thing that requires an intensive packet exchanging, I think it's better stick to JSON (because of the tight support with JS, this gives really many benefits) and only worry to handle at the best this single situation with a room preloader (as Shockwave Habbo does) or something that splits this packets in many others.
Habbo uses that protocol because its the default Buffer serialization in Actionscript. Use the tools available instead of reinventing the wheel by writing your own serializers.
Actionscript Documentation
Reply With Quote![Asteroid Project [HTML5, Angular, Node, Socket]](http://ragezone.com/hyper728.png)
