I’m planning to create a game which puts 2D sprites on 3D grid ground. Here’s the playground for the concept.
It’s looking good initially. However, when rotate camera upwards, so that “beta” is close to 0, sprites on sideways start to be off the grids.
Since I moved each sprite up a little bit so that the feet touch the grid, and each rotates itself around its center, it turns out the sprites spread a little bit wider than the grids when camera looks down on them.
I searched for a way to change their origin of rotation and found this.
Which recommends using plane with billboard mode.
Well the concern is, I’m not sure if I would need more precise picking for sprites in my yet-abstract-game. Using Babylon.js’s sprite system, I can take into account transparency while picking where it’s appropriate. I couldn’t find a way to do the same for plane.
Now I’m considering one of these.
- Keep using the sprite system, read the current beta value of camera before every rendering, and move each sprite accordingly. Changing the angle of camera shouldn’t occur often in my use case, so most of the time it should be a simple test.
- Use plane with billboard mode instead, and if the needs arise, implement invisible hitbox for picking. I don’t think picking should be pixel perfect, so this could work, too. Perhaps I have to implement sprite animation too.
Is there a better way? If I have to choose between these, I want to know which one is better in terms of performance, and/or future-proofing.