Spiele-Vorlage
Flitwing One-Tap Flying Game App
An Expo / React Native one-tap flyer: flap a round bird through the gaps between wooden posts over a morning meadow, take golden seeds, win medals, buy birds, finish missions and climb a weekly board. Plays on sample data.
- 10 Screens
- iOS & Android
- Beispieldaten
- Aktualisiert am 29. Okt. 2026
- Geprüfte Version
- 1 Kopie erstellt
Gratis kopieren · Voller Quellcode · Keine Kreditkarte
Screens
6 Screens aus der laufenden App.
Was drinsteckt
- Playable in the first second: the game is the home screen and the first tap flaps and starts the round
- A pure, tested engine in bird heights: a seeded course, a sawtooth ramp from a forgiving start, a fairness autopilot
- Every picture drawn in code with react-native-svg: a morning meadow in three parallax layers, walnut posts, eight birds
- Game feel: wing poses and tilt, hit-stop, shake, a white flash, feathers and score pops, calm under reduce motion
- Three missions from real runs, a 7-day daily reward as posts rising from the meadow, and eight birds bought with coins
- Leaderboard: a podium of rival birds, your ten best runs, and a weekly Supabase board that refuses impossible scores
Über diese Vorlage
Overview
Flitwing is a one-tap flying game built on Expo SDK 57 and React Native with the FluxNative kernel. The first screen is the game: a bright morning sky over a meadow, the bird bobbing beside its wordmark, your best and its medal, and a pulsing Tap to fly. Each tap sets the bird's upward speed; posts slide in with a gap to fly through, every post passed is a point and a golden seed is three. A crash freezes for a beat, shakes the world and drops the bird, then one panel shows the score, the best, the medal and the coins, with Play again starting the next round at once.
With .env blank the game runs in sample mode: a player two weeks in with a best of 47 (silver), 1,240 coins, three birds, ten recent runs, missions half done and day 4 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, flying, paused and over on one full-bleed screen, with the score top left over the best, the coin pill and a round pause button top right, and a raised dock of drawn icons to Shop, Missions, Scores and Settings
Rules in a pure engine (engine.ts), unit-tested: a tap sets the upward speed, the first post arrives 2.4 s after the first tap, the gap narrows every 10 posts with three easy posts after each step
Shop: eight birds that differ by build, face, tail, beak and one prop (a tuft, goggles, a scarf, a leaf cap, a bobble hat, a flame crest, a star trail), each on a twig on a tile in its colour, locked ones as silhouettes behind a padlock, the one on show big on a branch
Missions: three at a time from real runs (pass 20 posts in one run, take 8 golden seeds, fly for 3 minutes…), a coin reward each, harder each time round the ladder
Daily reward: a 7-day ladder by the phone's date, drawn as posts rising from the meadow with the bird perched on today's
Leaderboard: a podium of the week's three best birds on posts, the flock of rival birds to beat, your ten best runs and a chart of the last ten; with Supabase a weekly board of every player
How to play: three steps drawn with the game's own sprites, and the four medals
Settings: sound effects, vibration, reduce motion, How to play, Plus, About, Terms of use, Privacy policy and Delete my data
Screens
10 screens: the game (ready, flying, paused, over), Shop, Missions, Leaderboard, How to play, Flitwing Plus, Settings, About, Terms of use and Privacy policy. One stack with no tab bar. Every pushed screen lives in the game's world: its sky is the page and the meadow runs along its foot, titles are drawn in the wordmark's outlined type, and each screen is staged its own way (a bird on a branch in the shop, a podium of posts on the leaderboard, a flock on Plus). Only what you tap is raised: chunky buttons with a lip that sinks, over flat framed boards and wooden plaques. The day look holds in light and dark, as most casual games do.
Game and backend
One requestAnimationFrame loop while flying, a pure step(game, dt) with dt clamped to 0.05 s, seeded randomness, taps through PanResponder at touch-down (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: nobody reads the tables (row-level security, a player sees only their own runs); the board comes from one function with names, bests, places and the sample rivals marked, never an id; anonymous sign-in, names made on the server from the player's id
The server times every run: start_run at the first tap, then submit_score takes each run once and refuses a score the run's time cannot hold or a run longer than the time since it started; the rule is held to the engine by tests
A run that ends offline is kept and sent later, and the board says when the last run did not go up; eight sample rivals, marked as samples, fill the first week
Delete my data clears the device and takes the player's runs off the board, waiting for the network when it must; Plus stays with the store account
Monetisation
Flitwing Plus is one non-consumable in-app purchase sold through the App Store and Google Play with RevenueCat (react-native-purchases): every bird, including Midnight that 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 migration and allow anonymous sign-ins for the weekly board
Connect RevenueCat with a flitwing_plus product and a plus entitlement to sell Plus
Rename the game, then reskin the sky, the posts and the birds in palette.ts and art.tsx
Set NEW_DEVICE_SAVE to empty and replace the sample Terms of use and Privacy policy before you ship
Das bekommst du
- Voller Quellcode — Expo und React Native in TypeScript, als App in deinem Workspace.
- Live-Vorschau — probiere jede Änderung im Browser oder auf deinem Handy aus.
- Geprüfte Version — sie kompiliert und jeder Screen öffnet ohne Fehler.
- KI-Assistent — ändere alles per Chat; jede Änderung kostet Credits.
- Builds und Store-Upload — iOS- und Android-Builds, aus Veröffentlichen an App Store und Google Play gesendet.
- Keine Credits fürs Kopieren — die Kopie selbst kostet keine.
Mit einer früheren Version von FluxNative erstellt. Deine Kopie funktioniert so, wie sie ist; bitte den Agenten um ein Update, wenn du App-Sprachen, Währungen und Über-Links möchtest.
Das brauchst du
- Ein FluxNative-Konto — der Free-Tarif fasst bis zu 2 Apps.
- Kein Backend zum Start — läuft mit Beispieldaten, bis du deines verbindest.
- Creator oder höher — für native Builds und Store-Upload.
- Store-Konten — Apple Developer Program (99 US$ im Jahr) und Google Play (25 US$ einmalig), zum Veröffentlichen.
Was im Quellcode steckt
- Screens
- 10
- Dateien in deiner Kopie
- 323
- Codezeilen eigens für diese App
- 6.391
- fertige UI-Komponenten
- 139
App-Texte auf Englisch und Vietnamesisch
Tech-Stack
- 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
Aus der package.json dieser Version.
Designsystem
- Überschriften
- Outfit
- Fließtext
- Systemschrift
- Nur heller Modus
- Liquid Glass
- Kapsel-Buttons
- Erhöhte Karten
Einrichtung nach dem Fork
Deine Kopie öffnet sich mit dem KI-Assistenten, der sie gebaut hat. Geh die Schritte der Reihe nach durch: Verbinde unter Server, was ein Schritt verlangt, und sende dann jeden Prompt.
Connect Supabase for the weekly board
Server › Backend › Supabase. Apply supabase/migrations/20261027120000_weekly_board.sql, allow anonymous sign-ins in the Supabase dashboard, and write the project URL and anon key to .env. The leaderboard then opens on This week.
Prompt für die KIConnect this game to my Supabase project from Server › Backend › Supabase. Write EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY to .env and apply supabase/migrations/20261027120000_weekly_board.sql. Remind me to turn on Authentication › Sign In / Providers › Allow anonymous sign-ins in the Supabase dashboard, because each device signs in anonymously when its first run starts. Then check that the Leaderboard opens on This week with the eight sample rivals marked as samples, and that a finished run appears there under the device's board name. Before launch, delete the sample rivals (delete from public.scores where sample).
Sell Flitwing Plus
Server › Monetization: a non-consumable flitwing_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.
Prompt für die KISet up Flitwing Plus through RevenueCat from Server › Monetization. Create a non-consumable in-app purchase with the product ID flitwing_plus in App Store Connect and a one-time product flitwing_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.
Rename and reskin the game
The wordmark draws GAME_TITLE in src/features/game/GameScreen.tsx; the sky, posts, seeds and birds are named once in palette.ts and drawn in art.tsx; the birds' names and coin prices are SKINS in src/services/progress.
Prompt für die KIReskin Flitwing as my game. Ask me for the game's name and its hero (a bird, a helicopter, a fish…). Set GAME_TITLE in src/features/game/GameScreen.tsx and the app name in app.json, change the scene's colours in src/features/game/palette.ts, redraw the hero in BirdBody in src/features/game/art.tsx, and rename the eight looks in SKINS (src/services/progress/index.ts) keeping their ids. Show me the ready screen, a round and the shop in light and dark after the change.
Get ready to ship
Set NEW_DEVICE_SAVE to "empty" in src/services/progress/index.ts so new players start at zero, and use your own Terms of use and Privacy policy (in-app pages or their URLs in .env).
Prompt für die KIPrepare Flitwing for release. Set NEW_DEVICE_SAVE to "empty" in src/services/progress/index.ts. Ask me for my studio's name and contact email, then rewrite src/features/legal/TermsScreen.tsx and src/features/legal/PrivacyScreen.tsx for my studio, keeping what the game really does: progress on the device, the weekly board's anonymous sign-in id and runs, purchases through the stores and RevenueCat, and the IP address those servers see. Change the bundle ID and package name in app.json to mine.
So nutzt du diese Vorlage
- Nutze die Vorlage, um eine bearbeitbare Kopie samt Quellcode in deinem Workspace zu erhalten (Vorlagen).
- Bitte den KI-Assistenten in eigenen Worten um die gewünschten Änderungen (Mit dem Assistenten arbeiten).
- Probiere jede Änderung in der Live-Vorschau oder auf deinem Handy aus (Vorschau).
- Ab Creator baust du sie für iOS und Android und reichst sie in den Stores ein (Veröffentlichen im Überblick).
Lizenz und Support
Lizenz
Die für dich erstellte App gehört dir; der Code der Vorlage bleibt bei InspireUI und ist für die Nutzung in deinen Apps lizenziert (Bedingungen › Unser geistiges Eigentum).
Hilfe
- Anleitungen zu Vorlagen, Assistent und Veröffentlichung.
- Support kontaktieren über Hilfe; Antwort meist in 1–2 Werktagen.
- Frag in deiner Kopie den KI-Assistenten zu jedem Screen oder jeder Datei.
Von FluxNative
Support-RichtlinieFragen
Ist es kostenlos?
Eine kostenlose Vorlage zu kopieren kostet nichts, auch keine Credits; eine Premium-Vorlage ist ein Einmalkauf pro Website. Chat-Änderungen und Builds kosten Credits.
Was gehört mir?
Die für dich erstellte App gehört dir. Der Code der Vorlage bleibt bei InspireUI und ist für die Nutzung in deinen Apps lizenziert (Bedingungen › Unser geistiges Eigentum).
Muss ich programmieren können?
Nein. Bitte den Assistenten in einfachen Worten um Änderungen; den vollen Quellcode siehst du, wenn du willst.
Kommt sie mit Backend?
Nein. Eine vollständige App nennt das nötige Backend und du verbindest deines unter Server; ein Design läuft mit Beispieldaten.
Kann ich das Design ändern?
Ja. Im Tab Design stellst du Markenfarbe, Farben, Schriften und Ecken ohne Credits ein; den Rest ändert der Assistent.
Welchen Tarif brauche ich zum Veröffentlichen?
Ab Creator baust du und lädst in die Stores hoch, mit deinen eigenen Apple- und Google-Konten. Die App einer Premium-Vorlage baut mit jedem Tarif, sobald ihre Website verbunden ist.
Kann ich den Quellcode herunterladen?
Ja, mit Quellcode herunterladen oder Push zu GitHub, sobald dein Workspace einen Tarif, Credits oder eine bezahlte Vorlage gekauft hat. Die App einer Premium-Vorlage braucht zusätzlich ihre verbundene Website.
Was, wenn sie mit einem früheren FluxNative erstellt wurde?
Deine Kopie funktioniert wie sie ist. Lass sie vom Assistenten auf neuere Funktionen wie App-Sprachen und Währungen aktualisieren; das ist der letzte Einrichtungsschritt.
Bereit, daraus deine App zu machen?
Starte mit Flitwing One-Tap Flying Game App und ändere alles per Chat. Deine Kopie enthält den vollständigen Quellcode.
Kostenlos kopieren. Keine Kreditkarte nötig.