브라우저에서 GamePad 사용

"15 Puzzle maker"에 GamePad 지원을 추가하고 싶었지만 GamePad API가 그렇게 재미있을 줄은 몰랐습니다.

이 주제에 대한 문서와 예제를 조사하는 동안 나는 "GamePad 이벤트 듣기"및 "이벤트는 Chrome에서는 발생하지 않고 Firefox에서만 발생합니다"와 같은 말과 여전히 단일 표준이 없으며 모든 것이 언제든지 변경될 수 있다는 말에 낙담했습니다. 언제든지.

게임패드로 "15 Puzzle maker" 친구를 사귀고 싶은 욕구와 호기심이 더 강했다. Scirra Construct와 같은 게임 편집기를 사용하면 브라우저에서 GamePad를 쉽게 사용할 수 있습니다.

지침에 따라 "navigator.getGamepads"로 장치를 식별하여 "GamePad Connected"이벤트를 생성했습니다.
대부분의 예제는 Xbox GamePad를 사용하지만 PlayStation 4 DualShock을 사용했는데 문제가 없었습니다.

var gamepad;
window.addEventListener('gamepadconnected',function(e){
        const update=()=>{
                     if(gamepad.buttons[12].pressed){alert("bottom");}
                else if(gamepad.buttons[14].pressed){alert("left");}
                else if(gamepad.buttons[15].pressed){alert("right");}
                else if(gamepad.buttons[13].pressed){alert("top");}
            }
    requestAnimationFrame(update);
    }
);

첫 번째로 놀란 점은 키업과 키다운에 대한 아날로그가 부족하고 키 입력의 정의를 모든 키를 확인하여 수동으로 작성해야 한다는 것입니다.

모든 버튼을 추적하는 코드를 작성하고 모든 프레임 "requestAnimationFrame"을 가리킨 후 Firefox에서는 잘 작동하지만 Chrome 브라우저에서는 작동하지 않는다는 것을 알았습니다. 키 입력뿐만 아니라 연결된 게임 패드도 확인해야 한다는 것이 밝혀졌습니다.

예제에 대한 이 리소스에 많은 감사를 드립니다: https://www.javascripture.com/Gamepad

그런 다음 모든 프레임이 아니라 버튼을 눌렀을 때 이벤트가 한 번만 발생하도록 강제해야 했습니다.
그런 다음 누른 키를 기억하고 누른 키와 기억된 키가 동일한 경우 이벤트를 트리거하지 않는 것을 추가했습니다.

내 경우 전체 코드는 다음과 같습니다.

var gamepad,gamepadPress;
window.addEventListener('gamepadconnected',function(e){
    const update=()=>{
        for (gamepad of navigator.getGamepads()){ //checking connected gamepads
            if (!gamepad) continue;
            const statenow=gamepad.buttons.some(btn=>btn.pressed); // check the buttons pressed
            if (gamepadPress!==statenow){ // determine that the button has already been pressed and the action has been performed
                gamepadPress=statenow; // remember the pressed button so as not to repeat the action
                     if(gamepad.buttons[12].pressed){alert("bottom");}
                else if(gamepad.buttons[14].pressed){alert("left");}
                else if(gamepad.buttons[15].pressed){alert("right");}
                else if(gamepad.buttons[13].pressed){alert("top");}
            }
        }
        requestAnimationFrame(update); // set keystroke check for each frame
    };update(); // start checking the keys pressed after connecting the gamepad
});

코드가 맞는지는 모르겠지만 잘 됩니다

여기"15 Puzzle Maker"에서 GamePad를 사용할 수 있습니다.

Editor | Demo | itch.io | GitHub

JavaScript에서 GamePad를 사용하는 것은 키보드를 사용하는 것과 근본적으로 다릅니다. 그러나 이것이 나쁜 것이라고는 말할 수 없습니다. 이러한 깊은 API는 예를 들어 키 조합의 숙달과 기술의 빠른 사용이 핵심인 격투 게임과 같이 GamePad를 잘 다루어야 하는 게임에 이상적입니다. 요인. 그리고 이 GamePad API는 이러한 작업에 적합합니다. 일반적인 키보드 도구로 이를 구현하려면 훨씬 더 많은 시간과 코드가 필요했습니다. 이 API를 고안한 사람은 주제를 이해했다고 확신합니다.