안녕하세요. 엔지엠소프트웨어입니다. 오늘 알아볼 내용은~ 많은 분들이 어려워하는 내용인데요. 변수를 사용해서 찾은 이미지의 좌표를 기준으로 다른 위치에 마우스 다운과 업을 발생시키는 방법입니다. 개발자가 아니면 변수라는 이름만봐도 머리가 아파올거예요. 저도 20년전에 처음 개발할 때 그랬으니까요^^; 스크립트 작성이나 프로그램 개발도 계단 형태로 실력이 증가합니다. 아래 표에서 좌측은 우리가 생각하는 일반적인 학습 곡선입니다. 우측은 실제로 학습할 때의 학습 곡선이죠.

 

 

머리를 안쓰는 단순 암기 과목은 학습 곡선이 좌측과 비슷하지만, 응용력이 중요한 소프트웨어 개발이나 수학, 통계와 같은 것들은 우측과 같게 됩니다. 저도 20년동안 개발해오면서 항상 느끼는건데요. 뭔가를 접하더라도 바로 이해가 되서 응용하거나 하진 못합니다. 그 상태로 쭉 가다가 어느순간 이해가 되면서 한단계 도약하게 되요. 일반인 분들은 잘 와닿지 않겠지만, 개발자분들이 이 글을 읽는다면 충분히 공감하리라 생각합니다. 아무튼, 학습 곡선(Learning Curve, 러닝 커브)이 저렇다보니 한단계 도약하기까지 시간이 오래 걸리다보면 중간에 포기하시는 분들이 많습니다. 본론으로 들어가서 이미지를 먼저 찾아서 좌표를 저장해주는 부분을 구현해 봅시다. 엔지엠 에디터를 실행하고, 새 스크립트(Ctrl+N)를 생성하세요. 그리고, 변수와 이미지 매치를 하나 추가해주세요.

 

 

앗! 옆에 오징어 게임을 틀어놓고 글을 작성하다보니 중요한 부분을 놓쳤습니다-_-; [ 변수에 대한 이해 ]를 먼저 읽어보시고, [ 글로벌 변수와 로컬 변수에 대한 이해 ]도 변수를 이해하는데 도움이 될겁니다. 처음 스크립트를 제작하는거라면 마음에 여유를 가지고, 천천히 개념을 정리해둬야 합니다. 중간 중간 건너뛰는게 더 빠를거 같지만 기본기가 잘 갖춰져 있을수록 학습 속도도 빨라지게 됩니다. 결국은 처음엔 느린거 같지만~ 기본기가 탄탄할수록 구조도 잘 정리되고 불필요한 로직을 제거해서 더 아름다운 코드 또는 스크립트를 만들 수 있게 됩니다. 다시~ 본론으로 돌아와서, 변수에는 이미지 매치에서 찾은 이미지의 좌표를 저장해줄겁니다. 아래와 같이 변수의 속성을 설정하세요.

 

 

아래 동영상과 같이 그림판에 오랜지색 점을 하나 찍어놓고, 이미지 매치에서 캡쳐해줍니다.

 

 

[ 이미지 매치 ]에서 오랜지색 점을 찾으면 클릭할 마우스 위치를 알 수 있습니다. 마우스 위치는 찾은 이미지의 가운데입니다. 여러가지 속성들이 있어서 위치를 미세하게 조정할 수 있지만, 여기에서 중요한건 이게 아니니 그냥 넘어가도록 하겠습니다. 자세한 내용은 [ 이미지 매치 ]에서 확인할 수 있습니다.

 

 

이제 약간 복잡할 수 있는 부분인데요. 그림판에서 찾은 오랜지색 점에서 우하단으로 10 픽셀만큼 이동하도록 만들겁니다. 이럴 때 사용하는 액션이 [ 좌표 사칙연산 ]입니다. 매뉴얼을 보면 알겠지만, X, Y로 이루어진 2차원 평면의 점을 나타냅니다. 2차원의 평면은 X, Y로 정확하게 위치를 표현할 수 있죠. 우리가 살고 있는 3차원은 Z축이 하나 더 존재합니다. 쉽게 3D 게임에서 언덕이나 건물의 지붕에 있는것과 필드의 바닥은 높낮이가 다르죠? 높낮이를 Z축으로 나타내면 맵의 위치를 표현할 수 있습니다. 좌표 사칙 연산은 좀 더 깊은 고민이 필요합니다. 자 우선 연산을 한다는건 좌항과 우항이 더하거나 빼야 하는건데요.  이미지 매치로 찾은 좌표가 좌항이되고, 이동할 X, Y 위치가 우항이 됩니다. 아래 동영상처럼 변수로부터 좌항을 가져오고, 우항에는 X=10, Y=10 만큼 더해줍니다. 그리고, 결과 값을 다시 변수에 저장해야 다음 액션인 [ 마우스 다운 ]에서 좌표를 사용할 수 있습니다.

 

 

이렇게해서 마우스 다운 좌표를 만들었습니다. 이제 마우스 업 좌표를 만들어야겠죠? 그전에 마우스 다운 액션을 추가하고, 변수에서 좌료를 가져오세요.

 

 

잘 생각해보면 좌표 사칙 연산은 동일하다는걸 알 수 있습니다. 그렇기 때문에 이미 추가한 좌표 사칙 연산 액션을 복사해서 붙여넣고, 마우스 다운 액션을 추가하면 될거 같네요.

 

 

스크립트가 완료 되었습니다. 우리가 의도한데로 동작하는지 테스트 해봐야겠죠? 오랜지색 점에서 우측 하단 X=10, Y=10 위치에서 마우스 다운이 발생하고, 또다시 우측 하단 X=10, Y=10에서 마우스 업이 발생할겁니다. 그러면 마우스 드래그한것처럼 오랜지색 점 우측 하단에 10 픽셀 만큼 드래그가 발생합니다.

 

 

제 예상과 같이 잘 동작하는군요. 변수를 이용했기 때문에 변화하는 값 또는 상황에 맞게 대응할 수 있습니다. 프로그래밍에서는 유연한 코딩을 위해 여러가지 디자인 패턴을 사용하는데요. 엔지엠 에디터는 코딩 도구가 아니기 때문에 여러분들이 복잡한 알고리즘이나 API, 디자인 패턴, 아키텍트 같은건 몰라도 됩니다^^; 이러건 서비스하는 제가 고민하고 튜닝해야 할 부분이거든요~ 다만, 여러분들도 스크립트를 구성할 때 최대한 간단하면서도 불필요한 동작들은 제거하는게 좋습니다. 복잡도가 높아지면 나중에 많은 비용(시간, 돈, 노력등등...)이 발생하기 때문입니다. 이건 프로그래밍에서 필연적인 부분입니다!

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0