More than 3 years have passed since last update.

DXRuby：「当たり判定」を自分で作ってみよう　C. 色で判定する

Last updated at 2020-02-25Posted at 2020-02-18

概要

この記事は中学高校生向けプログラミング教室の教材として作ったものを一部改変したものです。

今回の記事は、
・DXRuby：「当たり判定」を自分で作ってみよう - Qiita

● 当たり（衝突）判定の方法
A. 四角形の四隅の座標で判定する
 B. 円の中心からの距離で判定する
C. 色で判定する

の内の
C. 色で判定する
になります。

前の記事
・DXRuby：「当たり判定」を自分で作ってみよう　B. 円の中心からの距離で判定する - Qiita

次の記事
・プログラミングの基礎力をつける：なるべく基本命令だけで作る「ブロック崩し」 on DXRuby - Qiita

技術解説

使用ライブラリ
参考サイトについては、上記記事を参照してください。

ソースコード

ライセンス

ソースコード、本解説ともにパブリックドメイン

プログラム解説

C. 色で判定する

→ 「ブロック崩し」追加課題 1c)；衝突判定の自作（色） - noanoa 日々の日記
http://blog.livedoor.jp/noanoa07/archives/2052899.html

C-1a. `===`を使った準備：判定相手が単独（atari_iro1.rb）

DXRubyのスプライトでは、===を使うと、衝突の有/無でtrue/fasleを返します。

ball（小さい正方形）が、block（大きい長方形）と衝突しているかを===で判定します。
衝突/非衝突の結果をターミナル（コマンドプロンプト）にtrue/falseで出力しつつ、blockの色も赤/白にします。
また、ウィンドウに衝突時はhit!の文字列を表示します。

atari_iro1.rb

require 'dxruby'

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball  = Sprite.new(300, 400, image0)
block = Sprite.new(200, 200, image1)

font = Font.new(32)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  ball.draw

  result = (ball === block)
  p result

  if result
    Window.draw_font(0, 0, "hit!", font)
    block.image = image2
  else
    block.image = image1
  end

  block.draw
end

C-1b. `atari_sprite?`を自作：判定相手が単独（atari_iro2.rb）

atari_sprite?(jibun, aite)を作って、衝突の有/無でtrue/fasleを返すようにします。

DXRubyでは、座標(x, y)の色を取得する方法は、イメージ[x, y]しかありませんので、これを使うことにします。これを使えば、

イメージ[x, y] == C_DEFAULT で座標(x,y)が透明かどうかを比較できます。

手順としては、まず、表示するウィンドウと同じサイズの透明な衝突判定用のイメージ$screenを用意します。（$でグローバル変数にしています。）$screen[x, y]で座標(x,y)の色を取得して、色がある/透明を衝突している/していないの判定に使います。

この部分をatari?(x,y)として作ってみます。

$screen = Image.new(640, 480)

def atari?(x, y)
  if $screen[x,y] == C_DEFAULT   # 位置(x,y)が透明かどうかで衝突判定
    return false
  end
  true
end

これだけだと、点(x, y)しか判定できないので、スプライト画像を判定できるようにatari_sprite?(jibun, aite)を作ります。

これにはDXRubyのイメージ.draw(x, y, コピーしたいイメージ画像)を使います。これで、あるイメージの上に別のイメージ画像をコピーできます。

def atari_sprite?(jibun, aite)
  x0  = jibun.x
  xx0 = x0 + jibun.image.width

  y0  = jibun.y
  yy0 = y0 + jibun.image.height

  $screen.clear                            # $screenは毎回 clearする
  $screen.draw(aite.x, aite.y, aite.image) # $screenに描画して衝突判定

  atari?(x0,  y0) || atari?(xx0,  y0) ||
  atari?(x0, yy0) || atari?(xx0, yy0)
end

ここで、$screen.clearは、毎回$screenを透明に戻しています。
また、衝突判定は四角形jibunの四隅が透明かどうかで判定しています。

atari?(x0,  y0) || atari?(xx0,  y0) ||
atari?(x0, yy0) || atari?(xx0, yy0)

そして、実際の画面の描画では、この$screenは使わず、普通にウィンドウにスプライト.draw、Window.draw_fontを使います。

それでは、自作したatari_sprite?を使って、===を使ったコードを書き換えてみます。

→ DXRubyリファレンス：API INDEX；class Image　：[]，draw，clear
http://mirichi.github.io/dxruby-doc/api/Image.html

→ DXRubyリファレンス：API INDEX；class Sprite　：image，draw
http://mirichi.github.io/dxruby-doc/api/Sprite.html

→ Re: 描画処理の改善法 - DXRuby 掲示板 322 mirichi（2015/05/31 11:49）
http://dxruby.osdn.jp/bbs_/

atari_iro2.rb

require 'dxruby'

$screen = Image.new(640, 480)

def atari?(x, y)
  if $screen[x,y] == C_DEFAULT   # 位置(x,y)が透明かどうかで衝突判定
    return false
  end
  true
end

def atari_sprite?(jibun, aite)
  x0  = jibun.x
  xx0 = x0 + jibun.image.width

  y0  = jibun.y
  yy0 = y0 + jibun.image.height

  $screen.clear                            # $screenは毎回 clearする
  $screen.draw(aite.x, aite.y, aite.image) # $screenに描画して衝突判定

  atari?(x0,  y0) || atari?(xx0,  y0) ||
  atari?(x0, yy0) || atari?(xx0, yy0)
end

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball  = Sprite.new(300, 400, image0)
block = Sprite.new(200, 200, image1)

font = Font.new(32)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  ball.draw

  result = atari_sprite?(ball, block)
  p result

  if result
    Window.draw_font(0, 0, "hit!", font)
    block.image = image2
  else
    block.image = image1
  end

  block.draw
end

C-2a. `===`を使った準備:判定相手が配列（atari_iro3.rb）

DXRubyのスプライトでは、===は、相手がスプライトの配列でも、衝突の有/無でtrue/fasleを返します。

ballが、スプライトの配列blocksと衝突しているかを===で判定します。
blocksのいずれかと衝突していたら、ターミナル（コマンドプロンプト）にtrueで出力し、それ以外はfalseを出力します。
また、ウィンドウに衝突時はhit!の文字列を表示します。

atari_iro3.rb

require 'dxruby'

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball   = Sprite.new(300, 400, image0)

block1 = Sprite.new( 10, 200, image1)
block2 = Sprite.new(250, 200, image1)

blocks = [block1, block2]

font = Font.new(32)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  ball.draw

  result = (ball === blocks)
  p result

  if result
    Window.draw_font(0, 0, "hit!", font)
  end

  Sprite.draw(blocks)
end

C-2b. `atari_array?`を自作:判定相手が配列（atari_iro4.rb）

===の代わりに、atari_array?(jibun, array)を自作します。
判定相手の配列の要素を一つずつatari_sprite?で判定していきます。

自作したatari_array?を使って、コードを書き換えます。

atari_iro4.rb

require 'dxruby'

$screen = Image.new(640, 480)

def atari?(x, y)
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

def atari_sprite?(jibun, aite)
  x0  = jibun.x
  xx0 = x0 + jibun.image.width

  y0  = jibun.y
  yy0 = y0 + jibun.image.height

  $screen.clear
  $screen.draw(aite.x, aite.y, aite.image)

  atari?(x0,  y0) || atari?(xx0,  y0) ||
  atari?(x0, yy0) || atari?(xx0, yy0)
end

def atari_array?(jibun, array)
  array.each do |aite|
    return true if atari_sprite?(jibun, aite)
  end
  false
end

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball   = Sprite.new(300, 400, image0)

block1 = Sprite.new( 10, 200, image1)
block2 = Sprite.new(250, 200, image1)

blocks = [block1, block2]

font = Font.new(32)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  ball.draw

  result = atari_array?(ball, blocks)
  p result

  if result
    Window.draw_font(0, 0, "hit!", font)
  end

  Sprite.draw(blocks)
end

C-3a. `check`を使った準備（atari_iro5.rb）

DXRubyの===や、自作したatari_array?では、どの相手に衝突したかは分かりませんでした。

一方、DXRubyのスプライトではcheckを使うと、衝突している相手すべてを配列に入れて返します。（衝突していない時は、何も入ってない配列を返す）

この配列をarrayとすると、0番目のarray.first（array[0]でも同じ）が最初に衝突した相手です。また、array.firstに何か入っていれば衝突している、空（nil）ならば衝突していないという、当たり判定にも使えます。

→ DXRubyリファレンス：Spriteを使うためのチュートリアル；衝突したオブジェクトを取得する
http://mirichi.github.io/dxruby-doc/tutorial/sprite.html

→ DXRubyリファレンス：API INDEX；Sprite；check
http://mirichi.github.io/dxruby-doc/api/Sprite_23check.html

プログラムでは、ballがblocksのどれに最初に衝突しているかを check.firstで判定します。
最初に衝突しているブロックをターミナル（コマンドプロンプト）に出力し、そのブロックを赤色にします。それ以外はnilを出力します。
また、ウィンドウに衝突時はhit!の文字列を表示します。

atari_iro5.rb

require 'dxruby'

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball   = Sprite.new(300, 400, image0)

block1 = Sprite.new( 10, 200, image1)
block2 = Sprite.new(250, 200, image1)

blocks = [block1, block2]

font = Font.new(32)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  ball.draw

  col = ball.check(blocks).first
  p col

  if col
    Window.draw_font(0, 0, "hit!", font)
    col.image = image2
    Sprite.draw(blocks)
    col.image = image1
  else
    Sprite.draw(blocks)
  end
end

C-3b. `atari_array`を自作（atari_iro6.rb）

ぶつかった相手は最初のものだけ分かればよいので、DXRubyのcheck.first相当のatari_arrayを自作します。

つまり、atari_arrayは、衝突していないとnilを返し、衝突すると "ぶつかった最初のもの" を返します。

方法は、判定相手の配列の要素を一つずつatari?で判定していき、最初に衝突している要素を返します。

自作したatari_arrayを使って、コードを書き換えます。

atari_iro6.rb

require 'dxruby'

$screen = Image.new(640, 480)

def atari?(x, y)
  if $screen[x,y] == C_DEFAULT
    return false
  end
  true
end

def atari_sprite?(jibun, aite)
  x0  = jibun.x
  xx0 = x0 + jibun.image.width

  y0  = jibun.y
  yy0 = y0 + jibun.image.height

  $screen.clear
  $screen.draw(aite.x, aite.y, aite.image)

  atari?(x0,  y0) || atari?(xx0,  y0) ||
  atari?(x0, yy0) || atari?(xx0, yy0)
end

def atari_array(jibun, array)
  array.each do |aite|
    return aite if atari_sprite?(jibun, aite)
  end
  nil
end

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball   = Sprite.new(300, 400, image0)

block1 = Sprite.new( 10, 200, image1)
block2 = Sprite.new(250, 200, image1)

blocks = [block1, block2]

font = Font.new(32)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  ball.draw

  col = atari_array(ball, blocks)
  p col

  if col
    Window.draw_font(0, 0, "hit!", font)
    col.image = image2
    Sprite.draw(blocks)
    col.image = image1
  else
    Sprite.draw(blocks)
  end
end

C-4. 自作の当たり判定（色）を`Spriteクラスのメソッド`にする（atari_iro7.rb）

元の===とcheckは、Spriteクラスのメソッド（命令）なので、書き方としては、ball.check(blocks)のようになります。

自作のatari_arrayも同じような書き方になるように、Spriteクラスのメソッドにしてみます。

クラスやメソッドについての説明はここでは説明を省きますので、詳しくはRubyのテキストを見てください。

クラスメソッドを追加する方法は簡単で、以下のようにします。

class Sprite
  def 追加したいメソッド
    #追加したいメソッドの内容
  end
end

Spriteクラスにatari?とatari_array追加します。

ちなみに、jibun（自分）に相当するものは、selfと書きます。

class Sprite
  def atari?(x, y)
    if $screen[x,y] == C_DEFAULT
      return false
    end
    true
  end

  def atari_sprite?(aite)
    x0  = self.x
    xx0 = x0 + self.image.width

    y0  = self.y
    yy0 = y0 + self.image.height

    $screen.clear
    $screen.draw(aite.x, aite.y, aite.image)

    atari?(x0,  y0) || atari?(xx0,  y0) ||
    atari?(x0, yy0) || atari?(xx0, yy0)
  end

  def atari_array(array)
    array.each do |aite|
      return aite if atari_sprite?(aite)
    end
    nil
  end
end

これで、クラスメソッドになったので、今までのatari_array(ball, blocks)という書き方ではなく、ball.atari_array(blocks)というように書くことができるようになりました。

atari_iro7.rb

require 'dxruby'

$screen = Image.new(640, 480)

class Sprite
    def atari?(x, y)
      if $screen[x,y] == C_DEFAULT
        return false
      end
      true
    end

    def atari_sprite?(aite)
      x0  = self.x
      xx0 = x0 + self.image.width

      y0  = self.y
      yy0 = y0 + self.image.height

      $screen.clear
      $screen.draw(aite.x, aite.y, aite.image)

      atari?(x0,  y0) || atari?(xx0,  y0) ||
      atari?(x0, yy0) || atari?(xx0, yy0)
    end

    def atari_array(array)
      array.each do |aite|
        return aite if atari_sprite?(aite)
      end
      nil
    end
end

image0 = Image.new( 50,  50, C_WHITE)
image1 = Image.new(200, 100, C_WHITE)
image2 = Image.new(200, 100, C_RED)

ball   = Sprite.new(300, 400, image0)

block1 = Sprite.new( 10, 200, image1)
block2 = Sprite.new(250, 200, image1)

blocks = [block1, block2]

font = Font.new(32)

Window.loop do
  ball.x = Input.mouse_pos_x
  ball.y = Input.mouse_pos_y

  ball.draw

  col = ball.atari_array(blocks)
  p col

  if col
    Window.draw_font(0, 0, "hit!", font)
    col.image = image2
    Sprite.draw(blocks)
    col.image = image1
  else
    Sprite.draw(blocks)
  end
end

C-5. 自作の当たり判定（色）を使ったブロック崩し（atari_iro8.rb）

「ブロック崩し」のプログラムblock28.rbを、自作のatari_arrayに書き換えてみましょう。

元の===とcheck.firstを同じ動きをしているのがわかると思います。

atari_iro8.rb

require 'dxruby'

$screen = Image.new(640, 480)

class Sprite
    def atari?(x, y)
      if $screen[x,y] == C_DEFAULT
        return false
      end
      true
    end

    def atari_sprite?(aite)
      x0  = self.x
      xx0 = x0 + self.image.width

      y0  = self.y
      yy0 = y0 + self.image.height

      $screen.clear
      $screen.draw(aite.x, aite.y, aite.image)

      atari?(x0,  y0) || atari?(xx0,  y0) ||
      atari?(x0, yy0) || atari?(xx0, yy0)
    end

    def atari_array(array)
      array.each do |aite|
        return aite if atari_sprite?(aite)
      end
      nil
    end
end

img_bar   = Image.new(100,  20, C_WHITE)
img_hwall = Image.new( 20, 480, C_BLUE)
img_vwall = Image.new(640,  20, C_BLUE)
img_ball  = Image.new( 20,  20).circle_fill(10, 10, 10, C_RED)
img_block = Image.new( 58,  18, C_GREEN)
img_block_y = Image.new( 58,  18, C_YELLOW)

bar   = Sprite.new(  0, 460, img_bar)
lwall = Sprite.new(  0,   0, img_hwall)
rwall = Sprite.new(620,   0, img_hwall)
twall = Sprite.new(  0,   0, img_vwall)

walls = [bar, lwall, rwall, twall]

ball  =  Sprite.new(300, 400, img_ball)
dx =  2
dy = -2

def move(sprite, speed_x, speed_y)
  sprite.x += speed_x
  sprite.y += speed_y
end

blocks = []
10.times do |x|
  5.times do |y|
    blocks << Sprite.new(21 + 60 * x, 21 + 20 * y, img_block)
  end
end


Window.loop do
  bar.x = Input.mouse_pos_x
  Sprite.draw(walls)

  move(ball, dx, 0)
  if ball.atari_array(walls)
    ball.x -= dx
    dx = -dx
  end
  coll_x = ball.atari_array(blocks)
  if coll_x
    coll_x.image = img_block_y
    coll_x.draw     #一瞬色が変わって表示
    coll_x.vanish   #消える
    ball.x -= dx
    dx = -dx
  end

  move(ball, 0, dy)
  if ball.atari_array(walls)
    ball. y -= dy
    dy = -dy
  end
  coll_y = ball.atari_array(blocks)
  if coll_y
    coll_y.image = img_block_y
    coll_y.draw     #一瞬色が変わって表示
    coll_y.vanish   #消える
    ball. y -= dy
    dy = -dy
  end

  ball.draw

  Sprite.draw(blocks)
end

参考

プログラミング初心者向け：DXRubyで 1ステップずつ作っていく「ブロック崩し」 - Qiita
で作った「ブロック崩し」のプログラムです。

block28.rb

require 'dxruby'

img_bar   = Image.new(100,  20, C_WHITE)
img_hwall = Image.new( 20, 480, C_BLUE)
img_vwall = Image.new(640,  20, C_BLUE)
img_ball  = Image.new( 20,  20).circle_fill(10, 10, 10, C_RED)
img_block = Image.new( 58,  18, C_GREEN)
img_block_y = Image.new( 58,  18, C_YELLOW)

bar   = Sprite.new(  0, 460, img_bar)
lwall = Sprite.new(  0,   0, img_hwall)
rwall = Sprite.new(620,   0, img_hwall)
twall = Sprite.new(  0,   0, img_vwall)

walls = [bar, lwall, rwall, twall]

ball  =  Sprite.new(300, 400, img_ball)
dx =  2
dy = -2

def move(sprite, speed_x, speed_y)
  sprite.x += speed_x
  sprite.y += speed_y
end

blocks = []
10.times do |x|
  5.times do |y|
    blocks << Sprite.new(21 + 60 * x, 21 + 20 * y, img_block)
  end
end


Window.loop do
  bar.x = Input.mouse_pos_x
  Sprite.draw(walls)

  move(ball, dx, 0)
  if ball === walls
    ball.x -= dx
    dx = -dx
  end
  coll_x = ball.check(blocks)
  if coll_x[0]
    coll_x[0].image = img_block_y
    coll_x[0].draw     #一瞬色が変わって表示
    coll_x[0].vanish   #消える
    ball.x -= dx
    dx = -dx
  end

  move(ball, 0, dy)
  if ball === walls
    ball. y -= dy
    dy = -dy
  end
  coll_y = ball.check(blocks)
  if coll_y[0]
    coll_y[0].image = img_block_y
    coll_y[0].draw     #一瞬色が変わって表示
    coll_y[0].vanish   #消える
    ball. y -= dy
    dy = -dy
  end

  ball.draw

  Sprite.draw(blocks)
end

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

DXRuby：「当たり判定」を自分で作ってみよう C. 色で判定する

概要

技術解説

ソースコード

ライセンス

プログラム解説

C. 色で判定する

C-1a. ===を使った準備：判定相手が単独（atari_iro1.rb）

C-1b. atari_sprite?を自作：判定相手が単独（atari_iro2.rb）

C-2a. ===を使った準備:判定相手が配列（atari_iro3.rb）

C-2b. atari_array?を自作:判定相手が配列（atari_iro4.rb）

C-3a. checkを使った準備（atari_iro5.rb）

C-3b. atari_arrayを自作（atari_iro6.rb）

C-4. 自作の当たり判定（色）をSpriteクラスのメソッドにする（atari_iro7.rb）