비디오: 9강 일러스트레이터기초및오브젝트구성1, mobile ux and ui Designer tutorial 강사 김영삼(소프트캠퍼스) 2025
모바일 장치에는 기울이기로 HTML5 게임의 개체를 제어 할 수있는 매우 흥미로운 입력 메커니즘이 있습니다. 이것은 동작을 추적하는 가속도계 라는 특별한 탑재 도구와 함께 작동합니다. 가속도계는 실제로 회전을 측정하므로이를 사용하여 게임에서 멋진 기울기 컨트롤을 얻을 수 있습니다.
simpleGame 라이브러리에는 가속도계를 캡슐화하는 Accel이라는 특수 객체가 있습니다. Joy 객체와 매우 비슷하게 작동합니다.
-
Accel 객체를 생성합니다.
SimpleGame에는 Accel 개체가 있습니다. 가속도계 테스트를 켜려면이 개체를 만듭니다.
-
방법을 사용하여 기울기를 결정합니다.
Accel 객체에는 회전 량을 나타내는 getAX () 및 getAY ()라는 특수 메서드가 있습니다.
-
가속 값을 수정하십시오.
AX 및 AY 값은 각각 X 및 Y 축을 중심으로 한 회전 량을 표시합니다. 값의 범위는 -9에서 9까지입니다. 일반적으로 원하는 동작을 얻으려면 기울이기 값을 수정해야합니다. 이것은 대개 몇 가지 간단한 수학 계산을 포함합니다.
여기에 accel의 코드가 있습니다. html:
accel. html var 게임; var 공; var accel function init () {game = new Scene (); ball = 새로운 Sprite (게임, "redBall.png", 50, 50); accel = 새로운 Accel (); 게임. start ();} // init 함수를 끝내십시오. update () {game. 명확한(); newDX = accel. getAY (); newDY = accel. getAX (); newDX * = -5; newDY * = -5; 공. setDX (newDX); 공. setDY (newDY); 공. update ();}
가속도계는 사용하기 쉽습니다.
-
가속도계 개체를 보관할 변수를 만듭니다.
변수 accel을 호출 할 수 있습니다.
-
가속을 사용하십시오. getAX () 메서드는 X 축을 중심으로 회전을 가져옵니다.
getAX () 메서드는 X 축을 중심으로 기울기 비율을 반환합니다. X 축은 화면에서 좌우로 이동하므로 X 축 주위의 회전은 일반적으로 Y 축을 따라 움직입니다.
-
acccel을 사용하십시오. getAY () 메서드는 Y 축 주위의 회전을 결정합니다. 마찬가지로 getAY () 메서드는 (수직) Y 축을 따라 기울기 비율을 나타냅니다. 일반적으로 getAY ()를 사용하여 수평 모션을 제어합니다.
Z 축에 대해 염려하지 마십시오.
-
Z 축 (화면 중심에서 코쪽으로)을 따라 회전을 읽을 수도 있지만 일반적으로 도움이되지 않습니다. 중립 위치가 테이블 위에서 완전히 평평하게 놓여 있다고 (지금 당장) 가정한다.
장치가 완전히 평평한 테이블에 완전히 놓여 있으면 getAX () 및 getAY ()에 대해 0 값을 얻습니다.
-
스케일링 요소 실험.
일반적으로 원하는 동작을 얻으려면 getAX () 및 getAY () 결과를 어느 정도 곱해야합니다. 둘 다 음수 5를 곱하면 dy와 dx에 적절한 값을 얻을 수 있습니다. 원하는 행동을 정확하게 얻기 위해 실험을해야합니다.
