Spritestack – 3D pixelart editor based on sprite stacking technique

by keyle • 7 years ago

216 36 7 years ago

degenerate• 7 years ago

Hopping into the editor and throwing down a couple pixels makes sense, but once I get to the "extrude" part to make it 3D, I don't understand the controls. It's not intuitive at first play.

I would suggest having the demo editor load a familiar shape, perhaps a house or a boat, to allow me to modify the object which is already in 3D space. That might help me understand the controls better (unsure).

rezoner6• 7 years ago

Hello there. Thank you for sharing the first experience. I will put example models in welcome screen. There are also a few very short tutorial videos on the help screen. https://spritestack.io/editor/help/#the-basics

lsalvatore• 7 years ago

This is really cool. How can I rotate the figure in order to draw on the back?

mistersys2• 7 years ago

There's some hot keys but you need a middle mouse button: https://spritestack.io/editor/help/#hotkeys

feiss3• 7 years ago

shift+a, shift+d

wokwokwok• 7 years ago

How is this different from any other voxel editor?

It appears to just be a stack of 1 pixel high sprites you draw one at a time, like a 3D printer might extrude.

...I mean, fair enough, but don’t invent a whole new word for a concept that already exists unless it’s actually different?

keyle• 7 years ago

In a voxel editor you edit a 3D world using the smallest unit as cubes/spheres/etc. in 3D space. This is a 2D pixel editor with "stacks" of sprites.

snoopen• 7 years ago

Isn't the stack then just the third dimension of the original two dimensions?

cr0sh• 7 years ago

But technically this is a "voxel editor" - because originally "back in the day" - voxel engines (those few that existed) rendered everything with pixels.

With a bit of googling, you can find some of these engines - here's a start - Ken Silverman's VoxLap (if you don't know who he is - then I haz a sad):

http://advsys.net/ken/voxlap.htm

Note that these are not "small 3D cubes" - they are literally just pixels. It was a technique that was explored in the 1990s during the whole DOOM era, but machines weren't able to render fast enough, and 3D cards just kept getting better - and here we are today.

Again - you can find more than a few of these examples from the time, but the tech of the day just wasn't fast enough.

Editors for voxel objects didn't exist - but they didn't really need to, because regular 3D editors could create the objects.

Which makes me wonder how well those old engines would work today, if this "sprite stacking" thing works well. As I recall back then, the demos I recall seeing weren't terrible, they just weren't up to the performance levels needed for a game engine...

EDIT: Some more detail and history:

https://killscreen.com/articles/meet-the-voxel-pixel-cousin-...

meheleventyone• 7 years ago

It’s different in that you can render voxel objects in a 2D renderer in a limited fashion. Whether that’s useful depends a lot on your context and aesthetic goals. Sprite stacking isn’t a new term for it either. But I agree a sprite stack could just be an export option in a regular voxel editor.

aliswe2• 7 years ago

To me, sprite stacking isn't a new word... just google sprite stacking 3d and you'll find lots of old racing games, for example.

aasasd• 7 years ago

you'll find lots of old racing games

You raised my hopes, but of course we have different googles now.

rezoner6• 7 years ago

It is a voxel editor. Except the voxel is represented by one pixel while in software like Magica the voxel is a 3d cube. The display is achieved by sprite stacking which means layering flat images on top of each other to give a 3d illusion. It's less capable than any other 3d method but it can be used in a 2d engine with zero 3d knowledge.

Raudius• 7 years ago

It isn't. I wrote a "sprite stack" exporter for VoxelShop (an open source voxel editor) a while back.

https://github.com/simlu/voxelshop

ilaksh• 7 years ago

Is there going to be an editor for composing these into a larger map?

rezoner6• 7 years ago

Yes although for now my priority is to find a proper way to implement animations.

mistersys2• 7 years ago

This is cool... accessibility is rather limited though. Appears the only way to freely rotate is with a middle mouse button my laptop doesn't have.

aliswe2• 7 years ago

Look out, you may get replies similar to what I got (another app) when I asked what mobile users are going to do ... "They can play something else", "what about apple watch users", "internet connected toaster" ...

Ah, HN. Why ye do not let me delete my account.

Kiro• 7 years ago

This is made by Przemysław Sikorski (Rezoner), pretty famous IO indie game developer (wilds.io, wanderers.io etc) with a unique art style that's reflected in this tool.

kawsper• 7 years ago

I am missing what formats it supports for exporting.

feiss3• 7 years ago

It exports turntable animation gifs and spritesheets in png

rezoner6• 7 years ago

on top of what u/feiss said I am also working on a 3d export so you can dabble with it in other software

crazygringo• 7 years ago

For anyone trying to understand this better, jump to the Help introduction:

https://spritestack.io/editor/help/#introduction

It helps at least a little.

But unfortunately this is yet another site where the home page doesn't seem to give much context if you're not already part of whatever community it is. (What's sprite stacking? How is it different for a voxel editor? What need does this site meet that hasn't been met by other things?)

rezoner6• 7 years ago

Thanks! This is exactly a feedback you will not hear from your niche that's already familiar with the subject. I will improve the landing page.

joepie91_3• 7 years ago

Any plans to open-source this? The open-source game development community desperately needs better tools :)

viridiansoft• 7 years ago

This is cool. Would love to see it as a downloadable standalone app!

rezoner6• 7 years ago

I am working on that.

VictorSCushman• 7 years ago

I learned about this technique from 2kliksphilip [1] early last year. I've always wanted to use this technique in a game, so I'm excited that there is a tool for it!

[1] https://www.youtube.com/watch?v=kjFlIxGzABY

VikingCoder• 7 years ago

Note, stacking pixels is exactly how most volume rendering works.

Source: was an expert in rendering CT and MR data.

chinchang• 7 years ago

Neat tool! Remembered the good old days where I used to make fake 3D in Adobe Flash using this very technique :)

throwaway2016a• 7 years ago

Very nice work. I really like it.

The scroll controls are very difficult to use on OSX with a track pad. It scrolls 3 or 4 levels at once. And I wish it had undo.

Spritestack – 3D pixelart editor based on sprite stacking technique

Related Stories