rendering roguelike in egui ?

[m172021]

What is the best way to render a 200x80 grid of colored characters that is being updated at 5 ticks / second ?

Context: building a rogue-like in Egui. Instead of rendering per keystroke, game ticks at 5 hz.

World is about 200x80. Each cell has an asii character and its own color.

Thanks!

[YgorSouza]

I think a LayoutJob would do the trick. Here is an example:

#[derive(Clone, Copy)]
struct Pixel {
    value: char,
    color: egui::Color32,
}

struct MyApp {
    pixels: Vec<Pixel>,
    last_frame: f64,
    speed: usize,
}

impl Default for Pixel {
    fn default() -> Self {
        Self {
            value: '0',
            color: egui::Color32::RED,
        }
    }
}

impl Default for MyApp {
    fn default() -> Self {
        let pixels = (0..(200 * 80))
            .map(|i| {
                let color = egui::Color32::from_rgb(
                    (i % 201) as u8,
                    ((i + 100) % 201) as u8,
                    ((i + 150) % 201) as u8,
                );
                let value = (0x40 + i % 26) as u8 as char;
                Pixel { value, color }
            })
            .collect();
        Self {
            pixels,
            last_frame: 0.0,
            speed: 1,
        }
    }
}

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.add(egui::DragValue::new(&mut self.speed).clamp_range(0..=100));
            let mut tick = false;
            let time = ui.input(|i| i.time);
            if time - self.last_frame > 0.2 {
                tick = true;
                self.last_frame += 0.2;
            }
            ui.spacing_mut().item_spacing = [0.0; 2].into();
            for row in self.pixels.chunks_mut(200) {
                if tick {
                    row.rotate_left(self.speed);
                }
                let mut job = egui::text::LayoutJob::default();
                let mut bytes = [0u8; 4];
                for pixel in row {
                    let text = pixel.value.encode_utf8(&mut bytes);
                    let format = egui::text::TextFormat {
                        font_id: egui::FontId::new(6.0, egui::FontFamily::Monospace),
                        color: pixel.color,
                        ..Default::default()
                    };
                    job.append(text, 0.0, format);
                }
                let label = egui::Label::new(job).wrap(false);
                ui.add(label);
            }
            ui.ctx()
                .request_repaint_after(core::time::Duration::from_millis(200));
        });
    }
}

You can do all rows in a single job as well, if you add line breaks.

I don't know if you can prevent egui from re-rendering on every user input. If you use eframe you can't (unless you put a std::thread::sleep() in the update code to force it to slow down). But you can check the time since the last frame to decide when to update your canvas.