Zenn
Closed8

「RustとWebAssemblyによるゲーム開発」をやってみる

Rust
WebAssembly
ふみふみふみふみ

理想

npm run startを実行したら、localhost:8080 が立ち上がる状態にしたい。

事象

p7でnpm install したあと npm run startを実行した後エラーが発生した。

実行結果

npm error Missing script: "start"
npm error
npm error Did you mean one of these?
npm error   npm star # Mark your favorite packages
npm error   npm stars # View packages marked as favorites
npm error
npm error To see a list of scripts, run:
npm error   npm run
npm error A complete log of this run can be found in: /Users/username/.npm/_logs/2024-08-04T11_37_12_860Z-debug-0.log

エラーの意味

  • スクリプト "start" が不足している

結論

原因：package.jsonのscriptsにstartを登録していなかった&そのための依存関係もなかったから

公式GitHubの package.jsonに、startのスクリプトが載っていたので、そちらを全て写経することで解決 🎉
https://github.com/PacktPublishing/Game-Development-with-Rust-and-WebAssembly/blob/e7122da5435ade4e8a880c6137136a5651d93be8/package.json#L1-L21

初めはstartのみ写経しましたが、依存関係が他にもインストールされている状態でないと実行できませんでした。

解決するまで

現状

npm run startに何を登録すればいいんだ〜〜〜〜

写経した結果

{
  "dependencies": {
    "rust-webpack": "^0.1.0"
  },
  "scripts": {
    "start": "rimraf dist pkg && webpack-dev-server --open -d --host 0.0.0.0"
  }
}

$npm run start

実行結果

> start
> rimraf dist pkg && webpack-dev-server --open -d --host 0.0.0.0

sh: rimraf: command not found

rimafが必要だった！！package.jsonを見ると、他にも色々必要そう。

package.jsonに記載されている内容も全て写経し npm installを実行。

再度 npm run startをしてみる。

中身何もないけど、サーバーは立ち上がった！！！

参考文献

PacktPublishing/Game-Development-with-Rust-and-WebAssembly: Game Development with Rust and WebAssembly, Published by Packt

scripts | npm Docs
npm-start | npm Docs
Is there a difference between npm start and npm run start? - Stack Overflow

ふみふみふみふみ

2024/08/04 追記：

↑ npm run startできないのは、そもそもrust-webpackテンプレートを利用していないからだった。（自分の確認もれ）

しかしホストマシンだと、npm init rust-webpackでテンプレートをコピーできなかったので、下記のようにした。

  1. DockerでRustのコンテナを作成する。docker-compsoe.ymlで、プロジェクトのディレクトリをボリュームに置く。
  2. コンテナを立ち上げて、コンテナ内でnpm, nodeをインストールする。
  3. その状態で、npm init rust-webpackを行う。
  4. npm installを行う。
  5. 依存関係が全てインストールできたら、コンテナを抜ける。（コンテナもイメージも削除してOK）
  6. ホストのターミナル上でnpm runs startして、localhost:8080 にアクセスする。
  7. 白紙だが、一応ページが表示される。

先行きが不安ですが、とりあえず先に進みましょう 😇

参考文献

Windows、macOS、LinuxにNode.jsとnpmをインストールする方法
wasm-pack
Command Line Interface - The wasm-bindgen Guide
web-sys - crates.io: Rust Package Registry
Ubuntu や Debian に最新の Node.js をインストールする | Khsmties

ふみふみふみふみ

p14~p15

三角形が出た！！！！

use anyhow::Ok;
use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;
use web_sys::console;

// This is like the `main` function, except for JavaScript.
#[wasm_bindgen(start)]
pub fn main_js() -> Result<(), JsValue> {
    console_error_panic_hook::set_once();

    let window = web_sys::window().unwrap();
    let document = window.document().unwrap();
    let canvas = document
        .get_element_by_id("canvas")
        .unwrap()
        .dyn_into::<web_sys::HtmlCanvasElement>()
        .unwrap();

    let context = canvas
        .get_context("2d")
        .unwrap()
        .unwrap()
        .dyn_into::<web_sys::CanvasRenderingContext2d>()
        .unwrap();

    context.move_to(300.0, 0.0); //上の頂点
    context.begin_path();
    context.line_to(0.0, 600.0); //左下の頂点
    context.line_to(600.0, 600.0); //右下の頂点
    context.line_to(300.0, 0.0); //上の頂点
    context.close_path();
    context.stroke();
    context.fill();
    Ok(());

    // Your code goes here!
    console::log_1(&JsValue::from_str("Hello world!"));
}
ふみふみふみふみ

ちょっとやっぱり内容が難しくなってきたので（Rustの構文に不慣れ）、、TheBookやったら戻ってきます

このスクラップは3ヶ月前にクローズされました