読み込み中...

【5ステップで理解！】Rubyでグラフィックプログラミングを始めるための完全ガイド

初心者がRubyでグラフィックプログラミングを始めるためのステップバイステップガイド Ruby
2023.06.20
この記事は約8分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

「プログラミングを始めてみたい。でも、どこから始めたらいいのか分からない…」そんなあなたにおすすめなのがRubyによるグラフィックプログラミングです。

この記事を読むことで、Rubyとグラフィックプログラミングの基本を理解し、最終的には自分だけの小さなプログラムを作るところまでたどり着けるでしょう。

各ステップの説明やサンプルコードと共に進めていきましょう。

●Rubyでグラフィックプログラミングを始める前に

○Rubyとは

Rubyは、シンプルで自然に読み書きができることを目指したプログラミング言語です。

構文が直感的で、学習コストが比較的低いため、プログラミング初心者にとって理想的な言語と言えるでしょう。

また、Webアプリケーションの開発やシステムスクリプティングだけでなく、グラフィックプログラミングにも利用することができます。

○グラフィックプログラミングとは

グラフィックプログラミングとは、コンピュータ上で図形や画像、アニメーションなどを生成・操作するためのプログラミングの一分野です。

これによりゲームの開発やデータの可視化など、視覚的な表現が求められるさまざまな場面で使用されます。

●Rubyの基本的な文法

Rubyを使ったグラフィックプログラミングを始める前に、Rubyの基本的な文法について説明します。

○変数とデータ型

Rubyでは変数に値を代入することでデータを扱います。

# 変数numに数値の3を代入
num = 3

# 変数numの値を出力
puts num

このコードを実行すると、”3″と表示されます。Rubyでは変数名に大文字や小文字、数字、アンダースコア(_)を使用できますが、先頭に数字を置くことはできません。

Rubyにはさまざまなデータ型がありますが、主に利用するのは数値、文字列、配列、ハッシュです。

○制御構文

制御構文とは、プログラムの流れを制御するための文法です。

主な制御構文には「if文」「while文」「for文」があります。

# if文の例
num = 3
if num > 0
  puts "Positive number"
end

このコードでは、numが0より大きければ”Positive number”と表示します。

○関数とメソッド

関数やメソッドは、ある特定の処理をまとめて名前をつけ、必要なときに呼び出すことができる機能です。

Rubyではメソッドと呼ばれます。

# greetというメソッドを定義
def greet
  puts "Hello, Ruby!"
end

# greetメソッドを呼び出し
greet

このコードでは、greetという名前のメソッドを定義し、その中で”Hello, Ruby!”と表示する処理を行っています。

greetという行では、定義したメソッドを呼び出し、結果として”Hello, Ruby!”が表示されます。

メソッドは処理をまとめることでコードの再利用性を高め、プログラムの見通しを良くします。

●Rubyでグラフィックプログラミングを始めよう

それではRubyでグラフィックプログラミングを始めてみましょう。

初めての方でも安心して進められるよう、必要なライブラリの導入から始め、描画の基本までを順に解説します。

○必要なライブラリ

Rubyでグラフィックプログラミングを行うには、「Ruby2D」というライブラリを使用します。

Ruby2Dは2次元のグラフィックやアニメーションを扱うことができるライブラリで、インストールは次のコマンドで行うことができます。

gem install ruby2d

このコマンドを実行するとRuby2Dがインストールされ、Rubyで2次元のグラフィックプログラミングを行う環境が整います。

○描画の基本

Ruby2Dを使用した描画の基本について説明します。

ここでは、画面上に単純な図形を描く方法を示します。

require 'ruby2d'

Rectangle.new(x: 10, y: 20, width: 100, height: 200, color: 'red')

show

このコードでは、まずruby2dライブラリを読み込んでいます。

次に、Rectangle.newで新たな四角形を作成し、その位置と大きさ、色を指定しています。

最後にshowを呼び出すことで、描画した内容が画面に表示されます。

これを実行すると、赤い四角形が画面に表示されます。

●Rubyで作るグラフィックプログラミングのサンプルコード

さて、Rubyでグラフィックプログラミングをするためのサンプルコードを見ていきましょう。

ここでは、基本的な図形の描画から、アニメーションの作成、ユーザー入力の取得、簡単なゲームの作成、3D描画の基本までを順に解説します。

○サンプルコード1：基本的な図形の描画

まずは、RubyとRuby2Dを使って基本的な図形を描画する方法を見てみましょう。

次のコードでは、画面上に円を描くプログラムを紹介しています。

この例では、Circleクラスを用いて新しい円を作り、その位置と半径、色を設定しています。

require 'ruby2d'

Circle.new(x: 50, y: 50, radius: 30, color: 'blue')

show

このコードを実行すると、座標(50,50)の位置に半径30の青い円が描画されます。

○サンプルコード2：アニメーションの作成

次に、アニメーションを作成する方法を解説します。

下記のコードは、画面上で四角形が右へ移動するアニメーションを作成しています。

require 'ruby2d'

sq = Square.new(x: 10, y: 20, size: 25, color: 'yellow')

update do
  sq.x += 2
end

show

このコードでは、まずSquareクラスを使って黄色の四角形を作成し、その後updateブロック内で四角形のx座標を2ずつ増やすことで、右に移動するアニメーションを作成しています。

このコードを実行すると、画面上で四角形が右へ滑らかに移動します。

○サンプルコード3：ユーザー入力の取得

次に、ユーザーのキーボード入力を取得する方法を見てみましょう。

下記のコードは、ユーザーがキーボードの上下左右のキーを押すと、それに対応したメッセージを表示するプログラムを表しています。

require 'ruby2d'

on :key_down do |event|
  case event.key
  when 'up'
    puts '上キーが押されました'
  when 'down'
    puts '下キーが押されました'
  when 'left'
    puts '左キーが押されました'
  when 'right'
    puts '右キーが押されました'
  end
end

show

このコードでは、onメソッドを使用してキーボードのキーが押されたときのイベントを取得し、そのキーが何であるかに応じてメッセージを出力しています。

このコードを実行し、キーボードの上下左右のキーを押すと、対応するメッセージがコンソールに表示されます。

○サンプルコード4：簡単なゲームの作成

Rubyで簡単なゲームを作成する方法も見てみましょう。

下記のコードでは、ユーザーのキー入力によって四角形を動かし、目標に到達させる簡単なゲームを作成しています。

require 'ruby2d'

sq = Square.new(x: 10, y: 20, size: 25, color: 'green')

on :key_down do |event|
  case event.key
  when 'up'
    sq.y -= 10
  when 'down'
    sq.y += 10
  when 'left'
    sq.x -= 10
  when 'right'
    sq.x += 10
  end
end

show

このコードでは、ユーザーがキーボードの上下左右のキーを押すと、それに応じて四角形が上下左右に移動します。

このコードを実行すると、四角形がキーボード入力に応じて動く簡単なゲームをプレイできます。

○サンプルコード5：3D描画の基本

最後に、Rubyで3D描画を行う基本を見てみましょう。

Rubyでは、専用のライブラリを使用することで3D描画を行うことができます。

下記のコードは、ruby3dというライブラリを使用して3Dの立方体を描画する例を示しています。

require 'ruby3d'

scene = Ruby3d::Scene.new

box = Ruby3d::Objects::Box.new(x: 0, y: 0, z: 0, size: 1, color: 'orange')

scene.add(box)

scene.render

このコードでは、まずSceneオブジェクトを作成し、その中にBoxオブジェクトを追加しています。

Boxオブジェクトは位置とサイズ、色を指定して作成します。

最後に、Sceneオブジェクトのrenderメソッドを呼び出すことで、立方体が描画されます。

このコードを実行すると、画面上にオレンジ色の3Dの立方体が描画されます。

まとめ

以上、Rubyでグラフィックプログラミングを始めるための基本的な手順と、具体的なサンプルコードを見てきました。

基本的な図形の描画から、アニメーションの作成、ユーザー入力の取得、簡単なゲームの作成、3D描画の基本までを順に学ぶことで、Rubyでのグラフィックプログラミングに必要な知識を習得できます。

今後も、このガイドを参照しながら、自分だけのグラフィックプログラムを作成してみてください。