2d usage documentation

[ChristopherBiscardi]

Blender is a "3d" program but there are plenty of ways to use it to build 2d games.

A cool example might be implementing parallax in the style of HollowKnight/Silksong.

The most straightforward way to achieve this is to replace the Mesh3d components directly with their Mesh2d counterparts. (code sample at the bottom).

For example, if you spawn a Plane in Blender, that's basically a Mesh2d Rectangle.

You can take advantage of Blender's material support to add images.

And view them directly in your viewport as you work.

When exporting, this mesh, material, and image data is included in the glTF file.

{
	"asset":{
		"generator":"Khronos glTF Blender I/O v5.0.21",
		"version":"2.0"
	},
	"scene":0,
	"scenes":[
		{
			"name":"Scene",
			"nodes":[
				0
			]
		}
	],
	"nodes":[
		{
			"mesh":0,
			"name":"Plane"
		}
	],
	"materials":[
		{
			"doubleSided":true,
			"name":"Material.001",
			"pbrMetallicRoughness":{
				"baseColorTexture":{
					"index":0
				},
				"metallicFactor":0,
				"roughnessFactor":0.5
			}
		}
	],
	"meshes":[
		{
			"name":"Plane",
			"primitives":[
				{
					"attributes":{
						"POSITION":0,
						"NORMAL":1,
						"TEXCOORD_0":2
					},
					"indices":3,
					"material":0
				}
			]
		}
	],
	"textures":[
		{
			"sampler":0,
			"source":0
		}
	],
	"images":[
		{
			"mimeType":"image/png",
			"name":"gojo-punch",
			"uri":"gojo-punch.png"
		}
	],
	"accessors":[
		{
			"bufferView":0,
			"componentType":5126,
			"count":4,
			"max":[
				1,
				0,
				1
			],
			"min":[
				-1,
				0,
				-1
			],
			"type":"VEC3"
		},
		{
			"bufferView":1,
			"componentType":5126,
			"count":4,
			"type":"VEC3"
		},
		{
			"bufferView":2,
			"componentType":5126,
			"count":4,
			"type":"VEC2"
		},
		{
			"bufferView":3,
			"componentType":5123,
			"count":6,
			"type":"SCALAR"
		}
	],
	"bufferViews":[
		{
			"buffer":0,
			"byteLength":48,
			"byteOffset":0,
			"target":34962
		},
		{
			"buffer":0,
			"byteLength":48,
			"byteOffset":48,
			"target":34962
		},
		{
			"buffer":0,
			"byteLength":32,
			"byteOffset":96,
			"target":34962
		},
		{
			"buffer":0,
			"byteLength":12,
			"byteOffset":128,
			"target":34963
		}
	],
	"samplers":[
		{
			"magFilter":9729,
			"minFilter":9987
		}
	],
	"buffers":[
		{
			"byteLength":140,
			"uri":"Untitled.bin"
		}
	]
}

So all you need to do to work with Mesh2d instead of Mesh3d is some prior thought about which axis you're using in Blender, and this piece of code:

fn replace_3d_mats_with_2d(
    _: On<SceneInstanceReady>,
    children: Query<&Children>,
    query: Query<(
        Entity,
        &Mesh3d,
        &MeshMaterial3d<StandardMaterial>,
    )>,
    mut materials: ResMut<Assets<ColorMaterial>>,
    mut commands: Commands,
    materials_std: Res<Assets<StandardMaterial>>,
) {
    for (entity, mesh, material) in &query {
        commands
            .entity(entity)
            .remove::<Mesh3d>()
            .remove::<MeshMaterial3d<StandardMaterial>>()
            .insert(Mesh2d(mesh.0.clone()))
            .insert(MeshMaterial2d(
                materials.add(
                    materials_std
                        .get(&material.0)
                        .unwrap()
                        .base_color,
                ),
            ));
    }
}

---

There is more that you can do. And editing UVs, Mesh data, custom materials are all interesting. You can also take total control and manipulate the Mesh data yourself when loading or do other funky things.

There are also other interesting applications, such as exporting Grease Pencil as Svg for use in Bevy: https://docs.blender.org/manual/en/latest/files/import_export/grease_pencil_svg.html

and of course, you don't actually have to do the 3d-to-2d conversion, which allows mixing 2d and 3d elements as well as things line bone-based animation for "2d" elements.

[ChristopherBiscardi]

I added an example upstream of replacing Mesh3d with Mesh2d in a gltf extension handler. We could build this in to skein as an option or we could build a second gltf extension handler (or both really, an option powered by a second handler)

https://github.com/bevyengine/bevy/blob/bb23d0d76ac2843cad59c205606c71286d6eab19/examples/gltf/gltf_extension_mesh_2d.rs