🦀

RustとWebAssemblyによるゲーム開発読み始め vol.1

2023/07/02に公開

Rust

Game

WebAssembly

tech

Game Development with Rust and WebAssembly

RustとWebAssemblyによるゲーム開発 ―安全・高速・プラットフォーム非依存のWebアプリ開発入門として日本語訳版がもうすぐ出る（7/19発売予定）ようだったけど、待てなかったし、基本的には文章を味わう系の内容ではなさそうだから原著でも良いだろうということで進めてみている。

まずは1-2章を終えたのでメモとして残す。

1章の最初のお試しで早速引っかかった。これが動かない。

npm run start

node:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/tkhm/git/walk-the-dog/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/tkhm/git/walk-the-dog/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/tkhm/git/walk-the-dog/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/tkhm/git/walk-the-dog/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/tkhm/git/walk-the-dog/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/tkhm/git/walk-the-dog/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/tkhm/git/walk-the-dog/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/Users/tkhm/git/walk-the-dog/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/tkhm/git/walk-the-dog/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/tkhm/git/walk-the-dog/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/tkhm/git/walk-the-dog/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

どうやら既知の問題。

ref webpack/webpack#14532 (comment)

node.js - Error message "error:0308010C:digital envelope routines::unsupported" - Stack Overflow

ということで次のようにすると回避できる。

export NODE_OPTIONS=--openssl-legacy-provider

ただ、cargo auditでもいくつも文句を言われているのでDependenciesを見直してアップグレードすることが必要そう。

次のところでも報告はした。

それから、依存性に関してはこれで直していった。
npm auditで指摘されている、依存ライブラリの依存ライブラリの依存.....のバージョンがまずいと言われていて、しかしながら依存ライブラリ自体を直接あげるのは少し厳しい状況（そこまで追いきれない）というところだったので、次の記事を参考にした。(npm audit fixで直せるものはそのままコマンドを打った)

npm audit fix --force しても直らない！〜TypeScriptとReact/Next.js本5章で発生した問題を解決する

npm audit
:
:
node-forge  <=1.2.1
Severity: high

のように指摘された対象を次のコマンドで確認。

npm ls node-forge

rust-webpack-template@0.1.0 /Users/tkhm/git/walk-the-dog
└─┬ webpack-dev-server@3.11.3
  └─┬ selfsigned@1.10.14
    └── node-forge@0.10.0

確認した対象をpackage-lock.jsonから探して修正。
その後、npm installで修正したバージョンをインストールし、npm run startなどでビルドが壊れていない・機能として問題なく動くことを改めて確認して、よければ次へ。

同じ流れで次の3つをそれぞれ対応した。

node-forge
glob-parent
semver

2章は順を追っていくのが結構辛かった。

最終的にこんなのが動くようになった。（1枚の画像に入っている複数のポーズが切り取られて一定のインターバルごとに切り替わることでアニメーションとして見えている）
が、ここに至るまでに、2章の最終状態の全量のコードが記載されていないので、このコードをあのコードのすぐ後に追加する、このコードを消す、といったことを適切に追いきれていないと、突然なにも表示されなかったりして辛い。
あと、初めは画像ファイルがどこにあるか分からず、その上、最終的にアニメーションとして表示されるまでの、Idle (1).pngのような画像はないけどどういうことだろう、と半ば混乱しながら進めたので時間もかかって諦めかけた......。

と書いていて、3章の初めに入ったところで書かれているURLの記載で初めて気づいた。
リポジトリのタグで、章ごとの管理がされていた......もう少し早く気づけていればよかったものだった......。

それから、動画も公開されていた。（View数はかなり少ないので気付いていない人も多いのかな）

3章からはインタラクティブな操作などが入ってきそう。
現状のRustのコードは警告も多く、その上、現在ブラウザに表示できているものは単に画像なので、JavaScriptで書くよりも嬉しい点もほとんど感じられないけれど、3章からはもう少し面白くなるかもしれない。

この本に取り組んでいる序盤に詰まって、同様の内容を探しているときに、次の内容に遭遇した。

イントロダクション - Rust and WebAssembly

こちらもざっと見ると結構面白そうで、趣旨としても似たようなところと見てとれる。
最初のコード生成の方法がこちらではrust-webpack templateを使うところに対して、少しだけ違う（rust-webpack templateを使用しないでcargo generateを使い自分の好みのテンプレートをベースに作る）ようだけれど、その後は同様の内容が生かせそうなので、この書籍の内容が終わったらそちらも見たい。

Discussion