Jak wypuścić grę 3D na Vercel w ten weekend (z umiejętnościami AI)

Vibe Skills

Przeglądaj setki gotowych umiejętności dla Claude, Cursor i nie tylko.

Przeglądaj umiejętności

Rozpocznij teraz za darmo

Wypuść grę 3D na Vercel do niedzielnego wieczora: 48-godzinny podręcznik wdrażania

Możesz przejść od pustego piątkowego wieczoru do linku twoja-gra.vercel.app do niedzielnego obiadu. Stos technologiczny to Three.js, Cursor, umiejętność AI z Vibe Skills i darmowa warstwa Vercel. Całkowity koszt weekendu: 0 zł. Całkowita infrastruktura, którą musisz nadzorować: również zero.

To nie jest "zbuduj prototyp na swoim laptopie i nazwij to ukończonym". To jest publiczny adres URL, który każdy na świecie może otworzyć w przeglądarce, z HTTPS, buforowaniem brzegowym i niestandardową domeną, jeśli chcesz. Umiejętność AI wdraża szkielet Three.js i działający plik vercel.json. Cursor obsługuje pętlę iteracji. Vercel obsługuje wdrożenie. Ty zajmujesz się projektem.

Ten przewodnik jest dla niezależnych programistów, koderów z dobrym wyczuciem stylu, uczestników hackathonów i każdego, kto ma dość niedokończonych zakładek localhost:5173. Omawia, dlaczego ten stos technologiczny działa, anatomię 48-godzinnego wdrożenia, pięć umiejętności gier 3D stworzonych z myślą o tym przepływie pracy oraz szczegółowy plan od piątku do niedzieli.

Vibe Skills

Przeglądaj setki gotowych umiejętności dla Claude, Cursor i nie tylko.

Przeglądaj umiejętności

Rozpocznij teraz za darmo

Dlaczego Vercel + Three.js + Umiejętności AI to stos technologiczny dla jednego programisty

Vercel to najłatwiejszy możliwy cel wdrożenia dla gry Three.js. Wciśnij kod do GitHub, Vercel to zauważy, zbuduje projekt i zwróci Ci adres URL w ciągu 60 sekund. Bez serwera do udostępnienia, bez pliku Docker, bez konfiguracji NGINX, bez konfiguracji SSL. Pakiet Three.js to tylko statyczne zasoby HTML, JS i WebGL, co dokładnie Vercel network brzegu został stworzony do obsługi.

Darmowa warstwa komfortowo obsługuje weekendowe uruchomienie:

• 100 GB przepustowości miesięcznie. Pakiet Three.js o wielkości 5 MB przy 10 000 odtworzeniach to 50 GB. Zabranie Ci przepustowości zajmie mniej czasu niż weekend.
• Nieograniczone wdrożenia statyczne z HTTPS i subdomeną *.vercel.app.
• Obsługa niestandardowych domen na darmowej warstwie - przynieś własną domenę twoja-gra.com, jeśli ją masz, w przeciwnym razie darmowy adres URL vercel.app można udostępniać na każdej platformie społecznościowej.
• Podgląd wdrożeń dla każdego zatwierdzenia - każde naciśnięcie kodu otrzymuje własny adres URL, dzięki czemu możesz udostępnić wersję znajomemu i kontynuować iterację bez jej psucia.

Dodaj umiejętność AI z Vibe Skills, a kod początkowy również zniknie. Konfiguracja sceny Three.js, kontroler gracza, potok kompilacji i vercel.json gotowy do Vercel są generowane za pomocą jednego polecenia. Następnie Cursor zamienia resztę weekendu w czat, podczas którego opisujesz żądaną rozgrywkę i dostosowujesz wyniki. To jest pełny stos technologiczny: umiejętność z rynku dla fundamentów, edytor AI do iteracji i Vercel do wdrożenia. Samodzielnie, za darmo i szybko.

Vibe Skills

Przeglądaj setki gotowych umiejętności dla Claude, Cursor i nie tylko.

Przeglądaj umiejętności

Rozpocznij teraz za darmo

Anatomia 48 godzin: Od koncepcji w piątek do wdrożenia w niedzielę

Każde wdrożenie weekendowe, które faktycznie się powiedzie, przebiega według tych samych etapów. Sztuczka polega na zaplanowaniu wdrożenia w piątek, a nie w niedzielę po południu, aby ostatnie sześć godzin zostało poświęcone na dopracowanie, a nie na walkę z błędem kompilacji.

Powodem, dla którego to działa, jest piątkowe wypchnięcie kodu do Vercel. Gdy adres URL istnieje, każde zatwierdzenie kodu w sobotę i niedzielę jest automatycznie wdrażane. Nie ma "paniki wdrożeniowej w niedzielę wieczorem", ponieważ wdrożenie już nastąpiło w piątek i działało automatycznie przez cały weekend.

Jak wygląda "Vibe Coding" gry 3D na Vercel

Vibe coding polega na opisywaniu tego, czego chcesz, prostym angielskim i pozwoleniu edytorowi AI na napisanie kodu, a następnie iteracji na podstawie wyników. W przypadku gry Three.js na Vercel pętla jest niezwykle czysta: każda zmiana w Cursor jest o krok pnpm dev od lokalnego sprzężenia zwrotnego, a następnie o krok git push od działającego adresu URL podglądu, a następnie automatycznie wdrażana do produkcji na gałęzi main.

Weekend z grą Vercel kodowaną w stylu "vibe" wygląda następująco:

1. Otwórz folder startowy umiejętności w Cursor.
2. Opisz funkcję w czacie: "podwójny skok, jeśli spację naciśniesz dwukrotnie w ciągu 200 ms".
3. Cursor edytuje plik kontrolera. Zapisz. pnpm dev przeładowuje. Czujesz skok w przeglądarce.
4. Jeśli czujesz, że jest dobrze, git push. Vercel zbuduje adres URL podglądu. Wyślij go znajomemu.
5. Połącz z gałęzią main, gdy czucie będzie zablokowane. Adres URL produkcji zaktualizuje się w ciągu 60 sekund.

AI wykonuje pisanie kodu. Vercel wykonuje wdrażanie. Ty wykonujesz odczucie i projekt.

5 umiejętności gier 3D AI, które to umożliwiają w Vibe Skills

Te umiejętności są stworzone z myślą o weekendowym przepływie pracy Vercel + Three.js + Cursor. Każda z nich wdraża projekt Three.js oparty na Vite, działający plik vercel.json, polecenie pnpm build, które produkuje statyczny pakiet, który Vercel może serwować z brzegu, oraz przetestowaną ścieżkę wdrożenia. Wszystkie znajdują się w kategorii Gry 3D w Vibe Skills.

1. Starter gry Three.js + Vercel

Domyślny wybór. Generuje scenę Three.js z kontrolerem gracza, kamerą z perspektywy trzeciej osoby, zestawem oświetlenia, niebo i płaszczyzną z kolizjami. Wdraża plik vercel.json, który ustawia odpowiednie nagłówki buforowania dla pakietów zasobów Three.js. pnpm dev działa lokalnie; jedno kliknięcie w panelu Vercel łączy repozytorium GitHub i masz działający adres URL.

Najlepsze dla: każdego gatunku oprócz czystych 2D. Użyj tego, jeśli jeszcze nie wiesz, co budujesz.

2. Chodzik Vercel z perspektywy pierwszej osoby

Wypolerowany kontroler z perspektywy pierwszej osoby (WASD + blokada wskaźnika myszy + grawitacja + sprint + skok) z hakami na kroki, kołysaniem głowy i plikiem vercel.json, który poprawnie obsługuje nagłówki CSP blokady wskaźnika. Ten element często sprawia problemy wielu programistom pracującym samodzielnie w produkcji. Umiejętność rozwiązuje ten problem za Ciebie.

Najlepsze dla: symulatorów chodzenia, prototypów horrorów, gier narracyjnych, wystaw muzealnych.

3. Zestaw strzelanki arenowej przeglądarkowej

Arena z widokiem z góry (kontroler z dwoma joystickami, generator fal, podstawowe AI wrogów, system pocisków, HUD punktacji) z kompilacją dostosowaną do Vercel, która kompresuje zasoby, dzieli kod AI i ładuje muzykę na żądanie. Zawiera haki do trybu wieloosobowego; weekend obejmuje tryb dla jednego gracza.

Najlepsze dla: strzelanek zręcznościowych, bullet hell, wpisów na konkursy, które muszą szybko ładować się na urządzeniach mobilnych.

4. Platformówka logiczna Vercel

Platformówka z perspektywy trzeciej osoby (skok zmienny, czas na krawędzi, wykrywanie krawędzi), punkty kontrolne, trzy przykładowe poziomy, które można edytować w Blenderze lub w kodzie, oraz pętla odradzania. Plik vercel.json jest skonfigurowany do natychmiastowego przeładowywania poziomów buforowanych brzegowo, dzięki czemu testowanie jest szybkie na telefonie.

Najlepsze dla: platformówek logicznych, prototypów parkour, eksperymentów z projektowaniem poziomów.

5. Piaskownica do jazdy Vercel

Zręcznościowe wrażenia z jazdy (krzywa przyspieszenia, fizyka dryfu, opóźnienie kamery, podstawowy teren) z niskopoligonalnym samochodem, szablonem toru i wdrożeniem zoptymalizowanym pod kątem dużych siatek terenowych. Predefiniowane nagłówki HTTP sprawiają, że kontekst WebGL uruchamia się szybciej w Safari, historycznie najwolniejszej przeglądarce dla Three.js.

Najlepsze dla: wyścigów zręcznościowych, jazdy terenowej, demonstracji wyczucia samochodu do portfolio.

Przeglądaj wszystkie umiejętności gier 3D w Vibe Skills →

Od piątku do niedzieli krok po kroku

To jest dokładny harmonogram. Dostosuj godzinę rozpoczęcia, ale zachowaj kolejność. Kluczowym kamieniem milowym jest wdrożenie Vercel w piątek wieczorem. Wszystko po tym to iteracja.

Piątek 18:00 - 20:00: Wybierz umiejętność, wypchnij do GitHub, podłącz Vercel

Krok 1: Wybierz umiejętność gry 3D w Vibe Skills. Przeglądaj kategorię Gry 3D, wybierz tę, która pasuje do Twojego gatunku, i zainstaluj starter w nowym folderze. Otwórz go w Cursor. Do 19:00 powinieneś widzieć scenę Three.js z poruszającym się graczem.

Krok 2: Utwórz repozytorium GitHub i wypchnij. git init, git remote add, git push. Użyj nazwy gry jako nazwy repozytorium (crystal-runner, lunar-fishing, cokolwiek). Nazwa repozytorium często staje się Twoim adresem URL.

Krok 3: Podłącz repozytorium do Vercel. Zaloguj się do Vercel za pomocą GitHub (bezpłatnie), kliknij "Dodaj nowy projekt", wybierz repozytorium. Vercel automatycznie wykryje Vite i skonfiguruje kompilację. Kliknij Wdróż. W ciągu 60 sekund otrzymasz adres URL crystal-runner.vercel.app. Otwórz go na swoim telefonie. Udostępnij jednemu znajomemu. Pasek wdrażania jest teraz zerowy do końca weekendu.

Piątek 20:00 - 22:00: Napisz dokument projektowy

Krok 4: Odpowiedz na pięć pytań prostym angielskim. Otwórz stronę Notion lub plik markdown w repozytorium i odpowiedz:

• Co gracz robi co 5 sekund? (główna pętla)
• Jaki jest warunek wygranej i warunek przegranej?
• Jak długo trwa jedna rozgrywka lub jeden poziom?
• Jaki jest haczyk wizualny? (paleta, oświetlenie, odniesienie stylistyczne)
• Jaka jest jedna cecha, która sprawia, że to zapada w pamięć w 30 sekund?

Krok 5: Zatwierdź dokument projektowy. Wypchnij go do repozytorium. Vercel ponownie wdroży. Dyscyplina wypychania każdej znaczącej zmiany utrzymuje aktualny adres URL na żywo.

Sobota 9:00 - 13:00: Zbuduj główną mechanikę

Krok 6: Zamień placeholder mechanikę na swoją jedną cechę. To jest jedyna cecha, która ma znaczenie. Użyj czatu Cursor, aby ją opisać („kiedy gracz podniesie kryształ, zamroź pobliskich wrogów na 2 sekundy i zagraj dzwonek”). Iteruj lokalnie za pomocą pnpm dev. Gdy poczujesz, że jest dobrze, wypchnij.

Krok 7: Połącz stan wygranej/przegranej. 60-sekundowa kompilacja z prawdziwym zakończeniem brzmi jak gra. 60-minutowa kompilacja bez zakończenia brzmi jak demonstracja technologiczna. Zawsze najpierw łącz ekran zwycięstwa, potem wszystko inne.

Sobota 13:00 - 20:00: Dodaj jeden poziom

Krok 8: Zbuduj jeden dopracowany poziom. Nie trzy niedopieczone. Użyj pudełek zastępczych jako geometrii. Użyj postaci z pakietu umiejętności. Dostosuj odczucie - wysokość skoku, opóźnienie kamery, intensywność cząsteczek.

Krok 9: Dodaj nakładkę samouczka. Dwuzdaniowy komunikat "WASD do poruszania się, kliknij, aby strzelać" przy pierwszym uruchomieniu ratuje Twoje uruchomienie przed zdezorientowanymi graczami, którzy rezygnują w ciągu 8 sekund. Cursor może wygenerować nakładkę React (lub Vanilla DOM) w 30 sekund.

Krok 10: Wypychaj co godzinę. Każde wypchnięcie generuje adres URL podglądu Vercel. Wyślij każde z nich do znajomego. Pętla sprzężenia zwrotnego jest tajną bronią tego stosu technologicznego.

Niedziela 10:00 - 16:00: Dopracowanie

Krok 11: Dodaj trzy dźwięki. Pętla kroków, ambientowy pad, dźwięk zwycięstwa. Nawet trzy dźwięki znacznie poprawiają prototyp weekendowy. Darmowe źródła: freesound.org, opengameart.org.

Krok 12: Dodaj efekty. Cząsteczki przy trafieniu, drżenie ekranu przy uderzeniu, wyskakujące liczby przy punktacji. Efekty sprawiają, że kompilacja weekendowa wygląda jak 6-miesięczna w GIF-ie. Poproś Cursor o dodanie "drżenia ekranu o intensywności 0,3 przez 150 ms, gdy gracz otrzyma obrażenia" - napisze to hak drżenia kamery w pięć sekund.

Krok 13: Uruchom test Lighthouse. Otwórz adres URL Vercel na telefonie i uruchom Chrome DevTools Lighthouse. Pakiety Three.js zazwyczaj mają rozmiar od 400 KB do 1,5 MB. Jeśli przekraczasz 3 MB, poproś Cursor o włączenie dzielenia kodu dla ciężkich modułów. Vercel gzip i brotli zajmie się resztą.

Krok 14: Przegląd błędów. Zagraj w swój działający adres URL pięć razy z rzędu. Napraw wszystko, co się psuje dwa razy. Zignoruj wszystko, co psuje się raz.

Niedziela 16:00 - 20:00: Uruchomienie

Krok 15: (Opcjonalnie) Ustaw niestandardową domenę. Jeśli wcześniej kupiłeś domenę twoja-gra.com, dodaj ją w ustawieniach projektu Vercel. SSL jest automatyczny. W przeciwnym razie adres URL *.vercel.app jest w porządku - ma HTTPS, można go udostępniać i ładuje się wszędzie.

Krok 16: Nagraj 15-sekundowy GIF z najlepszym momentem. Użyj działającego adresu URL, a nie localhost. GIF jest tym, co klika się na Twitterze, Bluesky i Reddit.

Krok 17: Utwórz stronę itch.io (opcjonalnie, ale o dużym wpływie). Tytuł, jedno zdanie podsumowania, trzy zrzuty ekranu, GIF, sterowanie, napisy końcowe i osadzony iframe z Twoim adresem *.vercel.app (itch.io obsługuje osadzanie iframe dla gier HTML5). Teraz masz dwa adresy URL - jeden do swobodnego udostępniania, a drugi dla graczy.

Krok 18: Opublikuj link. Twitter, Bluesky, Twój Discord społeczności programistów, r/IndieDev, r/threejs, r/WebGames. Zawsze zaczynaj od GIF-a. Zawsze dołączaj adres URL. Jeśli użyłeś umiejętności Vibe Skills, wspomnij o tym w poście dziennika deweloperskiego - inni programiści czytający go będą chcieli tego samego startera.

Jak uniknąć trzech najczęstszych błędów wdrożenia Vercel

Trzy rzeczy psują prawie każdy weekend z Three.js + Vercel dla jednego programisty. Wszystkie trzy to 5-minutowe poprawki, jeśli wyłapiesz je w piątek wieczorem, i 5-godzinne ścieżki na króliczki, jeśli odkryjesz je w niedzielę o 19:00.

• Niewłaściwy katalog wyjściowy kompilacji. Vite domyślnie używa dist/. Vercel automatycznie wykrywa Vite i używa dist/. Jeśli dostosowałeś dane wyjściowe, ustaw outputDirectory w vercel.json lub ustawieniach projektu, w przeciwnym razie Twoje wdrożenie zakończy się błędem 404.
• Ścieżki zasobów, które działają lokalnie, ale generują błąd 404 w produkcji. Używaj ścieżek względnych lub pomocnika Vite import.meta.env.BASE_URL dla każdego ładowanego w czasie wykonywania pliku GLB, tekstury lub audio. Ścieżki z kodem assets/... zazwyczaj działają, ale skopiowane absolutne ścieżki systemu Windows na pewno nie.
• Nagłówki CSP blokujące blokadę wskaźnika lub kontekst audio. Gry z perspektywy pierwszej osoby potrzebują blokady wskaźnika. Dźwięk wymaga aktywacji przez gest użytkownika. Każda umiejętność z kategorii Gry 3D zawiera odpowiedni blok headers w vercel.json do obsługi tego. Jeśli napisałeś własny od podstaw, skopiuj konfigurację z repozytorium umiejętności.

Wdrożenie działa w piątek, więc kiedy te błędy pojawią się w niedzielę, zawsze jest to spowodowane niedawną zmianą. git bisect jest Twoim przyjacielem. Jeszcze lepiej: wypychaj kod co 30 minut, aby uszkodzone zatwierdzenie było małe.

Najczęściej zadawane pytania

Czy darmowa warstwa Vercel naprawdę wytrzyma, jeśli moja gra zyska ruch?

Tak, na weekendowe uruchomienie i pierwsze kilka tygodni. Darmowa warstwa zapewnia 100 GB przepustowości miesięcznie, co odpowiada około 20 000 odtworzeń pakietu Three.js o rozmiarze 5 MB. Jeśli osiągniesz ten limit, plan Pro kosztuje 20 USD miesięcznie i zwiększa limit do 1 TB. Na weekendowe uruchomienie darmowa warstwa jest więcej niż wystarczająca. Umiejętności w Vibe Skills wdrażają konfiguracje kompilacji, które minimalizują rozmiar pakietu, co pozwala na dalsze wykorzystanie darmowej warstwy.

Czy mogę używać niestandardowej domeny na darmowej warstwie Vercel?

Tak. Darmowa warstwa obsługuje niestandardowe domeny z automatycznym HTTPS. Kup domenę (Namecheap, Cloudflare Registrar, Porkbun), skieruj ją na Vercel, a Vercel zajmie się certyfikatem SSL. Konfiguracja zajmuje około 10 minut. Jeśli nie masz domeny, adres URL twoja-gra.vercel.app jest wystarczająco krótki, aby udostępniać go na każdej platformie.

Czy ten stos technologiczny nadaje się do zgłoszenia na konkurs gier?

Tak, i jest to jeden z najlepszych stosów technologicznych do zgłoszeń na konkursy gier. Większość konkursów (Ludum Dare, GMTK, js13k, GitHub Game Off) akceptuje dowolny adres URL do gry w przeglądarce. Link *.vercel.app działa dokładnie tak samo jak adres URL itch.io dla sędziów. Wielu zwycięzców konkursów publikuje na obu platformach - itch.io dla graczy, Vercel jako szybki, kanoniczny adres URL.

Czy muszę znać Three.js przed rozpoczęciem?

Potrzebujesz wystarczająco dużo JavaScript, aby czytać to, co pisze Cursor, i dostosowywać wartości. Nie musisz pisać Three.js od zera. Umiejętności w Vibe Skills generują konfigurację silnika, kamerę, kontroler i konfigurację kompilacji. Cursor zajmuje się kodem rozgrywki na podstawie Twoich opisów.

Co się stanie, jeśli moja kompilacja Vercel się nie powiedzie w niedzielę o 19:00?

Najczęstszą przyczyną jest błąd TypeScript lub brak zmiennej środowiskowej. Vercel wyświetla log kompilacji z podświetloną wadliwą linią. Jedno kliknięcie w panelu przywraca ostatnie działające wdrożenie i promuje je do produkcji. Ponieważ każde wypchnięcie to podgląd wdrożenia, nigdy nie jesteś dalej niż jedno zatwierdzenie od działającej kompilacji. Dlatego wypychanie kodu co 30 minut w sobotę i niedzielę ma znaczenie.

Czy mogę sprzedawać lub modyfikować kod z umiejętności gry 3D Vibe Skills?

Tak. Umiejętności w Vibe Skills są dostarczane z przyjazną dla komercyjnych zastosowań licencją, która pozwala na publikowanie kodu we własnej grze na Vercel, itch.io, Steam lub gdziekolwiek indziej. Twórcy zachowują prawa własności do umiejętności, Ty zachowujesz prawa własności do gry zbudowanej na jej podstawie.

Co jeśli nie chcę używać Cursor?

Każdy edytor AI, który potrafi edytować pliki projektu, działa. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - każdy z nich może iterować na szkielecie Three.js z umiejętności Vibe Skills. Sama umiejętność jest niezależna od edytora.

Wdróż to w ten weekend

Powodem, dla którego większość niezależnych programistów nigdy nie wydaje gier 3D, nie jest silnik, gatunek ani pułap umiejętności. Jest to piątkowy wieczór, kiedy "tylko trochę więcej zbadają" i nigdy nie zaczynają. Następny wolny weekend, postępuj zgodnie z czteroetapowym planem: zainstaluj umiejętność gry 3D Vibe Skills, wypchnij do GitHub, podłącz Vercel, wdróż do piątku do 20:00, a następnie spędź sobotę i niedzielę na iteracji pod działającym adresem URL.

Twoje portfolio dziesięciu gier wydanych w weekend na Vercel jest warte więcej niż Twój hipotetyczny sześciomiesięczny projekt silnika marzeń. Ukończona gra zawsze wygrywa. Darmowy adres URL Vercel jest dowodem.

Przeglądaj umiejętności gier 3D w Vibe Skills →

Pomiń maraton kodowania początkowego w Three.js. Zainstaluj umiejętność gry 3D w Vibe Skills, wypchnij do Vercel i miej działający adres URL do niedzielnego wieczora.