[C++] 1.4 마우스 입력 다루기

Date:     Updated:

카테고리:

태그:

인프런에 있는 홍정모 교수님의 홍정모의 게임 만들기 연습 문제 패키지 강의를 듣고 정리한 필기입니다.😀
🌜 공부에 사용된 홍정모 교수님의 코드들 보러가기
🌜 [홍정모의 게임 만들기 연습 문제 패키지] 강의 들으러 가기!


Chapter 1. 기본 기능 구현

1.4 마우스 입력 다루기

마우스의 현재 위치 리턴하기 : getCursorPos

  • getCursorPos(bool) 함수
    • Game2D 클래스에 있는 함수로 마우스의 현재 위치를 리턴한다.
      • 위치를 리턴하는 것이니 Vector2 객체 리턴.
      • bool타입 매개변수의 값에 따라 리턴 받는 마우스의 위치를 윈도우 좌표계를 기준으로 할지 화면 좌표계를 기준으로 할지 결정할 수 있다.
        • getCursorPos(false) : 윈도우 좌표계 사용
        • getCursorPos(true) : 화면 좌표계 사용. 우리에게 더 익숙
      • 디폴트 값은 true로 설정되어 있어 그냥 getCursorPos()로 호출하면 화면 좌표계 기준 위치를 리턴해준다.
  • Vector2 클래스에 출력 연산자 <<이 아래와 같이 오버로딩 되어 있기 때문에 그냥 cout과 함께 << 써서 마우스 현재 위치를 출력하면 된다.

    friend std::ostream & operator << (std::ostream & out, const Vector2<T> & vec)
    {
          out << vec.x << " " << vec.y;
          return out;
    }
    

윈도우 좌표계 : getCursorPos(false)

image

  • 왼쪽 : x 감소 / 오른쪽 : x 증가 / 위쪽 : y 감소 / 아래쪽 : y 증가
  • 마우스 좌표는 창의 맨 왼쪽 상단을 (0,0) 라 하고 오른쪽 하단을 (999,999)라고 한다. (해상도 1000 x 1000 기준)

화면 좌표계 : getCursorPos(true)

image

  • 가운데가 (0,0) 이다.
  • 격자 상 한칸당 0.5f
  • 마우스의 현재 위치를 float 실수로 나타낸다.
  • 왼쪽 : x 감소, 오른쪽 : x 증가, 위쪽 : y 증가, 아래쪽 : y 감소

getCursorPos(bool)의 화면좌표계와 윈도우좌표계 변환 원리

📜Game2D.cpp

  • glfwGetCursorPos → 윈도우의 x 포지션과 y포지션을 가져 오는 glfw 라이브러리의 함수. (윈도우 좌표계)
  • screen_coordinates 가 true면 윈도우 좌표계를 화면 좌표계로 변환.
  • screen_coordinates 가 false면 변환 없이 윈도우 좌표계 그대로 리턴.
vec2 Game2D::getCursorPos(const bool& screen_coordinates)
	{
		double x_pos, y_pos;
		glfwGetCursorPos(glfw_window, &x_pos, &y_pos);   // 윈도우 좌표계를 가져온다.
		
        /* 윈도우 좌표계 특징
		    Note that (0, 0) is left up corner. 
		    This is different from our screen coordinates.
		    0 <= x <= (width - 1)    ex) 해상도 100x100 이라면 0<=x<=99
		    (height - 1) >= y >= 0   ex) hegit-1에서 시작해 위로 갈수록 값이 0에 가까워지며 작아짐
        */

		if (screen_coordinates)  // 윈도우 좌표계를 화면 좌표계로 변환하기. width >= height 라고 가정.
		{
			// upside down y direction 
			// y 좌표 위 아래 뒤집기 -> 윈도우 좌표는 위로갈수록 y감소 아래로 갈수록 y 증가니까	
			y_pos = height - y_pos - 1; // 0 <= y <= height - 1

			// rescale and translate zero to center
			y_pos = y_pos / (height - 1); //  0.0 <= y <= 1.0
			y_pos = y_pos * 2.0;		  //  0.0 <= y <= 2.0
			y_pos = y_pos - 1.0;		  // -1.0 <= y <= 1.0

			x_pos = (x_pos / (width - 1) * 2.0 - 1.0) * width / height; //  -1.0 <= x <= 1.0

			return vec2(static_cast<float>(x_pos), static_cast<float>(y_pos)); // x, y를 float로 캐스팅 해주고 vec2로 묶고 반환한다.
		}
		else  // 별다른 변환 없이 윈도우 좌표계를 그대로 리턴. float로 캐스팅 해주고 vec2로 묶기만 해서 반환한다.
		{
			return vec2(static_cast<float>(x_pos), static_cast<float>(y_pos));
		}


마우스 현재 커서 위치에 그림 그리기

노란 동그라미가 마우스 커서를 따라다니게끔 해보자

원점에 그림이 그려지고 마우스 현재 위치로 그림이 이동하는 과정이 매 프레임마다 반복되어 마우스 현재 위치에 그려져 있는 것으로 보인다.

#include "Game2D.h"

namespace jm
{
	class MouseExample : public Game2D
	{
	public:
		void update() override
		{
			const vec2 mouse_pos = getCursorPos();
			translate(mouse_pos);                   // 실행순서 2. 마우스 현재 위치로 이동한다. 
			drawFilledCircle(Colors::gold, 0.1f);   // 실행순서 1. 원점에 동그라미를 그린다.
		}
	};
}

int main(void)
{
	jm::MouseExample().init("This is my digital canvas!", 1000, 1000, false).run();

	return 0;
}

마우스 좌클시 노란 원, 우클시 빨간 원이 그려지게 해보자.

#include "Game2D.h"

namespace jm
{
	class MouseExample : public Game2D
	{
	public:
		void update() override
		{
			const vec2 mouse_pos = getCursorPos(true);
			if (isMouseButtonPressed(GLFW_MOUSE_BUTTON_1) == true) // 마우스 좌클 입력이 들어올 시
			{
				translate(mouse_pos);
				drawFilledCircle(Colors::gold, 0.1f);
			}
			if (isMouseButtonPressed(GLFW_MOUSE_BUTTON_2))  // 마우스 우클 입력이 들어올 시
			{
				translate(mouse_pos);
				drawFilledCircle(Colors::red, 0.1f);
			}
		}
	};
}

int main(void)
{
	jm::MouseExample().init("This is my digital canvas!", 1000, 1000, false).run();

	return 0;
}


🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

C++ games 카테고리 내 다른 글 보러가기

댓글 남기기