Shots Fired

I added code to handle mouse click events. Clicking now fires, which is cool enough that I thought it was worth calling it version It feels much more like the beginnings of a game now. I just had to work out some math for rotations and learn about how BabylonJS’s coordinate system deals with parent/child meshes. Pretty straightforward, which is refreshing.

Check out version here.

Latest version here.

Stay On Target, Staaaaaaay On Target

I added code to track the mouse position. You’ll see a box that moves as you move the mouse, and I added a turret that should aim at that location, roughly. It’s starting to resemble something that resembles a game.

This wasn’t too hard to do, but I almost fell into the exact same trap I always fall into. I started to lose focus on getting to the “MVP.” In my post a few days ago, I had figured out how to make transparent textures work. That was an important step because lots of things will eventually be partially transparent — bullets, beams, explosions, particles, HUD elements. But once I figured that out, I immediately got sidetracked into experimenting with other cool things the BabylonJS material system can do. I wanted to figure out glowing lighting effects, etc…

That’s my number one pitfall. I don’t need glowing lighting effects to make the game playable. They look cool but they need to be done long after the the functionality of the game itself. Thankfully, I only goofed around with lighting effects for an hour or so before punting it to later. I got back to working on game mechanics and that feels much more productive. We’ll be blasting bad guys in no time.

I know I’ve said it before, but the concept of MVP is incredibly important if you’re creating anything. And the smaller your team, the more important it is to focus only on that MVP. I always think of those images (which I won’t post here for fear of copyright) where a car disassembled and every part is laid out neatly on the ground. It looks cool, but imagine how far you’d get if you tried to drive that car. It just doesn’t make sense to try to craft every bolt, bracket, piston, gasket, and windshield wiper just right, then hope they’ll all fit together at the end. First, you’ve got to build that crappy car that has no doors or headlights and barely runs. Then, start adding the bells and whistles until it looks as slick as you like.

This is important with game development for a second, less obvious reason. With a game, your barely playable MVP might actually be interesting to someone out there. You might find some early adopters who don’t care how bad it looks, as long as they get to say they “played it first.”

Here’s version, still using W/A/S/D to move and now with mouse to aim.

Latest version here.


Got some simple materials working. Struggled for a while because nothing I changed seemed to have any effect. Finally figured out that the problem was that I’m using mesh “instances” instead of actual meshes for each individual object on the screen, and instances can’t have their own unique material. Instances are a technique used to draw lots of copies of the same mesh without hurting performance. Each one can be moved, rotated, etc, but certain things (like the material) is the same for all instances of a mesh.

Here’s an example of BablyonJS drawing a thousand instances of a single cube.

In the image at the top of this post, you can see some transparent materials on those little dots. Those are my bullet meshes. I want them to be much brighter and have a glowy effect. Just need to learn a little more about the material system. It can do just about anything, with one notable exception being lots of independent lights. You’re only allowed eight lights in a scene, which is a really old-school restriction. That was a limitation of graphics cards in the 1990s. Modern engines allow you to have thousands of lights with barely any performance loss. BabylonJS claims to support 16 (on some systems) but it crashes for me if I try to go beyond eight.

Also added pause/unpause via the escape key.

Version here.

Latest version here.