우수한 HTML5 게임을 개발하는 방법 - 디즈니의 '오즈로 가는 길' 게임 기술에 대한 자세한 설명(1)
- 黄舟원래의
- 2017-03-09 16:17:511557검색
> 최근 개봉한 영화 '오즈'의 설정을 차용한 '모바일 애플리케이션 현황 및 개발 동향' 기사에 언급되어 있습니다. 이 영화를 보신 분들은 깊은 감동을 받으실 것입니다.), 이에 상응하는 웅장한 게임 세계를 구축해 보세요. 동시에 디즈니는 구글과 협력해 크롬 브라우저 성능과 HTML5 기술을 보여주는 쇼케이스로 활용했다. WebGL 3D, 카메라, 3D 음향효과 및 기타 고급 기술을 사용하고 데스크톱 및 모바일 단말기를 지원하며 우수한 품질을 갖춘 HTML5 게임에 대한 구현 원리와 기술을 이해하는 것은 우리에게 큰 참고 자료가 될 것입니다.
게임 개발과 해외 응용 분야에서 HTML5의 적용에 대한 여러분의 이해를 돕기 위해 오랫동안 이 기사를 번역하고 싶었지만 이 기사가 너무 길어서 독자의 이익을 위해서만 분할 출판될 수 있습니다.
이 튜토리얼은 제가 최근 HTML5를 소개한 글 중에서 난이도가 고급이라고 생각되며, 읽고 배우기에 일정한 경험이 있는 개발자에게 적합합니다. 
소개
"오즈로 가는 길 찾기"는 Disney가 Chrome에 제공하는 새로운 경험입니다. 캔자스 서커스를 통과하고 거대한 폭풍을 거쳐 오즈 왕국까지 대화형 여행을 떠나게 됩니다.
우리의 목표는 브라우저의 기술적 기능을 결합하여 사용자가 영화 연결과 강력한 연결을 형성할 수 있는 재미있고 몰입도 높은 경험을 만드는 것입니다. 이 게임의 작업은 정말 방대하기 때문에 일부 장만 나열하고 흥미롭다고 생각되는 기술적인 스토리만 작성할 수 있습니다. 튜토리얼을 진행하면서 난이도가 점차 높아집니다.
더 나은 경험을 만들기 위해 많은 분들이 열심히 노력하고 있지만 여기에 나열하기에는 너무 많습니다. 전체 페이지에 걸쳐 전체 이야기를 경험하려면 웹사이트를 방문하세요.
미리보기
PC에서 펼쳐지는 '오즈를 찾는 길'은 풍부한 몰입감의 세계입니다. 우리는 3D와 전통적인 영화 제작 영감을 결합하여 여러 레이어의 현실이 포함된 장면을 만들었습니다. 가장 눈에 띄는 기술은 셰이더와 DOM 애니메이션 요소를 사용자 정의하기 위해 CSS3 기능을 사용하는 Three.js를 사용한 WebGL의 도입입니다. 이 외에도 getUserMedia API(WebRTC)는 대화형 경험을 향상시켜 사용자가 카메라에서 직접 자신의 이미지를 추가할 수 있도록 하며 WebAudio는 3D 사운드 효과를 제공합니다.
하지만 이 기술 경험의 마법은 모든 것이 하나로 합쳐지는 방식에 있습니다. 이것은 주요 과제 중 하나였습니다. 시각 효과와 상호 작용 요소를 혼합하여 일관된 장면을 만드는 방법은 무엇입니까? 이러한 시각적 복잡성은 관리하기가 매우 어렵습니다. 한 번에 어떤 장면을 개발해야 하는지 말하기가 어렵습니다. 이러한 시각적 문제와 최적화 문제를 해결하기 위해 우리는 조사 중인 시점에 대한 모든 관련 설정을 캡처하는 제어판을 많이 사용했습니다. 밝기, 수직 심도, 감마 등 장면의 모든 내용을 브라우저에서 실시간으로 수정할 수 있습니다. 누구나 중요한 매개변수의 값을 조정하고, 참여하고, 무엇이 가장 효과적인지 발견함으로써 경험을 가지고 놀 수 있습니다.
우리의 비밀을 공유하기 전에, 붕괴로 이어질 수 있다는 점을 경고하고 싶습니다. 중요한 내용을 검색하고 있지 않은지 확인하고 웹사이트 URL을 방문할 때 ?debug=on을 추가하세요. 웹 사이트가 로드될 때까지 기다리면 Ctrl+I를 누르면 오른쪽에 드롭다운 메뉴가 나타납니다. "카메라 경로 종료" 옵션을 선택 해제하면 A, W, S, D 키와 마우스를 사용하여 공간 내에서 자유롭게 이동할 수 있습니다.여기에서 모든 설정에 대해 자세히 설명하지는 않지만 실험해 보시기 바랍니다. 키는 다양한 시나리오에서 다양한 설정을 표시합니다. 마지막 폭풍 장면에는 재생 중인 애니메이션을 전환하는 Ctrl+A라는 추가 키 세트가 있습니다. 이 장면에서 Esc를 누르면(마우스 잠금 기능 종료) 다시 Ctrl+I를 누르면 폭풍 장면의 특수 설정으로 들어갑니다. 주변을 둘러보며 아래와 같은 예쁜 엽서를 찍어보세요.
이를 수행하기 위해 우리는 dat.gui라는 훌륭한 프레임워크를 채택했습니다(여기서 사용 방법에 대한 지난 튜토리얼을 볼 수 있습니다). 이를 통해 방문자에게 노출되는 설정을 신속하게 변경할 수 있습니다.
그림을 그리는 장면과 약간 비슷합니다.
많은 고전 디즈니 영화와 애니메이션 제작 장면은 서로 다른 레이어를 병합하는 것을 의미합니다. 외부 레이어, 단위 애니메이션 레이어, 유리에 페인팅하여 얻은 물리적 설정 레이어 및 상단 레이어(매트 페인팅이라는 기술)가 있습니다. 정적인 시각적 요소를 훨씬 뛰어넘는 일부 "레이어"가 있더라도 우리가 만드는 경험의 구조는 여러 면에서 유사합니다. 실제로 더 복잡한 계산을 기반으로 사물이 보이는 방식에 영향을 미칩니다. 그러나 적어도 큰 그림 수준에서는 뷰를 서로 합성하여 처리합니다. 상단에는 UI 레이어가 있고 그 아래에는 3D 장면이 있습니다. 이 레이어는 다양한 장면 구성 요소로 구성되어 있습니다. 최상위 인터페이스 레이어는 DOM 및 CSS 3을 사용하여 생성됩니다. 이벤트 통신은 Backbone 라우터 + onHashChange HTML5 이벤트를 사용하여 애니메이션에 응답하는 영역을 제어합니다. (프로젝트 소스 코드: /develop/coffee/router/Router.coffee).
튜토리얼: 스프라이트 테이블 및 레티나 지원 우리는 흥미로운 최적화 기술을 사용하여 이미지의 여러 인터페이스 레이어를 하나의 별도 PNG로 결합합니다. 서버 요청을 줄입니다. 이 프로젝트의 인터페이스는 70개 이상의 이미지(3D 텍스처 제외)로 구성되어 있으며 모두 웹사이트 지연 시간을 줄이기 위해 미리 로드되어 있습니다. 최신 스프라이트 시트는 여기에서 볼 수 있습니다:
일반 디스플레이
Retina 디스플레이
여기 스프라이트 시트를 활용하는 방법, 레티나 장치에서 사용하는 방법, 인터페이스를 최대한 간단하고 깔끔하게 만드는 방법에 대한 몇 가지 팁이 있습니다.
스프라이트 테이블 만들기
TexturePacker를 사용하여 필요한 스프라이트 형식을 만듭니다. 이 경우에는 매우 깔끔하고 애니메이션 스프라이트를 만드는 데 사용할 수 있는 EaselJS를 채택합니다.
생성된 Sprite 테이블
Sprite 테이블이 생성되면 다음과 같은 json 파일이 표시됩니다.
>
{
"images": ["interface_2x.png"],
"frames": [
[2, 1837, 88, 130],
[2, 2, 1472, 112],
[1008, 774, 70, 68],
[562, 1960, 86, 86],
[473, 1960, 86, 86]
],
"animations": {
"allow_web":[0],
"bottomheader":[1],
"button_close":[2],
"button_facebook":[3],
"button_google":[4]
},
}위치: <br>
<br>
이미지는 스프라이트 테이블의 주소를 가리킵니다.- 프레임은 각각 UI 요소의 좌표 [x, y, width, height]
-
animations 는 각 콘텐츠의 이름입니다
HD 이미지를 사용하여 스프라이트 시트를 만든 다음 이미지 크기를 절반으로 조정하여 일반 버전을 만듭니다. <br>
모두 혼합
이제 이를 사용하려면 JavaScript 코드 섹션만 필요합니다. <br>
var SSAsset = function (asset, p) {
var css, x, y, w, h;
// pide the coordinates by 2 as retina devices have 2x density
x = Math.round(asset.x / 2);
y = Math.round(asset.y / 2);
w = Math.round(asset.width / 2);
h = Math.round(asset.height / 2);
// Create an Object to store CSS attributes
css = {
width : w,
height : h,
'background-image' : "url(" + asset.image_1x_url + ")",
'background-size' : "" + asset.fullSize[0] + "px " + asset.fullSize[1] + "px",
'background-position': "-" + x + "px -" + y + "px"
};
// If retina devices
if (window.devicePixelRatio === 2) {
/*
set -webkit-image-set
for 1x and 2x
All the calculations of X, Y, WIDTH and HEIGHT is taken care by the browser
*/
css['background-image'] = "-webkit-image-set(url(" + asset.image_1x_url + ") 1x,";
css['background-image'] += "url(" + asset.image_2x_url + ") 2x)";
}
// Set the CSS to the p
p.css(css);
}; 사용 방법에 대한 코드는 다음과 같습니다.
<br>
logo = new SSAsset(
{
fullSize : [1024, 1024], // image 1x dimensions Array [x,y]
x : 1790, // asset x coordinate on SpriteSheet
y : 603, // asset y coordinate on SpriteSheet
width : 122, // asset width
height : 150, // asset height
image_1x_url : 'img/spritesheet_1x.png', // background image 1x URL
image_2x_url : 'img/spritesheet_2x.png' // background image 2x URL
},$('#logo')); 여기에서 전체 예제를 다운로드하세요. <br> 더 알고 싶으시면 그것에 대해 픽셀 밀도를 변경하려면 Boris SMUS의 이 기사를 읽으십시오.
3D 콘텐츠 파이프라인
환경 경험은 WebGL 레이어 위에 구축됩니다. 3D 장면에 대해 생각할 때 가장 어려운 질문 중 하나는 모델링, 애니메이션 및 특수 효과의 모든 영역에서 표현력이 가장 뛰어난 콘텐츠를 어떻게 만들 수 있느냐는 것입니다. 여러 면에서 이 문제의 핵심은 콘텐츠 파이프라인입니다. 즉, 미리 결정된 프로그램을 사용하여 3D 장면에서 콘텐츠를 생성하는 것입니다. 우리는 흥미진진한 세상을 만들고 싶기 때문에 3D 아티스트가 세상을 만들 수 있도록 신뢰할 수 있는 프로세스가 필요합니다. 그들은 3D 모델링 및 애니메이션 소프트웨어에 가능한 한 많은 표현의 자유를 부여해야 하며 우리는 코드를 통해 이를 화면에 표시해야 합니다.
우리는 과거에 3D 웹사이트를 만들 때마다 이전에 사용했던 도구의 한계를 발견했기 때문에 한동안 이런 종류의 문제를 해결해 왔습니다. 나중에 우리는 3D Librarian이라는 도구를 만들어서 작동시키려고 했습니다. 이 도구에는 몇 가지 역사가 있습니다. 원래는 Flash용으로 제작되었으며 이를 사용하면 대규모 Maya 장면을 런타임 압축 해제에 최적화된 단일 압축 파일로 변환할 수 있습니다. 이것이 최적인 이유는 렌더링 및 애니메이션 시간에 조작되는 본질적으로 동일한 데이터 구조로 장면을 효과적으로 래핑하기 때문입니다. 이렇게 하면 파일이 로드될 때 구문 분석이 거의 수행되지 않습니다. 파일이 AMF 형식이고 Flash가 기본적으로 압축을 풀 수 있기 때문에 Flash에서 압축을 풀면 매우 빠릅니다. WebGL에서 동일한 형식을 사용하려면 CPU에 약간의 추가 작업이 필요합니다. 실제로 우리는 압축이 풀린 데이터 JavaScript 코드 계층을 다시 만들어야 했습니다. 이는 기본적으로 이러한 파일의 압축을 풀고 WebGL에 필요한 데이터 구조를 다시 생성하는 것이었습니다. 전체 3D 장면의 압축을 푸는 것은 CPU에 다소 부담을 줍니다. 게임의 장면 1의 압축을 푸는 데는 중급 및 고급형 컴퓨터에서 약 2초가 걸립니다. 따라서 이를 위해 우리는 Web Workers 기술을 사용하여 "장면 설정" 시간(실제로 장면이 나타나기 전)에 구현하므로 사용자 경험에 영향을 미치지 않습니다. 이 편리한 도구는 모델, 텍스처, 골격 애니메이션 등 3D 장면을 가져올 수 있습니다. 나중에 3D 엔진에서 로드할 수 있는 단일 라이브러리 파일을 만들 수 있습니다.
하지만 한때 문제가 발생했고 이제는 WebGL을 사용하여 문제를 해결합니다. 따라서 우리는 3D 라이브러리를 사용하여 3D 장면 파일을 압축하고 WebGL이 이해할 수 있는 올바른 형식으로 변환하는 특정 JavaScript 레이어를 만들었습니다.
튜토리얼: 바람이 있어야 합니다
"오즈 로드를 찾아서"에서 반복되는 주제는 바람입니다. 줄거리의 주요 스레드는 약한 바람에서 강한 바람까지 서로 연결되어 있습니다. 카니발의 첫 장면은 비교적 평범하다. 다양한 장면을 거치면서 사용자는 점차 강풍을 경험하게 되고, 마침내 마지막 장면인 폭풍에 이르게 된다.
따라서 몰입감 있는 바람 효과를 제공하는 것이 중요합니다. 이 효과를 얻기 위해 3가지 카니발 장면을 텐트, 풍선 등 부드러운 물체로 채웠습니다.위 내용은 우수한 HTML5 게임을 개발하는 방법 - 디즈니의 '오즈로 가는 길' 게임 기술에 대한 자세한 설명(1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!