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\$
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\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.