Page 1 of 4

Sprit3r - 3D model viewer for spritesheets

Posted: Wed Nov 02, 2016 8:39 pm
by evgiz
Sprit3r

Hi everyone!

I'm happy to share my little software called Sprit3r!
Sprit3r is a 3D "model viewer" for viewing models composed of 2D spritesheets.

This is what a loaded model looks like:

Image

This 3D model is rendered using this sprite:
Image

The style can be very unique and good looking if done well, for instance in this game, called NIUM:

Image

Now thats cool and all, but why would you wanna use Sprit3r? Well: making this type of art can be incredibly hard! It is very difficult to imagine what your 2D spritesheet will look like when rendered in 3D, especially for tall objects. Sprit3r can help you with this because the model updates in real time while you edit!

Features
- The model updates in real time while you edit in another software
- Two display modes, flat and voxel
- Zoom, rotate or flip the model
- Linear and nearest filter for both pixel art and high resolutions
- Supports any editing software you like. It simply acts as another window with a preview.
- Automatic rotation and hidden UI provides a clean workspace
- Supports .png, .jpg and .vox files

The software was created entirely in LÖVE, using the fantastic UI library SUIT by @vrld.


New version, drag and drop files!
Support for MagicaVoxel files!

Sprit3r.love
(1.54 MiB) Downloaded 719 times
Github repository: https://github.com/evgiz/sprit3r

Thanks for reading, and tell me if you find the software useful!

Re: Sprit3r - 3D model viewer for spritesheets

Posted: Thu Nov 03, 2016 12:20 am
by Alexar
wow ,it's really cool. I am looking forward to make some voxel game with it. but any tool for building the models? something like 3d max?

Re: Sprit3r - 3D model viewer for spritesheets

Posted: Thu Nov 03, 2016 6:58 am
by evgiz
Alexar wrote:wow ,it's really cool. I am looking forward to make some voxel game with it. but any tool for building the models? something like 3d max?
Unlike regular voxels, the models are made from 2D spritesheets, not polygons. They can be edited with any image editor you want. Even though LÖVE doesn't support traditional 3D this method is easy to use. Its limited in a number of ways however, most notably the models can only rotate around a single axis and true perspective is not possible as far as I know.
evgiz wrote: This 3D model is rendered using this sprite:
Image
Simply put the artist imagines how the object would look, then draws each individual slice. Sprit3r stacks them on top of each other creating the 3D effect. This gives you instant feedback on how the object will look in your game. The models have volume like regular voxel models so I imagine its possible to convert these to polygons, however its not something I know how to do.

Re: Sprit3r - 3D model viewer for spritesheets

Posted: Thu Nov 03, 2016 8:37 am
by Fuzzlix
I like your idea and i am wondering noone cam up with sooner. It seems to me its a perfect fit to love2d. The result looks very good. I will shurly try it.

Re: Sprit3r - 3D model viewer for spritesheets

Posted: Thu Nov 03, 2016 9:27 am
by kikito
It's funny because I have been working on a similar idea. Where you inspired by a post on reddit, as I was?

Anyway, I think I'll share what I have now, because it matches well what you have done.

As @Alexar was asking, I too felt that editing the sprites by hand was too difficult for my (already limited) artistic capabilities. So I started investigating and found this open source voxel editor: Magicka Voxel.

Magicka Voxel uses a binary file format (extension: .vox), but it's relatively easy to write a parser for it, given that it is opensource. Generating a "sliced raster" from the model is simple too. Here it is:
vox.love
(12.71 KiB) Downloaded 350 times
I think you should be able to adapt it to your program, if you are so inclined.
evgiz wrote:- No file browser, is it even possible with LÖVE? Place images in Sprit3r folder.
As far as I know, LÖVE allows drag-and-dropping files on top of the LÖVE game via [wiki]love.filedropped[/wiki]

The next step I want to take is where our paths divert: Instead of rendering the slices directly, I want to try using the texture as a 3d texture and render it using a shader, as explained here and here. But I don't know if I will be able to do it.

Re: Sprit3r - 3D model viewer for spritesheets

Posted: Thu Nov 03, 2016 9:41 am
by evgiz
kikito wrote:It's funny because I have been working on a similar idea. Where you inspired by a post on reddit, as I was?
Yeah I was! I saw the post on reddit and found the concept really cool. It makes it easy to make pseudo-3D in a 2D engine/framework and the style can be really cool and unique.
kikito wrote: Magicka Voxel uses a binary file format (extension: .vox), but it's relatively easy to write a parser for it, given that it is opensource. Generating a "sliced raster" from the model is simple too. Here it is:
I'm familiar with MagickaVoxel and I've played around with it a bit. I had no idea it was this simple to generate a sprite sheet from the files though, thats really cool! Its probably an even better way to model as you can edit in 3D. I'll look into .vox files a bit more.

One advantage with using sprit3r + photoshop or whatever is that you're not limited to "pixel art" and can easily create high res models.
kikito wrote: As far as I know, LÖVE allows drag-and-dropping files on top of the LÖVE game via [wiki]love.filedropped[/wiki]
I didn't know about that callback! It's exactly what I've been looking for, thanks for pointing it out!
kikito wrote: The next step I want to take is where our paths divert: Instead of rendering the slices directly, I want to try using the texture as a 3d texture and render it using a shader, as explained here and here. But I don't know if I will be able to do it.
I don't know enough about shaders to do this myself, but I look forward to seeing what you can come up with!

Re: Sprit3r - 3D model viewer for spritesheets

Posted: Thu Nov 03, 2016 10:28 am
by evgiz
I used your code for importing and slicing vox models and came up with this pretty quickly:

Image

If its okay for you I'll continue using your code to support voxel models as well.
I don't think I'll be able to implement it myself, looks complicated... hahah :P

Re: Sprit3r - 3D model viewer for spritesheets

Posted: Thu Nov 03, 2016 11:01 am
by kikito
evgiz wrote:If its okay for you I'll continue using your code to support voxel models as well.
Permission granted! Consider the code released under the MIT license.

I am glad I could help!

Re: Sprit3r - 3D model viewer for spritesheets

Posted: Thu Nov 03, 2016 2:06 pm
by evgiz
I've come across a minor issue that I'm pretty sure isn't on my end :P
Take a look at this, left is Sprit3r and right is MagickaVoxel:

Image

It seems like the .vox parser ignores the last line of each layer somehow (or something like that). The results were a bit different on other models, so I couldn't figure out exactly whats wrong. I'll try taking another dive in your code but you'll probably find the error much faster than I can.

EDIT: After experimenting a bit more it seems like the last voxel placed is not included, very strange...

Re: Sprit3r - 3D model viewer for spritesheets

Posted: Thu Nov 03, 2016 2:31 pm
by kikito
It's probably that my parser has a bug. I'll give it a look, thanks!