eguiを使ってみよう2024

仕様がころころかわるのでネット上に使える資料が少なく感じてしまうegui、しかし仕様が変わるなら追いかけ続ければよいのです。

tauriがいろいろ手厚くてしかも便利なのだけどコンパイルにかかる時間があれだったりちょっとしたものを作りたい場合にちょっと大げさだったり。

それにくらべると手軽でコンパイル時間も短いeguiはそれだけで価値があると思います。

では早速いってみましょう。

今回の対象バージョン

egui : 0.25.0
egui_extras : 0.25.0
eframe : 0.25.0

Hello, world!

手順

まずはプロジェクトを作成して crate など導入します。

cargo new myapp
cd myapp
cargo add egui
cargo add eframe
cargo add egui_extras --features="all_loaders"

ついでに src/ に rust_logo.png と、Rustのロゴの例のあれを用意しました。

src/main.rsを以下のように編集します。

ソースコード

#![cfg_attr(
    all(not(debug_asertions), target_os="windows"),
    windows_subsystem="windows"
)]

use eframe::{egui::*, NativeOptions};

#[derive(Default, Clone)]
pub struct MyApp {
}

const RUST_LOGO: egui::ImageSource = egui::include_image!("rust-logo.png");

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &Context, _frame: &mut eframe::Frame) {
        ctx.set_pixels_per_point(1.0);

        egui::CentralPanel::default().show(&ctx, |ui| {
            ui.label("Hello, world!");
            egui::Image::new(RUST_LOGO).paint_at(ui, Rect::from_min_max( pos2(100.0, 100.0), pos2(300.0, 300.0)));
        });
    }
}

fn main() {
    let options = NativeOptions {
        viewport: egui::ViewportBuilder::default()
            .with_inner_size([320.0, 240.0])
            .with_min_inner_size([320.0, 240.0]),
        ..Default::default()
    };

    let _ = eframe::run_native(
        "myapp",
        options,
        Box::new(|cc| {
            egui_extras::install_image_loaders(&cc.egui_ctx);
            Box::<MyApp>::default()
        }),
    );
}

ではこのまま実行してみます。

cargo run

このように実行されました。
画像がつくとグッとカッコよさげになりますね？

軽い解説

このあたり変わったよーというポイントとしては let options = NativeOptions { viewport:... の辺り、viewportとかViewportBuilderとか、公式のドキュメントとかexampleとか見ればわかるんですがちょっとハマったので一応書いておきます。

ほかはegui::include_image!("rust-logo.png");の辺りでしょうか、cargo add egui_extras --features="all_loaders"で追加したcrateによるものです、これがいいなと思うところは実行バイナリに画像が内包されるので同梱しなくてよい、覗かれないあたりです。

コンパイル時にsrc/からの相対パスで参照されるようなのでいい感じに画像を置いてコンパイルします。

それともう一つ。egui::Image::new(RUST_LOGO).paint_at...のpaint_atで要するに好きなところに配置できるのでゲームを作ったりするのに使えるんじゃないでしょうかー。というあたりです。

普通にレイアウトで画像を利用するにはui.add(egui::Image::new(RUST_LOGO));のようにすればよいです。

次回

未定ですがeguiはちょっと素敵だなと思ってるので食いついていきたいなと思ってます。
ちょっとわかりづらい部分に突っ込めたらいいですね。