거실을 TouchCoop와 함께하는 Couch Co-op 아레나로 바꾸기
Source: Dev.to
개요
Hey everyone 👋,
오늘은 재미있는 무언가를 공유하고 싶어요. 상상해 보세요: 친구들과 집에 있고, 큰 TV가 켜져 있는데, 모두가 블루투스 컨트롤러를 두고 다투거나 하나의 게임패드를 주고받는 대신… 모두가 휴대폰을 꺼내 즉시 플레이어가 되는 상황을.
계정도 없고, 설치도 필요 없어요. QR 코드를 스캔하고 바로 버튼을 눌러 보세요.
바로 이것이 TouchCoop이 가능하게 하는 일입니다 — 거의 서버 작업 없이도 이 비전을 현실로 만드는 작은 TypeScript 라이브러리죠.
- 호스트는 노트북/TV에 연결된 브라우저에서 게임을 실행
- 최대 4명의 플레이어가 모바일에서 QR 코드로 참여
- 휴대폰의 터치 버튼 → WebRTC를 통한 실시간 입력 전달
- 캐주얼 게임에 최적: 플랫포머, 파티 게임, 로컬 퍼즐
FPS와 같은 저지연 게임에는 적합하지 않음 (WebRTC 지연은 좋지만 e스포츠 수준은 아님)
빠른 아키텍처 개요
Your game needs two distinct entry points (URLs):
- Match 페이지 (메인 게임):
Match인스턴스를 생성하고, 참여용 QR 코드를 표시하며, 플레이어 이벤트를 수신합니다. - Gamepad 페이지 (컨트롤러): QR 코드를 통해 열리며,
Player인스턴스를 생성하고, 연결한 뒤 터치 이벤트를 전송합니다.
Both are just static web pages — no backend required beyond the signaling phase.
Source:
60초 안에 시작하기
라이브러리 설치
npm install touch-coop1. 매치 측 (귀하의 게임)
import { Match, PlayerEvent } from "touch-coop";
const gamePadURL = "https://your-domain.com/gamepad"; // QR 코드를 위해 절대 URL이어야 함
function handlePlayerEvent(event: PlayerEvent) {
switch (event.action) {
case "JOIN":
console.log(`Player ${event.playerId} joined 🎉`);
// 플레이어 아바타를 생성하거나, 사운드를 재생하는 등
break;
case "LEAVE":
console.log(`Player ${event.playerId} left 😢`);
break;
case "MOVE":
console.log(`Player ${event.playerId} → ${event.button}`);
// "up", "A", "X" 등을 게임 액션에 매핑
if (event.button === "up") jumpPlayer(event.playerId);
break;
}
}
const match = new Match(gamePadURL, handlePlayerEvent);
// 선택 사항: 안정성을 높이기 위한 커스텀 PeerJS 서버
// const match = new Match(gamePadURL, handlePlayerEvent, {
// host: 'your-peerjs-server.com',
// port: 9000,
// path: '/peerjs'
// });
// 이후: match.requestNewPlayerToJoin() → QR 데이터/URL을 반환하는 프로미스match.requestNewPlayerToJoin()을 호출하면 슬롯을 추가하고 싶을 때마다 조인 URL을 받아 QR 코드로 변환할 수 있습니다(이를 도와주는 라이브러리가 많이 있습니다).
2. 게임패드 측 (React 예시)
import React, { useEffect, useState } from "react";
import { Player } from "touch-coop";
const player = new Player(); // 커스텀 PeerJS 설정을 전달할 수도 있음
export default function GamePad() {
const [loading, setLoading] = useState(true);
useEffect(() => {
(async () => {
try {
await player.joinMatch(); // URL 쿼리 파라미터에서 peer ID를 파싱
setLoading(false);
} catch (err) {
console.error("Failed to join", err);
}
})();
}, []);
if (loading) return <>Connecting...</>;
return (
<>
<button onClick={() => player.sendMove("up")}>↑</button>
<button onClick={() => player.sendMove("left")}>←</button>
<button onClick={() => player.sendMove("right")}>→</button>
<button onClick={() => player.sendMove("down")}>↓</button>
<button onClick={() => player.sendMove("A")}>A</button>
<button onClick={() => player.sendMove("B")}>B</button>
<button onClick={() => player.sendMove("X")}>X</button>
<button onClick={() => player.sendMove("Y")}>Y</button>
</>
);
}실시간 데모 및 직접 사용해 보기
원본 프로젝트에는 멋진 작은 데모가 있습니다:
→
최종 생각
TouchCoop은 브라우저 API가 얼마나 발전했는지를 보여주는 아름다운 사례입니다: WebRTC + TypeScript + 최신 빌드 도구 = 네이티브 앱이나 복잡한 백엔드 없이도 소파 협동 플레이.
캐주얼 멀티플레이 경험이나 파티 게임을 만들고 있다면, 한번 시도해 보세요.
소파 협동 게임을 만든 적이 있나요 (또는 만들 계획이 있나요)? 아래에 댓글을 남겨 주세요 — 여러분의 멀티플레이 전쟁 이야기를 듣거나 프로젝트 링크를 보고 싶습니다!
즐거운 코딩 되세요, 댓글에서 뵙겠습니다 ✌️