グラフィックプログラミングにチャレンジしよう

 この連載
(れんさい)
では、Ruby(ルビー)というプログラミング言語を使って、本格的
(ほんかくてき)
なプログラミングに挑戦
(ちょうせん)
しているよ。

 前回までは、Rubyでつくったプログラムをコマンドプロンプトで実行して、文字や数字だけを表示させるRubyのプログラミングを説明してきたよ。今回からは、文字だけでなく、グラフィック(イラストや図、写真など)を使った、カラフルで動きのあるプログラミングにチャレンジしていこう。

1 グラフィックライブラリーを準備する

 まずはグラフィック画面を使っていろいろなプログラムをつくるために、「グラフィックライブラリー」と呼ばれるツールを準備
じゅんび
するよ。
「ライブラリー」とは、英語で図書館の意味で、コンピュータープログラムでライブラリーというと、「ある特定の機能
きのう
を持つプログラムの集まり」を意味している。図書館にいろいろな本が置かれているように、いろいろなプログラムが集まっているイメージだよ。

 Rubyでよく使われているグラフィックライブラリーには、「SDL」、「GOSU」、「Tk」などがあるけれど、ここではゲームプログラミングに向いている「DXRuby(ディーエックスルビー)」というライブラリーを使っていくよ。
 DxRubyには下の表のように、画像や図形を表示させたり、効果音
こうかおん
を出したりといろいろな機能があるけれど、ここではその機能の一部を使ってプログラムをつくっていこう。

分類機能
図形点を描く
直線を描く
長方形を描く
円・楕円を描く
曲線を描く
操作キーボードのキーが押されたことが分かる
マウスがクリックされたことが分かる
マウスの位置(X座標、Y座標)が分かる
ゲーム用コントローラが扱える
背景音楽を再生する
効果音を出す
文字文字を表示する
DXRubyの主な機能

 より詳しいことが知りたい人、興味
きょうみ
のある人はDXRuby公式サイトを見てみてね。

1.1 DXRubyをインストールするための準備をしよう

 DXRubyをインストールする前にみんなが使っているパソコンについて、確認することがいくつかある。確認するポイントは次の3つだ。

① OSはWindowsだけに対応
② Rubyのバージョンと使用環境
③ Windows10の問題

① OSはWindowsだけに対応

 DXRubyは「DirectX9(ダイレクトエックスナイン)」というWindowsの機能を使うため、OSがWindowsでないと動作しない。Windowのパソコンを使おう。

② Rubyのバージョンと使用環境

 DXRubyの最新バージョンは「1.4.6」だよ。これを使うためには、Rubyのバージョンが2.3から2.6でないと使えない。さらに、Windowsの32bit版Rubyであることと、Devkitというツールがあることが条件となるので、DXRubyをインストールする前に確認しよう。

 まず、「Ruby+Devkit 2.6.6-1 (x86)」をインストールしておくことが必要だよ。もしもこれ以外のバージョンをインストールしていた場合は、連載1回目の「Rubyを準備しよう」を参考にしてインストールをし直してね。パソコンのビット数に合わせて64ビット版の「Ruby+Devkit 2.6.6-1 (x64)」をインストールしていた人は、32ビット版を改めてインストールしよう。

 一応、Rubyのバージョンを確認しておこう。コマンドプロンプトを開いて、次のように入力してEnterキーを押してね。コマンドプロンプトは、「myruby」フォルダを開いて、アドレスバーのところに「cmd」を入力してEnterキーを押せばよかったね。

 ruby -v

 以下のような画面が表示されたらOKだ。

Rubyのバージョンの確認
③ Windows10の問題

 DXRubyではWindowsのDirectX9というライブラリを使っているけれど、残念ながらWindows10からDirectX9が付属しなくなった(Windows7までは付属していた)。そこでWindows10を使っている人は、DirextX9を自分でインストールする必要があるよ。
 DirectX9のインストール手順は、次のようになる。

① Microsoft公式サイトのダウンロードセンターにアクセスして、「DirectX End-User Runtimes (June 2010)」をダウンロードする。

Microsoftダウンロードセンター

 するとブラウザの左下、または「ダウンロード」フォルダーの中に、「directx_Jun2010_redist.exe」というファイルがダウンロードされるよ。

ダウンロードされたファイル

② 次に、デスクトップ上にこのファイルを解凍
かいとう
するフォルダーをつくろう。フォルダーの名前は何でもいいけれど、今回は「D9」としておくよ。

「D9」フォルダー

③ 先ほどダウンロードしたファイルをダブルクリックすると、ライセンス同意の確認が出てくるので「Yes」をクリックする。

ライセンス同意ウィンドウ

 すると、このファイルを解凍するフォルダーを聞いてくるので、「Browse」ボタンをクリックして、先ほどつくったデスクトップ上の「D9」フォルダを選択し、「OK」ボタンをクリックしよう。そうすると、「D9」フォルダーにはたくさんのファイルが展開
てんかい
されて保存される。

解凍先の設定

④ D9フォルダの中にあるたくさんのファイルの中から「Nov2008_d3dx9_40_x86.cab」という名前のファイルを探して、ダブルクリックする。

Nov2008_d3dx9_40_x86.cabファイル

 展開するフォルダーを聞いてきたら、「D9」のままで「展開」をクリックする。

展開するフォルダーを指定

⑤ 出来上
できあ
がった「Nov2008_d3dx9_40_x86」フォルダーのファイルから、「d3dx9_40.dll」をコピーする。

d3dx9_40.dillファイル

⑥ このコピーしたファイルをRubyの本体があるフォルダにペーストする。Rubyの本体は、ここではCドライブにある「Ruby26」フォルダーがそうだ。自分のパソコンのどこにあるかは確認してね。見つかったら、「Ruby26」フォルダにある「bin」フォルダ(C:\Ruby26\bin)にペーストする。

「Ruby26」フォルダー

 ここまでで、DXRubyをインストールするための準備が整ったよ。

1.2 DXRubyをインストールしよう

 さあ、いよいよDXRubyをインストールするよ。まずはコマンドプロンプトを開いて、次のように入力して、Enterキーを押そう。

 gem install dxruby

次のように表示されればOKだ。

DXRubyのインストール

 念のため、ちゃんとDxrubyがインストールできたが、確認しておこう。「Myruby」フォルダーからコマンドプロンプトを開いて、以下のように入力してみよう。

 irb

 これはインタラクティブルビーと呼ばれるツールで、直接Rubyのプログラムをキー入力できる便利なツールだよ(くわしくは後で説明するよ)。

インタラクティブルビー

 この「irb(main):001:0>」プロンプトのあとに、次のように入力しよう。

 require ‘dxruby’

 Enterキーを押したときに、「true」という表示が出ればインストール成功だ。

DXRubyインストールの確認

 うまくいったようなら、デスクトップにつくったD9フォルダーは削除
さくじょ
してもだいじょうぶだ。もしも、エラーが表示された場合は、もう一度前に戻ってやり直そう。
 どうしてもうまくできないようなら、Ruby本体とDXRubyをセットしたUSBを購入できるので、以下に問い合わせてね。
 問い合わせ先:株式会社まちづくり三鷹  ruby@mitaka.ne.jp

2 DXRubyで図形を描いていこう

 DXRubyのインストールができたら、実際に使って図形を描いていこう。

2.1 ウィンドウ枠を表示してみよう

 エディター(ここではTeraPadを使っている)を起動して次のように入力するよ。ファイル名は「screen1.rb」で保存しよう。

screen1.rbのコード
screen1.rb

 これがDXRubyの基本形となるので、しっかり覚えておこう。
 1行目にある「require 」は、ライブラリや別のファイルを呼び込むためのメソッドで、この場合はDXRubyのライブラリを呼び込んでいるんだ。
 1行目のrequire行から3行目のWindow.loop do の行までにプログラムに必要な設定やメソッドを書き込んでいくよ。
 その後、3行目のWindow.loop do から5行目のendの間に画像を描くプログラムを書き込む。このプログラムを1秒間に60回
り返すことで、動きのある表現をすることができるようになるんだ。

 このプログラムをコマンドプロンプトで実行すると、640×480のサイズの内部が黒で描画されたウィンドウ枠が表示されるよ。うまくいかない人は、エディターでファイルを保存するときの設定を確認してね。プログラムの保存や実行方法については、「プログラムをつくってみよう!」で説明しているので、参考にしてね。

screen1.rb実行結果

 ここでの640×480という表示は、DXRubyプログラムのデフォルトサイズで、「ピクセル」という単位だ。コンピューターのモニターの大きさによって、表示される実際のサイズは異なるので注意してね。

 ●ウィンドウ枠を変更してみよう

 まずは、ウインドウ枠のサイズや背景色、タイトルバーの表示の設定を、require行からWindow.loop do の行までのプログラムに必要な各種設定やメソッドを書き込む部分を修正して、変更してみよう。次のプログラムはこれらの値を設定した例だよ(赤枠の部分が追加、変更したプログラム)。「screen2.rb」というファイル名で保存したよ。

screen2.rbコード
screen2.rb

 このプログラムでは、DXRubyのWindowモジュールを使っていくつかの設定をしていくよ。モジュールについては後の回で説明するけれど、現時点ではメソッドなどが集まったグループと考えていてね。

 3行目、4行目のwidth、height は、それぞれ枠の幅と高さを意味している。これらの数値を変えることでウィンドウ枠のサイズを変更できるよ。

 5行目のbgcolorは、枠の背景の色を意味している。ここではDXRubyで定義されている色定数C_BLUE(青)にしているけれど、他にC_WHITE(白)、C_BLACK(黒)、C_RED(赤)などよく使われる色が定義されているよ。定義されていない色は自分でつくることもできるんだ。

 6行目のcaptionは、ウィンドウの上にあるタイトルバーの表示を意味している。文字には日本語も使えるよ。また、2回目で学んだ式展開を使うこともできるので、興味がある人は試してみてね。

 プログラム「screen2.rb」を実行すると以下のようなウィンドウが表示されることを確認しよう。このウィンドウが表示されている間はコマンドプロンプトへのキー入力は受け付けない。終了する場合は、今のところウィンドウ枠の、右上隅の「×」アイコンをクリックしてね。

screen2.rb実行結果

 さあ、図形を描画するウインドウの設定ができたよ。次は、実際にこのウインドウの中に図形を描画していこう。

2.2 直線、四角形、円を描いてみよう

 次に、Windowモジュールのメソッドを使った基本的な図形オブジェクトを描画するプログラムを紹介するよ。「オブジェクト」については後の回で詳しく説明するので、今回はとりあえず名前だけ覚えておいてね。

 それでは、「screen2.rb」のプログラムに、さらに次のように変更してくよ。今回は赤い枠で囲んだ部分が変更しているところだ。プログラミングができたら、「zukei1.rb」という名前で保存しよう。

zukei1.rbコード
zukei1.rb

 それぞれのメソッドの書式と引数の意味について説明しよう。

 ここで、図形を配置するためにどこの位置にあるのか、ということを(x , y)の2つの数字で表現していて、これを「座標
ざひょう
」というよ。ただし、学校で習う座標ではx
じく
、y軸の交点を(0, 0)とし、右上に向かってx軸、y軸の座標の値が大きくなるけれど、DXRubyなどのグラフィックライブラリーでは、タイトルバーの下にある枠内の左上
すみ
を(0, 0 )としている。そのため右下に向かって座標の値が大きくなり、右下隅の座標を(Window.width, Window.height)と表現しているので、注意が必要だ。

DXRubyでの座標の考え方
DXRubyでの座標の考え方

 Windowオブジェクトでは、引数
ひきすう
の中で直接座標を指定しているよ。今回のプログラムで説明していこう。

 9行目は、直線を描いている。draw_line(x1, y1, x2, y2, color)というコードだけど、ここで(x1, y1)は始まりの座標、(x2, y2)は終わりの座標、colorは色を表している。

 10、11行目は、四角形を描いている。draw_box(x1, y1, x2, y2, color)というコードで、これは(x1, y1)は左上隅の座標、(x2, y2) は右下隅の座標のことだ。

 12、13行目は、円を描いている。draw_circle(x, y, r, color)というコードで、(x, y) は円の中心座標、r は円の半径のことだ。
 さらに、11行目、13行目では、四角形と円のメソッドには_fill のついたメソッドがあって、内部を指定色で
りつぶしているよ。

 実際にプログラム(zukei1.rb)実行して、以下のように表示されていれば成功だ。

zukei1.rb実行結果

2.3 三角形を描こう

 直線、四角形、円を描いてみたけど、Windowモジュールには三角形を描くためのメソッドがないんだ(自分でつくることはできる)。 そこで、DXRubyのImage クラスにあるメソッドを使って三角形を描いてみよう。

 「zukei1.rb」のプログラムを、以下のように変更していこう。プログラムが完成したら、「zukei2.rb」という名前で保存してね。

zukei2.rbコード

 

 それでは、プログラムに追加した部分について説明しよう。まず、7行目、8行目で使っているtriangleメソッド、これはImageクラスに準備されていて、triangle(x1, y1, x2, y2, x3, y3, color)というコードで、 (x1, y1)、(x2, y2)、(x3, y3) の3点を定めて、それらを結ぶ三角形を形作っている。
 triとtri_fill はImageオブジェクトの変数で、まずImage.new (幅, 高さ)でオブジェクトの領域
りょういき
(ここでは三角形を描画する場所)を確保
かくほ
する。その後に続くtriangle メソッドでその領域に対する座標で三角形がつくられる。_fill は内部を指定色で塗りつぶすメソッドだよ。

 10行目のWindow.loop から、endの中で、定義した三角形を描いている。そこで指定している座標は、Image オブジェクトの左上隅の座標を指定しているんだ。
 つまり12行目で、三角形のオブジェクトの、左上隅の座標ががウインドウの(0,0)となるように指定しているよ。

 それでは、実際にプログラム「zukei2.rb」を実行してみよう。

zukei2.rb実行結果

 7行目では、200×200の大きさ(赤い枠)の中に、三角形を描くというオブジェクトを定義して、12行目で、そのオブジェクトを(0,0)から描いている。それが実行された結果が左上の三角形だ(実際の実行画面には赤い枠は表示されない)。

 同じように、8行目では、200×200の大きさの中に、塗りつぶされた三角形を描くというオブジェクトを定義して、12行目で、そのオブジェクトを(250,250)から描いている。それが実行された結果が下にある緑の三角形だ。

 二段階の指定でめんどうだなと思うかもしれないけど、同じようなオブジェクトをいくつも描いたり、つくる場合などにとても有効な方法なので覚えておいてね。

 次回は、ペイントなどの他のアプリケーションで描いた絵や、読み込んできた画像をRubyのプログラムで描画する方法を紹介していくよ。自分の好きな画像や、絵を準備しておいてね。

株式会社まちづくり三鷹 著者の記事一覧

1999年9月、三鷹市の第三セクターとして創立。2008年よりプログラミング教育に関連した事業を展開する中、中高生向けテキスト(『オブジェクト指向言語「Rubyプログラミング入門」』)と小学生向けテキスト(『小学生から楽しむRubyプログラミング』(日経BP社))を自社開発し、累計10,000冊以上を売り上げている。なお、開発したテキストは、全国の複数の学校や自治体等で多数採用されている。また、小・中・高校生を対象としたRubyプログラミング講座を開催し、今までに1,000人以上の受講生実績がある。 さらに、2011年からは、中高生国際Rubyプログラミングコンテスト実行委員会の構成団体として、コンテストの運営にあたっている。

最新号好評発売中!

子供の科学 2021年 5月号

CTR IMG