Rust + Entity Component System で仕様変更に強いゲーム設計 その２ 〜 キャラの移動

目次

その１ 〜 序文
【イマココ】その２ 〜 キャラの移動
その３−１ 〜 コンポーネントの設計
その３−２ 〜 システムの設計
その３−３ 〜 メイン部分
その４−１ 〜 剣を表示
その４−２ 〜 アニメーションコンポーネント
その４－３ 〜 アニメーションを動かす
その５－１～ あたり判定
その５－２～ やられアニメーション
その６ 〜 これまでの振り返り

はじめに

前回の記事では、RustとECSの簡単な紹介をしました。
今回から、実際にRust言語を使い、ECSの思想に則って、ゲームを作ってみたいと思います。

なお、RustのECSライブラリもgithubで公開されてたりしますが、今回は、ECSの仕組みの理解とその有用性の研究のためにやっているので、自前でECSシステムを構築していきます。
あまり抽象化や汎用化を意識せず、今回作るゲームに合わせたシステムで設計していきます。

環境は、webassembly が使えるゲームエンジンの quicksilver を、クラウドIDEの gitpod 上で動かして開発を進めます。

この構成だと、ブラウザ上で開発からテストまでできます。とっても便利！

今回は第一段階として、キーボード入力「Ａ」（左）、「Ｄ」（右）、「Ｗ」（上）、「Ｓ」（下）を検出して、画面上のキャラを動かす、というところまで、作ってみたいと思います。

今回つくったソースとテスト環境

今回作ったソースは、こちらで閲覧＆テストできます。（要githubアカウント）
https://gitpod.io/#https://github.com/mas-yo/rust-ecs-game/tree/step-2

上記リンクをクリックすると、gitpodのワークスペースが立ち上がります。
その後、ライブラリのインストールが始まります。（初回のみ）
１５分ほどかかります。

それが終わったら、画面下のコンソールから

$ cargo web start

とすると、ビルドが走ったあと、webサーバーが立ち上がります。

サーバーが立ち上がると、右下に、こんな通知が出るので、 Expose をクリック

さらに、こんな通知が出るので、 Open Browser をクリック

すると、ゲーム画面が開きます。

ADWSキーで、黄緑色の円（これが操作キャラだと思ってください）が動くことが確認できると思います。

ソースだけみたい、という方は、こちらからどうぞ。
https://github.com/mas-yo/rust-ecs-game/tree/step-2

ECSによる設計

では、今回行った作業を順に紹介します。

コンポーネント

ECSの考え方で行くと、下記の４つのコンポーネントが必要になりそうです。

• 入力状態を保持する Input コンポーネント
• キャラの速度を保持する Velocity コンポーネント
• キャラの位置を保持する Position コンポーネント
• キャラの描画に必要な情報を保持する CharacterView コンポーネント

これらを、structとして定義してみます。

use quicksilver::geom::Vector;

#[derive(Default)]
pub(crate) struct Input {
    pub left: bool,
    pub right: bool,
    pub up: bool,
    pub down: bool,
}

pub(crate) type Velocity = Vector;

pub(crate) type Position = Vector;

#[derive(Default)]
pub(crate) struct CharacterView {
    pub position: Vector,
    pub dir: f32,          //キャラの向き（未使用）
    pub radius: f32,
}

システム

これらのコンポーネントを扱うシステムは、下記の４つになりそうです。

• Input の情報を元に、Verocity を更新するシステム
• Verocity の情報を元に、Position を更新するシステム
• Position の情報を元に、CharacterView を更新するシステム
• CharacterView の情報を元に、実際に画面に描画するシステム

とりあえずシンプルに、単なる関数として作ってみました。

use crate::components::*;
use quicksilver::prelude::*;

pub(crate) fn update_velocity(input: &Input, velocity: &mut Velocity) {
    velocity.x = 0f32;
    velocity.y = 0f32;
    if input.left {
        velocity.x = -1f32;
    }
    if input.right {
        velocity.x = 1f32;
    }
    if input.up {
        velocity.y = -1f32;
    }
    if input.down {
        velocity.y = 1f32;
    }
}

pub(crate) fn update_position(velocity: &Velocity, position: &mut Position) {
    position.x += velocity.x;
    position.y += velocity.y;
}

pub(crate) fn update_character_view(position: &Position, view: &mut CharacterView) {
    view.position = *position;
    view.dir = 0f32;
    view.radius = 10f32;
}

pub(crate) fn update_window(view: &CharacterView, window: &mut Window) {
    window.draw(
        &Circle::new((view.position.x, view.position.y), view.radius),
        Col(Color::GREEN),
    );
}

各関数は、自分が関わっているコンポーネントのみに依存していることがポイントです。

この様にしておくことで、例えば描画周りを quicksilver でなく htmlのcanvasにしたいと
思ったら、canvas用のupdate_window を用意して、そこだけを差し替えれば良い、ということになります。

main.rs

大元となる main.rs を忘れていました。
Game 構造体をつくり、そこに各コンポーネントを置きます。

そして、quicksilverのStateを下記の様に実装しました。
キーボードイベントをInputコンポーネントに反映するのと、各システムの関数を順に呼び出しています。

use quicksilver::prelude::*;

mod components;
mod systems;
use components::*;
use systems::*;

#[derive(Default)]
struct Game {
    input: Input,
    position: Position,
    velocity: Velocity,
    character_view: CharacterView,
}

impl State for Game {
    fn new() -> Result<Game> {
        Ok(Self{position: Position{x: 50f32, y:50f32}, ..Default::default()})
    }

    /// Will happen at a fixed rate of 60 ticks per second under ideal conditions. Under non-ideal conditions,
    /// the game loop will do its best to still call the update at about 60 TPS.
    ///
    /// By default it does nothing
    fn update(&mut self, _window: &mut Window) -> Result<()> {
        update_velocity(&self.input, &mut self.velocity);
        update_position(&self.velocity, &mut self.position);
        update_character_view(&self.position, &mut self.character_view);
        Ok(())
    }
    /// Process an incoming event
    ///
    /// By default it does nothing
    fn event(&mut self, event: &Event, _: &mut Window) -> Result<()> {
        match event {
            Event::Key(key, state) => {
                let mut pressed = false;
                if *state == ButtonState::Pressed {
                    pressed = true;
                } else if *state == ButtonState::Released {
                    pressed = false;
                }
                match key {
                    Key::A => {
                        self.input.left = pressed;
                    }
                    Key::D => {
                        self.input.right = pressed;
                    }
                    Key::W => {
                        self.input.up = pressed;
                    }
                    Key::S => {
                        self.input.down = pressed;
                    }
                    _ => {}
                }
            }
            _ => {}
        }
        Ok(())
    }

    fn draw(&mut self, window: &mut Window) -> Result<()> {
        window.clear(Color::WHITE)?;
        update_window(&self.character_view, window);
        Ok(())
    }
}

fn main() {
    run::<Game>("Game", Vector::new(800, 600), Settings::default());
}

エンティティは・・？

今回は、エンティティが１つ（プレイヤーキャラ）しか無いので、エンティティを考慮する必要がありませんでした。
次回から、エンティティの管理の部分も作ってみたいと思います。

その３につづく・・・