Without Normal Map
Normal Map Texture
Lighting applied to the normal map (artwork made before the hackaton)
Each objects will have a normal map texture attached, to have a 3D feeling on the lighting.
Additionally, as we use a 3D plane for our map, we can associate a Z value to each object depending on their height, and make the light affects surface depending on their distance.
Autotiles means tiles that connect depending on their relative positions to other tiles.
The Floor shadows are an Auto Tile that apply on a separate tilemap , depending on the floor tiles of the appartment. This tilemap is then baked into the Main Tilemap, allowing us to keep only one tilemap for the wall, floors, and floors shadows
A decision we made before starting to work on this project is the library we were going to use for it. While most 2d web games use frameworks like Pixi.js, Phaser or stay simplistic with the Javascript canvas API, we decided to go down the route of using webgl and library called Three.JS for 3d graphics. Even though the idea behind our apartment builder is to have a 2d editor and way of seeing the world, we wanted to add another dimension for such things as lightning and future uses of our tool where we might need that added dimension. Having a third dimension and thus using webgl, this also opens us to the possibility and simpler way of using shaders in our game, which are going to be very important when we for eg. want to have tiles using the same texture but different genec colors
As we use a 3D plane, we can create a mesh based on the object shape automatically, and apply that shape with a black recolor over the ground tilemap.
A stencil shader is needed to prevent floors shadows and objects shadows to overlap