Gosu Ruby Tutorial - пройдемось по офіційній документації

gem install gosu

Перезаписуємо колбеки підкласу Gosu::Window

require 'gosu'

class Tutorial < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Tutorial Game"
  end
  
  def update
    # ...
  end
  
  def draw
    # ...
  end
end

Tutorial.new.show

ruby demo.rb

Ми побачимо таке вікно (window):

Не треба досконало знати ruby та gosu щоб зрозуміти за що відповідають ці строки:

    super 640, 480
    self.caption = "Tutorial Game"

fullscreen: true

    super 640, 480, fullscreen: true

Огляд Window Main Loop

Падіння продуктивності

Фізика на Основі Дельта-Часу

Дельта час (Delta Time, dt) у розробці комп'ютерних ігор — це проміжок часу між двома послідовними кадрами гри. Він використовується для забезпечення плавного та реалістичного руху та анімації незалежно від швидкості кадрів (FPS).

Використовуємо зображення

require 'gosu'

class Tutorial < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Tutorial Game"
    
    @background_image = Gosu::Image.new("media/space.png", tileable: true)
  end
  
  def update
  end
  
  def draw
    @background_image.draw(0, 0, 0)
  end
end

Tutorial.new.show

Завантажте space.png і переконайтеся, що він знаходиться у media/space.png.

Функції, що пов'язані зі створенням зображень, приймають булевий аргумент "tileable", який контролює, як будуть поводитися краї зображень при їх зміні розміру або обертанні. Спробуйте помітити тонку різницю між цими двома зображеннями, намальованими зі значенням scale_x = scale_y = 10.0:

У функціях, які очікують аргументи (координати або кольори) для чотирьох кутів прямокутника, ви можете передавати параметри або за годинниковою стрілкою, або у формі Z:

@background_image = Gosu::Image.new("media/space.png", tileable: true)

...

def draw
  @background_image.draw(0, 0, 0)
end

• 0 (перший аргумент): X-координата верхнього лівого кута зображення. В даному випадку, це 0, тобто зображення буде намальоване на самому лівому краю вікна.
• 0 (другий аргумент): Y-координата верхнього лівого кута зображення. В даному випадку, це 0, тобто зображення буде намальоване на самому верхньому краю вікна.
• 0 (третій аргумент): Z-координата, яка визначає порядок малювання зображення. Менші значення Z означають, що зображення буде малюватися позаду зображень з більшими значеннями Z. В даному випадку, значення Z рівне 0, тобто зображення буде малюватися на задньому плані, якщо інші зображення мають більші значення Z. Саме те що потрібно для фону - завжди бути позаду. Тож всі інші Z-значення мають бути більшими, щоб відображатись над фоновим зображенням.

Гравець (персонаж) та рухи

class Player
  def initialize
    @image = Gosu::Image.new("media/starfighter.bmp")
    @x = @y = @vel_x = @vel_y = @angle = 0.0
    @score = 0
  end

  def warp(x, y)
    @x, @y = x, y
  end
  
  def turn_left
    @angle -= 4.5
  end
  
  def turn_right
    @angle += 4.5
  end
  
  def accelerate
    @vel_x += Gosu.offset_x(@angle, 0.5)
    @vel_y += Gosu.offset_y(@angle, 0.5)
  end
  
  def move
    @x += @vel_x
    @y += @vel_y
    @x %= 640
    @y %= 480
    
    @vel_x *= 0.95
    @vel_y *= 0.95
  end

  def draw
    @image.draw_rot(@x, @y, 1, @angle)
  end
end

Закиньте starfighter.bmp у теку media

І розглянемо код трохи детальніше.

Player#accelerate і функції offset_x/offset_y

• offset_x(angle, distance) і offset_y(angle, distance) обчислюють горизонтальне і вертикальне зміщення відповідно, подібно до того, як функції cos і sin використовуються в тригонометрії для обчислення координат точок на колі.
• Наприклад, якщо об'єкт рухається під кутом 30° на відстань 100 пікселів, offset_x(30, 100) обчислює зміщення по горизонталі, а offset_y(30, 100) — по вертикалі.

  

• Gosu автоматично замінює колір #ff00ff (яскраво-рожевий) на прозорі пікселі. Це корисно для створення прозорих областей в зображеннях. Особисто я використовую .png файли з прозорістю в своїх міні-іграх.

• @image - це об'єкт класу Gosu::Image, який містить зображення, що ми хочемо намалювати. Його потрібно створити заздалегідь, наприклад, за допомогою Gosu::Image.new("path/to/image.png").
• @x - це координата x, де буде розташований центр зображення на екрані. Координати екрана починаються з лівого верхнього кута (0, 0) і зростають вправо.
• @y - це координата y, де буде розташований центр зображення на екрані. Координати екрана починаються з лівого верхнього кута (0, 0) і зростають вниз.
• 1 - це значення Z-координати або рівень глибини. Чим більше значення Z, тим вище (мається наувазі що цей шар буде над шаром з меншим значенням) об'єкт буде намальований на екрані відносно інших об'єктів. Об'єкти з більшим значенням Z будуть намальовані поверх об'єктів з меншим значенням Z. У цьому випадку значення 1 означає, що зображення буде намальовано поверх об'єктів з Z-координатою меншою, ніж 1.
• @angle - це кут повороту зображення в градусах. Обертання відбувається за годинниковою стрілкою. Наприклад, 0 градусів означає, що зображення не обертається, 90 градусів означає, що зображення обертається на 90 градусів за годинниковою стрілкою, а 180 градусів означає, що зображення обертається на 180 градусів (перевертається догори дном).

require 'gosu'

class Tutorial < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Tutorial Game"
    
    @background_image = Gosu::Image.new("media/space.png", tileable: true)
  end
  
  def update
  end
  
  def draw
    @background_image.draw(0, 0, 0)
  end
end

class Player
  def initialize
    @image = Gosu::Image.new("media/starfighter.bmp")
    @x = @y = @vel_x = @vel_y = @angle = 0.0
    @score = 0
  end

  def warp(x, y)
    @x, @y = x, y
  end
  
  def turn_left
    @angle -= 4.5
  end
  
  def turn_right
    @angle += 4.5
  end
  
  def accelerate
    @vel_x += Gosu.offset_x(@angle, 0.5)
    @vel_y += Gosu.offset_y(@angle, 0.5)
  end
  
  def move
    @x += @vel_x
    @y += @vel_y
    @x %= 640
    @y %= 480
    
    @vel_x *= 0.95
    @vel_y *= 0.95
  end

  def draw
    @image.draw_rot(@x, @y, 1, @angle)
  end
end

Tutorial.new.show

Перейдемо до наступного кроку.

Використання класу Player

class Tutorial < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Tutorial Game"

    @background_image = Gosu::Image.new("media/space.png", tileable: true)

    @player = Player.new
    @player.warp(320, 240)
  end

  def update
    if Gosu.button_down? Gosu::KB_LEFT or Gosu::button_down? Gosu::GP_LEFT
      @player.turn_left
    end
    if Gosu.button_down? Gosu::KB_RIGHT or Gosu::button_down? Gosu::GP_RIGHT
      @player.turn_right
    end
    if Gosu.button_down? Gosu::KB_UP or Gosu::button_down? Gosu::GP_BUTTON_0
      @player.accelerate
    end
    @player.move
  end

  def draw
    @player.draw
    @background_image.draw(0, 0, 0)
  end

  def button_down(id)
    if id == Gosu::KB_ESCAPE
      close
    else
      super
    end
  end
end

Tutorial.new.show

require 'gosu'

class Tutorial < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Tutorial Game"

    @background_image = Gosu::Image.new("media/space.png", tileable: true)

    @player = Player.new
    @player.warp(320, 240)
  end

  def update
    if Gosu.button_down? Gosu::KB_LEFT or Gosu::button_down? Gosu::GP_LEFT
      @player.turn_left
    end
    if Gosu.button_down? Gosu::KB_RIGHT or Gosu::button_down? Gosu::GP_RIGHT
      @player.turn_right
    end
    if Gosu.button_down? Gosu::KB_UP or Gosu::button_down? Gosu::GP_BUTTON_0
      @player.accelerate
    end
    @player.move
  end

  def draw
    @player.draw
    @background_image.draw(0, 0, 0)
  end

  def button_down(id)
    if id == Gosu::KB_ESCAPE
      close
    else
      super
    end
  end
end

class Player
  def initialize
    @image = Gosu::Image.new("media/starfighter.bmp")
    @x = @y = @vel_x = @vel_y = @angle = 0.0
    @score = 0
  end

  def warp(x, y)
    @x, @y = x, y
  end
  
  def turn_left
    @angle -= 4.5
  end
  
  def turn_right
    @angle += 4.5
  end
  
  def accelerate
    @vel_x += Gosu.offset_x(@angle, 0.5)
    @vel_y += Gosu.offset_y(@angle, 0.5)
  end
  
  def move
    @x += @vel_x
    @y += @vel_y
    @x %= 640
    @y %= 480
    
    @vel_x *= 0.95
    @vel_y *= 0.95
  end

  def draw
    @image.draw_rot(@x, @y, 1, @angle)
  end
end

Tutorial.new.show

А коли запускаємо гру - ми отримуємо космічний корабель в центрі екрану якій має фонове зображення (космос). Вікно можна закрити за допомогою кнопки ESC. А космічним кораблем можна керувати за допомогою стрілочок.

Проста анімація

class Star
  attr_reader :x, :y

  def initialize(animation)
    @animation = animation
    @color = Gosu::Color::BLACK.dup
    @color.red = rand(256 - 40) + 40
    @color.green = rand(256 - 40) + 40
    @color.blue = rand(256 - 40) + 40
    @x = rand * 640
    @y = rand * 480
  end

  def draw  
    img = @animation[Gosu.milliseconds / 100 % @animation.size]
    img.draw(@x - img.width / 2.0, @y - img.height / 2.0,
        ZOrder::STARS, 1, 1, @color, :add)
  end
end

• @animation = animation зберігає передану анімацію в змінну екземпляра @animation.
• @color = Gosu::Color::BLACK.dup створює копію чорного кольору.
• Наступні три рядки встановлюють випадковий відтінок червоного, зеленого та синього кольорів для зірки. rand(256 - 40) + 40 генерує випадкове число від 40 до 215 для кожного кольорового компонента, щоб забезпечити досить яскравий колір.
• @x = rand * 640 і @y = rand * 480: задають випадкові координати для зірки на екрані розміром 640x480 пікселів.

• img = @animation[Gosu.milliseconds / 100 % @animation.size] вибирає кадр з анімації зірки на основі поточного часу. Gosu.milliseconds / 100 ділить час на 100 мілісекунд, що дозволяє змінювати кадр кожні 100 мілісекунд. Операція % @animation.size гарантує, що індекс залишається в межах розміру анімації.
• img.draw(@x - img.width / 2.0, @y - img.height / 2.0, ZOrder::STARS, 1, 1, @color, :add) малює обраний кадр анімації. Позиціонує зображення так, щоб його центр був на координатах @x і @y. ZOrder::STARS вказує на шар малювання, який визначає порядок накладання зображень. 1, 1 — це масштабні фактори по горизонталі та вертикалі (без змін). @color встановлює колір зірки, а :add задає режим додавання кольорів, який дозволяє кольорам змішуватися більш яскраво.

class Player
  ...
  def score
    @score
  end

  def collect_stars(stars)
    stars.reject! { |star| Gosu.distance(@x, @y, star.x, star.y) < 35 }
  end
end

...
class Tutorial < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Tutorial Game"

    @background_image = Gosu::Image.new("media/space.png", :tileable => true)

    @player = Player.new
    @player.warp(320, 240)

    @star_anim = Gosu::Image.load_tiles("media/star.png", 25, 25)
    @stars = Array.new
  end

  def update
    ...
    @player.move
    @player.collect_stars(@stars)

    if rand(100) < 4 and @stars.size < 25
      @stars.push(Star.new(@star_anim))
    end
  end

  def draw
    @background_image.draw(0, 0, ZOrder::BACKGROUND)
    @player.draw
    @stars.each { |star| star.draw }
  end
  ...

Закиньте файл star.png до теки media.

Ну наче все. Тепер в грі мають з'являтись анімовані зірочки, а ми можемо їх збирати. Ось GIF-ка:

Далі Gosu туторіал пропонує нам ознайомитись зі звуком та текстом.

Текст та звук

class Tutorial < Gosu::Window
  def initialize
    ...
    @font = Gosu::Font.new(20)
  end

  ...

  def draw
    @background_image.draw(0, 0, ZOrder::BACKGROUND)
    @player.draw
    @stars.each { |star| star.draw }
    @font.draw_text("Score: #{@player.score}", 10, 10, ZOrder::UI, 1.0, 1.0, Gosu::Color::YELLOW)
  end
end

@beep = Gosu::Sample.new("media/beep.wav")
...
@beep.play

class Player
  attr_reader :score

  def initialize
    @image = Gosu::Image.new("media/starfighter.bmp")
    @beep = Gosu::Sample.new("media/beep.wav")
    @x = @y = @vel_x = @vel_y = @angle = 0.0
    @score = 0
  end

  ...

  def collect_stars(stars)
    stars.reject! do |star|
      if Gosu.distance(@x, @y, star.x, star.y) < 35
        @score += 10
        @beep.play
        true
      else
        false
      end
    end
  end
end

Метод collect_stars якраз нараховує бали (Score) та відтворює звук beep з файлу beep.wav -

beep.wav (4,2 кБ)

Якщо хтось заплутався в коді, ось фінальний код, який можна просто скопіювати і запустити:

require 'gosu'

module ZOrder
  BACKGROUND, STARS, PLAYER, UI = *0..3
end

class Tutorial < Gosu::Window
  def initialize
    super 640, 480
    self.caption = "Tutorial Game"

    @background_image = Gosu::Image.new("media/space.png", :tileable => true)

    @player = Player.new
    @player.warp(320, 240)

    @star_anim = Gosu::Image.load_tiles("media/star.png", 25, 25)
    @stars = Array.new
    @font = Gosu::Font.new(20)
  end

  def update
    if Gosu.button_down? Gosu::KB_LEFT or Gosu::button_down? Gosu::GP_LEFT
      @player.turn_left
    end
    if Gosu.button_down? Gosu::KB_RIGHT or Gosu::button_down? Gosu::GP_RIGHT
      @player.turn_right
    end
    if Gosu.button_down? Gosu::KB_UP or Gosu::button_down? Gosu::GP_BUTTON_0
      @player.accelerate
    end
    @player.move
    @player.collect_stars(@stars)

    if rand(100) < 4 and @stars.size < 25
      @stars.push(Star.new(@star_anim))
    end
  end

  def draw
    @background_image.draw(0, 0, ZOrder::BACKGROUND)
    @player.draw
    @stars.each { |star| star.draw }
    @font.draw_text("Score: #{@player.score}", 10, 10, ZOrder::UI, 1.0, 1.0, Gosu::Color::YELLOW)
  end

  def button_down(id)
    if id == Gosu::KB_ESCAPE
      close
    else
      super
    end
  end
end

class Player
  attr_reader :score

  def initialize
    @image = Gosu::Image.new("media/starfighter.bmp")
    @beep = Gosu::Sample.new("media/beep.wav")
    @x = @y = @vel_x = @vel_y = @angle = 0.0
    @score = 0
  end

  def score
    @score
  end

  def collect_stars(stars)
    stars.reject! do |star|
      if Gosu.distance(@x, @y, star.x, star.y) < 35
        @score += 10
        @beep.play
        true
      else
        false
      end
    end
  end

  def warp(x, y)
    @x, @y = x, y
  end
  
  def turn_left
    @angle -= 4.5
  end
  
  def turn_right
    @angle += 4.5
  end
  
  def accelerate
    @vel_x += Gosu.offset_x(@angle, 0.5)
    @vel_y += Gosu.offset_y(@angle, 0.5)
  end
  
  def move
    @x += @vel_x
    @y += @vel_y
    @x %= 640
    @y %= 480
    
    @vel_x *= 0.95
    @vel_y *= 0.95
  end

  def draw
    @image.draw_rot(@x, @y, 1, @angle)
  end
end

class Star
  attr_reader :x, :y

  def initialize(animation)
    @animation = animation
    @color = Gosu::Color::BLACK.dup
    @color.red = rand(256 - 40) + 40
    @color.green = rand(256 - 40) + 40
    @color.blue = rand(256 - 40) + 40
    @x = rand * 640
    @y = rand * 480
  end

  def draw  
    img = @animation[Gosu.milliseconds / 100 % @animation.size]
    img.draw(@x - img.width / 2.0, @y - img.height / 2.0,
        ZOrder::STARS, 1, 1, @color, :add)
  end
end

Tutorial.new.show