Gamifikacja na stoisku działa najlepiej wtedy, gdy gra jest krótka, nie wymaga instalacji i kończy się konkretnym krokiem w lejku sprzedaży. Tak zbudowaliśmy grę Snake dla ZEN.COM na ZEN Expo: wąż chodzi po dużym ekranie, a steruje nim telefon gracza po zeskanowaniu kodu QR. Poniżej opisujemy architekturę na WebSocketach, kolejkę przy trzech ekranach, dopasowanie tempa gry do opóźnienia sieci i to, jak gra prowadzi gracza do aplikacji.
Czym jest gamifikacja w marketingu i gdzie pasuje gra na stoisku?
To dodawanie mechanizmów z gier, takich jak punkty, ranking, limit podejść i nagroda, do działań, które same grą nie są. W marketingu chodzi o to, żeby klient zrobił coś z własnej woli, bo chce pobić wynik kolegi albo odebrać nagrodę: zostawił nick, wrócił po kolejną próbę, pobrał aplikację.
Na targach problem jest prosty. Ludzie przechodzą obok stoiska, biorą ulotkę i idą dalej, a po powrocie do domu nie pamiętają, czyja to była ulotka. Gra marketingowa na dużym ekranie zatrzymuje ich na dłużej, bo widać ją z drugiego końca alejki, a obok stoją inni gracze i kibice, którzy komentują każdy wynik. Telefon jako kontroler rozwiązuje drugi problem: nie trzeba pilnować padów, odkażać joysticków ani tłumaczyć sterowania.
Szukasz atrakcji na stoisko, która zostawi Ci dane? Budujemy gry i aplikacje eventowe sterowane telefonem, z kolejką, rankingiem i lejkiem do Twojej aplikacji albo formularza. Opisz event i cel, a zaproponujemy mechanikę. Aplikacje webowe →
Jak działa gra na telebimie sterowana telefonem?
Każdy ekran to osobny pokój. Duży ekran otwiera adres pokoju i pokazuje planszę oraz kod QR, a gracz skanuje ten kod zwykłym aparatem w telefonie, który otwiera w przeglądarce stronę kontrolera tego samego pokoju. Od tej chwili ruch palcem skręca węża na telebimie.
- Ekran łączy się z serwerem przez WebSocket i rejestruje się w pokoju.
- Serwer generuje kod QR z adresem kontrolera i wysyła go na ekran.
- Telefon otwiera kontroler, łączy się z tym samym pokojem i staje w kolejce.
- Gdy przychodzi jego kolej, serwer przekazuje ruchy z telefonu do ekranu.
- Po grze wynik trafia do rankingu, a gracz dostaje kolejne podejście albo nagrodę.
Sterowanie to gest przesunięcia (swipe). Kontroler blokuje powiększanie dwoma palcami i przewijanie strony, bo na hali instrukcji nie czyta nikt, a przypadkowy zoom albo przewinięcie w połowie gry kończy rozgrywkę szybciej niż ściana planszy.
Z czego zbudowaliśmy grę na event?
Stawialiśmy na mało zależności i przewidywalne zachowanie na słabej sieci. Wyszło tak:
| Warstwa | Technologia | Po co |
|---|---|---|
| Serwer | Node.js, TypeScript, Express | Pokoje, kolejka, sesje graczy, API |
| Komunikacja | WebSocket (biblioteka ws) | Ruchy z telefonu na ekran w czasie rzeczywistym |
| Kody QR | qrcode, generowane na serwerze | Wejście do pokoju bez wpisywania adresu |
| Dane | SQLite | Ranking, zdarzenia lejka, czasy w kolejce |
| Front | HTML, CSS i JavaScript na canvasie | Plansza na ekranie i lekki kontroler w telefonie |
| Uruchomienie | Docker | Ten sam kontener na teście i na evencie |
Bez frameworka na froncie kontroler ładuje się szybko nawet przy jednej kresce zasięgu, a cały serwer mieści się w jednym kontenerze, który na evencie działa tak samo jak na teście. Prace trwały od listopada 2025 r. do marca 2026 r., łącznie 54 commity.
Jak obsłużyć kolejkę, gdy chętnych jest więcej niż ekranów?
Na ZEN Expo działały trzy pokoje, czyli trzy ekrany naraz. W każdym pokoju gra jedna osoba, a reszta czeka w kolejce i widzi na telefonie swoją pozycję, więc może w tym czasie obejrzeć stoisko zamiast stać przy ekranie. Serwer zapisuje, ile kto czekał, dzięki czemu po evencie widać, czy ekranów było za mało.
Kolejka wymaga kilku zasad, inaczej jeden gracz blokuje stanowisko:
- 30 sekund na powrót. Gdy telefon gracza się rozłączy, serwer trzyma jego miejsce przez pół minuty i dopiero potem przekazuje ekran dalej.
- Limit bezczynności. Kto odłoży telefon i nie gra, traci miejsce po tym samym czasie.
- Trzy gry na sesję. Limit liczony jest na identyfikator gracza, więc jeden zapaleniec nie okupuje ekranu przez kwadrans.
- Reklama między grami. W przerwie ekran puszcza wideo marki. Safari dostało osobny plik, bo inaczej obsługuje kodeki.
Ranking pokazuje dziesięć najlepszych wyników. Nick ma najwyżej trzy znaki i przechodzi przez filtr wulgaryzmów, a niedozwolony zamienia się na „Anonim”. Trzy litery jak w automatach z lat 80. pasują do Snake'a, a przy okazji nie zostawiają miejsca na obraźliwe hasło wyświetlone na kilka metrów przed gośćmi stoiska.
Jak dopasować tempo gry do opóźnienia sieci?
Założyliśmy, że opóźnienie 100–200 ms jest akceptowalne i że hala targowa, gdzie setki telefonów walczą o ten sam zasięg, da gorsze wyniki niż biuro, w którym testujemy. Zamiast udawać, że sieć jest dobra, gra mierzy ją na bieżąco i zwalnia, gdy trzeba.
Kontroler wysyła ping, serwer odsyła pong, a telefon liczy czas obiegu (RTT). Pojedyncze pomiary skaczą, więc kontroler wygładza je średnią ruchomą, w której 70% to poprzednia wartość, a 30% nowy pomiar, i dopiero taki wynik wysyła na ekran. Ekran ustawia według niego tempo węża:
| Zmierzone RTT | Krok węża | Okno na spóźniony skręt | Wskaźnik |
|---|---|---|---|
| poniżej 80 ms | 240 ms | 160 ms | zielony |
| 80–149 ms | 280 ms | 240 ms | żółty |
| 150–249 ms | 320 ms | 280 ms | czerwony |
| 250 ms i więcej | 360 ms | 320 ms | czerwony |
Okno na spóźniony skręt to druga połowa rozwiązania. Ruch z telefonu dociera z opóźnieniem, więc w chwili, gdy serwer przekazuje go na ekran, wąż jest już dalej w kratce, niż widział gracz w momencie przesunięcia palcem. Gra sprawdza więc, jak daleko w kratce jest głowa. Jeśli skręt mieści się w budżecie opóźnienia, wykonuje go od razu, a jeśli przyszedł za późno, planuje go na następną kratkę. Gracz ma wrażenie, że wąż słucha, choć sieć dokłada swoje.
Kolorowy wskaźnik opóźnienia przydaje się też obsłudze stoiska, która po czerwonym kolorze od razu wie, że winna jest sieć, a nie telefon gracza.
Jak gra marketingowa prowadzi gracza do aplikacji?
Cel biznesowy był jasny: gracz ma zainstalować aplikację ZEN.COM. Po trzech grach telefon pokazuje nagrodę, czyli kod EXPO na cztery miesiące ZEN.COM za darmo, i link do aplikacji, który przechodzi przez przekierowanie na serwerze gry, więc każde kliknięcie zapisuje się jako zdarzenie w tej samej bazie co wyniki.
Panel statystyk zbiera cały lejek w jednym miejscu:
- lejek od zeskanowania kodu przez rozegrane gry do kliknięcia w aplikację, z konwersją między krokami,
- histogram wyników, który pokazuje, czy gra nie jest za trudna,
- czas oczekiwania w kolejce,
- typy urządzeń graczy,
- podgląd na żywo, co dzieje się w pokojach.
Bez tego panelu po evencie zostaje tylko wrażenie, że było tłoczno. Z panelem marketing wie, na którym kroku gracze odpadali, czy kolejka nie odstraszała ludzi i czy nagroda była dość atrakcyjna, żeby ktoś zagrał trzy razy.
Jakie atrakcje na stoisko targowe sprawdzają się lepiej niż ulotka?
Dobre atrakcje na stoisko targowe łączą krótki czas udziału z widowiskiem dla przechodniów i mierzalnym następnym krokiem. Koło fortuny daje widowisko, ale kończy się na gadżecie. Ankieta na tablecie daje dane, tylko że do ankiety nikt w kolejce nie stoi. Gra na telebimie sterowana telefonem daje oba efekty, a do tego wiadomo, ile osób przeszło dalej.
Jeśli planujesz podobną atrakcję, odpowiedz sobie przed startem na kilka pytań:
- Jaki jeden krok ma zrobić gracz po grze i jak go zmierzysz?
- Ile ekranów postawisz i co pokażą, gdy nikt nie gra?
- Co się stanie, gdy sieć na hali zwolni do kilkuset milisekund?
- Kto na stoisku pilnuje kolejki i co widzi, gdy coś nie działa?
Projektujesz grę marketingową na event albo do kampanii online? Budujemy aplikacje czasu rzeczywistego z kolejką, rankingiem i panelem statystyk. Zobacz aplikacje webowe, a jeśli chcesz najpierw sprawdzić pomysł na małą skalę, MVP. Pracę dla ZEN.COM opisujemy też w case study strony.
