간단한 장면 변화

윈스턴의 이야기를 그림 이야기책으로 만들고 사용자가 클릭을 통해 다음 화면으로 넘어갈 수 있게 만들어 봅시다. 제목이 있는 메인 장면으로 시작합니다.

background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);

다음은 사용자가 클릭하면 이야기의 다음 부분인 윈스턴의 위대한 탄생을 볼 수 있도록 만들 겁니다. 사용자가 마우스를 클릭할 때마다 호출될 mouseClicked 함수를 정의한 후 두 번째 장면을 그리는 코드를 그곳에 넣어서 이 기능을 구현해 봅시다. 두 번째 장면을 그리기 전에 background()를 호출해야 함을 주의하세요. 그렇지 않으면 각 장면이 겹쳐 보일 겁니다.

mouseClicked = function() {
    // Scene 2
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

다음 프로그램으로 장면이 바뀌는 것과 윈스턴이 태어나는 것을 확인해 보세요!

이제 두 번째 장면의 코드에 텍스트를 바꾸거나 이미지의 위치를 바꾸는 등의 수정을 해 보세요. 그런데 수정한 코드를 확인하려면 그때마다 클릭해서 두 번째 장면까지 가야 합니다.

너무 귀찮지 않나요? 두 번째 장면을 정확히 원하는 것으로 만들기에는 시간이 너무 오래 걸립니다. 장면이 열 개인데 열 번째 장면을 수정하려고 했다면 확인할 때마다 클릭을 열 번 해야 했을 겁니다.

그 문제를 해결하도록 하겠습니다. 물론 이 성가심을 견딜 수 있지만, 훨씬 생산적인 프로그래머가 되어 봅시다. 두 번째 장면을 수정하고 그 결과를 실시간으로 본다면 훨씬 더 생산적이지 않을까요? 이 경우 두 번째 장면의 모든 코드를 함수 안에 넣고 mouseClicked로부터 함수를 호출한 후 디버깅할 때 해당 함수를 호출하면 문제를 쉽게 해결할 수 있습니다. 다음은 그렇게 한 결과입니다:

var drawScene2 = function() {
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

mouseClicked = function() {
    drawScene2();
};

// Scene 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);

drawScene2();

두 번째 장면을 함수로 만든 한, 첫 번째 장면도 함수로 만드는 것이 좋을 것입니다. 모든 코드를 묶어 호출합니다.

var drawScene1 = function() {
    background(235, 247, 255);
    fill(0, 85, 255);
    textSize(25);
    text("The Story of Winston", 10, 200);
};

이제 다음 프로그램을 실행해 보세요. 두 번째 장면을 바꿔보고 싶다면 drawScene2()를 주석 해제하고 호출해 바꾼 것이 제대로 나오는지 확인해 보세요.

이제 첫 장면과 두 번째 장면이 생겼습니다. 세 번째 장면을 보여주려면 어떻게 해야 할까요? 또는 세 번째 장면을 클릭하여 첫 번째 장면으로 되돌아 가려면 어떻게 할까요? mouseClicked 내의 코드를 변경해서 항상 두 번째 장면을 호출하는 대신 어떤 장면을 보여줄 것인지를 조건적으로 선택할 필요가 있습니다. 즉, 특정 종류의 조건을 확인할 if문이 필요합니다. 우선 의사코드(pseudo-code) 측면에서 생각해 봅시다.

// 사용자가 마우스를 클릭할 때:
    // 현재 장면이 1번 장면이라면, 2번 장면으로 넘어 갑니다.
    // 현재 장면이 2번 장면이라면, 3번 장면으로 넘어 갑니다.
    // 현재 장면이 3번 장면이라면, 다시 1번 장면으로 넘어 갑니다.

"현재 장면"을 식별할 필요가 있어 보이네요. 이것은 숫자로 저장하는 것이 좋습니다. 전역 변수 currentScene을 선언하고 mouseClicked 내에서 확인하도록 하겠습니다.

var currentScene;

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene1();
    }
};

조건이 의사코드와 유사한 것 같지만 문제가 있습니다. currentScene 을 실제 값으로 할당하지 않아 조건이 절대 참이 될 수 없게 됩니다. If문 안에서 값을 설정할 수도 있겠지만 장면을 그리는 함수에 설정하는 것이 아마도 더 나을 것입니다. 그러면 장면 그리기 함수를 호출하는 장소에 상관 없이 변수가 올바르게 설정됩니다.

var drawScene1 = function() {
    currentScene = 1;
    ...
};

var drawScene2 = function() {
    currentScene = 2;
    ...
};

var drawScene3 = function() {
    currentScene = 3;
    ...
};

아래 프로그램에 여태까지 한 모든 것을 합쳤습니다. 클릭해서 이야기의 시작부터 어떻게 동작하는지 살펴보세요. 원하는 대로 네 번째 장면을 추가하고 내 프로젝트로 저장해 보세요.

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

로그인

정렬 기준:

포스트가 아직 없습니다.

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