[과제] 2주차) Basic Programming 이주연

[juyonLee00]

그래픽 예제로 뭘 만들어볼 지 고민하다가 로우폴리 느낌의 그래픽과 유저와 상호작용하는 느낌을 내고 싶어서 알을 계속 클릭하면 캐릭터가 나오는 예제를 만들었습니다.

목차

• 1. Example 구동 화면
• 2. 과제 코드
• 3. 코드 설명

1. Example 구동 화면

2026-07-26.11.03.44.mov

2. 과제 코드

https://github.com/juyonLee00/thorvg.example/blob/juyonLee00/chore/src/EggHatch.cpp

3. 코드 설명

코드는 그래픽 생성 부분, 상호작용, 애니메이션(지속적 상태 업데이트), 초기화 및 실행 부분으로 나뉘어져 있습니다.

우선 초기 그래픽을 생성하는 부분입니다. content() 는 시작할 때 필요한 배경, 알, 캐릭터, 화면 전환을 위한 flash(흰색 사각형 배경)을 추가합니다. 이 때 flash는 지금 필요하지 않으므로 투명도를 0으로 설정했습니다.

    bool content(tvg::Canvas* canvas, uint32_t w, uint32_t h) override
    {
        background = tvg::Shape::gen();
        background->appendRect(0, 0, w, h);
        background->fill(27, 32, 41);
        canvas->add(background);

        buildEgg(canvas);
        buildCreature(canvas);

        flash = tvg::Shape::gen();
        flash->appendRect(0, 0, w, h);
        flash->fill(255, 255, 255);
        flash->opacity(0);
        canvas->add(flash);

        return true;
    }

다음은 알을 생성하는 함수입니다.
여기서 createEgg()는 cubicTo()를 이용해 알의 형태를 만들어서 반환하는 함수입니다. 이 때 appendCircle()로 생성할 경우 위쪽이 좁고 아래쪽이 넓어보이는 효과를 내기 어려워서 cubicTo()를 이용했습니다.
eggshell은 화면에 표시되는 알 그래픽 배경이자 유저 입력 판정 영역을 담당합니다. crackPath는 알을 클릭했을 때 생성되는 금 무늬들을 저장하는 Shape입니다. clip을 추가한 이유는 금 무늬의 끝이 밖으로 나가는 걸 방지하기 위해 렌더링 영역을 알 내부로 제한하기 위해서입니다.

    void buildEgg(tvg::Canvas* canvas)
    {
        egg = tvg::Scene::gen();

        eggShell = createEgg();
        eggShell->fill(247, 247, 238);
        egg->add(eggShell);

        // 중략. 알의 무늬 생성

        crackPath = tvg::Shape::gen();
        crackPath->strokeWidth(5.0f);
        crackPath->strokeFill(78, 70, 77);
        crackPath->strokeCap(tvg::StrokeCap::Round);

        auto clip = createEgg();
        clip->fill(255, 255, 255);
        crackPath->clip(clip);

        egg->add(crackPath);
        canvas->add(egg);
    }

다음은 캐릭터를 생성하는 부분입니다. 삼각형으로 이루어진 로우 폴리의 느낌을 내기 위해 lineTo()로 몸 실루엣을 만들고 위에 addTriangle()을 이용해 색칠된 삼각형을 올립니다. 실루엣을 추가하는 이유는 삼각형 틈 사이로 배경이 보이는 상황을 방지하기 위해 추가했습니다. 뜬 눈은 원형(appendCircle())으로, 감은 눈은 가로선 형태(stroke())로 만들었습니다. 또한 입의 선분 끝부분을 둥글게 처리하기 위해 StrokeCap::Round를 적용하였습니다.

    void buildCreature(tvg::Canvas* canvas)
    {
        creature = tvg::Scene::gen();
        creature->opacity(0);

        auto body = tvg::Shape::gen();
        body->moveTo(285.0f, 335.0f);
        body->lineTo(345.0f, 280.0f);
        //중략
        body->lineTo(245.0f, 610.0f);
        body->close();
        body->fill(173, 91, 158);
        creature->add(body);

        addTriangle(creature, 285, 355, 145, 470, 265, 555, 158, 75, 146);
        // 중략
        addTriangle(creature, 400, 295, 465, 665, 335, 665, 185, 99, 169);

        leftEye = tvg::Shape::gen();
        leftEye->appendCircle(350.0f, 405.0f, 10.0f, 10.0f);
        leftEye->fill(20, 15, 24);
        creature->add(leftEye);

        // 오른쪽 눈도 같은 방식으로 생성

        leftClosedEye = tvg::Shape::gen();
        leftClosedEye->moveTo(339.0f, 405.0f);
        leftClosedEye->lineTo(361.0f, 405.0f);
        leftClosedEye->strokeWidth(5.0f);
        leftClosedEye->strokeFill(20, 15, 24);
        leftClosedEye->opacity(0);
        creature->add(leftClosedEye);

        // 오른쪽 감은 눈도 같은 방식으로 생성

        // 입도 유사한 형태로 생성

        canvas->add(creature);
    }

삼각형 생성을 용이하게 하기 위한 addTriangle을 구현할 때 삼각형은 닫힌 도형이기 때문에 마지막에 close()로 처리했습니다.

    static void addTriangle(tvg::Scene* scene,
                            float x1, float y1,
                            float x2, float y2,
                            float x3, float y3,
                            uint8_t r, uint8_t g, uint8_t b)
    {
        auto shape = tvg::Shape::gen();
        shape->moveTo(x1, y1);
        shape->lineTo(x2, y2);
        shape->lineTo(x3, y3);
        shape->close();
        shape->fill(r, g, b);
        scene->add(shape);
    }

다음은 상태를 체크하고 갱신하는 update()입니다. 해당 함수는 횟수가 일정 클릭 이상인 경우 시간의 흐름에 따라 알, 흰 화면, 캐릭터의 투명도를 변경하고 부화가 끝난 뒤에는 눈 깜빡임을 처리합니다.
화면 전환 애니메이션을 적용하기 위해서는 현재 애니메이션의 진행률을 알아야 합니다. 애니메이션 진행률을 계산하기 위해 ( 현재 시간 - 마지막 클릭한 시간)을 애니메이션 전체 시간으로 나눈 progress 변수를 사용했습니다.
전반부는 알에서 흰색 화면으로 전환되고, 후반부는 흰색 화면에서 캐릭터로 전환됩니다. 그래서 전반부에서 egg는 투명도를 낮추고, 흰색 화면은 투명도를 높입니다. 또한 각 구간에서 0~1로 범위를 설정해 계산을 편하게 하기 위해 2를 곱해줬습니다. 후반부도 투명도가 적용되는 그래픽이 다를 뿐 동일하게 진행됩니다.

        auto progress = float(elapsed - hatchStart) / 1800.0f;
        
        if (progress < 0.5f) {
            auto value = smooth(progress * 2.0f);
            egg->opacity(static_cast<uint8_t>((1.0f - value) * 255.0f));
            flash->opacity(static_cast<uint8_t>(value * 255.0f));
        } else {
            auto value = smooth((progress - 0.5f) * 2.0f);
            background->fill(242, 232, 248);
            egg->opacity(0);
            flash->opacity(static_cast<uint8_t>((1.0f - value) * 255.0f));
            creature->opacity(static_cast<uint8_t>(value * 255.0f));
        }

애니메이션 전환 과정에서 부드러운 처리를 위해 이용한 smooth()입니다. 일정한 속도로 투명도가 변하는 것이 아닌 천천히 시작했다가 중간에서 빨라지고, 천천히 종료하기 위해 해당 수식을 적용했습니다. 또한 범위를 제한하여 계산 결과가 안정적이도록 설정했습니다. 리턴값의 경우 value * value만 적용할 경우 시작은 부드럽지만 끝으로 갈수록 속도가 빨라지기 때문에 ₩(3.0f - 2.0f * value)`을 추가로 곱해줘 부드럽게 끝나도록 처리했습니다.

static float smooth(float value)
    {
        if (value < 0.0f) value = 0.0f;
        if (value > 1.0f) value = 1.0f;
        return value * value * (3.0f - 2.0f * value);
    }

애니메이션 진행이 다 끝났을 때는 눈을 깜빡이는 효과를 지속적으로 진행하도록 했습니다. 눈을 감는 함수는 뜬 눈과 감은 눈의 투명도를 전환하는 과정으로 구현했습니다. 캐릭터 등장 완료 시점을 0으로 맞추고 시작하기 위해 1800을 빼고, 지속적으로 진행되게 하기 위해 눈 깜빡임 주기(BlinkInterval)로 나눠줬습니다.

        if (progress >= 1.0f) {
            egg->opacity(0);
            flash->opacity(0);
            creature->opacity(255);

            auto blinkTime = (elapsed - hatchStart - 1800u) % BlinkInterval;
            auto shouldClose = blinkTime < BlinkDuration;

            if (shouldClose != eyesClosed) {
                setEyesClosed(shouldClose);
                canvas->update();
                return true;
            }

            return false;
        }

        canvas->update();
        return true;

마지막으로 마우스를 클릭했을 때 실행되는 함수 clickdown()입니다. 여기서는 마우스를 알 안쪽에서 클릭했을 때만 금이 생깁니다.

 if (clickCount >= HatchCount) return false;
        if (!eggShell->intersects(x, y, 1, 1, true)) return false;

        addCrack(float(x), float(y));
        ++clickCount;

        if (clickCount == HatchCount) {
            hatchStart = elapsed;
        }

금을 생성하는 addCrack()입니다. 둘 사이의 거리를 비교하기 위해 거리의 제곱을 사용했습니다. 다음 클릭한 지점이 직전에 클릭한 지점 사이와 제곱값만큼 가깝다면 직전 클릭 위와 현재 위치까지 선을 만듭니다.

auto dx = x - lastX;
auto dy = y - lastY;
auto distanceSquared = dx * dx + dy * dy;

 if (distanceSquared < LinkDistance * LinkDistance) {
    crackPath->moveTo(lastX, lastY);
    crackPath->lineTo(x, y);

    lastX = x;
    lastY = y;
    return; 
}

만약 일정 거리 이상 떨어져 있다면 세 갈래로 나뉘어진 금을 생성합니다. 이 때 세 갈래가 같은 시작점을 같기 위해 선을 긋기 전 moveTo()를 이용합니다. 마지막으로 위치를 업데이트합니다.

        crackPath->moveTo(x, y);
        crackPath->lineTo(x - 22.0f, y - 27.0f);

        crackPath->moveTo(x, y);
        crackPath->lineTo(x + 28.0f, y - 12.0f);

        crackPath->moveTo(x, y);
        crackPath->lineTo(x + 7.0f, y + 31.0f);

        lastX = x;
        lastY = y;

로우 폴리 느낌을 내고 싶어서 했는데 역시 삼각형 노가다는 쉽지 않은 일이라는 것을 체감하게 되었습니다. 원래는 알도 유사한 그래픽 느낌을 내려고 했지만 역시 쉽지 않더군요..애니메이션도 그냥 넘어가는 건 좀 아쉬워서 넣어보려고 한 건데 이미지를 그려내는 것만큼 손이 많이 갔던 것 같습니다. 좀 아쉬움이 남기도 하지만 만족스러운 작업물이었습니다.

[Nor-s]

https://www.linkedin.com/posts/theashraf_weekend-three-of-my-little-3d-renderer-with-ugcPost-7484583578702553089-mSAg/?utm_source=share&utm_medium=member_desktop&rcm=ACoAAGTdidYBis8BxPOjWuikVgVfe-IJd3sLXdE

https://www.linkedin.com/posts/thorvg-mesh-animation-ugcPost-6964221356267753473-LtoY/?utm_source=share&utm_medium=member_desktop&rcm=ACoAAGTdidYBis8BxPOjWuikVgVfe-IJd3sLXdE

ThorVG를 사용한 재밌는 애니메이션 구현 링크 공유드립니다.

Rive 라는 포맷도 있어요

Lottie, Rive 둘다 Live2D,Spine2D 만큼 게임에서 많이 사용되는 것은 아니지만
이번 기회에 Live2D, Spine2D 알고리즘을 분석해서 유저와 상호작용하는 것을 연구하는것도 좋아보입니다.

[juyonLee00]

오 ThorVG로 구현 가능한 멋진 애니메이션들도 많군요. 좋은 자료와 팁 감사합니다!