DXRuby で書いた Ruby のゲームプログラムが、ブラウザで実行できると知って試してみました。

とはいえ、DXOpal は DXRuby互換API ライブラリなので、そのまま動くという訳ではなくある程度の書き換えは必要です。
実際にやってみた記録を残しておきます。(実行環境;dxopal 1.0.0)

参考)
DXOpal
DXOpal demo
DXRubyをブラウザ上で動かせるというDXOpalを試用してみたり - mieki256's diary
DXRuby


1.DXOpal の導入
DXOpalのサイトの通りにしていきます。(2通りあります)

1-A.RubyGem を使う方法
(Rubyがインストールされている必要があります)

1)DXOpal のインストール
$ gem install dxopal

2)初期ファイルの作成
DXOpal を使うディレクトリを作成し、そこへ移動します。
$ mkdir sample1
$ cd sample1

次のコマンドで初期ファイルが作成されます。
$ dxopal init
・dxopal.min.js
・index.html
・main.rb
この内、main.rb が実行されるファイルです。
main.rb には、あらかじめサンプルプログラムが書き込まれています。


1-B.DXOpal Starter Kit を使う方法
(Ruby は必要ありません)

DXOpal Starter Kit のダウンロードします。
GitHubの yhara/dxopal-starter-kit を git clone するか、Releases - yhara/dxopal-starter-kit の最新の zipファイルをダウンロードして展開します。

あらかじめ、サンプルプログラムが入っています。
この内、main.rb が実行されるファイルです。 



2.DXOpal の実行
実は、DXOpal の実行に Ruby は必要ありません。 
dxopal.min.js ファイルだけで Rubyのプログラム を Javascript に変換してくれるからです。
これは知った時、すごい!と感動しました。
Ruby の入っていない PCでも動かせるし、Webサイトに置くだけ世界中に公開できるからです。
あと、ソフトのインストールが制限されている学校の PC でプログラミング学習するときとかにも良いですね。
(実行方法は 3通りあります) 

2-A.index.html をブラウザで開く方法
index.htm をブラウザで開くと main.rb が実行されます。
ローカルファイル(file://)にアクセスできる Firefox で開く必要があるようです。

他のブラウザを試してみたところ、Chrome,Safari,Edge,IE11 では現状動きませんでした。
Chrome の場合は、Google Chromeの起動オプションに --allow-file-access-from-files をつけると良いようです。


2-B.Webサイト上に置いて、ブラウザでアクセスする方法
・dxopal.min.js
・index.html
・main.rb
の 3つのファイルを置けば、Webサイトにアクセスするだけで自動的に実行されます。
この方法の場合、Firefix,Chrome,Safari,Edge で動きました。(IE11では動かず)

すでに、DXOpal のデモがいくつかあります。
DXOpal
 → DXOpal demo

DXRubyをブラウザ上で動かせるというDXOpalを試用してみたり - mieki256's diary
 → dxopal_inchiki_takansetsu
 → dxopal_walkenemy
 → dxopal_rolltaka

DXOpalお試しデモ「うごめく橙」 - @syuji_iguraのメモログ

(ブログに貼り付ける方法は後述)


2-C.ローカルサーバーを起動して、ブラウザでアクセスする方法
(ローカルサーバーを起動するのに Ruby,DXOpal が必要です)
1)ローカルサーバーを起動する
・dxopal.min.js
・index.html
・main.rb
を置いたディレクトリで、以下のコマンドでローカルサーバーを起動します。 
$ dxopal server

2)ブラウザでアクセスする
ブラウザで
http://localhost:7521/index.html
にアクセスすると、main.rb が実行されているはずです。
(これも、Firefix,Chrome,Safari,Edge で動きました。IE11では動かず。)


3)終了させる
ローカルサーバーを終了します。
ターミナル(コマンドプロンプト)で
Ctrl + C のキーを押します。



2.自分のプログラムを作る
main.rb の中身を書き換えていきます
ここでは DXRuby のプログラムを書き換えていく際の注意点を挙げます

2-A.書き換える必要のあるもの
1)文字コードは UTF-8 にする
 改行コードも CR+LF でなく、LF がよい
(CR+LF だと =begin 〜 =end がエラーになる)


2)require 'dxopal'
  include DXOpal
を冒頭に書く(require 'dxruby' は不要)


3)別ファイルの require の仕方
 require_remote 'player.rb'
 ※ .rb が必要です


4)Window.loop do 〜 end の外側を
 Window.load_resources do 〜 end で囲う
 ※ def文など定義文が終わって、実行部分のコードは全部囲っていいようです


5)画像ファイルの読み込み、呼び出し方
・Window.load_resources do の前で
 Image.register(:player, 'image.png')
 のようにして読み込む

・Window.load_resources do の後で
 player_1 = Image[:player]
 のようにして呼び出す


6)音声ファイルの読み込み、呼び出し方
・Window.load_resources do の前で
 Sound.register(:bgm, 'sound.wav')
 のようにして読み込む
 ※ .wav は対応していますが、.midi は対応していません

・Window.load_resources do の後で
 sound_bgm = Sound[:bgm]
 のようにして呼び出す


2-B.対応してないもの
1)Window.caption =
2)Image#set_color_key(color)
3)Window.draw_scale


2-C.その他の注意
1)プログラムの終了方法
 Window.loop do 〜 end の中で break しても終了しません

 ・Window.pause というメソッドで、プログラムは止まるそうです

 ・強制的に終了するには、
  ターミナル(コマンプロンプト)で Ctrl + C
  を押します


2)エラーメッセージ
 ターミナル(コマンプロンプト)にエラーメッセージは出ません
 ただ、ブラウザの開発者コンソールには出ます 



3.ブログに貼り付け方
DXOpal(の基となっている Opal)は Ruby のプログラムを Javascript に変換して実行しているので、Webサイトに貼り付けただけで、動く様子が見てもらえるのが素晴らしいです。
2-B で挙げた DXOpal のデモのようなものが、自分でも、それもブログ上で出来ないか試してみました。
すると、この livedoor Blog でもホントに動いたのでちょっと感動しました!

livedoor Blog でのやり方を載せておきます。
1)ファイルのアップロード
livedoor Blog>マイページ>画像/ファイル>ファイル管理 で
「フォルダを作る」で適当なフォルダを作ります。

作ったフォルダに移動して、「アップロード」を選んで必要なファイルをアップロードします。
(index.html ファイルはブログ記事だと自動で作られているので必要ありません)
 
・dxopal.min.js
・main.rb
(require_remotoするファイルがあればそれも)

アップロードしたファイルをクリックして、URL を確認しておきます。
例)http://blog.livedoor.jp/noanoa07/20171227_2/dxopal.min.js


2)ブログ記事を新規で作る
「記事を書く」で記事の作成画面を開き、「HTMLタグ編集」ボタンを押します。
DXOpal のサンプルの index.html を参考に、必要な部分をコピーします。

<meta charset= "utf-8" />
<script type="text/javascript" src="dxopal.min.js"></script>
<script type="text/ruby" src="main.rb"></script>
<canvas id="dxopal-canvas"></canvas> 

先ほどの URLをみて、src= の部分を書き換えます。
例)src="/noanoa07/20171227_2/dxopal.min.js"


3)投稿する
公開した記事を確認してみます。

→ ・DXOpal;ブロック崩しdemo
元ネタ;DXRubyで 0から作る「ブロック崩し」


2017-12-29-1