whdwo798/Travel_Run
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Build TravelRun intro and tutorial flow

Browse Source
This commit is contained in:
jongjae0305
2026-07-06 16:15:20 +09:00
parent af26dd4311
commit 2ba3882f1b
153 changed files with 13625 additions and 2086 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Docs/TravelRun_Incheon_Tutorial_FullCourse.svg
+257
View File
@@ -0,0 +1,257 @@
<svg width="6200" height="980" viewBox="0 0 6200 980" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sky" x1="0" x2="0" y1="0" y2="1">
<stop offset="0" stop-color="#071420"/>
<stop offset="0.52" stop-color="#123143"/>
<stop offset="1" stop-color="#193846"/>
</linearGradient>
<linearGradient id="glass" x1="0" x2="0" y1="0" y2="1">
<stop offset="0" stop-color="#173c51" stop-opacity="0.92"/>
<stop offset="1" stop-color="#0a1d29" stop-opacity="0.94"/>
</linearGradient>
<linearGradient id="floor" x1="0" x2="0" y1="0" y2="1">
<stop offset="0" stop-color="#6d8790"/>
<stop offset="1" stop-color="#405b64"/>
</linearGradient>
<pattern id="tile" width="88" height="54" patternUnits="userSpaceOnUse">
<rect width="88" height="54" fill="#58717a"/>
<path d="M0 0H88M0 54H88M0 0V54M88 0V54" stroke="#91aab1" stroke-width="2" opacity="0.34"/>
<path d="M44 0V54" stroke="#91aab1" stroke-width="1.4" opacity="0.2"/>
</pattern>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="8" stdDeviation="6" flood-color="#000000" flood-opacity="0.28"/>
</filter>
<style>
.title { font-family: "Malgun Gothic", Arial, sans-serif; font-size: 38px; font-weight: 800; fill: #eaf9fc; }
.sub { font-family: "Malgun Gothic", Arial, sans-serif; font-size: 22px; fill: #badfe7; }
.label { font-family: "Malgun Gothic", Arial, sans-serif; font-size: 20px; font-weight: 700; fill: #eefbff; }
.small { font-family: "Malgun Gothic", Arial, sans-serif; font-size: 16px; fill: #c9e7ee; }
.tiny { font-family: "Malgun Gothic", Arial, sans-serif; font-size: 13px; fill: #d8f0f5; }
.bubble { fill: #f4fbff; stroke: #56b5cb; stroke-width: 3; filter: url(#softShadow); }
.bubbleText { font-family: "Malgun Gothic", Arial, sans-serif; font-size: 18px; font-weight: 700; fill: #102a35; }
.bubbleSmall { font-family: "Malgun Gothic", Arial, sans-serif; font-size: 14px; fill: #234755; }
.measure { stroke: #77d4e8; stroke-width: 4; stroke-dasharray: 12 12; fill: none; opacity: 0.85; }
.path { stroke: #ffe16a; stroke-width: 5; stroke-dasharray: 18 14; fill: none; opacity: 0.95; }
.floorOutline { stroke: #b8d2d8; stroke-width: 4; }
.warning { fill: #ff5c4b; }
.item { fill: #69f09a; stroke: #e8fff0; stroke-width: 4; }
</style>
</defs>
<rect width="6200" height="980" fill="url(#sky)"/>
<g opacity="0.95">
<rect x="0" y="102" width="6200" height="278" fill="url(#glass)"/>
<path d="M0 380H6200" stroke="#2d7990" stroke-width="6" opacity="0.45"/>
<path d="M0 102H6200" stroke="#62b7ca" stroke-width="3" opacity="0.24"/>
<g stroke="#4aa7bd" stroke-width="3" opacity="0.24">
<path d="M170 102V380"/>
<path d="M430 102V380"/>
<path d="M690 102V380"/>
<path d="M950 102V380"/>
<path d="M1210 102V380"/>
<path d="M1470 102V380"/>
<path d="M1730 102V380"/>
<path d="M1990 102V380"/>
<path d="M2250 102V380"/>
<path d="M2510 102V380"/>
<path d="M2770 102V380"/>
<path d="M3030 102V380"/>
<path d="M3290 102V380"/>
<path d="M3550 102V380"/>
<path d="M3810 102V380"/>
<path d="M4070 102V380"/>
<path d="M4330 102V380"/>
<path d="M4590 102V380"/>
<path d="M4850 102V380"/>
<path d="M5110 102V380"/>
<path d="M5370 102V380"/>
<path d="M5630 102V380"/>
<path d="M5890 102V380"/>
</g>
<g opacity="0.34">
<circle cx="270" cy="204" r="7" fill="#ffd46b"/>
<circle cx="1030" cy="160" r="5" fill="#ffd46b"/>
<circle cx="1880" cy="222" r="6" fill="#ffd46b"/>
<circle cx="2860" cy="174" r="5" fill="#ffd46b"/>
<circle cx="3960" cy="212" r="7" fill="#ffd46b"/>
<circle cx="5070" cy="168" r="5" fill="#ffd46b"/>
<circle cx="5840" cy="226" r="7" fill="#ffd46b"/>
</g>
</g>
<g>
<text x="96" y="66" class="title">TravelRun - Tutorial / Incheon Full Course Draft</text>
<text x="96" y="96" class="sub">전체 코스를 실제 게임처럼 길게 펼친 설계도. 발판, 틈, 장애물, 아이템, 설명 타이밍을 이 그림 기준으로 조정.</text>
</g>
<g id="airport-props" opacity="0.9">
<rect x="438" y="150" width="210" height="66" rx="8" fill="#09202b" stroke="#5ec7df" stroke-width="3"/>
<text x="543" y="178" class="small" text-anchor="middle">ICN GATE A1</text>
<text x="543" y="203" class="tiny" text-anchor="middle">Departure</text>
<rect x="2430" y="142" width="250" height="76" rx="8" fill="#09202b" stroke="#5ec7df" stroke-width="3"/>
<text x="2555" y="173" class="small" text-anchor="middle">TRANSFER</text>
<text x="2555" y="199" class="tiny" text-anchor="middle">Slide Practice Zone</text>
<rect x="5240" y="145" width="270" height="72" rx="8" fill="#09202b" stroke="#5ec7df" stroke-width="3"/>
<text x="5375" y="176" class="small" text-anchor="middle">BOARDING SOON</text>
<text x="5375" y="201" class="tiny" text-anchor="middle">Mileage Finish Line</text>
</g>
<g id="floor">
<rect x="0" y="748" width="6200" height="140" fill="#263b43"/>
<path d="M0 748H6200" stroke="#9fc0c7" stroke-width="5" opacity="0.35"/>
<g filter="url(#softShadow)">
<rect x="90" y="646" width="1260" height="96" rx="10" fill="url(#tile)" class="floorOutline"/>
<rect x="1700" y="646" width="680" height="96" rx="10" fill="url(#tile)" class="floorOutline"/>
<rect x="2380" y="646" width="3710" height="96" rx="10" fill="url(#tile)" class="floorOutline"/>
</g>
<g opacity="0.74">
<text x="725" y="775" class="tiny" text-anchor="middle">기본 발판 연결 구간</text>
<text x="1520" y="708" class="label" text-anchor="middle">2단 점프용 긴 틈</text>
<path d="M1360 696H1685" class="measure"/>
<text x="4235" y="775" class="tiny" text-anchor="middle">아이템 체험 구간은 발판이 계속 연결되어야 함</text>
</g>
</g>
<g id="start">
<rect x="126" y="545" width="92" height="82" rx="12" fill="#163441" stroke="#73d3e8" stroke-width="4" filter="url(#softShadow)"/>
<circle cx="172" cy="572" r="20" fill="#e9c19f"/>
<rect x="145" y="594" width="54" height="38" rx="14" fill="#8a5a36"/>
<rect x="150" y="632" width="21" height="18" fill="#41543d"/>
<rect x="177" y="632" width="21" height="18" fill="#41543d"/>
<text x="172" y="523" class="label" text-anchor="middle">START</text>
</g>
<g id="tutorial-bubbles">
<g>
<rect x="710" y="430" width="260" height="104" rx="18" class="bubble"/>
<text x="840" y="465" class="bubbleText" text-anchor="middle">1. 점프</text>
<text x="840" y="493" class="bubbleSmall" text-anchor="middle">가방 장애물을</text>
<text x="840" y="516" class="bubbleSmall" text-anchor="middle">왼쪽 클릭으로 넘기</text>
<path d="M840 534L870 602" stroke="#56b5cb" stroke-width="4"/>
</g>
<g>
<rect x="1368" y="430" width="304" height="108" rx="18" class="bubble"/>
<text x="1520" y="465" class="bubbleText" text-anchor="middle">2. 2단 점프</text>
<text x="1520" y="493" class="bubbleSmall" text-anchor="middle">발판이 멀리 떨어짐</text>
<text x="1520" y="516" class="bubbleSmall" text-anchor="middle">공중에서 한 번 더 클릭</text>
<path d="M1520 538L1520 628" stroke="#56b5cb" stroke-width="4"/>
</g>
<g>
<rect x="2396" y="430" width="294" height="104" rx="18" class="bubble"/>
<text x="2543" y="465" class="bubbleText" text-anchor="middle">3. 슬라이드</text>
<text x="2543" y="493" class="bubbleSmall" text-anchor="middle">천장 표지판 아래를</text>
<text x="2543" y="516" class="bubbleSmall" text-anchor="middle">오른쪽 클릭으로 통과</text>
<path d="M2543 534L2543 602" stroke="#56b5cb" stroke-width="4"/>
</g>
<g>
<rect x="2962" y="424" width="310" height="118" rx="18" class="bubble"/>
<text x="3117" y="459" class="bubbleText" text-anchor="middle">4. 강제 피격</text>
<text x="3117" y="487" class="bubbleSmall" text-anchor="middle">한 번 맞아서 목숨/속도</text>
<text x="3117" y="510" class="bubbleSmall" text-anchor="middle">감소를 직접 확인</text>
<path d="M3117 542L3117 610" stroke="#56b5cb" stroke-width="4"/>
</g>
<g>
<rect x="3528" y="416" width="432" height="134" rx="18" class="bubble"/>
<text x="3744" y="451" class="bubbleText" text-anchor="middle">5. 아이템 체험</text>
<text x="3744" y="479" class="bubbleSmall" text-anchor="middle">초밥 → 라멘 → 방어막 → 운동화 → 마일리지 카드</text>
<text x="3744" y="502" class="bubbleSmall" text-anchor="middle">먹은 뒤 바로 효과를 느끼도록 강제 상황 배치</text>
<path d="M3744 550L3744 614" stroke="#56b5cb" stroke-width="4"/>
</g>
</g>
<g id="jump-section">
<path d="M300 612 C420 565, 600 565, 740 612" class="path"/>
<rect x="842" y="585" width="70" height="60" rx="10" fill="#c7924d" stroke="#492d17" stroke-width="5" filter="url(#softShadow)"/>
<rect x="856" y="566" width="42" height="22" rx="10" fill="none" stroke="#492d17" stroke-width="5"/>
<circle cx="858" cy="646" r="7" fill="#1d1d1d"/>
<circle cx="898" cy="646" r="7" fill="#1d1d1d"/>
<text x="877" y="682" class="tiny" text-anchor="middle">점프 장애물</text>
</g>
<g id="double-jump-section">
<path d="M1210 620 C1320 492, 1460 468, 1586 556" class="path"/>
<path d="M1586 556 C1660 610, 1700 640, 1784 650" class="path"/>
<circle cx="1406" cy="536" r="18" fill="#ffe16a" opacity="0.88"/>
<circle cx="1568" cy="540" r="18" fill="#ffe16a" opacity="0.88"/>
<text x="1490" y="498" class="label" text-anchor="middle">공중 2번 입력</text>
<path d="M1360 646L1700 646" stroke="#ff6b5c" stroke-width="10" opacity="0.7" stroke-dasharray="22 20"/>
<text x="1528" y="775" class="tiny" text-anchor="middle">여기는 실제로 바닥이 없어야 2단 점프 이유가 생김</text>
</g>
<g id="slide-section">
<rect x="2496" y="504" width="178" height="38" rx="10" fill="#285061" stroke="#93d7e5" stroke-width="4" filter="url(#softShadow)"/>
<text x="2585" y="530" class="small" text-anchor="middle">DEPARTURE</text>
<rect x="2526" y="542" width="118" height="64" rx="9" fill="#4b85a1" stroke="#9ae4f2" stroke-width="4"/>
<path d="M2390 630 C2450 660, 2540 660, 2660 630" class="path"/>
<rect x="2398" y="608" width="80" height="28" rx="14" fill="#8a5a36" opacity="0.9"/>
<text x="2585" y="682" class="tiny" text-anchor="middle">슬라이드 장애물: 천장 구조 + 매달린 표지판</text>
</g>
<g id="force-hit-section">
<rect x="3048" y="582" width="72" height="64" rx="10" class="warning" stroke="#4b120c" stroke-width="5" filter="url(#softShadow)"/>
<rect x="3026" y="506" width="120" height="34" rx="9" fill="#ff8174" stroke="#4b120c" stroke-width="4"/>
<rect x="3064" y="540" width="46" height="58" rx="9" class="warning" stroke="#4b120c" stroke-width="4"/>
<text x="3084" y="625" font-family="Arial, sans-serif" font-size="38" font-weight="800" fill="#2a0805" text-anchor="middle">!</text>
<text x="3084" y="684" class="tiny" text-anchor="middle">피하기 어렵게 만들어 효과 설명</text>
</g>
<g id="item-section">
<g>
<circle cx="3430" cy="578" r="32" class="item" filter="url(#softShadow)"/>
<text x="3430" y="587" font-family="Arial, sans-serif" font-size="32" font-weight="800" fill="#0b2715" text-anchor="middle">+</text>
<text x="3430" y="634" class="tiny" text-anchor="middle">초밥: 회복</text>
</g>
<g>
<circle cx="3752" cy="578" r="32" class="item" filter="url(#softShadow)"/>
<text x="3752" y="587" font-family="Arial, sans-serif" font-size="30" font-weight="800" fill="#0b2715" text-anchor="middle">R</text>
<text x="3752" y="634" class="tiny" text-anchor="middle">라멘: 무적</text>
<rect x="3904" y="582" width="62" height="64" rx="10" class="warning" stroke="#4b120c" stroke-width="5"/>
<text x="3935" y="625" font-family="Arial, sans-serif" font-size="34" font-weight="800" fill="#2a0805" text-anchor="middle">!</text>
<text x="3935" y="684" class="tiny" text-anchor="middle">무적 체감</text>
</g>
<g>
<circle cx="4250" cy="578" r="32" class="item" filter="url(#softShadow)"/>
<text x="4250" y="587" font-family="Arial, sans-serif" font-size="30" font-weight="800" fill="#0b2715" text-anchor="middle">G</text>
<text x="4250" y="634" class="tiny" text-anchor="middle">방어막</text>
<rect x="4420" y="582" width="62" height="64" rx="10" class="warning" stroke="#4b120c" stroke-width="5"/>
<text x="4451" y="625" font-family="Arial, sans-serif" font-size="34" font-weight="800" fill="#2a0805" text-anchor="middle">!</text>
<text x="4451" y="684" class="tiny" text-anchor="middle">방어 체감</text>
</g>
<g>
<rect x="4748" y="582" width="62" height="64" rx="10" class="warning" stroke="#4b120c" stroke-width="5"/>
<text x="4779" y="625" font-family="Arial, sans-serif" font-size="34" font-weight="800" fill="#2a0805" text-anchor="middle">!</text>
<text x="4779" y="684" class="tiny" text-anchor="middle">일부러 감속</text>
<circle cx="4978" cy="578" r="32" class="item" filter="url(#softShadow)"/>
<text x="4978" y="587" font-family="Arial, sans-serif" font-size="30" font-weight="800" fill="#0b2715" text-anchor="middle">V</text>
<text x="4978" y="634" class="tiny" text-anchor="middle">운동화: 속도 회복</text>
</g>
<g>
<circle cx="5308" cy="578" r="32" class="item" filter="url(#softShadow)"/>
<text x="5308" y="587" font-family="Arial, sans-serif" font-size="30" font-weight="800" fill="#0b2715" text-anchor="middle">M</text>
<text x="5308" y="634" class="tiny" text-anchor="middle">마일리지 카드</text>
<g fill="#ffd95b" opacity="0.95">
<circle cx="5468" cy="590" r="13"/>
<circle cx="5524" cy="590" r="13"/>
<circle cx="5580" cy="590" r="13"/>
<circle cx="5636" cy="590" r="13"/>
<circle cx="5692" cy="590" r="13"/>
</g>
<text x="5580" y="634" class="tiny" text-anchor="middle">카드 먹고 바로 수집</text>
</g>
</g>
<g id="finish">
<rect x="5900" y="520" width="10" height="126" fill="#f4fbff"/>
<path d="M5910 520H6050V586H5910Z" fill="#ffdd6c" stroke="#2c2c2c" stroke-width="3"/>
<text x="5980" y="562" font-family="Arial, sans-serif" font-size="24" font-weight="800" fill="#24210f" text-anchor="middle">CLEAR</text>
<text x="5978" y="690" class="label" text-anchor="middle">다음 맵: Japan</text>
</g>
<g id="bottom-notes">
<rect x="96" y="900" width="6008" height="48" rx="12" fill="#071820" stroke="#2a7688" stroke-width="2" opacity="0.9"/>
<text x="126" y="931" class="small">수정 기준: 바닥을 이어야 하는 곳은 타일이 계속 연결되고, 2단 점프 구간만 실제 빈틈으로 표현. 장애물/아이템은 이 좌표 흐름을 기준으로 프리팹 배치.</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB