프로젝트

나도 메이커! 메이커스 여러분들의 작품/프로젝트를 공유하는 공간입니다.

조이스틱 센서 쉴드를 이용해 추억의 게임을 즐겨보자!

2016-04-11 14:51:50

 

안녕하세요! Klant입니다 ;)

이전에 아크릴 램프를 통해 찾아뵜었는데요!ㅎㅎ

이번 프로젝트에서는 코코아팹의 신제품 조이스틱 센서 쉴드를 통해 네오레이지의 게임을 즐겨보도록 할게요!

조이스틱 센서 쉴드를 통해 게임을 조작하는 원리는 DIY BLE Jostick과 동일합니다. 

 - DIY BLE 조이스틱 만들기

 

 

 

 

개요

 

게임이란 이미 대중 문화에 큰 부분을 차지하는 컨텐츠입니다.

근래에는 X Box와 Play Station 같은 콘솔들과 PC를 통해 많은 사람들이 게임을 즐기고 있습니다.

 

X Box와 Play Station 같은 고사양 콘솔들이 보급되기 이전, 어릴 적 동네 슈퍼 앞에 쪼그려 앉아 친구들과 오락을 즐기던 기억이 있으신가요?

아래 사진과 같은 게임들이 눈에 익으실거라 생각됩니다.

잠시 추억의 게임들을 감상해볼까요?

 

<King Of Fighter 97>

 

 

<Street Fighter>

 

 

<Snow Brothers>

 

 

어떠신가요? 오락기 화면에서 많이 보던 게임들이죠?

이런 게임들과 함께 연상되는 그 것! 바로 오락기의 조이스틱입니다.

게임은 역시 손 맛! 키보드로 게임을 즐기는 것보다 조이스틱을 돌리고, 버튼을 누르며 게임을 즐겨야 제 맛이겠죠?

 

 

<오락기 조이스틱>

출처 : http://iphoneblog.tistory.com

 

 

이번 프로젝트에서는 코코아팹의 신제품! 조이스틱 센서 쉴드를 이용해 추억의 게임들을 조이스틱으로 즐기는 방법에 대해 알아보도록 하겠습니다.

조이스틱 센서 쉴드의 조이스틱 모듈과 버튼을 조작함으로서 PC 키보드의 키를 컨트롤하는 방법에 대해서는 판다마니아님의 프로젝트를 참고하였습니다. 

 

 

 

판다마니아님께서 제작하신 프로젝트는 아래 링크에서 확인하실 수 있습니다.

 - flex 센서를 이용해 원격으로 파워포인트의 슬라이드 움직이기

 

자 그럼 조이스틱 센서 쉴드로 추억의 게임을 즐겨보도록 할까요? ;)

 

 

 

 

 

 

관련 튜토리얼

 

이번 튜토리얼에서는 조이스틱 센서 쉴드를 사용합니다. 

코코아팹의 컨텐츠를 통해 조이스틱 센서 쉴드에 대해 알아보세요! 

 - 조이스틱 센서 쉴드 소개

 - 조이스틱 센서 쉴드 예약 판매 페이지

 

 

 

 

 

부품 목록

 

이번 튜토리얼에 사용되는 부품의 목록은 아래와 같습니다.

NO 부품명 수량 상세 설명
1 오렌지보드 1 Arduino UNO
2 조이스틱 센서 쉴드 1 JoyStick Sensor Shield
부품명 오렌지보드 조이스틱 센서 쉴드
파트

 

 

 

 

 

조이스틱 쉴드 연결

 

조이스틱 센서 쉴드를 아래 그림과 같이 오렌지보드와 결합해줍니다.

 

 

 

 

 

 

소프트웨어 Coding

 

조이스틱 센서 쉴드에 있는 조이스틱 모듈과 버튼에 상태에 따라 프로세싱으로 데이터를 전송해 프로세싱에서 키보드 제어를 하는 소스입니다. 

 

아두이노 소스

/*
  제목		: 조이스틱 센서 쉴드로 게임 즐기기.
  내용 		: 조이스틱 센서 쉴드를 이용해 네오 레이지의 다양한 게임들을 즐겨봅시다.
*/

/* 
  조이스틱 센서 쉴드 핀 구성
  조이스틱 센서 쉴드는 쉴드 형태의 보드이므로, 오렌지보드 결합 후 아래 소자 사용 시 정해진 핀을 사용하셔야 합니다.
  	- Joystick X : A0
  	- Joystick Y : A1
  	- Joystick Button : D10
  	- A Button : A2
  	- B Button : A3 
  	- C Button : D8
  	- D Button : D9
  	- Left Button : D4
  	- Right Button : D5
  	- Dial Variable Resistor : A4
  	- Piezo Buzzer : D6 
  	- Vibration Motor : D7
  	- Photoresistor : A5
  	- LED 1 : D2
  	- LED 2 : D3 
  	- LED 3 : D11 
  	- LED 4 : D12
  	- LED 5 : D13
*/

// Joystick X를 A0으로 설정합니다.
const int joyStickX = A0;
// Joystick Y를 A1으로 설정합니다. 
const int joyStickY = A1;
// A Button을 A2으로 설정합니다. 
const int AButton = A2;
// B Button을 A3으로 설정합니다. 
const int BButton = A3;
// C Button을 D8으로 설정합니다.
const int CButton = 8;
// D Button을 D9으로 설정합니다. 
const int DButton = 9;
// left Button을 D4로 설정합니다. 
const int leftButton = 4; 
// right Button을 D5로 설정합니다. 
const int rightButton = 5;
  
void setup(){
	// 시리얼 통신을 위해 통신 속도를 9600 bps로 설정합니다.
	Serial.begin(9600); 
	// leftButton을 입력 핀으로 설정합니다.
	pinMode(leftButton, INPUT_PULLUP);
	// rightButton을 입력 핀으로 설정합니다. 
	pinMode(rightButton, INPUT_PULLUP);
	// C Button을 입력 핀으로 설정합니다.
	pinMode(CButton, INPUT_PULLUP);
	// D Button을 입력 핀으로 설정합니다.
	pinMode(DButton, INPUT_PULLUP);
}

void loop(){
	// Joystick X에서 읽어온 값을 x_Value에 저장합니다.
	int x_Value = analogRead(joyStickX);
	// Joystick Y에서 읽어온 값을 y_Value에 저장합니다. 
	int y_Value = analogRead(joyStickY);
	
	if(y_Value > 750){
		// 조이스틱 모듈을 좌측 상단으로 움직였다면
		if (x_Value < 350) { 
			// 프로세싱에 q 데이터를 전송합니다.
			Serial.write('q');
			Serial.write('\n');
			delay(20);
    } 
    
    	// 조이스틱 모듈을 우측 상단으로 움직였다면
    	else if (x_Value > 750) { 
    		// 프로세싱에 e 데이터를 전송합니다. 
			Serial.write('e');
			Serial.write('\n');
			delay(20);
    	} 
    
    	// 조이스틱 모듈을 위로 움직였다면
    	else { 
    		// 프로세싱에 V 데이터를 전송합니다. 
			Serial.write('V');
			Serial.write('\n');
			// 프로세싱에 S 데이터를 전송합니다. 
			Serial.write('S');
			Serial.write('\n');
			delay(20);
    	}   
  	}

	else if(y_Value < 350){
		// 조이스틱 모듈을 좌측 하단으로 움직였다면
		if (x_Value < 350) { 
			// 프로세싱에 z 데이터를 전송합니다.
			Serial.write('z');
 			Serial.write('\n');
      		delay(20);
    	} 
    	// 조이스틱 모듈을 우측 하단으로 움직였다면
    	else if (x_Value > 750) { 
    		// 프로세싱에 c 데이터를 전송합니다. 
      		Serial.write('c');
       		Serial.write('\n');
       		delay(20);
    	} 
		
		// 조이스틱 모듈을 아래로 움직였다면
    	else{
    		// 프로세싱에 v 데이터를 전송합니다. 
     		Serial.write('v');
     		Serial.write('\n');     
     		// 프로세싱에 S 데이터를 전송합니다. 
     		Serial.write('S');
     		Serial.write('\n');
     		delay(20);      
    	}
	}

	else{
		// 조이스틱 모듈을 왼쪽으로 움직였다면
    	if (x_Value < 350) { 
    		// 프로세싱에 h 데이터를 전송합니다. 
       		Serial.write('h');
       		Serial.write('\n');
       		// 프로세싱에 s 데이터를 전송합니다. 
       		Serial.write('s');
       		Serial.write('\n');
       		delay(20);
    	} 
    	
    	// 조이스틱 모듈을 오른쪽으로 움직였다면
    	else if (x_Value > 750) { 
    		// 프로세싱에 H 데이터를 전송합니다. 
       		Serial.write('H');
       		Serial.write('\n');
       		// 프로세싱에 s 데이터를 전송합니다. 
       		Serial.write('s');
       		Serial.write('\n');
       		delay(20);
    	}
		
		// 조이스틱 모듈이 정중앙에 위치한다면
    	else{
    		// 프로세싱에 S 데이터를 전송합니다. 
      		Serial.write('S');
      		Serial.write('\n');      
      		Serial.write('s');
      		// 프로세싱에 s 데이터를 전송합니다. 
      		Serial.write('\n');
      		delay(20);
    	}
	}

	// A Button이 눌렸다면
	if (analogRead(AButton) == LOW) {
		// 프로세싱에 l 데이터를 전송합니다. 
    	Serial.write('l');
    	Serial.write('\n'); 
    	delay(20);
  	}
    // B Button이 눌렸다면
	if (analogRead(BButton) == LOW) {
		// 프로세싱에 d 데이터를 전송합니다. 
    	Serial.write('d');
    	Serial.write('\n');   
    	delay(20);
  	}
	// C Button이 눌렸다면
  	if (digitalRead(CButton) == LOW) {
  		// 프로세싱에 r 데이터를 전송합니다. 
    	Serial.write('r');
    	Serial.write('\n'); 
    	delay(20);
  	}
	// D Button이 눌렸다면
	if (digitalRead(DButton) == LOW) {
		// 프로세싱에 u 데이터를 전송합니다.
    	Serial.write('u');
    	Serial.write('\n');  
    	delay(20);
  	}
  	// right Button이 눌렸다면
  	if (digitalRead(rightButton) == LOW) {
  		// 프로세싱에 t 데이터를 전송합니다. 
    	Serial.write('t');
    	Serial.write('\n');
    	delay(20);   
  	}
  	// left Button이 눌렸다면
  	if (digitalRead(leftButton) == LOW) {
  		// 프로세싱에 p 데이터를 전송합니다. 
    	Serial.write('p');
    	Serial.write('\n');
    	delay(20);
  	}
  
  	else{
    	Serial.write('\n');
    	delay(20);
  	}
}

 

 

프로세싱 소스

 

프로세싱 사용법은 아래 링크를 참고하시면 됩니다. 

 - 프로세싱 사용법

 

/*
조이스틱과 PC를 연결해 키보드를 제어하기 위한 프로세싱 소스입니다. 
게임 에뮬을 실행하기전 아래의 소스를 실행시켜야 키 입력이 가능합니다.
*/
import processing.serial.*;
import java.awt.*;
import java.awt.event.KeyEvent;

Serial myPort;

boolean temp;
boolean flagX = false;
boolean flagY = false;

void setup(){
  // 현재 PC에 연결되어 있는 포트를 출력합니다.
  println(Serial.list());
  // 아두이노가 연결되어 있는 포트에 맞게 설정해주어야 합니다.
  // 예를들어 com6(다른 기기), com19(아두이노)가 연결 되어 있다면 2번째 포트가 아두이노이기 때문에 Serial.list()[1]로 바꿔줘야 합니다.
  println(Serial.list()[0]);
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
  
  myPort.bufferUntil('\n');
  
}

void draw(){
  serialEvent(myPort);
}

// 키보드 이벤트를 위한 함수
void serialEvent(Serial myPort){

  String inputString = myPort.readStringUntil('\n');
  try{
    inputString = trim(inputString);
    RobotTest(inputString);
  }catch(NullPointerException ne){
    inputString = "0";
  }
}

void RobotTest(String temp) {
  try{
    Robot robot = new Robot();

     robot.setAutoDelay(20);
     // 오렌지보드에서 'V' 데이터가 들어오면
     if(temp.equals("V")){
      // 키보드 위 방향키를 누릅니다.
      robot.keyPress(KeyEvent.VK_UP);
      flagY = true;
     }
     // 오렌지보드에서 'v' 데이터가 들어오면
     if(temp.equals("v")){
      // 키보드 아래 방향키를 누릅니다.
      robot.keyPress(KeyEvent.VK_DOWN);
      flagY = true;
     }
     // 오렌지보드에서 'H' 데이터가 들어오면
     if(temp.equals("H")){
       // 키보드 오른쪽 방향키를 누릅니다.
       robot.keyPress(KeyEvent.VK_RIGHT);
       flagX = true;
     }
     // 오렌지보드에서 'h' 데이터가 들어오면
     if(temp.equals("h")){
       // 키보드 왼쪽 방향키를 누릅니다. 
       robot.keyPress(KeyEvent.VK_LEFT);
       flagX = true;
     }
     // 오렌지보드에서 'q' 데이터가 들어오면
     if(temp.equals("q")){
       // 키보드 위쪽과 왼쪽 방향키를 누릅니다. 
       robot.keyPress(KeyEvent.VK_LEFT);
       robot.keyPress(KeyEvent.VK_UP);
       flagX = true;
       flagY = true;
     }
     // 오렌지보드에서 'e' 데이터가 들어오면
     if(temp.equals("e")){
       // 키보드 오른쪽과 위쪽 방향키를 누릅니다. 
       robot.keyPress(KeyEvent.VK_RIGHT);
       robot.keyPress(KeyEvent.VK_UP);
       flagX = true;
       flagY = true;
     }
     // 오렌지보드에서 'z' 데이터가 들어오면
     if(temp.equals("z")){
       // 키보드 왼쪽과 아래쪽 방향키를 누릅니다. 
       robot.keyPress(KeyEvent.VK_LEFT);
       robot.keyPress(KeyEvent.VK_DOWN);
       flagX = true;
       flagY = true;       
     }
     // 오렌지보드에서 'c' 데이터가 들어오면
     if(temp.equals("c")){
       // 키보드 오른쪽과 아래쪽 방향키를 누릅니다. 
       robot.keyPress(KeyEvent.VK_RIGHT);
       robot.keyPress(KeyEvent.VK_DOWN);
       flagX = true;
       flagY = true;      
     }
      // 오렌지보드에서 'S' 데이터가 들어오고 flagX의 값이 true라면
     if(temp.equals("S") && flagX == true ){ 
       // 키보드 오른쪽과 왼쪽 방향키를 땝니다.
       robot.keyRelease(KeyEvent.VK_RIGHT);
       robot.keyRelease(KeyEvent.VK_LEFT);
       flagX = false;
     }
     // 오렌지보드에서 's' 데이터가 들어오고 flagY의 값이 true 라면
     if(temp.equals("s") && flagY == true){
       // 키보드 위쪽과 아래쪽 방향키를 땝니다. 
       robot.keyRelease(KeyEvent.VK_UP);
       robot.keyRelease(KeyEvent.VK_DOWN);
       flagY = false;
     }
    // 오렌지보드에서 'l' 데이터가 들어오면
    if(temp.equals("l")){
     // 키보드 A를 눌렀다 땝니다. 
     robot.keyPress(KeyEvent.VK_A);
     robot.delay(1);
     robot.keyRelease(KeyEvent.VK_A);
    }
    // 오렌지보드에서 'd' 데이터가 들어오면
    if(temp.equals("d")){
     // 키보드 S를 눌렀다 땝니다. 
     robot.keyPress(KeyEvent.VK_S);
     robot.delay(1);
     robot.keyRelease(KeyEvent.VK_S);
    }
    // 오렌지보드에서 'r' 데이터가 들어오면
    if(temp.equals("r")){
     // 키보드 D를 눌렀다 땝니다.
     robot.keyPress(KeyEvent.VK_D);
     robot.delay(1);
     robot.keyRelease(KeyEvent.VK_D);
    }
    // 오렌지보드에서 'u'데이터가 들어오면
    if(temp.equals("u")){
     // 키보드 C를 눌렀다 땝니다. 
     robot.keyPress(KeyEvent.VK_C);
     robot.delay(1);
     robot.keyRelease(KeyEvent.VK_C);
    }
    // 오렌지보드에서 't' 데이터가 들어오면
    if(temp.equals("t")){
     // 키보드 1을 눌렀다 땝니다. 
     robot.keyPress(KeyEvent.VK_1);
     robot.delay(1);
     robot.keyRelease(KeyEvent.VK_1);
    }
    // 오렌지보드에서 'p' 데이터가 들어오면 
    if(temp.equals("p")){
     // 키보드 tab을 눌렀다 땝니다.
     robot.keyPress(KeyEvent.VK_TAB);
     robot.delay(1);
     robot.keyRelease(KeyEvent.VK_TAB);
    }
  }catch(Exception e){
    
  }
 }

 

 

 

 

 

작동 영상 

 

 

이제 네오 레이지 에뮬을 통해 게임을 즐겨봅시다.

네오 레이지를 다운로드 받으신 후 [CONTROLS] - [KEBOARD SETUP}에 들어가서

좌,우,위,아래, A, B, C, D의 키 셋업을 프로세싱 소스(오렌지보드에서 들어오는 데이터에 따라 눌려지는 키보드)에 맞게 바꿔주시면 됩니다.

 

Klant

kocoafab, opensource hardware, orange board, joystick sensor shield, 코코아팹, 오픈소스 하드웨어, 오렌지보드, 조이스틱 센서 쉴드
profileimge

김경선 2016-05-12 15:18:11

저도 해보고 싶네요.

profileimge

태우 2016-05-28 19:25:10

저도 해보고 싶네요.

profileimge

정동준 2016-06-13 09:38:09

지리고갑니다

profileimge

심정환 2016-10-27 15:32:46

잘만드셨네요