DragonRuby: 기본 스프라이트 애니메이션

DragonRuby의 애니메이션 스프라이트는 매우 간단하지만 몇 가지 아이디어를 함께 모아야 합니다.

첫째, 애니메이션의 모든 프레임이 동일한 간격으로 함께 있는 단일 이미지를 갖는 것이 가장 좋습니다. 나는 프레임이 왼쪽에서 오른쪽으로 수평으로 배열되는 것을 선호하므로 여기에서 사용할 것입니다.

다음은 예입니다borrowed from here.



첫 번째 프레임은 다음과 같이 표시될 수 있습니다.

def tick args
  height = 195
  width = 192

  args.outputs.sprites << {
    x: args.grid.center_x - (width / 2),
    y: args.grid.center_y - (height / 2),
    h: height,
    w: width,
    source_x: 0,
    source_y: 0,
    source_w: width,
    source_h: height,
    path: 'sprites/walking.png',
  }
end

source_x 및 source_y는 "타일"또는 기본적으로 이미지 조각의 왼쪽 하단 모서리를 설정합니다. (대신 왼쪽 상단을 사용하려면 tile_x 및 tile_y 를 설정하십시오.) source_w 및 source_h는 타일의 너비와 높이를 설정합니다. 스프라이트는 w 및 h 로 표시될 때 크기를 조정할 수 있습니다.



프레임이 수평으로 배치된 경우 프레임을 변경하기 위해 source_x 값(일반적으로 타일의 너비)을 업데이트하기만 하면 됩니다.

다음은 몇 가지 프레임에 대한 그림입니다.



타일의 너비에 현재 틱을 곱하여 이를 수행할 수 있습니다(모듈로 프레임 수, 따라서 루프).

def tick args
  height = 195
  width = 192
  num_frames = 8

  source_x = width * (args.tick_count % num_frames)

  args.outputs.sprites << {
    x: args.grid.center_x - (width / 2),
    y: args.grid.center_y - (height / 2),
    h: height,
    w: width,
    source_x: source_x,
    source_y: 0,
    source_w: width,
    source_h: height,
    path: 'sprites/walking.png',
  }
end

이것은 효과가 있지만... 걷기에는 조금 빠릅니다!



이것이 DragonRuby가 도와주는 곳입니다. frame_index method은 우리를 위해 현재 프레임을 계산합니다.
frame_index는 다음 인수를 허용합니다.

count : 애니메이션의 총 프레임 수

hold_for : 프레임 사이에 대기할 틱 수

repeat : 루프 여부

frame_index는 모든 정수에서 호출할 수 있지만 일반적으로 애니메이션이 시작된 눈금 번호를 사용합니다. 아래 코드는 이것을 0(첫 번째 틱)로 설정합니다. 대신 입력 또는 기타 항목을 기반으로 이벤트가 발생하는 경우가 될 수 있습니다.

타일의 width에 프레임 인덱스를 곱하면 애니메이션의 현재 프레임에 대한 source_x 값이 됩니다.

def tick args
  height = 195
  width = 192
  num_frames = 8
  start_tick = 0
  delay = 4

  source_x = width * start_tick.frame_index(count: num_frames, hold_for: delay, repeat: true)

  args.outputs.sprites << {
    x: args.grid.center_x - (width / 2),
    y: args.grid.center_y - (height / 2),
    h: height,
    w: width,
    source_x: source_x,
    source_y: 0,
    source_w: width,
    source_h: height,
    path: 'sprites/walking.png',
  }
end

그리고 그게 다야!

그러나 Ruby 클래스를 사용하면

게임이 적당히 복잡해지기 시작하면 행동을 클래스로 정렬하는 것을 좋아합니다. 또한 attr_gtk를 사용하여 args를 전달하지 않고 일부 입력을 절약하는 데 편리합니다(예: args.outputs는 그냥 outputs가 됨).

class MyGame
  attr_gtk

  def initialize(args)
    @my_sprite = MySprite.new(args.grid.center_x, args.grid.center_y)
    args.outputs.static_sprites << @my_sprite
  end

  def tick
    if inputs.mouse.click
      if @my_sprite.running?
        @my_sprite.stop
      else
        @my_sprite.start(args.state.tick_count)
      end
    end

    @my_sprite.update
  end
end

class MySprite
  attr_sprite

  def initialize x, y
    @x = x
    @y = y

    @w = 192
    @h = 195
    @source_x = 0
    @source_y = 0
    @source_w = @w
    @source_h = @h
    @path = 'sprites/walking.png'

    @running = false
  end

  # Set @running to the current tick number
  # this is so the frame_index can use that as the
  # start of the animation timing.
  def start(tick_count)
    @running = tick_count
  end

  def stop
    @running = false
  end

  def running?
    @running
  end

  # Update source_x based on frame_index
  # if currently running
  def update
    if @running
      @source_x = @source_w * @running.frame_index(count: 8, hold_for: 4, repeat: true)
    end
  end
end

def tick args
  $my_game ||= MyGame.new(args)
  $my_game.args = args
  $my_game.tick
end

이 예제는 본질적으로 내 접근 방식을 따르고 논리를 게임 클래스와 스프라이트 클래스로 이동합니다.

마우스를 클릭하면 스프라이트가 움직이기 시작합니다(현재tick_count를 시작 틱으로 사용). 마우스를 다시 클릭하면 스프라이트가 멈춥니다.

소스 대 타일

(애니메이션 또는 기타 용도로) 이미지의 일부만 사용하려면 source_(x|y|h|w) 또는 tile_(x|y|h|w) 두 가지 옵션이 있습니다.

이 옵션은 source_y가 왼쪽 하단이고 tile_y가 왼쪽 상단이라는 점을 제외하면 거의 동일합니다.
source_ 옵션은 DragonRuby 1.6에 추가되었으며 원점이 왼쪽 하단인 나머지 DragonRuby와 더 일치합니다. 반면에 tile_ 옵션은 이미지 편집기와 더 쉽게 정렬됩니다.

어떤 옵션이 중요한지에 따라 작동합니다.

가다!

이제 정말입니다! 움직여 라!