How do they make browser games nowadays? Part 3
Two previous articles (part 1 and part 2) were manuals on how move load models and move things around. This time we’ll add more interactivity. Realtime statistics and collision detection, to be specific.
Step 9. Collision detection
This is probably the most challenging part of the journey. The thing is, there are a lot of ways you can check if two objects are colliding right now. Each one has it’s own pros and cons, and it’s your responsibility to choose, depending on your needs. If you’re curious, check Resources section below to find a list of hand-picked links to materials about this.
Here they are:
- Raycasting. This is the method that comes to mind when you say ‘Collisions’. When you cast the spell, you already know the direction of the fireball. So you can draw a line in this direction (ray) and check if it intersects any other objects. This method is usually used for bullets (so called projectiles), but our fireball is not so fast, so this method does not fit.
- Spatial grid. Here you divide the world to cells of certain size and check which objects currently are in the same cell fireball is or in one of the nearby cells.
- Boid-like. This method is similar to raycasting. In fact, you do use rays here too, but multiple times in different directions.
- AABB method. Each object in your scene has it’s own bounding box, so there are ways to detect their intersection (using Three.js’s BoxHelper).
- Ammo.js With physics engine you are able to simulate the world, move objects there that represent your NPCs around and ask the engine whether or not they are currently colliding. This is probably the most accurate method but in the same time it’s the hardest one.
- Naive. Finally you can just iterate over all entities in the scene and check if on of the fireballs position is within some rectangle around enemy. This is the slowest and easiest way.
I’d say, our game is 2.5D (Diablo-like), no object changes it’s Y coordinate. So the last method sounds like an easy solution that still fits us. I promise to implement all of the other methods some day. Stay tuned.
So let’s go ahead and create this new Collidable component which will do the job:
For that purpose it stores the reference to the object that is subject for collisions in global store.
Of course you have to wrap fireballs, enemies and the player in that component and create callbacks:
Step 10. Stats
Now, all of the code that is relative to webGL must be placed inside Canvas component. But what if we place some HTML outside it? Exactly. It will behave just as usual. So this step is primitive: select some data from storage, display it. Nothing new.
Try and play it! Drop a line in comments if liked it. Or, if you want me to publish this project on github.
Conclusion
Of course I don’t think of myself as of the great game developer. There is huge amount of cool projects, I often see such posts it Twitter. It’s great that people share knowledge and games they did. It was fun, I hope it was not boring ;) Btw, here are some links to stay in touch: twitter, linkedin, github.
Resources
- https://stemkoski.github.io/Three.js/Collision-Detection.html — collision detection based on raycasting
- https://www.youtube.com/watch?v=sx4IIQL0x7c — cool video about spatial grids
- https://www.youtube.com/watch?v=bqtqltqcQhw — another video about boids
- https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js — explanatory article about bounding volume collision detection
- https://mozdevs.github.io/gamedev-js-3d-aabb/physics.html — demo of physics based (ammo.js) collision detection
- https://medium.com/@bluemagnificent/intro-to-javascript-3d-physics-using-ammo-js-and-three-js-dd48df81f591 — intro to three.js and ammo.js
