Spilt Milk

This first post is about a game I'm calling "Spilt Milk". It is essentially a 3d first person shooter using sprites. While it looks 3d it is in essence pretty much all 2d, even the collisions. The method uses "billboarding" for the 3d parts and cheats by using the shadow sprites for the actual 2d placement, and collisions. Now keep in mind it really is 3d being displayed, and the engine, Construct 3 can show objects with an actual z axis we really won't use that part except for setting the billboarding mesh, and raising the projectiles z elevation to make it look like its hovering.

I used a couple great tools made by Kenney. Those being the Creature Mixer, and the Avatar Mixer.

Mind you these are pixel art so some upscaling will be needed, and of course regular scaling will not work well since it will need to be made four times it's size. Luckily there are pixel art scalers to do that for you.

Lospec has a nice one if you're not too familiar with those.

To start lets take a look at the object list so you can see what all was used.
The shadow object texture(ballshad, monshad) gets reused. I set their opacity to 50%, with a black color filter. Then made hierarchies with it as the parent for their respective pairing(ball, monster). The ball, and the monster set position to their shadows, and are basically for display only. The shadows, and the player sprite are kept to the 2d realm where they do the heavy lifting, collisions, movement, etc.

The layer setup is pretty straight forward.
Layer 2 is set to 0 parallax and 2d to use for our gui. The player avatar is placed there along with the hit fx.

I chose to take advantage of the fog shader, so I put it on layer 0 along with the objects I want it to ...effect. Those being the monster, ball and their shadows.

Then the player and crosshair are placed on layer 1 since we don't need fog for those.

You will want to put the player in the middle of the layout since the monsters all spawn around the outer circumference.

Obviously 0, and 1 will need to be 3d.
Speaking of 3d we need to setup the camera. This is a first person shooter, so we want to place the camera at the player object looking in the same angle as the player. We can think of that like ray casting where we want to view to be. So off to the casting trig:

object.x + cos(object.angle) * distance

object.y + sin(object.angle) * distance

Applied to the 3d camera:

Then we can setup the billboards in the editor. We can't see the objects in 3d very well, but thankfully our method is very simple. First you select the sprite you want to billboard, then right click to set up the mesh. Set the mesh to 2(default), and then click on the bottom left point.

Note, and copy the y coordinate, and then click on the left top point.

Then paste/make the top point y the same as the bottom one.

As you might notice you then make the top points z higher.10 for the monster, 1.25 for the ball.You then mirror what you did with the top right point using the same y, and z.If you leave those objects in the editor as is they will use the current settings as their default when created. You can also use the templating feature, but that's up to you.

Now out of the editor, and into events. We want to make the billboards always face the player, so we need to set the angles to an offset since the billboard we set up makes a face like the bottom of a cube.

In this case its the angle +90.

We also need to place the reticle in front of the camera. Easy enough with our trig formula.

For our player we add a few instance variables, alive, and myaccel.

The forwards backwards movement is done with the tween behavior and again the ray casting formula.

Basically while the player is alive move forwards, in a stepping fashion with the up keyboard arrow.

Move the same way backwards with the down arrow. All while lerping the the step speed.

Then resetting it when the buttons are released.

To turn we add the angspeed variable, and change the angle by angspeed * dt degrees while the left or right arrow keys are down... or not.

Moving on to shooting I added the bullet behavior to the ballshad object and created a "double tap" firing mechanic using some more player variables.

Basically every press of the space bar creates two shots(ball with hierarchy)

Then resets when released.

Now to give the player something to shoot at we make a spawning loop.

Every 10 seconds make a monster on the outskirts of the layout, as long as there's less than 10 of them.

We use a local variable to get the random angle, again in the trig formula. Don't forget the hierarchy.

After adding the moveto behavior we can get it to stalk the player.

Yep you guess it, using the trig again.

Using the same event to change the monsters animation randomly.

Once the monster reaches its destination we can loop it to make it run after the player.

With a little extra to make the movement more interesting

On to collisions.

We  give the monster a hp variable, and the remove 1 each time its hit with a hit splat.

In the same event we can check that its still alive, and if not send it on its way.

Now for the player we don't have hp. It is one and done.

When the player gets caught set its alive variable to 0.

This stops you from moving, but still lets you turn, and cry over Spilt Milk.

Blah blah blah, css to style a button and restart if you like.

Ok that's it, go try the game if you like

Spilt Milk