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

Ruby DXOpal

これは Ruby Advent Calendar 2023 の6日目の記事です。一つ前の記事はRubyのプロダクトコードの複雑度の変化を可視化するです。

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

できたもの

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

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

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

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

https://github.com/sonota88/dxopal-suikalike

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

https://github.com/yhara/dxopal

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

手軽にゲームを作れるフレームワーク
作ったゲームはブラウザで実行する
- ここで 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,

これを追加するために matter.js のドキュメントとソースを軽く眺めましたが、matter.js 絡みの手間はその程度で済みました。見様見真似の間に合わせなのでひょっとしたらおかしなことしてるかもしれません。