5
\$\begingroup\$

Is there a convenient way to have a 2D pixel art image with clip transparency (not partial transparency) rendered with thickness in Unreal Engine? Paper2D does exactly what I want, except it's a flat plane.

I'm able to achieve the effect by making an SVG outline and using Blender to make a model and map UVs, then import that into Unreal, but it seems like a lot of steps for a somewhat simple model. I am new to both of these tools and models in general, so I may be missing something obvious.

extruded sprite

\$\endgroup\$
0

1 Answer 1

1
\$\begingroup\$

I would build the mesh at load time, i.e. during your initial startup/preload sequence. Pseudocode:

//create / triangulate front and back planes
for each texel in texture
    if texel is not transparent
        for each corner in 4 corners of texel
            //front
            create 4 vertices for front texel (at z=0)
            push these 4 vertices into mesh vertices list
            triangulate them - 2 triangles form a square texel
            push these 2 triangles into mesh triangle-indices list
            //rear
            create 4 vertices for rear  texel (at z=1)
            push these 4 vertices into mesh vertices list
            triangulate them - 2 triangles form a square texel
            push these 2 triangles into mesh triangle-indices list

//triangulate mesh sides
for each pair of adjacent corners/vertices on front face
    find matching pair of corners/vertices on back  face
        triangulate between these 4 points with 2 triangles

...a naïve approach that leaves out a lot of detail as I don't want to have to write this up myself, but should get you going. Not sure about mesh generation in Unreal but here is the docs link for Unity.

A slightly more efficient approach avoids duplicating the same corner vertices between texels, which is wasteful. This is achieved by first running through all non-transparent texels and adding their corners to a set or dictionary so there are no duplicates. Then add to these to the mesh vertices list, then triangulate between these.

A much more efficient approach involves creating only the outermost / silhouette vertices, and triangulating row-by-row between its left- and rightmost vertices. If your image has holes, you'll do this multiple times per row. This leads to a smaller vertex buffer being pushed up to the GPU.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .