JavaScript 향상 튜토리얼 - Cocos2d-JS 화면 적응 솔루션

이 글은 H5EDU 기관의 공식 HTML5 트레이닝 튜토리얼입니다. 주로 소개하는 내용은 다음과 같습니다: JavaScript 향상 튜토리얼 - Cocos2d-JS 화면 적응 솔루션

1. 화면 적응 정책 설정(해상도 정책)

해상도 정책을 사용하지 않은 경우 게임 로딩 프로세스가 완료된 후(cc.game.onStart 함수 콜백에서) 다음 코드만 호출하면 됩니다.

cc.view.setDesignResolutionSize(320 , 480 , cc.ResolutionPolicy.SHOW_ALL);
setDesignResolutionSize 함수의 처음 두 매개변수는 코드에서 사용하려는 게임 해상도이고, 세 번째 매개변수는 선택한 적응 방식입니다. 엔진에는 5가지 적응 체계가 내장되어 있으며 각각 고유한 동작을 가지고 있습니다. 자세한 내용은 아래를 참조하세요.

디자인 해상도를 설정한 경우 해상도 정책을 직접 설정할 수 있습니다.

cc.view.setResolutionPolicy(cc.ResolutionPolicy.NO_BORDER)
기본 게임에서는 항상 다음을 사용합니다. 전체 화면 공간이 필요하지만 웹에서는 페이지에 게임 외에 다른 시각적 또는 텍스트 요소가 있을 수도 있고 게임에 맞게 멋진 테두리를 디자인해야 할 수도 있습니다. 따라서 Cocos2d-JS의 웹 엔진 적응 방식은 기본적으로 게임 Canvas 요소의 상위 노드에 적응합니다. 게임 장면을 브라우저 화면에 적응시키려면 Canvas를 바로 아래에 배치하기만 하면 됩니다. the body:



🎜>
해상도 사용 정책의 이점은 장치 화면 크기나 브라우저 창의 가로세로 비율에 관계없이 자동으로 화면 크기에 맞게 조정됩니다. 더 중요한 것은 게임 코드에서 항상 자신이 디자인한 게임 해상도를 사용하여 게임 장면을 배치한다는 것입니다. 예를 들어, 디자인 해상도를 320 * 480으로 설정하면 게임 코드에서 게임 창의 오른쪽 상단 모서리 좌표는 항상 (320, 480)이 됩니다. (FIXED_WIDTH 모드에서는 높이가 조정될 수 있습니다. FIXED_HEIGHT 모드 너비가 조정될 수 있습니다. 자세한 내용은 아래를 참조하세요.

3. 브라우저 창 크기 변경 이벤트 모니터링

새로운 적응 체계를 사용하면 브라우저 크기가 변경될 때 자동으로 적응을 다시 시도할 수 있습니다. 예를 들어 사용자가 브라우저 크기를 변경하기 위해 드래그하는 경우 또는 더 유용하게는 휴대폰을 회전하는 경우입니다. 이 동작은 게임 중 언제든지 켤 수 있습니다. cc.view의 resizeWithBrowserSize 함수를 호출하면 됩니다.

cc.view.resizeWithBrowserSize(true)
변경 사항에 더 유연하게 대응하려면, cc를 제공합니다. setResizeCallback 함수를 통해 콜백 함수를 등록하여 브라우저 창 크기 변경 이벤트를 수신할 수 있습니다.

cc.view.setResizeCallback(function() {
// 원하는 대로 하세요 게임 콘텐츠 수준에서 필요한 적응 작업
// 예를 들어 사용자의 모바일 기기 방향에 따라 적용할 적응 모드를 결정할 수 있습니다
})
4. 🎜>
전체 화면 API는 브라우저에서 웹 페이지가 사용자의 전체 화면을 얻을 수 있도록 허용하는 새로 개발된 API입니다.

Cocos2d-JS는 사용자에게 더 나은 게임 경험을 제공하기 위해 모바일 브라우저에서 자동으로 전체 화면으로 전환하려고 시도합니다(모든 브라우저가 이 API를 지원하는 것은 아닙니다).

한편, 데스크톱의 거의 모든 최신 브라우저는 전체 화면 API를 지원합니다. 이 API를 사용하려면 Cocos2d-JS도 사용을 단순화합니다.

전체 화면으로 전환해 보세요. 모드(사용자 상호 작용 필요): cc.screen.requestFullScreen(targetElement, onFullScreenCallback);
전체 화면 모드인지 감지: cc.screen.fullScreen()
전체 화면 모드 종료: cc.screen exitFullScreen();
4.4.3 중요 개념

1. 게임 프레임

게임 프레임은 게임 캔버스 요소의 초기 부모 노드입니다. HTML 문서 . 그러나 원하는 경우 DOM 구조의 모든 컨테이너 노드가 될 수 있습니다. Canvas 요소의 초기 크기는 중요하지 않습니다. 화면 적응 프로세스 중에 설정한 프레임 크기에 맞게 자동으로 크기가 조정됩니다. 다시 말하지만, 게임 창을 전체 브라우저 창에 맞추려면 Canvas 요소를 본문 바로 아래에 배치하면 됩니다.

2. 게임 컨테이너 컨테이너

Cocos2d-JS 초기화 과정에서 엔진은 자동으로 Canvas 요소를 DIV 컨테이너에 배치하고 이 컨테이너는 Canvas에 추가됩니다. 원래 상위 노드(게임 프레임). 이 게임 컨테이너는 화면 적응 솔루션을 구현하는 데 중요한 보조 요소입니다. cc.container를 통해 액세스할 수 있습니다.

3. 게임 월드 콘텐츠

게임 월드는 게임에서 사용되는 월드 좌표계를 나타냅니다.

4. 뷰포트

뷰포트는 게임 캔버스 요소의 좌표계를 기준으로 한 게임 세계의 좌표와 크기입니다.

5. 🎜>
컨테이너 적응 전략은 게임 프레임에 맞게 게임 컨테이너와 게임 캔버스 요소의 크기를 조정하는 역할을 합니다.

6. 콘텐츠 적응 전략 콘텐츠 전략

콘텐츠 적응 전략은 게임 컨테이너에 맞게 게임 세계의 크기를 조정하고 창을 계산하고 설정하는 역할도 합니다.