Od nagrania do grywalnej gry — bez pisania ani jednej linii kodu
A gdyby tak wskazać dowolne wideo i powiedzieć: „zamień to w grę”? Ten workflow robi dokładnie to. Multi-Modal Agent Eigent ogląda nagranie z Spring Festival Gala 2026 — spektakularnego robotycznego występu sztuk walki — wyodrębnia postacie, ruchy i styl wizualny, a następnie przekazuje tę ustrukturyzowaną analizę do Developer Agenta, który buduje wokół niej kompletną grę Three.js. Cały pipeline działa na podstawie jednego promptu i jednego pliku wideo.
Dwuagentowy pipeline
Ten workflow wymaga dwóch wyspecjalizowanych agentów pracujących sekwencyjnie:
- Multi-Modal Agent — obsługuje Image Analysis, Video Processing, Audio Processing i Image Generation. Ogląda wideo i tworzy ustrukturyzowane dane o tym, co widzi.
- Developer Agent — obsługuje Terminal & Shell, Web Deployment i Screen Capture. Pobiera ustrukturyzowaną analizę i buduje grę.
Kluczowy wniosek to przekazanie danych: Developer Agent nie otrzymuje surowego wideo — otrzymuje ustrukturyzowany dokument tekstowy opisujący postacie, ruchy, kolory, scenerię i motywy. To właśnie ten etap translacji sprawia, że wynik gry jest wierny, a nie generyczny.
Dołącz wideo i napisz prompt
Dołącz Martial Arts.mp4 i opisz, czego chcesz:
Przeanalizuj dołączony plik wideo, aby zrozumieć robotyczny występ, postacie, ruchy, styl wizualny i scenerię z Spring Festival Gala 2026, a następnie stwórz kompletną, jednoplikową interaktywną grę HTML 3D z użyciem Three.js, która wiernie odtworzy kluczowe elementy, postacie i akcje z wideo, oferując angażującą mechanikę rozgrywki, intuicyjne sterowanie i festiwalowe efekty wizualne.
Natychmiast generowane są dwa zadania — drugie pozostaje zablokowane do czasu ukończenia pierwszego.
Zadanie 1 — Multi-Modal Agent ogląda wideo
Multi-Modal Agent przetwarza Martial Arts.mp4 klatka po klatce, korzystając z Video Downloader Toolkit, aby wyodrębnić zrzuty ekranu z kluczowych momentów. Następnie analizuje te klatki i tworzy obszerną pisemną analizę zapisaną jako martial_arts_video_analysis.txt:
- Postacie i roboty: Wygląd fizyczny, proporcje, schemat kolorystyczny (złoty i czerwony), liczba wykonawców
- Ruchy i akcje: Konkretne techniki sztuk walki zaobserwowane na nagraniu — ciosy, kopnięcia, ataki kijem, choreograficzne sekwencje
- Styl wizualny: Oświetlenie sceny, paleta barw, styl festiwalowych dekoracji, głębia i skala przestrzeni występu
- Sceneria i tło: Środowisko sceniczne, projekt tła, elementy atmosferyczne
- Elementy festiwalowe: Dekoracje związane z CNY, motywy symboliczne, efekty użyte podczas występu
Ten dokument staje się briefem kreatywnym — ustrukturyzowanym opisem, na który Developer Agent może precyzyjnie zareagować.
Zadanie 2 — Developer Agent buduje grę
Mając analizę pod ręką, Developer Agent odczytuje notatki z Note Taking Toolkit i buduje spring_festival_martial_arts_game.html — pojedynczy, samowystarczalny plik z całym HTML, CSS i JavaScript osadzonymi inline.
Gra wiernie implementuje wszystko, co zidentyfikował Multi-Modal Agent:
- 3D postacie robotów renderowane w Three.js z złoto-czerwoną paletą kolorów z wideo
- Animacje sztuk walki odtwarzające zaobserwowane ciosy, kopnięcia i ataki kijem
- Środowisko sceniczne odpowiadające wizualnej oprawie występu Spring Festival Gala
- Festiwalowe efekty cząsteczkowe — lampiony, iskry, dekoracje CNY
- Wiele trybów gry: Performance Mode, Combat Mode, Free Practice
Gotowa gra
Otwarcie spring_festival_martial_arts_game.html w przeglądarce daje kompletne doświadczenie:
- Ekran tytułowy: 2026 Spring Festival Gala — Martial Arts Performance — Year of the Horse
- Sterowanie: W/S/A/D ruch · J Cios/Atak · K Kopnięcie · L Atak kijem · Space Ruch specjalny · Mysz do kamery · Scroll do zoomu
- HUD: Licznik punktów (527 pokazane w demo), licznik combo, wskaźnik trybu
- Warstwa wizualna: 3D postacie robotów w złoto/czerwieni, festiwalowe tło sceny, efekty cząsteczkowe
Łączna liczba użytych tokenów: około 467 000 — co odzwierciedla głębię połączonej analizy wideo i generowania gry w Three.js.
Dlaczego video-to-game to nowa kategoria workflow
Ten pipeline ustanawia coś nowego: wykorzystanie rozumienia wideo jako narzędzia specyfikacji projektowej. Zamiast pisać dokument projektu gry, nagrywasz lub znajdujesz materiał wideo z estetyką, postaciami i interakcjami, które chcesz uzyskać — a Multi-Modal Agent tłumaczy to na specyfikacje gotowe do implementacji.
Zastosowania wykraczają daleko poza gry. Ten sam pipeline video-to-structured-analysis-to-code działa przy odtwarzaniu makiet UI, projektowaniu systemów animacji, generowaniu interaktywnych demonstracji i wszędzie tam, gdzie wideo lepiej niż tekst oddaje intencję.
Co wypróbować dalej
Przeanalizuj wideo z rozpakowywania produktu i wygeneruj interaktywny 3D podgląd produktu, który odtworzy obiekt z nagrania.
Obejrzyj wideo kulinarne i wygeneruj interaktywną aplikację z przepisem krok po kroku, która dopasuje się do stylu wizualnego filmu.
Przeanalizuj skrót sportowy i wygeneruj minigrę opartą na pokazanym sporcie.
Weź grę Spring Festival i dodaj tryb wieloosobowy, w którym dwóch graczy rywalizuje jako różne roboty z występu.
Wskazówki dla lepszych rezultatów
-
Używaj materiału źródłowego wysokiej jakości. Ekstrakcja scen przez Multi-Modal Agent jest najdokładniejsza przy wyraźnym, dobrze oświetlonym wideo. Nagrania występów z wyraźnymi postaciami i ruchami — takie jak to wideo z Gala — dają bogatszą analizę niż materiały z szybkim montażem lub niską rozdzielczością.
-
Poproś o sprawdzenie analizy przed budową. Dodanie „pokaż mi dokument analizy wideo przed stworzeniem gry” daje punkt kontrolny, dzięki któremu możesz upewnić się, że agent poprawnie zrozumiał wideo, zanim przejdzie do budowy.
-
Zażądaj jednego pliku. Określenie „single-file 3D interactive HTML game” zapewnia, że wszystko będzie samowystarczalne i od razu możliwe do udostępnienia bez kroku budowania czy serwera.
