캔버스에서 이미지의 터치 이벤트를 받으십시오.

Question

SurfaceView 오브젝트를 기반으로하는 2D 2D android 게임을 작성 중이므로 canvas에 전체 게임을 그립니다. 나는 png로 공을 설계하고이 방법으로 캔버스에 그리기 :

canvas.drawBitmap(bmp, posX, posY, null); 

지금 내 문제는 내가이 공을 터치 이벤트를 수신 할 수있는 방법을 모른다는 것이다. 내 PNG는 64x64 픽셀이지만 볼은 32x32 픽셀이고 이미지 중간에 있습니다. 공 (32x32)을 터치하고 비트 맵 (64x64)이 아닌 터치 이벤트 만 받기를 원합니다. 어떻게해야합니까? SurfaceView에 OnTouchListener을 등록 할 수 있지만 어떻게 볼 터치를 감지 할 수 있습니까?

다른 문제는 공이 간단한 개체라는 것입니다. 반경이나 다른 것을 통해 설명 할 수없는 불규칙한 물체가 있다면 어떻게 될까요? 캔버스에 대한 컨트롤을 구현하기 위해 png와 함께 올바른 "기술"을 사용하고 있습니까? 아니면 더 나은/더 쉬운 방법이 있습니까?

모든 플랫폼 (JS, Android, iOS)에서 저의 일반적인 문제이며이를 해결하는 가장 좋은 방법은 모르겠습니다. 그래서이 질문에 다른 태그를 사용했습니다. 크로스 플랫폼 솔루션이 없으므로이 문제를 영원히 해결할 수 있습니까?

Answer 1

캔버스에서 비트 맵의 ​​터치 이벤트를 가져올 수 없습니다. 보기에 대한 터치 이벤트가 표시됩니다. 그런 다음 터치의 x, y 좌표를 기반으로 무엇을 만졌는지 결정해야합니다.

복잡한 모양 인 경우 해당 비트 맵 픽셀이 투명한지 확인할 수 있습니다. 그러나 실용적인 목적을 위해 터치가 비트 맵의 ​​중심으로부터 약간 떨어진 거리에 있는지 단순히 확인하는 것만으로 충분할 수 있습니다.

Answer 2

내가 비슷한 게임을하는 데 도움이되는 단지 아이디어. 내가 한 일은 자바 스크립트 캡처 마우스 입력이었다. 그것보다 당신이 원하는 객체의 충돌 탐지를 수행하고, 그것의 위치를 ​​기반으로 테스트를 위해 객체의 너비와 높이를 사용하게하십시오. 따라서 사용자가 캔버스의 아무 곳이나 클릭/터치하면 캔버스의 객체 영역 내에 맞는지 확인해야합니다.

canvas.addEventListener('mousemove', function(evt) { 
    mousePos = getMousePos(canvas, evt); 
    }, false); 

function collides(a, b) { 
      return a.x < b.x + b.width && 
      a.x + a.width > b.x && 
      a.y < b.y + b.height && 
      a.y + a.height > b.y; 
     } 

편집 당신의 원이 논리를 들어

: Circle Collision Detection HTML5 Canvas

"내가이 반경 또는 뭔가 다른을 통해 describeable되지 않는 일부 unregular 객체가 있다면?"

을

개체가 불규칙하고 원이나 상자로 해결할 수없는 충돌 감지에 다른 모양이 필요한 경우 tak 이 질문을보십시오 : Collision detection of irregular shapes 및 뭔가 내가 찾은 here,하지만 둘 다 명확한 해결책으로 보이지 않습니다. 내가 할 수있는 것은 개체에 가장 잘 맞는 원이나 상자를 선택하는 것이지만 개체가 얼마나 불규칙적인지 알 수 없습니다.