버튼식 장면 변환 제어

지금까지는 사용자가 화면 내 어디를 클릭해도 화면을 바꿀 수 있었습니다. 하지만 이 방식에는 단점이 있습니다. 화면 내 클릭만으로는 그 어떠한 추가적인 인터랙션도 불가능합니다. 수많은 게임과 앱은 이런 문제를 메뉴와 버튼과 같은 특정 UI 요소를 추가해 해결합니다. 또한, 특정 UI 요소와 인터랙션을 통해서만 화면을 탐색할 수 있도록 제한하는 방법으로 이 문제를 해결합니다. 오른쪽 상단에 버튼을 만들어 화면을 제어해 봅시다.

"버튼(button)"이란 무엇일까요? 두 가지 정의가 있습니다. 1) 어떤 영역이 클릭 가능하다고 시각적으로 표시한 것과 2) 해당 영역이 클릭에 반응하도록 하는 로직입니다. 먼저 1번 정의대로 시각적으로 표시를 해주는 rect()와 text()를 쓰고 여러번 호출할 경우를 대비해 함수로 묶어봅시다.

var drawButton = function() {
    fill(81, 166, 31);
    rect(15, 10, 50, 25);
    fill(255, 255, 255);
    textSize(16);
    text("NEXT", 19, 29);
};

그러면 이걸 어디에서 호출해야 할까요? 할 수 있는 곳은 많지만 항상 버튼이 위에 그려지도록 해야 합니다:

프로그램이 처음 로딩될 때 drawScene1()다음에
mouseClicked()안에 각 장면을 그리고 난 후에
mouseDragged()안에 새 아기를 그리고 나서
draw()안에 애니메이션 장면을 다시 그리고 나서

일반적으로 함수는 꼭 필요한 만큼만 호출해야 합니다. 아니면 컴퓨터의 능력을 낭비하게 됩니다!

draw() 안에 호출해야 합니다. 그렇지 않다면 드러머가 드럼을 칠 때 버튼이 사라질 것입니다. draw() 메소드는 계속해서 호출되고, 다른 메소드보다 훨씬 많이 호출됩니다. 따라서 draw()에서만 호출할 수 있습니다. 그러면 다른 장면은 알아서 처리될 것입니다.

직접 실행해 보세요! 다른 곳에서도 호출해야 한다고 생각한다면 어디든 추가해 보세요.

draw = function() {
    if (currentScene === 4) {
        drawScene4();
    }
    drawButton();
};

와! 이제 모든 화면에 버튼이 생겼습니다. 확인해 보세요.

하하. 그런데 웃긴 게 뭔 줄 아시나요? 버튼은 사실 아무것도 하지 않습니다! 사용자가 버튼 영역만 누른다면 버튼이 실제로 어떤 기능을 한다고 생각할 수도 있지만 사실 화면 어디를 눌러도 같은 결과가 나타납니다. 이 문제를 해결하기 위해 mouseClicked 함수의 논리를 바꿔서, 프로그램이 화면을 바꿀 때가 맞는지 생각하기 전에 버튼의 위치를 확인하도록 만들어야 합니다.

JS란의 버튼 응용문제에서처럼,mouseX와 mouseY를 확인하는 if문을 만들어야 합니다. 다음이 모두 참이어야 합니다:

mouseX가 rect의 x 왼쪽 값보다 큽니까?
mouseX가 rect의 x 오른쪽 값보다 작습니까?
mouseY가 rect의 y 위쪽 값보다 큽니까?
mouseY가 rect의 y 아래쪽 값보다 작습니까?

&& 기호를 사용해 네 개 조건이 모두 맞는지 확인하고, 맞는다면 다음 장면으로 넘어갑니다:

mouseClicked = function() {
    if (mouseX >= 15 && mouseX <= 65 &&
        mouseY >= 10 && mouseY <= 45) {
        ...
    }
};

바로 이거에요! 이 조건을 부여하고 나니, 이제 사용자가 화면에서 특정 부분을 클릭해야 다음 화면으로 넘어가는 프로그램이 되었습니다. 버튼과 버튼이 아닌 곳을 한번 눌러보세요.

이제 화면의 부분에 따른 클릭의 기능을 지정할 수 있게 되었습니다. 해당 버튼을 클릭할 때를 제외하고 클릭 기능을 다른 인터랙션에 이용할 수 있습니다. 그 말인 즉슨 사용자가 아기 윈스턴을 끌어서 추가하는 대신 원래 원하던 대로 클릭해서 추가할 수 있다는 말입니다. if문에 else문을 추가하고 mouseDragged 부분을 이 else문 안에 추가하면 됩니다.

mouseClicked = function() {
    if (mouseX >= 15 && mouseX <= 65 &&
        mouseY >= 10 && mouseY <= 45) {
        ...
    } else {
        if (currentScene === 5) {
            image(getImage("creatures/BabyWinston"),
                  mouseX-20, mouseY-20);
        }
    }
};

앞에서 지정한 조건들이 현재 화면에서만 적용되어야 원하는 대로 작동할 것입니다. 하지만 이렇게 하면 이제 다른 화면에 클릭 인터랙션을 추가하기가 쉬워졌습니다. 사용자가 화면에 다른 물건을 더 생성할 수 있도록 해 볼까요? 드럼을 추가할까요? 수염을 추가할까요? 아래 프로그램으로 여러 가지를 시도해 보세요.

대화에 참여하고 싶으신가요?

로그인

정렬 기준:

포스트가 아직 없습니다.

영어를 잘 하시나요? 그렇다면, 이곳을 클릭하여 미국 칸아카데미에서 어떠한 토론이 진행되고 있는지 둘러 보세요.