2017/09/22(金) [n年前の日記]
#1 [dxruby][ruby] DXRubyをブラウザ上で動かせるというDXOpalを試用してみたり
DXRuby作者様のtwitterで、DXRubyをWebブラウザ上で動かせる DXOpal なるものが紹介されていて、なんだか興味が湧いたわけで。試しに動かしてみようかな、と。
_yhara/dxopal: Game development framework for Opal, API compatible to DXRuby
_DXOpal demo
_RubyKaigiで発表しました - yhara.jp
_Presenter notes(Japanese) of https://speakerdeck.com/yhara/ruby-opal-and-webassembly
RubyスクリプトをWebブラウザ上で動かせるように JavaScript に変換してしまう _Opal なるものがあり、それを使うことを前提にして DXRuby の一部を移植、という認識でいいのだろうか…。何にせよ、Ruby + DXRuby スクリプトを、ほんの少し手直しするだけでWebブラウザ上でも動かせる…可能性がある。らしい。たぶん。
_yhara/dxopal: Game development framework for Opal, API compatible to DXRuby
_DXOpal demo
_RubyKaigiで発表しました - yhara.jp
_Presenter notes(Japanese) of https://speakerdeck.com/yhara/ruby-opal-and-webassembly
RubyスクリプトをWebブラウザ上で動かせるように JavaScript に変換してしまう _Opal なるものがあり、それを使うことを前提にして DXRuby の一部を移植、という認識でいいのだろうか…。何にせよ、Ruby + DXRuby スクリプトを、ほんの少し手直しするだけでWebブラウザ上でも動かせる…可能性がある。らしい。たぶん。
◎ ローカルにダウンロード。 :
_yhara/dxopal-game: Demo & Template for DXOpal
で、テンプレートファイル群が公開されているので、まずはソレをローカルHDDにダウンロード。
ちなみに自分の環境は、Windows10 x64。
git がインストールされてない環境なら、 _yhara/dxopal-game の右のほうの緑色のボタンをクリックして、「Download ZIP」をクリックすればzipファイルの形で入手できる。後は適当なフォルダの中で解凍すればいい。
自分の環境は git がインストール済みなので、git clone でクローンさせてもらった。何か適当なフォルダを作成してから…。
dxopal-demo で使われている dxopal.min.js はちょっと古いので、 _dxopal/dxopal.min.js at master - yhara/dxopal から dxopal.min.js をダウンロードして、dxopal-demo の dxopal.min.js を上書きしたほうがいいかもしれず。
自分の場合、これも git clone で取得して…。
ちなみに自分の環境は、Windows10 x64。
git がインストールされてない環境なら、 _yhara/dxopal-game の右のほうの緑色のボタンをクリックして、「Download ZIP」をクリックすればzipファイルの形で入手できる。後は適当なフォルダの中で解凍すればいい。
自分の環境は git がインストール済みなので、git clone でクローンさせてもらった。何か適当なフォルダを作成してから…。
git clone https://github.com/yhara/dxopal-game.gitこれでローカルに、dxopal-game というフォルダが作成されて、その中に一式が入ってくれた。
dxopal-demo で使われている dxopal.min.js はちょっと古いので、 _dxopal/dxopal.min.js at master - yhara/dxopal から dxopal.min.js をダウンロードして、dxopal-demo の dxopal.min.js を上書きしたほうがいいかもしれず。
自分の場合、これも git clone で取得して…。
git clone https://github.com/yhara/dxopal.gitbuildフォルダ内の dxopal.min.js を、dxopal-game フォルダ内の dxopal.min.js に上書きコピー。みたいな。
◎ 動作確認。 :
とりあえずこの状態で、dxopal-demo/index.html をWebブラウザで開いてみる。
- Firefoxで開いたら、マウスカーソルをキャラクターが追いかける何かが表示された。動いてるっぽい。
- Microsoft Edge も、同じように動いた。
- Google Chrome で開いたら、何も表示されなかった。というのも、Google Chrome はローカルHDD内のJavaScriptをいきなり動かさない設定になってるそうで。Google Chromeの起動オプションに「--allow-file-access-from-files」をつけて、index.html を開く必要があるらしい。
- IE11 では動かなかった。
◎ 自分が書いたスクリプトで試してみた。 :
dxopal-demo フォルダの名前を適当な名前にリネームして、その中の main.rb を書き換えて動作確認してみたり。
昔の日記ページからコピペして実験。自分が書いたソース・作った画像はCC0ってことで。
_dxopal_inchiki_takansetsu (元ネタ: _DXRubyでインチキ多関節を試してみる )
_dxopal_walkenemy (元ネタ: _DXRubyで二足歩行する敵っぽい動きを作ってみる )
_dxopal_rolltaka (元ネタ: _DXRubyで例の多関節を実験 )
元のソースをいきなり読み込ませても動くわけではない模様。修正作業で難儀した。が、それでもなんとか動かせた。
スゴイ。ブラウザ上で本当に、Ruby + DXRuby が動いてる…。あ、いや、実際動いてるのは JavaScript だけど。渡してるソースは Ruby のソレにしか見えないわけで。
昔の日記ページからコピペして実験。自分が書いたソース・作った画像はCC0ってことで。
_dxopal_inchiki_takansetsu (元ネタ: _DXRubyでインチキ多関節を試してみる )
_dxopal_walkenemy (元ネタ: _DXRubyで二足歩行する敵っぽい動きを作ってみる )
_dxopal_rolltaka (元ネタ: _DXRubyで例の多関節を実験 )
元のソースをいきなり読み込ませても動くわけではない模様。修正作業で難儀した。が、それでもなんとか動かせた。
スゴイ。ブラウザ上で本当に、Ruby + DXRuby が動いてる…。あ、いや、実際動いてるのは JavaScript だけど。渡してるソースは Ruby のソレにしか見えないわけで。
◎ 分かった点をメモ。 :
今現在気づいた範囲で分かったことをメモ。
読み込ませるスクリプト(main.rb)は、utf8n で書いておく。のだと思う。JavaScriptのソースって、えてしてUTF-8だろうから。
頭のほうに、以下を書く。
利用する画像等は、頭のほうで、以下のように書いて列挙しておく。
何故か、元スクリプトを module hoge で囲まないと動いてくれなかったりした。… _module って何? 使ったことないので勉強しないと。
てな感じで、おそらく基本的には、以下のような感じの書き方になるのではないかなと。たぶん。自信無いですが。
現時点では、拡大縮小描画(Window.draw_scale や、Spriteクラスの scale_x, scale_y 等)は未実装らしい。ただ、回転描画(Window.draw_rot や Sprite の angle)は実装済みの模様。まあ、ファミコン、PCエンジン、メガドライブあたりは、スプライトの拡大縮小なんて無かったし…。昔のゲーム機と比べたら回転描画がサポート済みなだけでも御の字状態というか。
DXRuby で使われてる古い名称(?)もサポートしてないっぽい。気付いた範囲では、 _Input.mouse_x はOKだけど、 _Input.mousePosX と書いたらNGだった。
ruby hoge.rb で動かした場合と違って何もエラーが出てこないから、修正作業はかなり面倒臭い印象。
Firefox上で動かしたら滑らかに動いたけど、GoogleChrome上で動かしたら処理落ちしてるように見えた。
読み込ませるスクリプト(main.rb)は、utf8n で書いておく。のだと思う。JavaScriptのソースって、えてしてUTF-8だろうから。
頭のほうに、以下を書く。
include DXOpal「require "dxruby"」の代わりになる行らしい。「require "dxruby"」は消しちゃっていい。
利用する画像等は、頭のほうで、以下のように書いて列挙しておく。
Image.register(:hoge, 'images/hoge.png') Image.register(:piyo, 'images/piyo.png')「Window.load_resources do 〜 end」の中で、「img_ufo = Image[:ufo]」みたいな感じで書けば、画像を読み込める模様。
何故か、元スクリプトを module hoge で囲まないと動いてくれなかったりした。… _module って何? 使ったことないので勉強しないと。
てな感じで、おそらく基本的には、以下のような感じの書き方になるのではないかなと。たぶん。自信無いですが。
include DXOpal Image.register(:hoge, 'images/hoge.png') Image.register(:piyo, 'images/piyo.png') module hoge Window.load_resources do img_hoge = Image[:hoge] img_piyo = Image[:piyo] Window.loop do # メインループ内の処理 end end end
現時点では、拡大縮小描画(Window.draw_scale や、Spriteクラスの scale_x, scale_y 等)は未実装らしい。ただ、回転描画(Window.draw_rot や Sprite の angle)は実装済みの模様。まあ、ファミコン、PCエンジン、メガドライブあたりは、スプライトの拡大縮小なんて無かったし…。昔のゲーム機と比べたら回転描画がサポート済みなだけでも御の字状態というか。
DXRuby で使われてる古い名称(?)もサポートしてないっぽい。気付いた範囲では、 _Input.mouse_x はOKだけど、 _Input.mousePosX と書いたらNGだった。
ruby hoge.rb で動かした場合と違って何もエラーが出てこないから、修正作業はかなり面倒臭い印象。
Firefox上で動かしたら滑らかに動いたけど、GoogleChrome上で動かしたら処理落ちしてるように見えた。
◎ サーバ側の設定。 :
WebブラウザでIISにアクセスして動作確認しようとしたら、動かなかった。IISマネージャで、MIMEの種類として、.rb は text/ruby になるように追加設定しないといかんらしい。
Apacheの場合はどうなるんだろう…。.htaccess に、
Apacheの場合はどうなるんだろう…。.htaccess に、
AddType text/ruby rbとでも書いとけばいいのだろうか。分からんけど。でも、そういう風に書いちゃうと、Rubyで書かれたCGIが動かなくなったりしないのかな。 *1
*1: いやまあ、自分のアカウントでは、Rubyで書かれたCGIは存在しないはずなので問題にはならないけど。以前、Rubyのバージョンが上がったら、Rubyで書かれたCGIが動かなくなって、サーバ上でRubyを動かすのはやめてしまった記憶が…。やっぱりCGI(スクリプト?)を書くなら後方互換性を大事にしてるPerlを使うべきなんだろう。と思ったけどPerl6があったっけ…。まあ、別言語扱いらしいけど…。
[ ツッコむ ]
以上です。