💗
【Rust Advent Calendar 2022】Rust でライフゲームをつくってみた【20日目】
Rust Advent Calendar 2022 カレンダー 2 の 20 日目の記事です。
Rust でなにか動くものを作ってみたいと思っていたので Rust で ライフゲームを作ってみた内容を記載します。
そもそもライフゲームってなんやねん、という方は下記 Wiki をご参照ください。
小一時間でゲームをつくる の C++ のコードを Rust 化してみた
- 小一時間でゲームをつくるの書籍
- 著者が公開しているサンプルコード (C++)
- 自分がRust 化したもの
- CLI で cargo run を叩けばこんな感じでライフゲームが実行される
- サンプルコードを Rust に置き換えていて、C++の配列を Rust のベクタに変換するところに手こずったのでメモ
指定したサイズの配列を用意する
- C++ は変数に[指定したサイズ][指定したサイズ] でよい
#define FIELD_WIDTH (160)
#define FIELD_HEIGHT (160)
bool field[FIELD_HEIGHT][FIELD_WIDTH] = {};
- Rust では、vec!の中身を Default::default(); 指定したサイズ にすればよさそう
const FIELD_WIDTH: usize = 100;
const FIELD_HEIGHT: usize = 50;
let mut field: Vec<Vec<bool>> = vec![vec![Default::default(); FIELD_WIDTH]; FIELD_HEIGHT];
- C++ の書きやすさを痛感...
- いちいち cargo run で実行するのも面倒なので、Web アプリ化したいと思って色々調べたところ、次に触れる WebAssembly に行きついた
Rust + WebAssembly のチュートリアルをやってみた
- アプリはこちら
- こちらのRust + WebAssembly のチュートリアルをそのまま実装した。
- こちらの記事を元に Firebase にデプロイした
- フレームレートの表示や処理の停止・再実行ボタンもある
-
環境
- Rust 1.65.0
- wasm-pack 0.10.3
- cargo-generate 0.17.3
- node 16.15.1
- npm 8.11.0
- nvm 0.39.2
- firebase-tools 11.17.0
-
全てのファイルをアップロードできなかったので、変更した部分のみ GitHubにあげておく。
つまづいたポイント
- 4.5 Testing Life のテスト については、ブラウザは Chrome を使っているので下記で行った
wasm-pack test --chrome --headless
-
4.7 Adding Interactivity の 処理の再生・一時停止ボタンの実装 では、チュートリアルの実装そのままだと初期表示ではボタンが表示されなかったため、下記のようにした。
- 写経そのままだと停止ボタンが初期表示されなかったので index.js の
const playPauseButton = document.getElementById("play-pause");
の下に
playPauseButton.textContent = "⏸";
を追加した。
-
4.8 Time Profiling にて CSS を追加するとよい旨触れられているが、どのように CSS を組み込むか書いてなかったので下記のように対応した。
- index.html と同じフォルダに index.css を追加し、こちらの実装を記載。
- index.html の <header> に、下記を追加
<link rel="stylesheet" type="text/css" href="index.css">
- デプロイ時は、dist フォルダに index.css をコピーする
以上になります、最後までお読みいただきありがとうございました。
Discussion