일전에 뷰잉에서 게임이나 가끔 해볼까 하고 게임패드를 하나 구입했었다. 이 게임패드를 크롬 브라우저에서 자바스트립트를 이용해서 활용해 보기로 하자. 먼저 간단히 게임패드들의 버튼들을 인식하는 예제를 만들어 보자.
<!doctype html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta charset="UTF-8">
<meta name="Description" content="">
<title>P5.JS 연습</title>
<style type="text/css">
body{
text-align: center;
}
p{
font-size: .9em;
}
#defaultCanvas0{
}
#screen{
width: 80px;
height: 80px;
margin: 0 auto;
position: relative;
}
#ball {
width: 80px;
height: 80px;
border-radius: 40px;
background-color: red;
position: relative;
line-height: 75px;
text-align: center;
font-size: 40px;
}
</style>
<!--공통-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script> -->
<!--프로젝트 스크립트-->
<!-- <script src="sketch21.js"></script>
<script src="gamepad.js"></script> -->
</head>
<body>
<h1>P5.js Example 21</h1>
<p id="gamepad-info">Waiting for Gamepad.</p>
<div id="screen">
<div id="ball"></div>
</div>
<script type="text/javascript">
var gamepadInfo = document.getElementById("gamepad-info");
var ball = document.getElementById("ball");
// pos
var a = 0;
var b = 0;
var start;
var text = "";
// webkitRequestAnimationFrame
var rAF = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.requestAnimationFrame;
var rAFStop = window.mozCancelRequestAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.cancelRequestAnimationFrame;
// Check connection
window.addEventListener("gamepadconnected", function(e) {
var gp = navigator.getGamepads()[e.gamepad.index];
gamepadInfo.innerHTML = "Gamepad connected at index "+gp.index+": "+gp.id+", "+gp.buttons.length+" buttons, "+gp.axes.length+" axes";
gameLoop();
});
// Check disconnection
window.addEventListener("gamepaddisconnected", function() {
gamepadInfo.innerHTML = "Waiting for gamepad.";
//rAFStop(start);
});
function gameLoop() {
if(navigator.webkitGetGamepads) {//이게 아니다.
console.log(webkitGetGamepads);
} else {
var gp = navigator.getGamepads()[0];
if(gp.axes[0] !=0 || gp.axes[1] != 0){
a += gp.axes[0];
b += gp.axes[1];
text= "Ax";
}
if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) {//A button
text = "A";
} else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) {//B button
text = "B";
} else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) {//X button
text = "X";
} else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) {//Y button
text = "Y";
}
}
ball.style.left = a*4 + "px";
ball.style.top = b*4 + "px";
ball.innerHTML = text;
var start = rAF(gameLoop);
};
</script>
</body>
</html>
간단히 div 로 만든 빨간 써클을 게임패드로 움직일 수 있는 예제이다.
왼편 조이스틱과 오른쪽 버튼들에게 기능을 지정해 주었다. 두번째 예제는 p5.js안에서 직접 코드를 작성하는 예제도 만들어 보자. 게임패드 각각의 버튼들의 값들을 출력해 주는 예제이다.
var pads, pad0;
function setup(){
createCanvas(640, 480);
textSize(14);
stroke(80);
strokeWeight(.3);
}
function draw(){
background(0);
fill(255);
pads = navigator.getGamepads();
pad0 = pads[0];
text('ID: ', 10, 20);
if(pad0){
//console.log(pad0.buttons.length);
text(pad0.id, 35, 20)
text('-----', 15, 40);
for(var i =0; i < pad0.buttons.length; i++){
text('Button'+i+': ' + pad0.buttons[i].value, 15, 60 + 20 * i);
//console.log(pad0.buttons.length);
}text('-----', width/2, 40);
for (var i = 0; i < pad0.axes.length; i++) {
text('axes' + i + ': ' + pad0.axes[i], width/2, 60 + 20 * i);
}
}
}
연결된 게이패드의 버튼과 조이스틱을 움직여 보면 값들이 변하는 것을 확인 할 수 있다. 대부분의 버튼은 0과 1이다. 조이스틱은 –1에서 1사이의 값을 가진다. 이렇게 게임패드의 버튼들의 값이 p5.js로 전달 되었으니 이것을 이용해서 화면안에서 사용할 수 있게 된다.
