Roblox 예제 · Ball Game

Ball game open source 의 ball game.rbxl을 기반으로 합니다. 5초 기다린 뒤 분홍 공을 밀어 엇갈린 벽 3개를 통과하고 WinPiece에 닿으면 금색으로 바뀌며 Winner를 표시합니다.

원본 확인

Roblox Studio에서 플레이 후 중지하고 .rbxl을 변경하지 않은 채 스크립트, 아바타, 씬, 속성을 확인합니다.

원본 캐릭터, 잔디, 벽, 회색 바닥과 도착 지점.

원본 GetWinner는 공과 WinPiece의 접촉을 감지합니다.

두 스크립트는 공 생성과 승리를 처리하고 Roblox가 렌더링, 캐릭터, 입력, 카메라, 애니메이션, 물리, 서버 실행 환경을 제공합니다. 공은 5×5×5 studs, 잔디는 18×1×74, 벽 중심은 **(22,17.5,34), (32,17.5,15), (21.5,17.5,-4)**입니다. 이 예제 전용 값입니다.

Ball.Touched:Connect(function(partTouching)
    if partTouching.Name == "WinPiece" then
        Ball.BrickColor = BrickColor.new("Gold")
        warn("Winner!")
        game.Workspace.Map1.PlayerWon.Value = true
    end
end)

단순 Part 씬은 Play 중지 상태에서 아래 읽기 전용 코드를 Command Bar에 실행해 Output으로 속성을 볼 수 있습니다. 복잡한 메시, 텍스처, 리그는 별도 처리해야 하며 이 코드는 H5 게임을 내보내지 않습니다.

for _, part in ipairs(workspace:GetDescendants()) do
    if part:IsA("BasePart") then
        print(part:GetFullName(), part.Position, part.Size,
            part.Material, part.Transparency)
    end
end

H5 소스 대응

원본은 실행 시 계정 Avatar를 불러옵니다. 여기서는 Roblox 공식 메시를 직접 가져오지 않고 로컬 형상과 텍스처로 외형을 재현했습니다. Part는 실제 배치를 따릅니다. 다른 프로젝트는 내보낼 권한이 있는 모델과 텍스처를 재사용할 수 있습니다.

아바타 정면: 머리카락, 미소, 파랑·검정 상의, 어두운 바지, 흰 밑창.

머리카락, 신체 분할, 신발이 보이는 측면.

예제는 1 stud = 0.3 m, 원점 (27,15,15), 공 반지름 0.75 m를 사용합니다. 좌표 변환, 질량, 마찰, 구름 감쇠, 속도 제한은 자신의 게임에 맞춰 조정하세요.

장애물 3개, 경계와 도착 지점을 원본 배치로 재구성한 레벨.

ballBody.addEventListener('collide', event => {
  if (event.body !== winPiece.body || state.mode !== 'playing' || state.won) return;
  state.won = true;
  state.phase = 'finished';
  pink.color.set('#fff000');
  pink.emissive.set('#fff000');
  glow.material.color.set('#fff54b');
  document.querySelector('#status').textContent = 'Winner!';
  show('won');
});

브라우저 버전에는 터치 이동·점프, 일시 정지/재개, 다시 플레이, 전체 화면, 아바타 보기, WebGL 미지원 안내를 추가했습니다. Roblox 계정, Robux, 멀티플레이 동기화, 클라우드 저장은 이전하지 않았으며 완전 호환 런타임은 아닙니다.

실행과 검증

새 ball-game-h5 폴더에 풀고 루트에 package.json을 둡니다. level.js, avatar.js, environment.js, camera.js, main.js, SOURCE-MAPPING.md, reference/의 원본 Lua가 있습니다.

npm ci
npm run dev

http://127.0.0.1:5174/ 를 엽니다. 기록상 폴더는 데스크톱의 Move to Combos/ball-game-h5이며 자신의 경로를 사용하세요. 시작 후 5초 뒤 공이 나옵니다. WASD/방향키 이동, 스페이스 점프, 드래그 회전, 휠 줌, P 일시 정지, R 다시 플레이, F 전체 화면입니다. 아바타 보기는 현재 판을 멈추고 돌아가면 재개합니다.

로컬 3인칭 화면에서 분홍 공을 물리적으로 밀기.

기본 시점에서 오른쪽, 왼쪽, 오른쪽으로 벽을 돌아 마지막 홈에 넣습니다. WinPiece 접촉으로 금색이 되고 Winner가 표시됩니다. 기록된 로컬 테스트는 키보드·물리 조작으로 완주했고 착지, 일시 정지, 다시 플레이, 카메라, 아바타 보기를 확인했습니다.

로컬 완전 클리어: 금색 공과 Winner.

빌드 및 게시

dev를 중지하고 http://127.0.0.1:4174/ 에서 최종 결과물을 확인합니다.

npm run build
npm run preview

소스에 cover.png가 있습니다. 자신의 게임을 생성하고 연결을 유지해 업데이트한 뒤, 로컬 서버 없이 공개 링크를 다시 테스트하세요. 기록된 캐릭터·씬 업데이트는 revision 2, 게시됨, submission_is_current=true입니다. Ball Game H5 플레이 , 코드 70261. 온라인 키보드 클리어를 완료했지만 모바일 버튼은 뷰포트만 확인했으며 실제 휴대폰은 검증하지 않았습니다.

로컬 서버를 끈 뒤 Combos에서 실행하는 최신 Ball Game H5.

• 전체 H5 소스, Lua 참고 코드, 소스 대응표
• 압축 해제 루트에 index.html이 있는 완성본

출처: Combos 개발자 연동 가이드 . 원문 확인일: 2026-10-08, CLI v1.14.2. 예제 결과는 원문에 기록된 실행 결과입니다.