mieki256's diary



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: Demo & Template for DXOpal で、テンプレートファイル群が公開されているので、まずはソレをローカルHDDにダウンロード。

ちなみに自分の環境は、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.git
buildフォルダ内の 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 のソレにしか見えないわけで。

分かった点をメモ。 :

今現在気づいた範囲で分かったことをメモ。

読み込ませるスクリプト(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 に、
AddType text/ruby rb
とでも書いとけばいいのだろうか。分からんけど。でも、そういう風に書いちゃうと、Rubyで書かれたCGIが動かなくなったりしないのかな。 *1

*1: いやまあ、自分のアカウントでは、Rubyで書かれたCGIは存在しないはずなので問題にはならないけど。以前、Rubyのバージョンが上がったら、Rubyで書かれたCGIが動かなくなって、サーバ上でRubyを動かすのはやめてしまった記憶が…。やっぱりCGI(スクリプト?)を書くなら後方互換性を大事にしてるPerlを使うべきなんだろう。と思ったけどPerl6があったっけ…。まあ、別言語扱いらしいけど…。

以上、1 日分です。

過去ログ表示

Prev - 2017/09 -
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project