Bevy tilemap via MaterialMesh2dBundle(uv bleeding?)

[Sierra021]

I have some code that should draw a tilemap. It does, but there is a gap between the tiles (when the camera zooms in). At first I thought of a problem like texture bleeding and tried to fix it by adding a value for uv. However, that didn't help.

What could be the problem?

use bevy::{prelude::*, sprite::MaterialMesh2dBundle};
use rand::Rng;

fn main() {
    App::new()
    .add_plugins(DefaultPlugins.set(WindowPlugin {
        primary_window: Some(Window {
            title: "Tilemap".into(),
            ..default()
        }),
        ..default()
    }))
    .add_startup_system(setup)
    .add_system(move_camera)
    .run();
}

fn setup(mut commands: Commands, mut meshes: ResMut<Assets<Mesh>>, mut materials: ResMut<Assets<ColorMaterial>>, asset_server: Res<AssetServer>, mut textures: ResMut<Assets<Image>>) {
    commands.spawn(Camera2dBundle::default());

    let mut my_mesh: Mesh = Mesh::new(bevy::render::render_resource::PrimitiveTopology::TriangleList);
    let mut vertices: Vec<[f32; 3]> = vec![];
    let mut indices: Vec<u32> = vec![];
    let mut uv: Vec<[f32; 2]> = vec![];

    gen_map(&mut vertices, &mut indices, &mut uv);
    
    my_mesh.insert_attribute(Mesh::ATTRIBUTE_POSITION, vertices);
    //my_mesh.insert_attribute(Mesh::ATTRIBUTE_COLOR, colors);
    my_mesh.insert_attribute(Mesh::ATTRIBUTE_UV_0, uv);
    my_mesh.set_indices(Some(bevy::render::mesh::Indices::U32(indices)));
    
    let texture_handle = asset_server.load("tilemap.png");

    commands.spawn(MaterialMesh2dBundle {
        mesh: meshes.add(my_mesh).into(),
        transform: Transform::default().with_scale(Vec3::splat(128.0)),
        material: materials.add(ColorMaterial { texture: Some(texture_handle), ..default() }),
        ..default()
    });
}

fn move_camera(keyboard_input: Res<Input<KeyCode>>, mut query: Query<&mut OrthographicProjection>, mut camera: Query<&mut Transform, With<Camera>>) {
    let mut projection = query.single_mut();
    let mut camera = camera.single_mut();
    
    if keyboard_input.pressed(KeyCode::A) { camera.translation.x -= 100.0 }
    if keyboard_input.pressed(KeyCode::D) { camera.translation.x += 100.0 }
    if keyboard_input.pressed(KeyCode::W) { camera.translation.y += 100.0 }
    if keyboard_input.pressed(KeyCode::S) { camera.translation.y -= 100.0 }

    if keyboard_input.pressed(KeyCode::Q) {
            projection.scale *= 1.15;
    }
    if keyboard_input.pressed(KeyCode::E) {
            projection.scale *= 0.85;
    }
}

struct Map {
    heights: Vec<Vec<i32>>
}

fn gen_map(vertices: &mut Vec<[f32; 3]>, indices: &mut Vec<u32>, uv: &mut Vec<[f32; 2]>) {
    let size_x = 2048;
    let size_y = 2048;

    let mut map: Map = Map {
        heights: vec![vec![0; size_x]; size_y],
    };

    for i in 0..size_x {
        for j in 0..size_y {
            map.heights[i][j] = rand::thread_rng().gen_range(0..100);
        }
    }
    for _ in 0..2 {
        for i in 0..size_x {
            for j in 0..size_y {
                let mut amh: usize = 0;
                let mut div: usize = 0;
                for x in (i as i32 - 1)..(i as i32 + 2) {
                    for y in (j as i32 - 1)..(j as i32 + 2) {
                        if x >= 0 && y >= 0 && x < size_x as i32 && y < size_y as i32 {
                            if map.heights[x as usize][y as usize] >= 0 {
                                amh += map.heights[x as usize][y as usize] as usize;
                            }
                            div += 1;
                        }
                    }
                }
                map.heights[i][j] = (amh / div) as i32;
            }
        }
    }

    for _ in 0..1 {
        for i in 0..size_x {
            for j in 0..size_y {
                let mut amh: usize = 0;
                let mut div: usize = 0;
                for x in (i as i32 - 2)..(i as i32 + 3) {
                    for y in (j as i32 - 2)..(j as i32 + 3) {
                        if x >= 0 && y >= 0 && x < size_x as i32 && y < size_y as i32 {
                            amh += map.heights[x as usize][y as usize] as usize;
                            div += 1;
                        }
                    }
                }
        
                map.heights[i][j] = (amh / div) as i32;
            }
        }
    }


    for i in 0..size_x {
        for j in 0..size_y {
            //Down-left triangle
            vertices.push([i as f32, 1.0 + j as f32, 0.0]);
            vertices.push([i as f32, j as f32, 0.0]);
            vertices.push([1.0 + i as f32, j as f32, 0.0]);

            //Up-right triangle
            vertices.push([1.0 + i as f32, 1.0 + j as f32, 0.0]);
            vertices.push([1.0 + i as f32, j as f32, 0.0]);
            vertices.push([i as f32, 1.0 + j as f32, 0.0]);

            //Atlas
            let cols = 4;
            let rows = 1;

            //Tile
            let col;
            let row;

            if map.heights[i][j] < 49 {
                col = 0.0;
                row = 0.0;
            }
            else if map.heights[i][j] < 50 {
                col = 1.0;
                row = 0.0;
            }       
            else if map.heights[i][j] < 52 {
                col = 2.0;
                row = 0.0;
            }
            else {
                col = 3.0;
                row = 0.0;
            }


            let left = col / (cols as f32) + 1.0/256.0;
            let right = (col + 1.0) / (cols as f32) - 1.0/256.0;
            let up = row / (rows as f32) + 1.0/256.0;
            let down = (row + 1.0) / (rows as f32) - 1.0/256.0;

            uv.push([left, up]);
            uv.push([left, down]);
            uv.push([right, down]);
            
            uv.push([right, up]);
            uv.push([right, down]);
            uv.push([left, up]);
            
            let current = indices.len();
            indices.push(current as u32);
            indices.push((current + 2) as u32);
            indices.push((current + 1) as u32);
            indices.push((current) as u32);
            indices.push((current + 3) as u32);
            indices.push((current + 2) as u32);
        }
    }
}

[sigmasoldi3r]

If your atlas is coming pre-baked from a third party software, try "extruding" the tiles, this is basically adding some pixels of padding around each tile, of the same colour as the adjacent tile.

Example:

Depending on your needs, this may only need to be of 1 pixel wide. Unfortunately, seems that the native atlas builder of bevy does not support (Yet??) that feature. But as I said, if you're using a third party tool, it may have that option.

As a side note, if you want to post code, try annotating the language of the code (in this case rust), as it makes it easier to read.

<!-- Eg: -->
```rs
// Like this
let code = "blarg";
```