About a year ago I started working on what was to become a canvas based game engine for html5 retros. The goal was to create the tile projection and rendering of avatars and furniture. Unfortunately I lost interest fairly quickly and only finished the room rendering and some misc stuff like camera dragging etc.
What separates this from other html5 releases on here is that it is purely canvas based. No DOM elements or third party engines are used whatsoever. It is also fairly well structured and easy to build upon.
Not sure if anyone will see fit to further work on this, but for what it's worth, it's a nice resource to look at if you want to get into making your own html5 hotel or just an isometric styled game in general.
Some features that might be useful to someone out there
- Async preloading of assets
- Script based canvas creation and handling
- Isometric projection of tiles
- Hovering over individual tiles
- Screen coordinates -> tile coordinates conversion
- Tile coordinates -> center screen coordinates of tile conversion
- Relative camera positions (dragging the room around)
This project was made with TypeScript and Webpack for module handling and bundling. I also highly recommend using visual studio code to automate the compiling process.
Some images and snippets
Spoiler:
Demo
habbo5 demo
Download
habbo5
If you are creating a canvas based version of habbo and ever get to the point of having to implement pixel perfect click detection on individual furniture and avatars. I recommend using a shadowcanvas that draws all your entities with a different color and stores the relation betwen color->entity in a dictionary of some sort. When the user clicks on the main canvas, check the color of the clicked screen coordinates on the shadowcanvas and get the corresponding entity.
Reply With Quote
Originally Posted by pel
