[C++ 게임 개발 시리즈] Day 9: 스프라이트와 텍스처

스프라이트와 텍스처

스프라이트와 텍스처는 2D 게임 개발에서 중요한 그래픽 요소입니다. 스프라이트는 게임에서 캐릭터, 아이템, 배경 등의 이미지를 나타내는 2D 비트맵이며, 텍스처는 스프라이트에 적용되는 이미지입니다. 오늘은 스프라이트와 텍스처를 다루는 방법을 학습하겠습니다.

텍스처

텍스처는 이미지 파일에서 로드하여 스프라이트에 매핑됩니다. 텍스처는 sf::Texture 클래스를 사용하여 로드하고 관리합니다.

텍스처 로드 및 사용 예시

#include <SFML/Graphics.hpp>
#include <SFML/Window.hpp>
#include <SFML/System.hpp>
#include <iostream>

int main() {
    // 창 생성
    sf::RenderWindow window(sf::VideoMode(800, 600), "Texture Example");

    // 텍스처 로드
    sf::Texture texture;
    if (!texture.loadFromFile("character.png")) {
        std::cerr << "Error loading texture" << std::endl;
        return -1;
    }

    // 스프라이트 생성
    sf::Sprite sprite;
    sprite.setTexture(texture);
    sprite.setPosition(400.0f, 300.0f); // 창 중앙에 위치

    // 게임 루프
    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event)) {
            if (event.type == sf::Event::Closed)
                window.close();
        }

        // 화면 지우기
        window.clear();

        // 스프라이트 그리기
        window.draw(sprite);

        // 화면에 그리기
        window.display();
    }

    return 0;
}

스프라이트

스프라이트는 텍스처를 사용하여 화면에 그려지는 이미지입니다. 스프라이트는 sf::Sprite 클래스를 사용하여 생성하고 관리합니다.

스프라이트 이동

스프라이트는 setPosition 메서드를 사용하여 위치를 설정하고, move 메서드를 사용하여 이동할 수 있습니다.

int main() {
    // 창 생성
    sf::RenderWindow window(sf::VideoMode(800, 600), "Sprite Movement Example");

    // 텍스처 로드
    sf::Texture texture;
    if (!texture.loadFromFile("character.png")) {
        std::cerr << "Error loading texture" << std::endl;
        return -1;
    }

    // 스프라이트 생성
    sf::Sprite sprite;
    sprite.setTexture(texture);
    sprite.setPosition(400.0f, 300.0f); // 창 중앙에 위치

    // 게임 루프
    sf::Clock clock;
    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event)) {
            if (event.type == sf::Event::Closed)
                window.close();
        }

        // deltaTime 계산
        float deltaTime = clock.restart().asSeconds();

        // 입력 처리 및 스프라이트 이동
        const float speed = 200.0f;
        sf::Vector2f movement(0.0f, 0.0f);
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::W)) {
            movement.y -= speed * deltaTime;
        }
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::S)) {
            movement.y += speed * deltaTime;
        }
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::A)) {
            movement.x -= speed * deltaTime;
        }
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::D)) {
            movement.x += speed * deltaTime;
        }

        sprite.move(movement);

        // 화면 지우기
        window.clear();

        // 스프라이트 그리기
        window.draw(sprite);

        // 화면에 그리기
        window.display();
    }

    return 0;
}

스프라이트 애니메이션

스프라이트 애니메이션은 여러 프레임을 순차적으로 표시하여 움직임을 표현하는 기술입니다.

애니메이션 구현

1. 애니메이션 프레임 설정:
   • 여러 프레임을 사용하여 애니메이션을 구현합니다.

#include <SFML/Graphics.hpp>
#include <SFML/Window.hpp>
#include <SFML/System.hpp>
#include <iostream>
#include <vector>

int main() {
    // 창 생성
    sf::RenderWindow window(sf::VideoMode(800, 600), "Sprite Animation Example");

    // 텍스처 로드
    sf::Texture texture;
    if (!texture.loadFromFile("character_animation.png")) {
        std::cerr << "Error loading texture" << std::endl;
        return -1;
    }

    // 애니메이션 프레임 설정
    std::vector<sf::IntRect> frames;
    int frameWidth = 50;
    int frameHeight = 50;
    for (int i = 0; i < 4; i++) { // 4개의 프레임을 가정
        frames.push_back(sf::IntRect(i * frameWidth, 0, frameWidth, frameHeight));
    }

    // 스프라이트 생성
    sf::Sprite sprite;
    sprite.setTexture(texture);
    sprite.setPosition(400.0f, 300.0f); // 창 중앙에 위치

    // 애니메이션 변수
    int currentFrame = 0;
    float frameTime = 0.1f; // 프레임 시간 (초)
    float elapsedTime = 0.0f;

    sf::Clock clock;

    // 게임 루프
    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event)) {
            if (event.type == sf::Event::Closed)
                window.close();
        }

        // deltaTime 계산
        float deltaTime = clock.restart().asSeconds();
        elapsedTime += deltaTime;

        // 애니메이션 업데이트
        if (elapsedTime >= frameTime) {
            currentFrame = (currentFrame + 1) % frames.size();
            sprite.setTextureRect(frames[currentFrame]);
            elapsedTime = 0.0f;
        }

        // 화면 지우기
        window.clear();

        // 스프라이트 그리기
        window.draw(sprite);

        // 화면에 그리기
        window.display();
    }

    return 0;
}

 

결론

오늘은 스프라이트와 텍스처의 기본 개념을 학습하고, 이를 SFML을 사용하여 구현하는 방법을 알아보았습니다. 스프라이트 이동과 애니메이션 구현 방법도 학습했습니다. 질문이나 추가적인 피드백이 있으면 언제든지 댓글로 남겨 주세요. 내일은 "Day 10: 애니메이션 기법 (프레임 기반 애니메이션)"에 대해 학습하겠습니다.