読み込み中...

Rubyで始める!アニメ作成の基本10ステップ

Rubyを使ったアニメ作成の初歩から応用までを学ぶ記事のサムネイル Ruby
2023.06.24
この記事は約19分で読めます。

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

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

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

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

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

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

はじめに

皆さんこんにちは。

今日はプログラミング言語Rubyを用いて、アニメ作成の基本を学んでいきます。

この記事を通して、初心者でもRubyの基本を学び、簡単なアニメーションを作成することができます。

それでは一緒に学んでいきましょう！

●Rubyとは

Rubyは、まつもとゆきひろさんによって開発された、オブジェクト指向のプログラミング言語です。

Rubyは人間中心の設計思想を持ち、プログラムを書きやすく、読みやすいという特徴を持っています。

また、その力強さと高い生産性から、Web開発を中心に広く利用されています。

○Rubyの基本

Rubyは動的な型付けを行い、変数の宣言時に型を指定する必要がありません。

それぞれのデータ型には、固有のメソッドが存在し、データ操作が容易になります。

また、オブジェクト指向言語であるため、クラスとインスタンスを作成して、コードの再利用性を高めることができます。

○Rubyの環境構築

Rubyの開発環境を構築するには、Rubyのインストールが必要です。

公式ウェブサイトから最新の安定版をダウンロードし、手順に従ってインストールします。

また、開発にはテキストエディタが必要となります。自由に選択できますが、初心者にはVisual Studio Codeを推奨します。

なお、Rubyのバージョン管理にはrbenvを使用します。

●Rubyでのアニメ作成の基本

Rubyでアニメを作るためには、基本的にはGosuというゲーム開発ライブラリを使用します。

GosuはRubyで簡単に2Dゲームやアニメーションを作ることができます。

今回はこのGosuを使って、基本的なアニメーションを作成していきましょう。

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

このコードでは、Gosuを使って最初のアニメーションを作成するコードを紹介します。

この例では、ウィンドウを作成し、その中に青い背景を表示しています。

require 'gosu'

class GameWindow < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "My First Animation"
    @background_color = Gosu::Color::BLUE
  end

  def draw


    draw_quad(0, 0, @background_color,
              640, 0, @background_color,
              640, 480, @background_color,
              0, 480, @background_color)
  end
end

window = GameWindow.new
window.show

上記のコードを実行すると、サイズが640×480のウィンドウが表示され、その背景色が青になります。

このように、Gosuを使って簡単にウィンドウを作成し、色を設定することができます。

これがアニメーション作成の第一歩です。

○サンプルコード2：アニメーションのカスタマイズ

次に、アニメーションに動きをつけてみましょう。

ここでは、矩形がウィンドウ上を左から右へと動くアニメーションを作成します。

require 'gosu'

class GameWindow < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "My First Animation"
    @background_color = Gosu::Color::BLUE
    @rectangle_color = Gosu::Color::RED
    @rectangle_x = 0
  end

  def update
    @rectangle_x += 2
    @rectangle_x = 0 if @rectangle_x > 640
  end

  def draw
    draw_quad(0, 0, @background_color,
              640, 0, @background_color,
              640, 480, @background_color,
              0, 480, @background_color)
    draw_quad(@rectangle_x, 200, @rectangle_color,
              @rectangle_x + 50, 200, @rectangle_color,
              @rectangle_x + 50, 250, @rectangle_color,
              @rectangle_x, 250, @rectangle_color)
  end
end

window = GameWindow.new
window.show

上記のコードを実行すると、青い背景の上を赤い矩形が左から右へと動きます。

これは、updateメソッドで矩形のx座標を増加させることによって実現しています。

また、x座標がウィンドウの幅を超えた場合、再び0に戻るようにしています。

これにより、矩形はウィンドウ上を無限に動き続けます。

●Rubyでのアニメ作成の応用

Rubyの基本的なアニメ作成の方法を学びましたが、もっと複雑なアニメーションを作成するためのテクニックもあります。

具体的なコードとその解説を通して、より深く学んでいきましょう。

○サンプルコード3：複雑なアニメーション作成

前回の例では、画面上を左から右に移動する一つのオブジェクトを作成しました。

しかし、もっと複雑な動きを持つアニメーションを作ることも可能です。

今回は、画面上を跳ね回るボールを作成するコードを紹介します。

require 'gosu'

class GameWindow < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Bouncing Ball"
    @background_color = Gosu::Color::WHITE
    @ball_color = Gosu::Color::GREEN
    @ball_x = 320
    @ball_y = 240
    @velocity_x = 2
    @velocity_y = 2
  end

  def update
    @ball_x += @velocity_x
    @ball_y += @velocity_y
    if @ball_x < 0 || @ball_x > 620
      @velocity_x *= -1
    end
    if @ball_y < 0 || @ball_y > 460
      @velocity_y *= -1
    end
  end

  def draw
    draw_quad(0, 0, @background_color,
              640, 0, @background_color,
              640, 480, @background_color,
              0, 480, @background_color)
    draw_quad(@ball_x, @ball_y, @ball_color,
              @ball_x + 20, @ball_y, @ball_color,
              @ball_x + 20, @ball_y + 20, @ball_color,
              @ball_x, @ball_y + 20, @ball_color)
  end
end

window = GameWindow.new
window.show

このコードでは、ボールがウィンドウの境界に達すると反射する動きを作成しています。

ボールの位置は@ball_xと@ball_yで、その速度は@velocity_xと@velocity_yで制御しています。

updateメソッド内でボールの位置を速度分だけ移動させ、ボールがウィンドウの境界を越えた場合は速度の符号を反転させています。

これにより、ボールはウィンドウ内を跳ね回る動きをします。

○サンプルコード4：条件分岐を使ったアニメーション

アニメーションは条件分岐を用いて、より複雑な動きを作り出すこともできます。

次に、時間経過によって色が変わるアニメーションを作成するコードを紹介します。

require 'gosu'

class GameWindow < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Color Changing Animation"
    @background_color = Gosu::Color::WHITE
    @rectangle_color = Gosu::Color::RED
    @rectangle_x = 0
    @time = 0
  end

  def update
    @rectangle_x += 2
    @rectangle_x = 0 if @rectangle_x > 640
    @time += 1
    if @time % 60 < 20
      @rectangle_color = Gosu::Color::RED
    elsif @time % 60 < 40
      @rectangle_color = Gosu::Color::GREEN
    else
      @rectangle_color = Gosu::Color::BLUE
    end
  end

  def draw
    draw_quad(0, 0, @background_color,
              640, 0, @background_color,
              640, 480, @background_color,
              0, 480, @background_color)
    draw_quad(@rectangle_x, 200, @rectangle_color,
              @rectangle_x + 50, 200, @rectangle_color,
              @rectangle_x + 50, 250, @rectangle_color,
              @rectangle_x, 250, @rectangle_color)
  end
end

window = GameWindow.new
window.show

このコードでは、毎フレーム時間変数@timeを1ずつ増加させ、その値に応じて矩形の色を変更しています。

時間が20の倍数から40未満のときは赤、40の倍数から60未満のときは緑、それ以外のときは青に変更しています。

これにより、矩形は定期的に色を変える動きをします。

●アニメ作成でのエラーとその対処法

アニメ作成中にエラーが発生することは、プログラミングの世界ではよくあることです。

しかし、エラーメッセージの読み方を理解することで、問題の原因を特定し、解決することができます。

○サンプルコード5：エラーメッセージの読み方と対処法

たとえば、次のコードを実行してみましょう。

require 'gosu'

class GameWindow < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Sample Animation"
    @background_color = Gosu::Color::WHITE
    @rectangle_x = nil
  end

  def update
    @rectangle_x += 2
  end

  def draw
    draw_quad(0, 0, @background_color,
              640, 0, @background_color,
              640, 480, @background_color,
              0, 480, @background_color)
  end
end

window = GameWindow.new
window.show

このコードを実行すると、「no implicit conversion of nil into Integer (TypeError)」というエラーメッセージが表示されます。

これは、「nil」を「Integer」に変換しようとしたが、その方法が明示的に定義されていないというエラーです。

具体的には、@rectangle_xがnilのままであるため、updateメソッド内で@rectangle_x += 2を行おうとしたときにエラーが発生しています。

このエラーを解決するためには、@rectangle_xを初期化する必要があります。

そのためには、@rectangle_x = 0という行をinitializeメソッドに追加します。

この変更を行ったコードは次のようになります。

require 'gosu'

class GameWindow < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Sample Animation"
    @background_color = Gosu::Color::WHITE
    @rectangle_x = 0
  end

  def update
    @rectangle_x += 2
  end

  def draw
    draw_quad(0, 0, @background_color,
              640, 0, @background_color,
              640, 480, @background_color,
              0, 480, @background_color)
  end
end

window = GameWindow.new
window.show

このように、エラーメッセージをよく読み、それが指し示す問題を解決することで、コードの修正が可能となります。

●アニメ作成のカスタマイズ

次に、アニメーションのカスタマイズ方法を詳しく見ていきましょう。

ここでは、アニメーションの速度調整、色彩変更、複数のアニメーションの組み合わせなど、さまざまなカスタマイズを行っていきます。

○サンプルコード6：アニメーションの速度調整

アニメーションの速度を調整することで、視覚的な効果を自由に変更することができます。

下記のサンプルコードでは、@rectangle_x += 2を@rectangle_x += 4に変更することで、アニメーションの速度を2倍に増やしています。

require 'gosu'

class GameWindow < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Sample Animation"
    @background_color = Gosu::Color::WHITE
    @rectangle_x = 0
  end

  def update
    @rectangle_x += 4
  end

  def draw
    draw_quad(0, 0, @background_color,
              640, 0, @background_color,
              640, 480, @background_color,
              0, 480, @background_color)
  end
end

window = GameWindow.new
window.show

この変更により、アニメーションの速度が上昇し、表示されるオブジェクトが画面をより速く移動するようになります。

このように、速度を調整することで、アニメーションの雰囲気や視覚的な印象を自在に変更することができます。

○サンプルコード7：アニメーションの色彩変更

色彩は視覚的な印象を大きく左右します。

Gosuライブラリでは、RGB値を用いて色を指定することができます。

下記のコードでは、@background_color = Gosu::Color::WHITEを@background_color = Gosu::Color.new(255, 255, 0, 0)に変更することで、背景色を赤にしています。

require 'gosu'

class GameWindow < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Sample Animation"
    @background_color = Gosu::Color.new(255, 255, 0, 0)
    @rectangle_x = 0
  end

  def update
    @rectangle_x += 4
  end

  def draw
    draw_quad(0, 0, @background_color,
              640, 0, @background_color,
              640, 480, @background_color,
              0, 480, @background_color)
  end
end

window = GameWindow.new
window.show

このように、色彩を変更することでアニメーションの雰囲気を自在に変更でき、さらに豊かな表現が可能となります。

○サンプルコード8：複数のアニメーションの組み合わせ

1つのアニメーションだけでなく、複数のアニメーションを組み合わせることで、より複雑な動きを表現することもできます。

下記のコードでは、2つのアニメーションを組み合わせて、斜めに移動するアニメーションを作成しています。

require 'gosu'

class GameWindow < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Sample Animation"
    @background_color = Gosu::Color.new(255, 255, 0, 0)
    @rectangle_x = 0
    @rectangle_y = 0
  end

  def update
    @rectangle_x += 4
    @rectangle_y += 2
  end

  def draw
    draw_quad(0, 0, @background_color,
              640, 0, @background_color,
              640, 480, @background_color,
              0, 480, @background_color)
  end
end

window = GameWindow.new
window.show

このコードを実行すると、オブジェクトが画面の右下方向に移動するアニメーションが表示されます。

このように複数のアニメーションを組み合わせることで、更に幅広い表現が可能となります。

○サンプルコード9：ユーザーの入力に応じたアニメーション

アニメーションはユーザーの入力に反応させることもできます。

下記のコードでは、ユーザーがキーボードの右キーを押すとアニメーションの速度が上がるようになっています。

require 'gosu'

class GameWindow < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Sample Animation"
    @background_color = Gosu::Color.new(255, 255, 0, 0)
    @rectangle_x = 0
    @rectangle_y = 0
    @speed = 2
  end

  def update
    @rectangle_x += @speed
    @rectangle_y += @speed / 2
    if button_down?(Gosu::KB_RIGHT)
      @speed += 0.5
    end
  end

  def draw
    draw_quad(0, 0, @background_color,
              640, 0, @background_color,
              640, 480, @background_color,
              0, 480, @background_color)
  end
end

window = GameWindow.new
window.show

これにより、ユーザーが直接アニメーションに影響を与え、インタラクティブな体験を提供することができます。

これはゲーム開発などで特に有用です。

○サンプルコード10：自動生成されるアニメーション

最後に、ランダム性を含んだ自動生成されるアニメーションの作り方について見てみましょう。

下記のコードでは、オブジェクトの初期位置と移動速度がランダムに設定されるため、毎回異なるアニメーションが生成されます。

require 'gosu'

class GameWindow < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Sample Animation"
    @background_color = Gosu::Color.new(255, 255, 0, 0)
    @rectangle_x = rand(640)
    @rectangle_y = rand(480)
    @speed_x = rand(2..6)
    @speed_y = rand(1..3)
  end

  def update
    @rectangle_x += @speed_x
    @rectangle_y += @speed_y
    if button_down?(Gosu::KB_RIGHT)
      @speed_x += 0.5
      @speed_y += 0.25
    end
  end

  def draw
    draw_quad(0, 0, @background_color,
              640, 0, @background_color,
              640, 480, @background_color,
              0, 480, @background_color)
  end
end

window = GameWindow.new
window.show

このコードを実行すると、毎回異なるパターンのアニメーションが表示されます。

このようなランダム性を持つアニメーションは、視覚的な興奮を提供し、ユーザーの関心を引きつけます。

●Rubyでアニメ作成を続けるために

以上のステップを通じて、Rubyを用いて基本的なアニメーションを作成する方法を学びました。

しかし、これはアニメ作成の入門に過ぎません。更なるスキルアップを目指すなら、異なる形状や複雑な動き、音声の追加など、さまざまな要素を組み合わせてみると良いでしょう。

また、アニメーション制作を通じてプログラミングの基本的な概念を深く理解することも大切です。

これらの知識と経験を積み重ねることで、より高度なアニメーション制作に挑戦することが可能となります。

まとめ

この記事では、Rubyを使ってアニメーションを作成する基本的なステップを解説しました。

色彩の変更、複数のアニメーションの組み合わせ、ユーザーの入力に応じたアニメーション、自動生成されるアニメーションなど、さまざまな技法を駆使することで、自分だけのアニメーションを作成することができます。

これらの基本をマスターすれば、Rubyでのアニメーション作成の可能性は無限大です。

これからも続けて学び、さらにスキルアップしていきましょう。