Możesz zrobić grającą grę z pomocą AI, nie pisząc ani jednej linijki kodu: Gemini rysuje obrazy, ty dajesz je Claude’owi, żeby zrobił z nich grę, i grasz w przeglądarce. Pierwsza grywalna wersja gry poniżej była gotowa w mniej niż 10 minut. Coś takiego kiedyś zajmowało kilka tygodni.
To jest gra, o której mówię. Kliknij ją raz i graj: lewy przycisk strzela, prawy rzuca granat. Na górnym pasku jest przycisk pełnego ekranu.
Pomysł: jedno AI rysuje, drugie AI buduje
AI do rozmowy świetnie pisze kod małej gry, ale nie narysuje ci w jednym stylu ponurego zrujnowanego miasta, hordy zombie i wieżyczki laserowej. AI do obrazów narysuje to wszystko, ale nie sprawi, że obrazy się poruszą. Użyłem więc dwóch narzędzi i każdemu dałem robotę, która wychodzi mu najlepiej.
- Gemini narysował obrazy: tło, zombie i broń.
- Claude wziął te obrazy, pociął je na osobne kawałki, złożył scenę i zrobił poziomy.
Nie jesteś związany z tymi dwoma. Rysować może każde AI, które robi obrazy, a budować każde AI do rozmowy, które pisze kod. ChatGPT i Gemini też mogą napisać część z kodem i całkiem dobrze nadają się do prostszych gier ze zwykłych kształtów i kolorów. To obrazy sprawiają, że gra wygląda jak prawdziwa gra.
Czego potrzebujesz
- AI, które robi obrazy. Ja użyłem Gemini.
- AI do rozmowy, które pisze kod. Ja użyłem Claude’a, a ChatGPT albo Gemini też się nadają.
- Przeglądarka Chrome. Nie musisz instalować żadnych programów.
Możesz zacząć za darmo, ale darmowe plany mają dzienne limity obrazów i wiadomości, a zasady różnią się między planami. Wiele narzędzi do obrazów pozwala na komercyjne użycie obrazów tylko w płatnym planie, więc przeczytaj, co mówi twój, jeśli chcesz grę udostępniać albo sprzedawać. Ten wpis jest o tym, jak szybko zrobić grę z pomocą AI, a nie poradą prawną.
Jako hosting, czyli miejsce w internecie, w którym gra jest zapisana, żeby każdy mógł ją otworzyć, użyłem własnej strony, tej, na której teraz to czytasz. Ty możesz zrobić tak samo ze swoją, a są też inne opcje, które wyjaśniam niżej.
Jeśli nie masz jeszcze strony internetowej, najpierw potrzebujesz hostingu. Jednym z prostych sposobów jest Bluehost. To firma hostingowa, której kreator stron z AI łączy hosting z gotową stroną startową, więc nie zaczynasz od pustej kartki, a większość planów hostingowych pozwala wgrywać własne pliki, na przykład jeden plik gry. Przed decyzją sprawdź na ich stronie aktualne plany i ceny, bo oferty się zmieniają.
Krok 1: Zdecyduj, jaka ma być gra, a potem poproś AI do obrazów o obrazy
Zanim cokolwiek narysujesz, zastanów się, jakiej gry chcesz. Obrony, w której bronisz muru przed wrogami, kosmicznej strzelanki, labiryntu, gry karcianej? I jak ma wyglądać: ponure zrujnowane miasto, jasny las, kosmos? Jakich postaci potrzebujesz: bohatera, kilku wrogów, bossa? Nie musisz decydować o tym wszystkim sam. Najpierw poproś AI o pomysły, a w kilka sekund dostaniesz ich garść.
Możesz zacząć od takiej prośby: „Chcę zrobić prostą grę, która działa w przeglądarce, w jednym pliku HTML. Daj mi pięć pomysłów na gry, które łatwo zbudować. Przy każdym powiedz jednym zdaniem, co robi gracz, jak wyglądałoby tło i jakich postaci lub obiektów potrzebowałbym obrazów.”
Wybierz pomysł, który podoba ci się najbardziej, zmień, co chcesz, i teraz wiesz dokładnie, o jakie obrazy prosić. Prosta gra potrzebuje trzech rodzajów: tła, wrogów i broni. Proś o każdy osobno i zawsze o ten sam styl, żeby wszystko wyglądało jak z jednej rodziny. Oto rodzaj prośby, który działa.
O tło poprosiłem mniej więcej tak: „Narysuj tło do gry widziane z góry, do gry o obronie bazy: popękana, zrujnowana droga u góry i mocny metalowy mur z bramą na dole. Ciemny, brudny styl pixel art, szeroki obraz 16:9, bez tekstu i bez postaci.”
O wrogów: „Narysuj arkusz sprite’ów jednego zielonego cyber-zombie w sześciu pozach: dwie idące, jedna z wyciągniętymi rękami, jedna atakująca i dwie kolejne. Ta sama postać i ten sam rozmiar w każdej pozie, widziana z przodu, z wyraźnym odstępem między pozami, na jednolitym szarym tle. Ten sam styl pixel art co tło.”
A o broń i efekty: „Narysuj sci-fi wieżyczkę w sześciu klatkach, stojącą i strzelającą, świecącą bramę laserową, wybuch w czterech klatkach i niebieski błysk energii. Ten sam styl pixel art, na jednolitym szarym tle.”
Jedna rzecz, której się nauczyłem: jeśli poprosisz o „przezroczyste tło”, wiele narzędzi do obrazów maluje na obrazku fałszywą szaro-białą szachownicę, jakby była częścią rysunku. Lepiej działa jednolity kolor. Claude może go potem usunąć.
Krok 2: Daj obrazy AI do rozmowy
Otwórz Claude’a, dołącz obrazy i opisz grę prostymi słowami. Nie musisz wiedzieć, jak działa gra. Powiedz, co chcesz widzieć i robić, a kod zostaw AI. Na przykład:
„Oto trzy obrazy: tło, arkusz sprite’ów zombie i arkusz wieżyczki. Sam potnij arkusze na osobne obrazy i zrób grę przeglądarkową w jednym pliku. Wieżyczka na dole broni muru przed zombie, które nadchodzą w 10 falach. Wieżyczka celuje myszą i strzela lewym przyciskiem, a prawy rzuca granat. Za każdego zombie dostaje się kredyty na ulepszenia. Dodaj efekty dźwiękowe i bossa w falach 5 i 10. Zrób ekran startowy oraz ekran zwycięstwa albo końca gry.”
U mnie Claude pociął arkusze na kawałki, ustawił tło, złożył scenę i napisał poziomy. Kilka minut później pierwszą wersję dało się już grać. Potem poświęciłem więcej czasu na dodatki, to jest krok 4.
Krok 3: Zagraj bez zapisywania czegokolwiek
Claude pokazuje wiele odpowiedzi w podglądzie od razu w rozmowie. Jeśli twój kod pochodzi z ChatGPT albo Gemini, jest jeszcze szybszy sposób: AI Code Harvester, nasze darmowe rozszerzenie Chrome, znajduje kod w odpowiedzi, a przycisk Pokaż uruchamia go na żywo w nowej karcie. Nie zapisujesz pliku i niczego nie kopiujesz ani nie wklejasz.
Dlatego Harvester to mocny dodatek do wszystkiego, co może działać w przeglądarce bez zapisywania plików: gry, małego narzędzia, projektu strony. Pytasz, naciskasz Pokaż, patrzysz na wynik, prosisz o zmianę i patrzysz jeszcze raz. Działa na stronach ChatGPT i Gemini, a nasz poradnik Jak uruchomić kod HTML z ChatGPT lub Gemini i zobaczyć stronę na żywo tłumaczy to krok po kroku.
Krok 4: Dopracowuj ją jedną prośbą naraz
Pierwsza wersja nigdy nie jest ostateczna i na tym polega zabawa. Po pierwszej wersji zmieniałem grę prostymi prośbami, jedna po drugiej. Niektóre z nich:
- „Pokaż małe litery klawiszy na brzegu ekranu, z krótkim tekstem, żeby gracz wiedział, który klawisz co kupuje.”
- „Dodaj żołnierza, który sam rzuca granaty w najbliższego zombie.” Do niego dałem Claude’owi nowe obrazy z Gemini.
- „Dodaj automatyczną wieżyczkę, która sama celuje i strzela, ale wolniej niż główna.”
- „Zombie mają tracić energię tylko wtedy, gdy trafię w tułów albo w głowę, a nie w nogi.”
- „Dodaj przycisk pauzy w lewym górnym rogu i przycisk pełnego ekranu.”
- „Zrób ostatnią falę dużo większą.”
Zasada, która oszczędza najwięcej czasu: poproś o jedną zmianę, przetestuj ją, a potem poproś o następną. Jeśli coś się zepsuje, powiedz „cofnij ostatnią zmianę”. AI pamięta, co zrobiło, i może to naprawić.
Przetestuj ją na własnym komputerze, zanim wrzucisz ją do sieci
Zanim udostępnisz grę, wypróbuj ją u siebie, gdzie nikt nie widzi błędów. Taka gra to strona internetowa, a twój komputer potrafi ją otworzyć bez żadnego serwera.
- Zapisz kod jako jeden plik, na przykład
game.html. Jeśli gra używa obrazów z folderu, trzymaj folder obok pliku. Albo poproś AI: „Umieść obrazy w środku pliku, żeby był to jeden plik.” Wtedy nic nie może zginąć. - Kliknij plik dwa razy. Otworzy się w przeglądarce.
- Kliknij grę raz, a potem używaj klawiszy. Przeglądarka potrzebuje tego pierwszego kliknięcia, żeby gra mogła słyszeć klawiaturę.
- Sprawdź wszystko: mysz i klawisze, dźwięk, pełny ekran, pauzę i czy da się przejść grę do końca.
- Napraw to, co nie działa, mówiąc AI dokładnie, co zobaczyłeś.
Kiedy działa, wrzuć ją do sieci, żeby inni mogli grać. Do tego potrzebny ci hosting, czyli po prostu miejsce w internecie, które przechowuje twoje pliki i daje im adres. Jeden plik gry działa na prawie każdym hostingu, także darmowym. Nasz poradnik Gdzie opublikować stronę stworzoną przez AI przechodzi przez opcje prostymi słowami. Na naszej własnej stronie używamy Firebase Hosting.
Żeby pokazać grę wewnątrz strony na własnej witrynie, dodaj ją tak:
<iframe src="https://yoursite.com/game.html" width="1024" height="572" allow="fullscreen"></iframe>Część allow="fullscreen" pozwala graczom używać przycisku pełnego ekranu. Jeśli wgrasz nową wersję, a nadal widzisz starą, naciśnij Ctrl+F5, żeby przeglądarka wczytała ją od nowa.
Nie ma granic
Gdy podstawa jest gotowa, wszystko inne jest oddalone o jedną prośbę: nowy wróg, nowe tło na następny poziom, trudniejszy boss, inna broń, nowy rodzaj gry. Żeby zmienić wygląd, poproś AI do obrazów o kolejny zestaw obrazów i daj go AI do rozmowy. To, do czego kiedyś potrzebny był zespół i tygodnie pracy, dziś wymaga jednego wieczoru i trochę wyobraźni.
Warto wiedzieć, zanim zaczniesz
- AI się myli. Coś nie zadziała za pierwszym razem. Opisz, co widzisz, i poproś jeszcze raz, to normalne.
- Pierwsza wersja jest szybka, szlifowanie trwa dłużej. Pierwsza grywalna wersja mojej gry zajęła mniej niż 10 minut. Dodatki przyszły później.
- Takie gry są zrobione pod mysz i klawiaturę. Na telefon poproś AI o sterowanie dotykowe.
- Zasady dotyczące obrazów są różne. Sprawdź, na co pozwala twoje narzędzie do obrazów i twój plan, zanim zaczniesz grę sprzedawać albo reklamować.
Co zrobisz z grą, decydujesz ty
Kiedy gra jest gotowa, to ty decydujesz, co dalej. Udostępnij ją w mediach społecznościowych, wyślij link znajomym, wrzuć na własną stronę albo zachowaj tylko dla siebie. Nie ma jednej dobrej odpowiedzi, a frajda polega na tym, że to ty ją zrobiłeś.
FAQ
Tak. Opisujesz grę prostymi słowami, AI pisze kod, a ty sprawdzasz wynik i prosisz o zmiany. Nie musisz rozumieć kodu, wystarczy, że powiesz, co chcesz zobaczyć.
Możesz zacząć za darmo, ale darmowe plany mają dzienne limity obrazów i wiadomości, a większa gra może na darmowym planie zająć więcej niż jeden dzień. Wiele narzędzi do obrazów pozwala też na komercyjne użycie obrazów tylko w płatnym planie, więc sprawdź swój.
Obrazy może narysować każde AI, które je robi, a grę zbudować każde AI do rozmowy, które pisze kod. Ja użyłem Gemini do obrazów i Claude’a do gry. ChatGPT i Gemini też mogą napisać kod.
Prostą grę z kształtów i kolorów, tak. Do gry z prawdziwą grafiką potrzebujesz obrazów od AI do obrazów, które potem dajesz AI do rozmowy, żeby wbudowało je w grę.
Tak. Taka gra to zwykle jeden plik HTML, który działa na prawie każdym hostingu, także darmowym. Możesz też pokazać ją wewnątrz strony za pomocą iframe.
Gry zrobione w ten sposób są przygotowane pod mysz i klawiaturę. Jeśli chcesz ją na telefonie, poproś AI o dodanie sterowania dotykowego.
To zależy od zasad narzędzi, których użyłeś do obrazów i kodu, a te różnią się między planami. Ten wpis nie jest poradą prawną, więc przeczytaj warunki swoich narzędzi, zanim zaczniesz grę sprzedawać albo reklamować.
AI Code Harvester — Darmowy, Lokalny, Bez Konta
Stworzone przez GetPlugzz. Tylko lokalne przetwarzanie: nic nie jest wysyłane, nic nie jest śledzone.
