インストール不要！ブラウザだけではじめるRubyゲームプログラミング環境「rbCanvas」の紹介（DXRubyスタイル）

rbCanvas
[https://rbcanvas.net](https://rbcanvas.net)

<img alt="rbCanvas_公式HP.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/7372ad54-a557-1897-bd5e-21fd2ccd1999.gif" width="50%">

（[rbCanvas公式ページ](https://rbcanvas.net) より）



# 1. はじめに

[Ruby](https://www.ruby-lang.org/ja/)でゲームプログラミングによく使われるライブラリに、[DXRuby](https://dxruby.osdn.jp)があります。また、DXRubyと互換性のある統合開発環境として、[Nyle-canvas](https://spoolkitamura.github.io/nyle-canvas/dev2/site/index.html)や [DXOpal](https://yhara.github.io/dxopal/doc/ja/index.html)なども公開されています。

今回、上記の[Nyle-canvas](https://spoolkitamura.github.io/nyle-canvas/dev2/site/index.html) が大幅にバージョンアップして、「[rbCanvas](https://rbcanvas.net)」として生まれ変わっていたので紹介します。



# 2. rbCanvasとは

ブラウザ上で動くRubyエディタ・実行環境一体型の統合開発環境です。これは、最近では[p5.js](https://p5js.org)、[Scratch](https://scratch.mit.edu)などさまざまなプログラミング言語での開発にも採用されている方式です。

その一番の利点は、ブラウザとインターネット環境があれば、簡単にRubyのプログラミングを始められることにあります。

この点は、従来の[Nyle-canvas](https://spoolkitamura.github.io/nyle-canvas/dev2/site/index.html)と変わりません。また、DXRubyのAPIとの互換性を重視している点も引き継いでいます。


また、[Processing](https://processing.org)や [p5.js](https://p5js.org) のAPIを採用した、「[rbCanvas/p5](https://rbcanvas.net/p5/)」という姉妹関係の開発環境も併せて公開されています。
<br>


[rbCanvas/p5](https://rbcanvas.net/p5/)については、以下の記事を参照ください。
→・[インストール不要！Rubyでゲーム、ビジュアルアート開発ができる新環境「rbCanvas/p5」の紹介 - Qiita](https://qiita.com/noanoa07/items/c9046676fac7668a85eb)


# 3. 主な特徴

- Rubyのインストール不要
- エディタ、ターミナルソフト（「コマンドプロンプト」、「PowerShell」、「ターミナル」など）不要
- さまざまなOSで動作可能（WindowsやmacOS、Linux、Android、iPadOS、iOSなど）
- タブレット端末、スマートフォンでも動作可能
- プログラムはOSに依存せず動作
- 保存操作なしで、直ちに実行可能
- 画像、音声データも一体で管理
- DXRuby互換の書式で記述可能
- ユーザーインターフェースモジュールの追加 ※
- コンソール系メソッド（puts、gets など）の追加 ※
- micro:bit のサポート ※

（※は独自機能）

そのため、“[DXRuby](http://dxruby.osdn.jp)で書かれたプログラム資産の活用をしたい”、“Mac上でDXRubyの書き方でゲーム開発をしたい” という要望にも応えてくれます。


なお、micro:bitのサポートについては以下の記事を参照ください。
→・[micro:bitをRubyでブラウザだけでプログラミングするプログラミング環境「rbCanvas」の紹介 - Qiita](https://qiita.com/noanoa07/items/cdc9a2a8d832a6ca1fbf)


# 4. 動作環境

- ブラウザ（Chrome推奨）
- インターネット接続
- ブラウザの動くOS（Windows、macOS、Linux、Android、iPadOS、iOSなど）
- パソコン、または（外付けキーボードを接続した）タブレット、スマートフォン （※ タッチパネル操作にも一部対応）



# 5. 技術要素

HTML5 Canvas API、Ruby→Javascriptパーサ Opal、Javascriptエディタ Ace.js、p5.jsなどを採用しています。

グラフィックライブラリに実績のある[p5.js](https://p5js.org)が採用されました。これにより、描画性能が向上したことに加え、p5.jsの持つ強力なグラフィック表現が使える[rbCanvas/p5](https://rbcanvas.net/p5/)スタイルが追加されました。

また、DXRubyスタイルのメソッドに加え、ユーザーインターフェースモジュール、コンソール系メソッド、micro:bitのサポートなどの機能が大幅に追加されています。


# 6. DXRuby APIとの主な相違

## ・Spriteクラスはない

## ・色の指定方法

- [A, R, G, B]形式の4要素配列（Aはα値；透明度）

- 色定数（C_BLACKなど）

- "#rrggbb"の形式の文字列での指定

- スタイルシート(CSS3)で利用可能な色名称(文字列)での指定

## ・Window.caption = はない

## ・Window.x =、Window.y = はない

## ・Window.loop do 〜 end を複数書く時は、並列に書かない

## ・Window.close はない

## ・exitでもウィンドウは閉じない

## ・Input.mouse_pos_x は、Input.mouse_x に統一

## ・Input.mouse_pos_y は、Input.mouse_y に統一
## ・プログラムファイルは一つだけ
（擬似的に複数ファイルの扱いに対応）

## ・タッチパネル操作には一部対応
（DXRubyでは未サポート）

## ・ユーザーインターフェースモジュール の追加

## ・コンソール系メソッド（puts、gets など）の追加
（コンソールを使うゲームも可能に）

## ・micro:bit のサポート
（詳細は、[rbCanvasのマニュアル](https://rbcanvas.net/0.8.2/site/about_microbit.html)参照）



# 7. 参考サイト

- rbCanvas公式ページ
[https://rbcanvas.net](https://rbcanvas.net) 
<br>


「DXRubyスタイル」のオリジナルであるDXRubyのページ；

- DXRuby のホームページ
[http://dxruby.osdn.jp](http://dxruby.osdn.jp)

- DXRuby 1.4.6 リファレンスマニュアル
[http://mirichi.github.io/dxruby-doc/index.html](http://mirichi.github.io/dxruby-doc/index.html)

- DXRuby 1.4.1 リファレンスマニュアル
[http://dxruby.osdn.jp/DXRubyReference/20095313382446.htm](http://dxruby.osdn.jp/DXRubyReference/20095313382446.htm)


# 8. rbCanvasを使ってみる

## A) サンプルプログラムの実行

### A-1) rbCanvasの[サンプルプログラムのページ](https://rbcanvas.net/0.8.2/site/sample.html)を開きます。

<img alt="rbCanvas_サンプル.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/fde0d863-87cc-0c3d-e4dd-e14eccaaeee5.png" width="50%">

（以下、画像は [rbCanvas公式ページ](https://rbcanvas.net) より）


### A-2) 実行させたいサンプルのサムネイル（画像）かタイトルをクリックします。


### A-3) プログラムが実行されます。
<img alt="rbCanvas_サンプル実行.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/b9f397cd-7fc8-4242-9ec9-b17259652ad3.gif" width="45%">

（サンプルプログラム 落ちものゲーム）



## B) エディタを使ったプログラムの作成と実行

### B-1) [rbCanvas](https://rbcanvas.net) のページの「rbCanvas editor」をクリックします。
<img alt="rbCanvas_公式HP.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/0bbcae08-76de-ec7a-c95d-becaa866a9ab.png" width="50%">

※エディタの詳しい使い方は；
公式ページ＞マニュアル＞[rbCanvasエディタの使い方](https://rbcanvas.net/0.8.2/site/about_editor.html) を参照


### B-2) rbCanvas editor のウィンドウが開きます。
<img alt="rbCanvas_エディタ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/e3789d54-0051-2280-ce9b-cb1905256ea8.png" width="60%">


### B-3) rbCanvasの基本

- 簡単な例

```ruby
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLUE

Window.loop do
  Window.draw_circle_fill(320, 240, 100, C_WHITE)
end
```

`Window.loop do 〜 end`
の中身は、繰り返し実行されます。


### B-4) 実行は、エディタ上部の「▶︎ ボタン」を押します。
- 実行結果

<img alt="実行結果.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/c5c4ad5f-5857-2f6f-c5f3-f8810203fe7d.png" width="35%">

※ 文法、プログラム例は；
公式ページ＞マニュアル＞[APIリファレンス](https://rbcanvas.net/0.8.2/site/manual/index.html) を参照


## C) プログラムの保存

エディタ上部のダウンロードボタンを押します。

<img src="https://camo.qiitausercontent.com/d9fbc3e876f07ee557e8e926f12649e9ce84409a/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f32363533362f38356432353236322d616661662d386130652d663662632d3334323562613461333938342e706e67" width="5%">



# 9. 困ったときは

公式ページ＞マニュアル＞[よくある質問](https://rbcanvas.net/0.8.2/site/faq.html)
が用意されています。



# 10. さいごに

学生向けのプログラミング入門としては、ゲーム作りが題材にされることが多いです。

rbCanvasは、Ruby、ゲームライブラリ、エディタのインストールが不要で、ブラウザだけですぐにプログラミングが始められるのは大変な利点です。

また、Rubyのゲームライブラリとして代表的なDXRubyと互換性があることで、既存のテキスト、ゲームプログラムを有効活用することができます。


今後、Rubyのプログラミング入門として、プログラミング教室、あるいは「[中高生国際Rubyプログラミングコンテスト](https://www.ruby-procon.net)」などプログラミングコンテストの応募にも使われることが期待されます。