gamepad

HTML5에서 게임패드를 사용하는 함수를 만들었다.
자세한  설명은 생략하고 사용 방법만 설명한다.

실행화면은 게임패드 왼쪽 스틱으로 빨간색 화살표를 회전하고 있다.



게임패드 연결

addGamepadEvent();

function addGamepadEvent() {
    window.addEventListener("gamepadconnected", function (e) {
        Gamepad.init();
        listenForGamepad();
    });
}


게임패드 루프

초기화시 게임패드가 활성화 안되더라도 updateLoop 함수는 계속 불리도록 init 함수에서 초기화 한다.
init  함수에서 listenForGamepad 함수를 실행한다.

var listenForGamepad = function () {
    updateLoop = function () {
        onIdle();
        if(Gamepad.isActivate()) {
            Gamepad.preUpdate();
            updateGamepad();
            Gamepad.postUpdate();
        }
        requestAnimationFrame(updateLoop);
    };
    updateLoop();
};

function init() {
    //Add logic
    addGamepadEvent();
    addKeyboardEvent();
    listenForGamepad();
}

게임패드 사용

var updateGamepad = function(){
    if(Gamepad.click(GamepadKey.A))
        showText('id_debug_key', 'pressd A key' );
    if(Gamepad.click(GamepadKey.B))
        showText('id_debug_key', 'pressd B key' );       
    else
        updateLeftStick();
   
    //x, y is 0 or 1.
    //move by left Stick, Digital pad key
    var x = Gamepad.moveClick().x;
    var y = Gamepad.moveClick().y;
    if(x || y) {
        var str = 'moveClick x' + x + ', y:' + y; 
        showText('id_debug_move', str);
    }
}

A키가 클릭 되었는지 체크
Gamepad.click(GamepadKey.A)

B키가 클릭 되었는지 체크
Gamepad.click(GamepadKey.B)

왼쪽 스틱이나 디지털 패드 키가 작동중이면 방향에 따라 "-1 ~1"을 리턴한다.
작동 안하고 있으면 0을 리턴한다.
단, y값은 앞으로 -1, 뒤로 1을 리턴한다.
Gamepad.moveClick().x
Gamepad.moveClick().y

빨간색 화살표 회전

왼쪽 스틱으로 화살표를 회전한다.

isSnap 변수는 각도 스냅을 할지 안할지 결정한다.

getSnapDegree 함수는 스냅한 각도를 넘겨 준다.
stride는 몇도씩 snap 할것인지 결정한다.

deadDegreeZone은 각도 경계에서는 각도 체크를 하지 않는다.
  (  0도와 90의 경계는 45도이다.  45도 전후로 deadDegreeZone 각도에서는 변화를 무시한다. )
var lastDegree = 0;   
var startTimer = {
    left: false //left Stick
};
var duration = {
    left: 150 //left Stick
};

var isSnap = {
    left: true //left Stick
};

var getSnapDegree = function(degree, otherDegree, stride) {
    var curSnapDegree = Math.floor(degree/stride)*stride;
    if(curSnapDegree === otherDegree)
        return degree;
    else {
        var deadDegreeZone = 3;
        if(Math.abs(degree - otherDegree) < deadDegreeZone)
            return degree;
        return curSnapDegree;
    }
}

var updateLeftStick = function(){
    if((Gamepad.getLeftStick().fx || Gamepad.getLeftStick().fy) && startTimer.left === false)
    {
        var degree = Gamepad.getLastLeftAngle();
        degree = degree + 90;
        degree = Math.fmod(degree + 360, 360);

        //snap
        if(isSnap.left) {
            var snapDegree = getSnapDegree(degree, lastDegree, 90);
            if(snapDegree === degree)
                return;
            degree = snapDegree;
        }
      
        //print degree           
        showText(id_debug_degree, degree);
       
        var el = document.getElementById('arrow_rot');
        el.style.opacity = "0.5";       
       
        var start = Date.now();
        startTimer.left = true;
        var timer = setInterval(function() {
            let timePassed = Date.now() - start;

            if (timePassed >= duration.left) {
                clearInterval(timer);
                lastDegree = degree;
                el.style.transform = 'rotate(' + String(degree) + 'deg)';
                startTimer.left = false;
                el.style.opacity = "1";
                return;
            }

            move(timePassed);
        }, 20);   

        function move(timePassed) {
            var diff = degree - lastDegree;
            if(diff > 180)
                diff = -(360 - diff);
            if(diff < -180)
                diff = 360 + diff;
           
            var currDeg = lastDegree + diff * timePassed/duration.left;
            currDeg = Math.fmod(currDeg + 360, 360);
            el.style.transform = 'rotate(' + String(currDeg) + 'deg)';
        }
    }
};

게임패드 회전  예제

test.html
main.js
gamepad.js
gamepad_rotation.zip

게임패드 버튼 호출 예제 : gamepad_rotation 예제에서 회전 로직을 제거한 코드이다.

simple_test.html
simple_main.js
gamepad.js
gamepad_simple.zip