Voxel-Style Pseudo 3D Script

[rainefall]

This is a script that renders Voxel-Style 'Models' inside RPG Maker XP. It uses stacked sprites to create the illusion of 3D. It has no perspective, no lighting, and no collision, but everyone on the Discord seemed to like it when I showed it off in my Pokémon x Starbound project.

Introduction

Spoiler:

This script is based off a technique I've seen mainly in the GameMaker Studio community, which you can see in this tutorial for GameMaker Studio, this game made in GameMaker Studio and this video by Heartbeast for GameMaker Studio. I recently had the urge to port it over to RPG Maker XP, despite the fact that it would probably render any game unplayable. Surprisingly enough, it didn't, and I was able to still hit that 40FPS mark, even when rendering multiple 'models' at once.

Screenshots

Spoiler:

Some of these screenshots are slightly older than the current version of the system, but should give you an idea of what the system looks like.

Bonus video showing smooth rotation and movement

Installation

Spoiler:

To install, simply make a new script section above Main, paste this script into it, then create a new folder inside 'Graphics' called '3D'. This is where you will store all of your model sheets.

While not completely incompatible with vanilla XP projects, there are a few Essentials methods used in the script.

Model Creation

Spoiler:

This can be really hard if you go about it in the wrong way, due to the way models are rendered in this system. A 'model' is actually just a sheet of sprites that are stacked on top of each other. You could just draw each frame by hand, but that's time-consuming. Instead, I'd use MagicaVoxel, a free Voxel editor. This allows you to actually see what your model will look like. Please make sure your model's width and depth are equal! The system will not work if you don't.

Now, you can't just throw a .vox file into your game, since that's not how the system works. Instead, you have to use this tool to convert your .vox files to a spritesheet. To do this, place the vox2png.exe file into the same directory as your .vox model and open a command prompt in that directory. Once you have one open, type 'vox2png [name of input model] [name of output png]' into it. Now copy the image into 'Graphics/3D' in your XP project (create a 3D folder if you haven't already). Make sure the output file is a PNG file - the system will not work otherwise.

Usage Instructions

Spoiler:

Using this script is similar to using plain old sprites, with a few differences.

Instead of Sprite.new(viewport), it's Sprite3D.new(viewport)

To set the spritesheet used to generate the model, use [model].setModel(name of your model in 'Graphics/3D' (without .png on the end!)) after you have set all the other parameters. There is no other way.

Image angle and opacity have methods to set values and add to the current value. They are 'setAngle' and 'rotate' for image angle, and 'setOpacity' and 'addOpacity' for opacity. Color and tone only have methods for setting, which are 'setColor' and 'setTone' respectively. These methods shouldn't be called anywhere near each other, as they all iterate through the model hash and that time can add up...

There are also a couple of things you should note when programming with this script in general.

• You should set your model's coordinates, opacity, zoom etc before you set the model. This is a side effect of the way the system works, and I haven't found a fix for it yet.
• Unless you like low framerates, do not use models larger than 48 frames. I can tell you from experience that it is a horrible idea.
• If you want to change multiple values of a model at once, change them directly instead of using the methods to change them, then use [model].redraw. This means you don't have to iterate through the model's sprites multiple times.
• Don't try and change an object's model unless you know exactly what you are doing. I haven't tried this myself, but doing this will most likely result in 'undocumented behavior'.

There is a list of methods at the top of the script.

Credits

Spoiler:

• moppin and nemk - NIUM, the game which this effect is most famous for
• Heartbeast - 'GameMaker Studio 2 - 3D Racecar - Sprite Stacking'
• like, a hundred bears - 2d 3d in gamemaker studio
• ephtracy - MagicaVoxel
• Stijn Brouwer - vox2png

If you find any bugs, don't hesitate to tell me. And also don't hesitate to show me anything you've made with this!