개시하다

게임에는 기준이 있다.홍련의 해방발매 전에도 기준이 공개됐다.기준 결과에 따라 자신의 컴퓨터가 어느 정도까지 쾌적할 수 있는지, 혹은 어느 정도(CPU/GPU 등)에 투자해야 하는지 판단할 수 있다.또는 일부 사용자에 대해서도 기준이 목적이 될 수 있습니다.
이전에 많은 브라우저의 자바스크립트와 HTML의 렌더링 기준이 있었던 것 같습니다.그러나 구글 제작Octane이 탈퇴하고 Peacekeeper도 일찌감치 중단됐고JetStream와Kraken도 업데이트되지 않아 아쉽다.몰라oortpnlie도 있어요.
뭐, 브라우저용 게임을 만들면 WebAssiembly가 트렌드인가.
하지만 그럼에도 불구하고 웹애슬리브와 웹GL의 문턱이 높은 것 같아서 캔버스에 대응하는 기준 수준일 뿐이라면 쉽게 만들 수 없는 것도 아니라고 생각합니다.
그나저나 제작의 기준은 앞서 공개된'Electron을 사용하여 Cordva에서 만든 응용 프로그램을 Windows 응용 프로그램에 적용합니다. (절차와 이식의 문제점)에 해당한다(실제로는 기본적으로 기능적이며 다른 브라우저로도 작동할 수 있는 정도).

데이텀을 생성할 때

일반적으로 Canvas에서 애니메이션을 실행하면 주기적으로 그려집니다.이전에는 setTimeout/setInterval이 주류였다.

animation_timer_id = setTimeout(func, timeout);

그러나 이렇게 되면 순조롭지 못한 상황과 숨겨진 탭도 모두 이동하기 때문에 숨겨진 탭에서 동작을 낮추고 60fps를 목표로 함수를 호출하는 것을 지원하는 것은 RequestAnimation Frame이다.

animation_timer_id = requestAnimationFrame(func);

하지만 RequestAnimation Frame의 목표는 60fps이기 때문에 그렇게 빨리 사용할 필요가 없는 상황에서는 사용하기 어렵다.늦어도 괜찮다면 아래와 같이 해야 한다.

var now_date = new Date();
if (now_date.getTime() - before_time < timeout) {
    animation_timer_id = requestAnimationFrame(func);
        return;
}

～描画機能～

before_time = now_date.getTime();
animation_timer_id = requestAnimationFrame(func);

before_타임(어느 곳에 저장해야 함)에 지난번에 그린 시간을 미리 등록한 다음 깨어나면 시간을 비교하고, 그리는 시간이 되지 않으면 리퀘스트 Animation Frame의 수면 처리를 다시 해야 한다.
request Animation Frame은 최대 60fps를 목표로 하는 좋은 함수이지만 30fps도 가능하다면 비용이 조금 증가할 것이다.
참고로 GaiHex는 일반적인 게임 묘사에서 Request Animation Frame을 사용하여 속도를 조절하지만 set Timeout도 되지 않습니까?나는 기준이 set Timeout을 채택했다고 생각한다.

데이텀 실행 및 결과

지난번 제작GaiHex에 기준을 넣었다.또 일렉트로론은 크롬을 기반으로 IE(Edge)/Firefox/Opera도 잘 작동한다(전면부터 움직이기 시작하는데 문제가 있다).또 안드로이드를 지원하기 때문에 안드로이드(Nexus 9 안드로이드 7.1.1)로 이동한다.또 손 옆에 있는 아이폰6s플러스(iOS 10.3.1)에서도 시운전을 시도했다.
이동 방법은 IE/Android/iPhone 6s Plus 이외에 저번 설명에 따라gitclone index.브라우저에서 > 을 읽으십시오.
하지만 IE/Android/iPhone6s Plus는 좀 귀찮아서 URL공개한다을 사용합니다.
이 페이지에 액세스하면 첫 번째 페이지의 맨 위 메뉴에 데이텀 버튼이 표시됩니다.

그런 다음 다양한 메뉴가 표시됩니다.게임 시간 60, 맵 balance, 단원수 12, Hade 0, 상급 단원 게임, 실락 라운드 1-3, skill 승급, 진영 견해가 하얗고 적군이 빨간색이면 2분 정도 결과가 나온다(선택 가능한 명중점만 표시).라운드 수도 61로 끝났다.

전체 크기 브라우저를 사용하는 ThinkPad X270(Core i7-6500U2.5GHz)과의 결과는 대체로 다음과 같다.또 넥서스 9에 맞춰 브라우저에서만 화면을 세로로 변경하려 했다.

뭐, 세로로 놓으면 테이블과 버튼이 무너져요. 용서해 주세요.왜 꼭 세로로 해야 합니까? 이 프로그램은 해상도에 따라 크기를 조정하지만 세로 길이에 적응하기 위해 세로 높이에 따라 사이즈를 확대할 수 없습니다.따라서 화면을 세로로 확대함으로써 사이즈를 높일 수 있다(이 부근은 해상도 모드가 많은 안드로이드의 문제라고 생각한다).
릴리즈
크기
FPS
Chrome
58.0.3029.81
680x779
　131.5
↑
↑
1,133x1,298
　126.6
Firefox
53.0
680x779
　135,4
↑
↑
1,133x1,298
　139.4
IE
15.15063
680x779
　181.0
↑
↑
1,133x1,298
　181.0
Opera
44.0.2510.1449
680x779
　131.9
↑
↑
1,133x1,298
　124.4
Electron
56.02924.87
680x779
　134.5
Nexus 9(Chrome)
53.0.2785.135
1,134x1,298
　 69.5
iPhone 6s Plus(Safari)
602.1
1,134x1,299
　131.3
브라우저는 넥서스 9/아이폰 6s 플러스와 크기가 다소 다르지만 크게 달라지지 않는다(바깥쪽이 붙을 줄 몰라 위에 올려놓는다).
Electron만 사이즈가 다르지만 구성 수정 등이 필요해 시도하지 않았다.크롬을 사용하기 때문에 성향을 잘 몰라요.

고찰하다.

그 결과 설정 오류가 없는 모니터에서 보면 120MHz의 규격이 실제로 표시되는지 알 수 없을 것이다.ThinkPad X270과 Nexus/iPhone 모니터의 그리기 간격은 모르겠지만, 나는 그것을 그릴 수 있다고 생각하지 않는다.
결과가 너무 가벼워서 벤치에 앉아 있는 것은 말도 안 된다.핑계로 처음엔 조금 무거웠는데 안드로이드를 위해 애써 덜어주면...의외로 너무 가벼워졌어요.
참고로 Request Animation Frame을 사용하면 어느 브라우저든 60fps를 약간 잘라서 기준 set Timeout만 사용했는데 속도가 너무 빨라서 그런 결과가 나왔다.
화면이 더 커서 묘사 부담을 가중시키지 않으면 비교할 수 없다.최근 브라우저에서 웹GL이 지원하는 현황을 감안하면 캔버스의 벤치는 이미 너무 가볍다.
코도바를 사용해 Windows 앱을 만들 때 브라우저가 IE(Edge)로 바뀌기 때문에 IE 대응도 진행 중이라는 게 제작 기준의 이유다.