Beginners Guide to Sprite Stacking using Magica Voxel and GameMaker Studio 2 or any Other Engine

Hello there everybody! My name’s Avis and in this text-based tutorial I will show you how to take a voxel model in magica voxel and put it into GameMaker Studio 2. As well as set up a very basic program in game maker studio 2 which uses sprite stacking to draw voxel models.

Prior knowledge required:

Little to no prior knowledge is required to complete this tutorial. Aside from a basic understanding how how to use GameMaker Studio 2 (create objects/sprites add events etc.)
This tutorial does not use Drag and Drop.

Specifically, i will be covering:

1. Background knowledge
2. Exporting your model from magica voxel
3. Importing into GameMaker
4. Drawing the Model
5. Rotating the Camera (Coming in part 2)

Feel free to skip to whatever section you like.

Section 1: Background Knowledge

So to get started, lets go over some background knowledge on what we’re gonna be working with, feel free to skip this section if you already know what all the terms are and such.

So first and foremost, What is sprite stacking? Sprite stacking is where a voxel model is sliced into many horizontal slices, these slices are then drawn in GameMaker from the bottom to the top, with each one slightly higher. This gives the effect of a sort of 3d model in a purely 2d game.

This is a sprite stacking demo i made a while back.

But before we get into that, let me briefly explain Magica Voxel and what voxels are exactly.

Voxels are 3d versions of pixels, each voxel has a color and is aligned to a grid just like a pixel. To the left of this text I have a screenshot of Magica Voxel. Magica Voxel is a free program you can use to make voxel models. I won’t go into how to use it in this tutorial (google it later) but i will be using it here.

Great, now that we have that out of the way, lets get started!

Section 2: Exporting your model

“French Toast”

This here is a model of a piece of french toast I made. For the purposes of this tutorial i recommend you just use one of the default models that come with Magica Voxel. You can load them by clicking one of the various titles on the rightmost menu.

So, we want to put this french toast model into GameMaker, but we can’t put a .vox file into GameMaker and we also don’t want to go through the trouble of using REAL 3d, so we’re going to need to use sprites. To do this we’re going to slice our model into various horizontal slices like this:

Look at all these “Slices” of toast!

So, How do we turn our model into slices?

-open up Magica Voxel and choose your model.

-click the black bar with “console” written in it

-type “o slice”

This GIF demonstrates the above steps.

this is a command that tells Magica Voxel to take whatever model is loaded and lay all the layers out in a single png sheet file. In this step, make sure to take note of the size of the model.

We will use the dimensions of our model in the next step when we import it into GameMaker.

Your output file should look something like this!

Section 3: Importing into GameMaker

To start off, we’re going to make a new sprite and open it up in GameMaker’s built in sprite editor.

Next up, we’re going to click Image > Import Strip Image

Now, we need to use the voxel model size information from earlier to tell game maker what to do with this sprite sheet.

We only care about the first 4 boxes: Number of Frames, Frames per Row, Frame Width, and Frame Height.

Number of frames is the Z height of the voxel model, or how tall it was before we exported it in Magica Voxel.

This is the number we use for Number of Frames.

We want frames per row to always be one, which is the default.

And for Frame Height and Width, The first two numbers from magica voxel can be used.

After we type these numbers in, go ahead and click “Convert” It will then ask you to confirm, click yes.

Now, theres a few issues with our example sprite here. It’s upside down and the frames are in the wrong order! We can fix this really easily in game maker.

To flip the sprite, click Image > Flip > All Frames

(NOTE: THIS STEP IS OPTIONAL)

To reverse the frames, we just need to click Image > Reverse Frames

And that’s it! Your model is imported into game maker and ready to go!

Section 4: Drawing the model

For a more in-depth explanation and code of actually drawing the object, please refer to this video tutorial by Heart Beast, it’s actually what peaked my interest in sprite stacking a while ago.
https://youtu.be/sNgb3guusMA

Otherwise, here’s something i whipped together just for the purposes of this tutorial. I plan on coming back and going through the drawing of sprites etc in much more depth(and adding support for rotating views) in part 2, so check back later!

We finally have the model in GameMaker, now let’s draw it.
First off, let’s create an object and give it three events.
A create event, a step event and a draw event.

Set the sprite of the object to the sprite we made earlier.

In the create event put:

image_speed = 0

In the step event put:

image_angle += .5

and in the draw event put:

var i = 0;
repeat(image_number) { 
   draw_sprite_ext(sprite_index, i, x, y-i ,image_xscale  ,image_yscale ,image_angle ,image_blend ,image_alpha )
   i ++
}

Now just create a room hop into the room editor, place the object we just made and run the game!

Conclusion!

And that’s it! quite simple. Here’s what a few other models look like. This tutorial just covered the basics of things, in the next one I plan on showing you how to make a system that allows you to rotate the view, creating a similar effect to a camera orbiting around the center of the screen.

As well as a few touch-ups. Like drawing the models with a gradient from top to bottom, making it look like the bottom of the model is darker.

If you have any questions or comments you can reach me
at my discord server or my twitter name is
@agentavis

2020 update: Dev_dwarf made a part two, finally! Rejoice!
https://medium.com/@dev_dwarf/beginners-guide-to-sprite-stacking-using-gamemaker-studio-2-part-2-26f1e9101371