Simplegame으로 애니메이션을 제작하는 법. js HTML5 게임 - 더미

다양한 HTML5 게임 엔진 기능을 모두 단순화하는 라이브러리를 만들 수 있습니다. 라이브러리 사용을 고려하십시오: simpleGame. js. 이 라이브러리는 사용하기 쉽고 정교한 게임 개발을 완벽하게 지원합니다. 시작하려면 실제로 두 개의 오브젝트 만 이해하면됩니다.

장면: 이 오브젝트는 HTML 캔버스 오브젝트로 시작하여 메인 루프를 추가합니다. 장면은 게임을 제어하는 통합 개체입니다.
스프라이트: 이 객체는 화면에서 움직이는 요소입니다. 대부분의 게임 요소는 스프라이트입니다. 각 스프라이트는 하나의 장면에 속해야하지만 원하는만큼의 스프라이트를 가질 수 있습니다. 스프라이트는 이미지를 기반으로합니다.

이 코드는 실제로 보이는 것보다 훨씬 정교합니다. 그것이하는 일은 다음과 같습니다:

페이지에 캔버스를 추가합니다. 회색 사각형은 실제로 페이지에 자동으로 추가 된 캔버스 태그입니다.
게임 루프를 시작합니다. 이 프로그램의 게임 루프는 이미 초당 20 프레임으로 실행됩니다.
스프라이트가 포함되어 있습니다. 볼 이미지는 어떤 방향으로 어떤 속도를 움직일 수있는 능력과 충돌 탐지와 같은 다른 흥미로운 기능을 내장 한 스프라이트입니다.
볼이 움직입니다. 한면을 떠날 때 자동으로 화면의 다른면을 감 쌉니다.

전체 코드 목록은

redBall입니다. html // 움직이는 공이있는 단순한 게임 var scene; var 공; 함수 init () {scene = new Scene (); ball = 새로운 Sprite (장면, "redBall.png", 50, 50); 공. setMoveAngle (180); 공. setSpeed (3); 장면. start ();} // 종료 init 함수 update () {scene. 명확한(); 공. update ();} // end update

기본 HTML5 페이지로 시작하여 게임 환경으로 전환하기위한 몇 가지 기능을 추가합니다.

게임 페이지를 만드는 법

기본 페이지를 작성하여 시작하십시오.

HTML5 페이지로 시작하십시오.

다른 웹 개발에 사용했던 것과 동일한 도구를 사용할 수 있습니다. 다른 HTML5 문서와 마찬가지로 기본 HTML5 템플릿을 만듭니다.
simpleGame을 가져옵니다. js 라이브러리.

이 도서관은 웹 사이트에서 무료로 구할 수 있습니다. 태그를 사용하여 라이브러리를 가져옵니다. src 속성을 라이브러리 이름 (simplegame.js)으로 설정합니다.
HTML을 단순하게 유지하십시오.

많은 돈이 필요하지 않습니다. 게임 엔진은 장면이 포함 된 캔버스를 만듭니다. 제목, 지침 또는 스코어 보드와 같은 기타 도구를 페이지에 넣을 수 있지만 게임 엔진이 대부분의 작업을 수행합니다.
본문이로드되면 init ()을 호출하십시오.

몸체가로드 될 때 호출되는 함수를 갖는 것은 매우 일반적입니다. body 태그에 onload = "init ()"을 추가하여 init () 메서드를 호출합니다.
코드를 포함 할 두 번째 스크립트 태그를 만듭니다.

사용자 정의 코드를위한 두 번째 스크립트 태그가 있어야합니다. 라이브러리를 가져 오는 태그 뒤에이 값을 추가하십시오.
스크립트에 두 개의 함수를 추가하십시오.

모든 simpleGame 프로그램에는 최소한 두 가지 기능이 있습니다. init ()은 시작시 발생하고 update ()는 프레임 당 한 번 발생합니다.

게임 초기화 방법

게임의 초기화 부분은 페이지가로드 될 때 발생합니다. 주로 스프라이트 및 기타 리소스를 설정하는 데 사용됩니다. 코드는 다음과 같습니다.

var scene; var 공; 함수 init () {scene = new Scene (); ball = 새로운 Sprite (장면, "redBall.png", 50, 50); 공. setMoveAngle (180); 공. setSpeed (3);} // end init

대부분의 게임은 유사한 스타일의 초기화를 사용합니다. 게임을 설정하는 방법은 다음과 같습니다.

장면을 포함 할 변수를 정의하십시오.

모든 simpleGame 게임에는 적어도 하나의 장면 개체가 있습니다. 어떤 기능 외부의 장면을 정의하여 모든 장면에서 사용할 수 있도록하십시오. 실제로 init () 함수 안에서 장면을 생성 할 것이다.
각 스프라이트에 대한 변수를 정의하십시오.

게임의 모든 스프라이트는 글로벌 변수에도 속해야합니다. init () 함수에서 스프라이트를 만들지 만 모든 함수에서 변수를 사용할 수 있도록해야합니다.
init () 함수를 빌드하십시오.

이 함수는 body onload에 의해 호출됩니다. 페이지가 메모리에로드 된 후에 실행됩니다.
장면을 만듭니다.

씬을 빌드하려면 씬 클래스의 인스턴스를 생성하십시오. 당신이 정말로 말하는 것은 "나에게 씬 객체를 만들고이 특정한 인스턴스를 씬이라고 부른다. ' "장면에는 어떤 매개 변수도 필요하지 않습니다.
볼 정령을 만듭니다.

볼은 Sprite 인스턴스입니다. 스프라이트를 만들기 위해서는 몇 가지 정보가 필요하다. 장면, 이미지 파일 이름, 너비 및 높이가 필요합니다.
볼의 이동 각도를 설정합니다.

볼이 움직이는 각도를 변경할 수 있습니다. 각도는지도 에서처럼도 단위로 측정됩니다.
볼의 이동 속도를 설정합니다.

볼의 속도를 결정할 수도 있습니다.
장면을 시작하십시오.

모든 것을 다 설정했으면 장면이 시작되도록 알립니다.

게임 애니메이션 업데이트

씬을 시작하면 타이머가 시작됩니다. 초당 20 번, 그것은 update ()라는 페이지에서 함수를 호출 할 것입니다. 그래서, 당신은 그런 기능을 가질 필요가 있습니다. 그리고 당신의 게임을 실행할 수있는 코드가 필요합니다.

update () 함수도 그다지 어렵지 않습니다.

function update () {장면. 명확한(); 공.

이전 화면을 지 웁니다.

첫 번째 비즈니스 순서는 마지막 화면으로 인한 혼란을 정리하는 것입니다. Scene 객체에는 정확히이 목적을 위해 clear () 함수가 있습니다. 이벤트 검사:
일반적으로 사용자 입력, 서로 충돌하는 스프라이트, 화면을 벗어나는 스프라이트 등의 이벤트를 확인합니다.이 간단한 애니메이션의 유일한 이벤트는 화면을 떠나는 스프라이트이며,이 동작과 관련된 동작은 자동화되었습니다. 각 스프라이트 업데이트:
화면 업데이트의 마지막 부분은 스프라이트를 업데이트하는 것입니다. 스프라이트를 업데이트하면 새로운 위치에 그려집니다. 화면을 지우지 않으면 어떻게됩니까? 모든 스프라이트 모션은 캔버스에 그려지며 움직이는 볼이 아닌 큰 얼룩처럼 보입니다.