RubyAdvent Calendar 2023

DXOpalでスイカゲームみたいなのを作った

Last updated at 2023-12-28Posted at 2023-12-05

これは Ruby Advent Calendar 2023 の6日目の記事です。一つ前の記事はRubyのプロダクトコードの複雑度の変化を可視化する、次の記事は高校生向けプログラミング講座「福岡県Rubyキャンプ」にコーチとして参加してきました！です。

こんにちは。今年は mruby や picoruby にも触れてみたかったのですがもう12月ですね……おかしいな……。

できたもの

遊んでみたい方はこちらのリンクからどうぞ。

https://sonota88.github.io/dxopal-suikalike/index.html

マウス操作のみ対応しています
ボール（正方形ですが）のサイズは 1 から 10 まで
- 球にするのが面倒だったため正方形で作り始め、面倒だったため正方形のまま完成としました。この記事では「ボール」と言い張ります。
オリジナルに寄せる方向ではがんばってません。それっぽければヨシ。

リポジトリはこちら。効果音はパブリックドメインとします。何かに使えそうなら使ってください。

DXOpal + 物理演算 → スイカゲーム

DXOpal についてざっくり特徴を挙げると次のような感じでしょうか。

手軽にゲームを作れるフレームワーク
DXRuby のブラウザ向け移植
- API に互換性があり、仕組み上しかたないもの以外は DXRuby に合わせるみたいな方針だと思います
作ったゲームはブラウザで実行する
- ここで Opal が使われる（Ruby のコードが JavaScript に変換されて実行される）
- OS などの環境に依存せず同じように動かせる
- ウェブで公開する形にすればダウンロードやインストールなしで使ってもらえる・遊んでもらえる・見てもらえる
  - 参考: DXOpalで作ったゲームを無料で公開する

入門用のドキュメントとしては以下2つがおすすめです。

Rubyで始めるゲームプログラミング - DXOpal編 -
Opal Advent Calendar 2018 の「DXOpalでUndertaleっぽい画面を作る」シリーズ

DXOpal には物理演算ライブラリ（matter.js）を利用した機能が実験的に用意されており、リポジトリの examples ディレクトリにサンプルがあります。

https://github.com/yhara/dxopal/tree/master/examples/matter

これを使って何かできないかなーと以前からボンヤリ考えていたのですが、今年はスイカゲームが流行りましたから、じゃあ作ろうかと。

作り自体は割と簡単です。難しいところ（ボール同士の接触判定や物理演算）は DXOpal と matter.js がやってくれるので基本部分は数時間で動くようになりました。

できあがりのサイズはこのくらい。小さく作るのが好き。

  $ wc -l *.rb
  57 ball.rb
 314 game.rb
 119 main.rb
 490 合計

メモ

以下、開発メモです。

物体の消去

なるべく DXOpal 本体に手を加えない範囲に収めたかったのですが、物体を消去する処理は必要なのでここだけ追加しました。

--- a/lib/dxopal/sprite/physics.rb
+++ b/lib/dxopal/sprite/physics.rb
@@ -56,6 +56,15 @@ module DXOpal
       `Matter.World.addBody(#{Sprite._matter_engine}.world, body)`
     end
 
+    def remove_matter_body
+      Sprite._remove_matter_body(@_matter_body)
+    end
+
+    def self._remove_matter_body(body)
+      _matter_sprites.delete(`body.id`)
+      `Matter.World.remove(#{Sprite._matter_engine}.world, body, null)`
+    end
+
     # Return true if `physical_body=` is ever called
     def self.matter_enabled?
       # Note: we cannot use `!!` here because @matter_engine may be a JS object,