게임 러너 루프
GameRunner는 매우 일반적입니다. 자바 스크립트 사전 요구 사항 (아래 참조)과 기본 게임 루프를 제공합니다.
- 주자 초기화
- 캔버스 front, back 버퍼 생성
- 게임 인스턴스 생성
- 60fps 루프 시작
루프 반복마다 :
- game.update () 호출 - 마지막 프레임 이후 dt 타이머 간격 제공
- game.draw () 호출 - 그리기 위한 버퍼 캔버스 컨텍스트 제공
- 플립 백 및 프론트 버퍼
- 프레임 속도 통계 업데이트
그리고 그게 전부입니다. 여기에서 데모를 찾을 수 있습니다.
Javascript 사전 요구 사항
제 3 자 라이브러리가 필요없는 프레임 워크를 만들고 싶습니다. 이 게임은 HTML <canvas>를 기반으로하고 최신 브라우저에서만 지원되기 때문에 jQuery 나 prototype.js와 같은 전체 라이브러리를 포함 할 필요는 없습니다.
그러나 우리가 필요로하는 몇 가지 전제 조건이 있습니다.
- 캔버스
- Function.bind
- Object.create
- Object.extend
- addEventListener
- DOMContentLoaded
- 이미지 로더
캔버스
우리는 HTML5 <canvas> 요소를 사용하여 게임을 제작하고 있습니다. 우리는 HTML5 <canvas> 요소가 필요합니다! 이것은 모든 최신 브라우저에서 지원되므로 아무런 문제가 없어야합니다.
IE의 이전 버전은 대개 제 3 자 라이브러리 (excanvas.js)를 필요로하지만, IE9는 기본 캔버스를 가지고 있기 때문에 이전 버전의 IE에 대한 지원을 중단하게됩니다.
Function.bind
이 메소드는 ECMAScript 5의 표준입니다. 이것은 자바 스크립트 개발에서 가장 중요한 메소드 중 하나이며, 콜백 (예 : 이벤트 핸들러)으로 사용되는 인스턴스 메소드가 올바른 세트를 갖도록하기 위해 사용됩니다. 그것도 메서드를 합성 할 때 인자를 사용합니다.
이 방법은 대부분의 최신 브라우저에서 제공되지만 구형 브라우저를 제공하기에 쉽기 때문에 샘플 구현은 mozilla에서 제공합니다
if (!Function.prototype.bind) {
Function.prototype.bind = function(obj) {
var slice = [].slice,
args = slice.call(arguments, 1),
self = this,
nop = function () {},
bound = function () {
return self.apply(this instanceof nop ? this : (obj || {}), args.concat(slice.call(arguments)));
};
nop.prototype = self.prototype;
bound.prototype = new nop();
return bound;
};
}
Object.create
또 다른 ECMAScript5 표준은 특정 프로토 타입을 사용하여 객체의 구성을 캡슐화합니다.
자바 스크립트에서 OOP 클래스 구조 패턴을 모방하기 위한 많은 시도가 있었지만, 많은 경우에 이들을 완전히 피하고 자바 스크립트의 원형을 받아들이는 것이 더 간단 할 수 있습니다.
다시 말하지만, 현대의 브라우저는이 방법을 제공 할 것이지만 필요할 때 쉽게 구현할 수 있습니다.
if (!Object.create) {
Object.create = function(base) {
function F() {};
F.prototype = base;
return new F();
}
}
Object.create에서 빠진 것은 어떤 종류의 생성자 함수에 인수를 전달하는 기능입니다. 나는 표준 Object.create 에 이 추가 동작을 제공하는 Object.construct를 추가하려고합니다.
if (!Object.construct) {
Object.construct = function(base) {
var instance = Object.create(base);
if (instance.initialize)
instance.initialize.apply(instance, [].slice.call(arguments, 1));
return instance;
}
}
Object.extend
표준은 아니지만 일반적으로 jQuery 또는 프로토 타입과 같은 라이브러리에서 제공합니다. 한 개체의 모든 속성을 다른 개체의 속성으로 복사하는 기능은 매우 유용 할 수 있습니다.
if (!Object.extend) {
Object.extend = function(destination, source) {
for (var property in source) {
if (source.hasOwnProperty(property))
destination[property] = source[property];
}
return destination;
};
}
addEventListener
물론 우리는 DOM 이벤트에 응답 할 수 있어야합니다. 오래된 브라우저를 지원하기위한 여러 가지 방법이 있지만 <canvas>를 사용하여 최신 브라우저 만 지원하므로 표준 addEventListener를 지원할 수 있습니다 (예 : Internet Explorer 9에서도 지원)
DOMContentLoaded
페이지를 로드 할 준비가되면 jQuery 및 prototype.js와 같은 타사 라이브러리에서도 문제가 해결되지만 최신 브라우저 만 지원하기 때문에 이러한 브라우저가 DOMContentLoaded 이벤트를 지원함을 알 수 있습니다 (예. IE9는 이것을 지원합니다)
이미지 로더
<canvas> 기반 게임의 한 가지 문제는 이미지가 로드 될 때까지 이미지를 사용할 수 없다는 것입니다. 로드가 완료 될 때까지 이미지를 사용하지 않으려면 여러 이미지를로드하고 마지막 이미지 로드가 완료되면 콜백을 수행하는 도우미 메서드가 필요합니다.
loadImages: function(sources, callback) { /* load multiple images and callback when ALL have finished loading */
var images = {};
var count = sources ? sources.length : 0;
if (count == 0) {
callback(images);
}
else {
for(var n = 0 ; n < sources.length ; n++) {
var source = sources[n];
var image = document.createElement('img');
images[source] = image;
Game.addEvent(image, 'load', function() { if (--count == 0) callback(images); });
image.src = source;
}
}
}
'Phaser JS' 카테고리의 다른 글
자바스크립트로 퐁(Pong) 게임 만들기 Part - 3 (0) | 2017.07.20 |
---|---|
자바스크립트로 퐁(Pong) 게임 만들기 Part - 2 (0) | 2017.07.20 |
자바스크립트로 퐁(Pong) 게임 만들기 (프롤로그 ) (0) | 2017.07.20 |
HTML5로 사이드 스크롤러 게임을 만드는 방법 (0) | 2017.07.18 |
Phaser를 사용하여 HTML5 게임 타이틀 화면만들기 (0) | 2017.07.18 |