Skip to content

타일셋 이미지를 실제 게임 화면처럼 렌더링하는 뷰어

License

Notifications You must be signed in to change notification settings

VibeGameStudio/maptile-render

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

🎨 AI 배경 이미지 → 바닥 타일셋 만들기 가이드

그림을 못 그려도, 포토샵을 몰라도, 게임 그래픽 디자이너가 아니어도
AI로 만든 배경 이미지를 실제 게임에 쓸 수 있는 바닥 타일셋으로 만드는 방법을 아주 쉽게 설명합니다!


✅ 목표

  • Sora, ComfyUI 등으로 생성한 배경 이미지 한 장
  • 자동으로 128×128 크기의 바닥 타일 여러 개로 나누고
  • 쉐이더에서 자연스럽게 이어지는 타일셋으로 완성하기!

이제 배경 타일도 걱정 끝! 🎮✨


🧱 타일 기본 구조

항목
전체 이미지 크기 1024×1024
한 타일 크기 128×128
총 타일 수 8×8 = 64개
파일 포맷 PNG (Alpha 채널 포함)
타일 내용 다양한 바닥 패턴 분할

🧠 Alpha 채널은 뭐에 쓰나요?

  • PNG는 R(빨강), G(초록), B(파랑), A(투명도) — 이렇게 4개의 채널로 구성됩니다
  • 우리는 이걸 타일 ID와 방향 정보로 활용합니다
채널 의미
R, G 타일 ID (어떤 종류의 타일인지)
B, A 방향 정보 (이어붙이는 방식 가이드)

👉 쉐이더가 이 정보를 읽어, 타일끼리 자연스럽게 연결되도록 합니다!


🖼️ 전체 작업 흐름

  1. AI 배경 이미지 준비 (1024×1024)
  2. 바닥만 추출하기
    • 오브젝트 제거 (SAM 마스크 이용)
    • 인버스 마스크로 바닥만 남기기
  3. 128×128로 타일 분할 → 총 64개 타일
  4. 각 타일에 RGBA 정보 삽입
    • R, G : 타일 ID
    • B, A : 연결 방향 마스크
  5. 게임 쉐이더에서 부드럽게 타일 연결!

🔧 간단한 예시

  • 배경 이미지(1024×1024)를 128×128로 자르면 → 8×8 배열 → 64개 타일
  • 각 타일마다 "어디로 이어져야 할지"를 알파값에 기록
  • 게임 엔진에서 이걸 이용해 자연스럽게 이어지는 바닥 표현

✨ 이 방법의 장점

  • ✅ AI 느낌 살리면서 게임용 타일셋 제작
  • ✅ 반복 타일인데도 부자연스러운 경계 없음
  • ✅ 수작업 없이 자동으로 빠르게 완성
  • ✅ Unity, Godot, Unreal 등 주요 엔진에 바로 적용 가능

🛠️ 지원할 수 있는 추가 도구

  • 타일 분할 자동화 Python 스크립트
  • RGBA 정보 자동 주입 스크립트
  • Unity/Godot/Unreal용 샘플 쉐이더 코드
  • 타일셋 메타데이터(JSON) 자동 생성 툴

✅ 마무리

AI로 만든 멋진 배경 이미지를 이제 그냥 보는 데서 끝내지 말고,
직접 게임용 바닥 타일셋으로 재탄생시켜 보세요!

🎨 누구나!
🧱 쉽게!
🎮 바로 사용할 수 있게!

About

타일셋 이미지를 실제 게임 화면처럼 렌더링하는 뷰어

Topics

Resources

License

Stars

Watchers

Forks