DXOpal로 Undertale과 유사한 화면 만들기(계속2)

DXOpal로 Undertale 같은 화면 만들기 - Qita

DXOpal로 Undertale 같은 화면 만들기(계속)-Qita

세 번째.지난번엔 적 역할이 나왔으니 이번엔 나름의 기회를 갖자.

이미지 준비

Undertale의 전투 화면에서 플레이어가 하트로 변하기 때문에 애정 어린 이미지를 만들었다.이런 맥은 무엇으로 하면 비교적 쉽습니까?이번에는 Libre Office Draw가 만들었습니다('기호 모양'에 하트가 있기 때문에 빨간색을 먼저 넣고 파일→내보내기를 선택합니다.내보낼 때'선택 범위'에서 선택하면 하트만 png으로 만들 수 있습니다.)

유저를 대표하는 클래스 만들기

지난번에 나는'이동하는 것은 반을 선택하라'고 썼다.게이머들도 움직일 수 있으니까 반을 고르세요.에니미반 때처럼 하면 돼.
예시에 따라 변경된 부분만 설명한다.

require 'dxopal'
include DXOpal
# ハートの画像を宣言
Image.register(:player, "images/heart.png")
# ...

# プレイヤーを表すクラス
class Player < Sprite
  def initialize
    x = 300
    y = 300
    super(x, y, Image[:player])
  end
end

Window.load_resources do
  Window.bgcolor = C_BLACK
  enemy = Enemy.new
  # Playerクラスのオブジェクトを作る
  player = Player.new

  # ...

    enemy.update
    enemy.draw
    # プレイヤーを描画する
    player.draw

  # ...

이러면 마음이 나올 텐데...

아, 안 나오네.

그리기 순서 정보

한동안의 사고를 통해 나는 아래의 부분이 좋지 않다는 것을 발견하였다.draw_thick_박스는 처음가 정의한 굵은 테두리를 그리는 방법이지만 바깥쪽의 사각→안쪽을 배경색으로 채우는 동작이기 때문에 모든 게이머가 가득 칠했다.

    player.draw

    draw_thick_box(260, 240, 380, 360, C_WHITE, 4)

따라서 순서를 바꾸면

    draw_thick_box(260, 240, 380, 360, C_WHITE, 4)
    player.draw

마음이 나오다.

이렇게 DXOpal은 기본 실행 순서대로 그려지므로 순서에 유의하십시오.(또 z값으로 그리기 순서 지정하기 방법도 있는데, 이번처럼 간단한 프로그램은 순서만 주의하면 된다)

모바일 유저

다음은 버튼 조작으로 유저를 구동해 봅시다.DXOpal에서는 Input.key_push?(K_LEFT)처럼 키의 상태를 제거할 수 있다.. 그러나 커서 키의 상태는 Input.x,Input.y로 더욱 간단하게 얻을 수 있다.이걸로 보자.

class Player < Sprite
  def initialize
    x = 300
    y = 300
    super(x, y, Image[:player])
  end

  # キー操作に応じて座標を変化させる
  def update
    self.x += Input.x
    self.y += Input.y
  end
end

# ...

    enemy.update
    enemy.draw
    draw_thick_box(260, 240, 380, 360, C_WHITE, 4)
    # キー入力を処理する
    player.update
    player.draw

Player를 시작할 때는 Enemy와 마찬가지로 업데이트를 사용합니다.Input.x 커서 키의 왼쪽은 -1, 오른쪽은 +1을 누르면 좌표에 추가하면 기계가 자동으로 작동한다.

범위를 제한하다

그렇긴 하지만 그뿐이면 화이트라인 밖에도 나타날 수 있으니 추가 검사 범위 처리를 부탁드립니다.먼저 미리 준비하여 유저의 이동 범위를 상수로 설정합니다.플레이어의 이동 범위'와'백선으로 둘러싸인 범위'가 같기 때문에 상수를 사용해 공통화하면 위치를 미세하게 조정하려고 할 때 상수의 값만 바꾸면 되기 때문에 수월해진다.

require 'dxopal'
include DXOpal
Image.register(:player, "images/heart.png")
Image.register(:enemy, "images/computer_typing_hayai.png")
C_ORANGE = [233, 115, 51]
FONT_HP = Font.new(18)
# プレイヤーの移動範囲
PLAYAREA = [260, 240, 380, 360]

# ...

    enemy.update
    enemy.draw
    # 移動範囲を囲むように白線を引く
    draw_thick_box(PLAYAREA[0]-4, PLAYAREA[1]-4, PLAYAREA[2]+4, PLAYAREA[3]+4, C_WHITE, 4)

이렇게 하면 준비할 수 있다.그럼, 이PLAYAREA를 사용하여 유저의 이동 범위를 제한하세요.Player의 업데이트 방법을 수정합니다.

class Player < Sprite
  def initialize
    x = 300
    y = 300
    super(x, y, Image[:player])

    # x, yの最小値と最大値
    @min_x = PLAYAREA[0]
    @max_x = PLAYAREA[2] - self.image.width   # xは「プレイヤー画像の左端」なので、画像の幅を引かないと右端に移動したとき枠に被ってしまう
    @min_y = PLAYAREA[1]
    @max_y = PLAYAREA[3] - self.image.height
  end

  def update
    self.x += Input.x
    self.x = @min_x if self.x < @min_x  # 小さすぎたら@min_xにする
    self.x = @max_x if self.x > @max_x  # 大きすぎたら@max_xにする
    self.y += Input.y
    self.y = @min_y if self.y < @min_y
    self.y = @max_y if self.y > @max_y
  end
end

이런 느낌인가요?그래도 되지만'어떤 범위로 수치를 제한'하려면 루비2.4 추가clamp 방법를 사용하면 간단하게 쓸 수 있다.

  def update
    self.x = (self.x + Input.x).clamp(@min_x, @max_x)
    self.y = (self.y + Input.y).clamp(@min_y, @may_y)
  end

총결산

이번에 본 기기의 디스플레이와 이동을 실현하였다.이렇게 멈춰.

실제 행동하는 곳은 아래에서 볼 수 있다.커서 키로 본체를 이동합니다.

데모

출처

다음이 있다면 적의 공격 모드를 실현하고 완성할 생각입니다.