본문으로 건너뛰기

게임 템플릿

Roofrail Endless Runner Game App

An Expo / React Native endless runner: swipe across three lanes of a rail yard at dusk, jump barriers, slide under signals, collect coins for outfits, finish missions and climb a weekly board. Plays on sample data out of the box.

  • 화면 10개
  • iOS & Android
  • 샘플 데이터
  • 2026년 10월 29일 업데이트
  • 검증된 릴리스

무료 복사 · 전체 소스 · 카드 필요 없음

화면

실제 앱의 화면 6개

포함된 내용

  1. Playable in the first second: the game is the home screen, and the first swipe starts the run
  2. A pure, tested engine: a seeded track with a free lane in every row, jumps, slides, side bumps, a 3-minute speed ramp
  3. The yard at dusk, freight cars, signals and eight runners, all drawn in code with react-native-svg
  4. Game feel: hit-stop, screen shake, a crash flash, particles, score pops and haptics, all calm under reduce motion
  5. Missions counted from real runs, a 7-day daily reward, and an outfit shop paid in coins
  6. A weekly board of rivals drawn in their outfits, and the phone's 10 longest runs; on Supabase the server times each run

템플릿 소개

Overview

Roofrail is an endless runner built on Expo SDK 57 and React Native with the FluxNative kernel. The first screen is the game: a rail yard at dusk seen from behind the runner, three tracks running to the horizon, and the first swipe starts the run. Swipe left or right to change lane, up to jump a barrier, down to slide under a signal gantry; freight cars take a lane change. The yard speeds up from 9 to 18 m/s over three minutes.

With .env blank the game runs in sample mode: a sample player with a best of 1,842 m, 3,120 coins, two outfits, ten recent runs, missions half done and day 3 of the daily reward waiting. Everything the player does is kept on the device. Setting the Supabase values turns on the weekly board; setting the RevenueCat keys sells Plus.

Key features

  • The game: ready, running, paused and over on one full-bleed screen, with the distance, coins and best in the HUD and a medal for each distance band at the end

  • Rules in a pure engine (engine.ts), unit-tested: every row of obstacles leaves a passable lane, the first hazard is more than 1.5 s away, walls of three only after 400 m

  • Shop: eight outfits, each with its own headwear (a cap, a beanie, headphones, the hood up, a bucket hat, a headlamp, a visor, goggles), some with a backpack, a scarf or a light trail, bought with coins; the runner shown big on the yard

  • Missions: three at a time from real runs (jump 12 barriers in one run, collect 300 coins, run 500 m without jumping…), each a step harder the next time

  • Daily reward: a 7-day ladder claimed once per device date; a skipped day waits instead of starting over

  • Leaderboard: this week's board, rivals drawn as runners in their outfits and your place among them (a sample crew until Supabase is connected), and the phone's ten longest runs

  • How to play: the three swipes drawn with the game's own sprites

  • Settings: sound effects, vibration, reduce motion, Plus, How to play, About, Terms, Privacy and Delete my data

Screens

10 screens: the game (ready, running, paused, over), Shop, Missions, Leaderboard, How to play, Roofrail Plus, Settings, About, Terms of Use and Privacy Policy. One stack with no tab bar; the pushed screens follow the iOS 26 look in light and dark, the game keeps its dusk palette in both.

Game and backend

  • One requestAnimationFrame loop while running, a pure step(run, dt) with dt clamped to 0.05 s, seeded randomness, swipes through PanResponder (touch, mouse and the preview's taps)

  • The game folder reads app data through one hook (useGameProgress), so it lifts into another app

  • Weekly board on Supabase: each player reads only their own rows, one anonymous sign-in per device, names made of the game's words (no free text to moderate)

  • The server times every run: start_run records the start, and submit_score takes each run once and refuses a distance its time cannot reach

  • The board's distance rule is the game's own speed curve, held to the engine by tests; nine sample runners fill the first week

  • Delete my data clears the device and removes the player's anonymous sign-in, name and runs from the board

Monetisation

Roofrail Plus is one non-consumable in-app purchase sold through the App Store and Google Play with RevenueCat (react-native-purchases): every outfit, including one only Plus has, and double coins on every run. Access comes from the plus entitlement only, with Restore purchase on the Plus screen. Without RevenueCat keys the Plus screen shows the intended price marked as a sample, says purchases open in the App Store version, and never grants access. No ads, no loot boxes, nothing that pays out.

Setup

  • Connect Supabase, apply the three migrations and allow anonymous sign-ins for the weekly board

  • Connect RevenueCat with a roofrail_plus product and a plus entitlement to sell Plus

  • Reskin the yard, the runner and the outfits in palette.ts, outfits.ts and art.tsx

  • Replace the sample Terms of Use and Privacy Policy with your own

gameendless runnerarcaderunner gameswipe gameleaderboardmissionssupabaserevenuecatreact nativeexpoios

제공 내용

  • 전체 소스 — TypeScript로 된 Expo와 React Native, 작업 공간의 앱으로 받아요.
  • 라이브 미리보기 — 모든 변경을 브라우저나 휴대폰에서 바로 확인해요.
  • 검증된 릴리스 — 컴파일되고 모든 화면이 오류 없이 열려요.
  • AI 어시스턴트 — 채팅으로 무엇이든 바꿔요. 변경마다 크레딧을 써요.
  • 빌드와 스토어 업로드 — iOS와 Android 빌드를 게시에서 App Store와 Google Play로 보내요.
  • 복사에 크레딧 불필요 — 복사 자체는 크레딧이 들지 않아요.

이전 버전의 FluxNative로 만들었어요. 사본은 그대로 동작해요. 앱 언어, 통화, 정보 링크가 필요할 때 에이전트에게 업데이트를 요청하세요.

필요한 것

  • FluxNative 계정 — Free 플랜은 앱을 2개까지 가질 수 있어요.
  • 시작에 백엔드 불필요 — 내 것을 연결할 때까지 샘플 데이터로 실행돼요.
  • Creator 이상 — 네이티브 빌드와 스토어 업로드용이에요.
  • 스토어 계정 — 게시하려면 Apple Developer Program(연 99달러)과 Google Play(1회 25달러)가 필요해요.

소스에 담긴 것

화면
10
사본 속 파일
339
이 앱을 위해 쓴 코드 줄
8,012
바로 쓰는 UI 컴포넌트
139

앱 텍스트: 영어 및 베트남어

기술 스택

Expo SDK
57.0.22
React Native
0.86.3
React
19.2.8
TypeScript
6.0.3
Expo Router
57.0.21
Supabase JS
2.112.3
RevenueCat
10.9.1

이 릴리스의 package.json 기준이에요.

디자인 시스템

제목
시스템 글꼴
본문
시스템 글꼴
  • 다크 모드 전용
  • Liquid Glass
  • 캡슐형 버튼
  • 떠 있는 카드

포크 후 설정

복사본은 이를 만든 AI 어시스턴트와 함께 열려요. 단계를 순서대로 진행하세요. 단계가 요구하는 연결은 Server에서 하고, 각 프롬프트를 보내세요.

  1. Connect Supabase for the weekly board

    Server › Backend › Supabase. Apply the three migrations in supabase/migrations in name order, allow anonymous sign-ins in the Supabase dashboard, and write the project URL and anon key to .env.

    AI용 프롬프트

    Connect this game to my Supabase project from Server › Backend › Supabase. Write EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY to .env. Apply the three migrations in supabase/migrations in name order: 20261027090000_weekly_board.sql, 20261027090100_weekly_board_crew.sql, then 20261027120000_weekly_board_server_timed.sql. Remind me to turn on Authentication › Sign In / Providers › Allow anonymous sign-ins in the Supabase dashboard, because each device signs in anonymously the first time it starts a run. Then check that the Leaderboard opens on This week with the nine sample runners, and that a finished run appears there under the device's board name.

  2. Sell Roofrail Plus

    Server › Monetization: a non-consumable roofrail_plus in App Store Connect and Google Play, the RevenueCat entitlement plus and the offering default with a Lifetime package, then the public SDK keys in .env.

    AI용 프롬프트

    Set up Roofrail Plus through RevenueCat from Server › Monetization. Create a non-consumable in-app purchase with the product ID roofrail_plus in App Store Connect and a one-time product roofrail_plus in Google Play, an entitlement named plus that holds them, and the current offering default with a Lifetime package of it. Write EXPO_PUBLIC_REVENUECAT_IOS_KEY and EXPO_PUBLIC_REVENUECAT_ANDROID_KEY to .env, and set PLAN_PREVIEW in src/services/iap/index.ts to the price I choose. Tell me how to test a sandbox purchase and Restore purchase on a device build.

  3. Reskin the yard and the runner

    The world's colours are in src/features/game/palette.ts, the outfits and their coin prices in outfits.ts, every drawing in art.tsx and runner.tsx, the logotype in assets/logo.svg. Keep outfit ids stable once players own them.

    AI용 프롬프트

    Reskin Roofrail for my game. Change the world's colours in src/features/game/palette.ts to my palette, rename and recolour the eight outfits in src/features/game/outfits.ts (keep their ids), and redraw the logotype in assets/logo.svg with my game's name, then render assets/logo.png from it at 1080 px wide (src/features/game/Logo.tsx shows it). Keep the lime coin colour for coins only. Show me the ready screen and the shop after the change.

  4. Use your own Terms and Privacy Policy

    Set EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_PRIVACY_POLICY_URL in .env, or replace the sample text of the in-app pages in src/features/legal/copy.ts with your studio's own.

    AI용 프롬프트

    Replace Roofrail's sample legal text. Ask me for my studio's name and contact email, then rewrite src/features/legal/copy.ts (Terms of Use and Privacy Policy) for my studio, keeping what the game really does: progress on the device, the weekly board's anonymous sign-in and run data when Supabase is connected, Plus through the App Store and Google Play, and Delete my data. If I already host the pages, write their addresses to EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_PRIVACY_POLICY_URL in .env instead.

이 템플릿 사용 방법

  1. 템플릿을 사용하면 소스가 포함된 편집 가능한 사본이 워크스페이스에 생겨요(템플릿).
  2. 원하는 변경을 AI 어시스턴트에게 평소 말투로 요청하세요(어시스턴트와 작업하기).
  3. 각 변경은 실시간 미리보기나 휴대폰에서 확인하세요(미리보기).
  4. Creator 이상 플랜에서 iOS와 Android용으로 빌드해 스토어에 제출하세요(게시 개요).

라이선스와 지원

라이선스

나를 위해 만든 앱은 내 것이에요. 템플릿 코드는 InspireUI 소유로 남으며 내 앱에서 쓰도록 라이선스돼요(약관 › 당사의 지식재산).

도움말

  • 템플릿, 어시스턴트, 게시 가이드.
  • 도움말에서 지원팀에 문의하세요. 보통 영업일 기준 1~2일 안에 답해요.
  • 복사본에서 어떤 화면이나 파일이든 AI 어시스턴트에게 물어보세요.

FluxNative 제작

지원 정책

질문

무료인가요?

무료 템플릿 복사는 크레딧도 들지 않아요. Premium은 웹사이트당 1회 구매예요. 채팅 변경과 빌드에는 크레딧을 써요.

무엇을 소유하나요?

나를 위해 만든 앱은 내 것이에요. 템플릿 코드는 InspireUI 소유이고 내 앱에서 쓸 수 있도록 라이선스돼요(이용약관 › 당사의 지적 재산).

코드를 알아야 하나요?

아니요. 어시스턴트에게 쉬운 말로 변경을 요청하세요. 필요하면 전체 소스도 있어요.

백엔드가 포함되나요?

아니요. 완전한 앱은 필요한 백엔드를 알려 주고, 서버에서 내 것을 연결해요. 디자인은 샘플 데이터로 실행돼요.

디자인을 바꿀 수 있나요?

네. 디자인 탭에서 브랜드 색, 색상, 글꼴, 모서리를 크레딧 없이 설정해요. 나머지는 어시스턴트가 바꿔요.

게시하려면 어떤 플랜이 필요한가요?

Creator 이상이면 내 Apple·Google 계정으로 빌드하고 스토어에 업로드해요. Premium 템플릿의 앱은 웹사이트를 연결하면 어떤 플랜이든 빌드돼요.

소스를 다운로드할 수 있나요?

네. 작업 공간에서 플랜, 크레딧 또는 유료 템플릿을 구매했다면 소스 다운로드나 GitHub 푸시로 가능해요. Premium 템플릿의 앱은 웹사이트 연결도 필요해요.

이전 FluxNative로 만들었다면요?

복사본은 그대로 작동해요. 앱 언어와 통화 같은 새 기능은 어시스턴트에게 업데이트를 요청하세요. 마지막 설정 단계예요.

내 앱으로 만들어 볼까요?

Roofrail Endless Runner Game App에서 시작해 채팅으로 무엇이든 바꾸세요. 사본에는 전체 소스 코드가 포함돼요.

무료로 복사하세요. 신용카드는 필요 없어요.

Taking a little longer than usual…

Loading FluxNative