コンテンツへスキップ

ゲームのテンプレート

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