RustとWebAssemblyによるゲーム開発 ―安全・高速・プラットフォーム非依存のWebアプリ開発入門

8章UIの追加

これまでに、ビデオゲームに必要なものをすべて開発したように見えるかもしれない。ある意味ではその通りなのだが、小さなRed Hat Boy（RHB）が岩にぶつかるたびにページをリロードしなければならない煩雑さが気になる。本物のゲームには「New Game」や「High Score」というようなボタンがある。本章ではこのようなUIを追加していく。簡単そうに見えるかもしれないが、Web開発でよく使われるイベント駆動のUIはゲームループとは相性が悪い。簡単なボタンを追加するためには、アプリケーションにかなりの量の変更を加え、さらにはHTMLを少し書かなければならない。

本章では以下のことを行う。

• 「New Game」ボタンのデザイン
• ゲームオーバー時のボタンの表示
• 新たなゲームの開始

本章を読み終えれば、多機能なUIを組み込無事のできるフレームワークと、それを実現する技術を手にしていることだろう。

8.1　技術上の準備

本章では少しだけ新たなアセットを用いる。https://github.com/PacktPublishing/Game-Development-with-Rust-and-WebAssembly/wiki/Assetsからダウンロードしたアセットの、uiディレクトリに格納されている。フォントは、https://www.kenney.nlのKenny Future Narrowを用いる。ボタンは、https://www.gameart2d.com/のものを用いる。これらはいずれもCC0でライセンスされている。本章終了時点のコードは、https://github.com/PacktPublishing/Game-Development-with-Rust-and-WebAssembly/tree/chapter_8 ...