플래시 게임을 HTML5로 변환할 때 알아야 할 사항은 무엇입니까?

HTML5 사용이 증가함에 따라 많은 회사에서 오래된 Flash를 제거하고 제품을 최신 산업 표준에 맞추기 위해 가장 인기 있는 타이틀을 다시 제작하기 시작했습니다. 이 변경 사항은 특히 도박/카지노 및 엔터테인먼트 산업에서 볼 수 있으며 몇 년 동안 발생하고 있으므로 적절한 선택 항목이 이미 변환되었습니다.

불행히도, 인터넷을 검색할 때 겉보기에 성급한 작업의 예를 종종 우연히 발견할 수 있으며, 그 결과 최종 제품의 품질이 좋아집니다. 그렇기 때문에 게임 개발자가 Flash에서 HTML5로의 변환이라는 주제에 익숙해지고 작업에 착수하기 전에 피해야 할 실수를 배우는 데 시간을 할애하는 것이 좋습니다.

명백한 기술적인 문제를 제외하고 Flash 대신 JavaScript를 선택하는 이유 중 하나는 게임 디자인을 SWF에서 JavaScript로 변경하면 더 나은 사용자 경험을 얻을 수 있고 결과적으로 현대적인 모양을 얻을 수 있다는 사실입니다. 하지만 어떻게 해야 할까요? 이 구식 기술을 없애기 위해 전용 JavaScript 게임 변환기가 필요하십니까? 글쎄요, Flash에서 HTML5로의 변환은 케이크 조각이 될 수 있습니다. 여기에 그것을 처리하는 방법이 있습니다.

추천 자료 : HTML5 게임 디자인의 원리

HTML5 게임 경험을 개선하는 방법

게임을 다른 플랫폼으로 전환하는 것은 게임을 개선하고 문제를 해결하며 청중을 늘릴 수 있는 좋은 기회입니다. 다음은 쉽게 수행할 수 있고 고려할 가치가 있는 몇 가지 사항입니다.

• 모바일 장치 지원
  Flash에서 JavaScript로 변환하면 더 많은 잠재고객(모바일 장치 사용자)에 도달할 수 있습니다. 터치스크린 컨트롤에 대한 지원은 일반적으로 게임에서도 구현되어야 합니다. 운 좋게도 이제 Android 및 iOS 장치 모두 WebGL도 지원하므로 일반적으로 30 또는 60 FPS 렌더링을 쉽게 달성할 수 있습니다. 대부분의 경우 60FPS는 문제를 일으키지 않으며 모바일 장치의 성능이 점점 더 좋아지면서 시간이 지남에 따라 개선될 것입니다.

• 성능 향상
  ActionScript와 JavaScript를 비교할 때 후자가 전자보다 빠릅니다. 그 외에 게임을 변환하는 것은 게임 코드에서 사용되는 알고리즘을 다시 살펴보는 좋은 기회입니다. JavaScript 게임 개발을 사용하면 게임을 최적화하거나 원래 개발자가 남긴 사용되지 않는 코드를 완전히 제거할 수 있습니다.
• 버그 수정 및 게임 플레이 개선
  새로운 개발자가 게임의 소스 코드를 조사하게 하면 알려진 버그를 수정하거나 새롭고 매우 드문 버그를 발견하는 데 도움이 될 수 있습니다. 이렇게 하면 플레이어가 게임을 덜 짜증나게 하여 사이트에서 더 많은 시간을 보내고 다른 게임을 시도하도록 권장할 수 있습니다.
• 웹 분석 추가
  트래픽을 추적하는 것 외에도 웹 분석을 사용하여 플레이어가 게임에서 어떻게 행동하고 게임 플레이 중에 어디에서 멈추는지에 대한 지식을 수집할 수도 있습니다.
• 현지화 추가
  이것은 청중을 늘리고 다른 나라에서 온 아이들이 당신의 게임을 플레이하는 데 중요합니다. 아니면 게임이 영어로 되어 있지 않고 해당 언어를 지원하고 싶습니까?

게임 내 UI에서 HTML과 CSS를 건너뛰면 게임 성능이 향상되는 이유

JavaScript 게임 개발과 관련하여 게임 내 버튼, 위젯 및 기타 GUI 요소에 HTML 및 CSS를 활용하고 싶을 수 있습니다. 내 조언은 여기에서 조심하라는 것입니다. 직관적이지 않지만 실제로 DOM 요소를 활용하는 것은 복잡한 게임에서 성능이 떨어지고 모바일에서 더 중요합니다. 모든 플랫폼에서 일정한 60FPS를 달성하려면 HTML 및 CSS에서 탈퇴해야 할 수 있습니다.

체력 표시줄, 탄약 표시줄 또는 점수 카운터와 같은 비대화형 GUI 요소는 일반 이미지( Phaser.Image 클래스)를 사용하여 Phaser에서 쉽게 구현할 수 Phaser.Text .crop 텍스트 레이블.

버튼 및 체크박스와 같은 대화형 요소는 내장 Phaser.Button 클래스를 사용하여 구현할 수 있습니다. 기타 더 복잡한 요소는 그룹, 이미지, 버튼 및 텍스트 레이블과 같은 다양한 단순 유형으로 구성될 수 있습니다.

참고: Phaser.Text 또는 PIXI.Text 개체를 인스턴스화할 때마다 텍스트를 렌더링할 새 텍스처가 생성됩니다. 이 추가 텍스처는 정점 일괄 처리를 중단하므로 너무 많지 않도록 주의 하십시오.

사용자 정의 글꼴이 로드되었는지 확인하는 방법

사용자 정의 벡터 글꼴(예: TTF 또는 OTF)로 텍스트를 렌더링하려면 텍스트를 렌더링하기 전에 브라우저에서 글꼴을 이미 로드했는지 확인해야 합니다. Phaser v2는 이 목적을 위한 솔루션을 제공하지 않지만 Web Font Loader라는 다른 라이브러리를 사용할 수 있습니다.

글꼴 파일이 있고 페이지에 웹 글꼴 로더가 포함되어 있다고 가정하면 다음은 글꼴을 로드하는 방법에 대한 간단한 예입니다.

Web Font Loader에서 로드할 간단한 CSS 파일을 만듭니다(HTML에 포함할 필요 없음).

 @font-face { // This name you will use in JS font-family: 'Gunplay'; // URL to the font file, can be relative or absolute src: url('../fonts/gunplay.ttf') format('truetype'); font-weight: 400; }

이제 WebFontConfig 라는 전역 변수를 정의합니다. 일반적으로 다음과 같은 간단한 것으로 충분합니다.

 var WebFontConfig = { 'classes': false, 'timeout': 0, 'active': function() { // The font has successfully loaded... }, 'custom': { 'families': ['Gunplay'], // URL to the previously mentioned CSS 'urls': ['styles/fonts.css'] } };

끝입니다. 위에 표시된 '활성' 콜백에 코드를 넣어야 합니다. 그리고 그게 다야!

사용자가 게임을 더 쉽게 저장하도록 하는 방법

ActionScript에 로컬 데이터를 영구적으로 저장하려면 SharedObject 클래스를 사용합니다. JavaScript에서 간단한 대체는 나중에 검색하고 페이지를 다시 로드할 수 있도록 문자열을 저장할 수 있는 localStorage API입니다.

데이터 저장은 매우 간단합니다.

 var progress = 15; localStorage.setItem('myGame.progress', progress);

위의 예에서 숫자인 progress 변수는 문자열로 변환됩니다.

로딩도 간단하지만 검색된 값은 문자열이거나 존재하지 않는 경우 null 이 된다는 것을 기억하십시오.

 var progress = parseInt(localStorage.getItem('myGame.progress')) || 0;

여기서 우리는 반환 값이 숫자인지 확인합니다. 존재하지 않으면 progress 변수에 0이 할당됩니다.

JSON과 같은 더 복잡한 구조를 저장하고 검색할 수도 있습니다.

 var stats = {'goals': 13, 'wins': 7, 'losses': 3, 'draws': 1}; localStorage.setItem('myGame.stats', JSON.stringify(stats)); … var stats = JSON.parse(localStorage.getItem('myGame.stats')) || {};

localStorage 객체를 사용할 수 없는 경우가 있습니다. 예를 들어 file:// 프로토콜을 사용하거나 개인 창에서 페이지를 로드할 때. try 및 catch 문을 사용하여 코드가 계속 작동하고 기본값을 사용하도록 할 수 있습니다(아래 예에 표시된 대로).

 try { var progress = localStorage.getItem('myGame.progress'); } catch (exception) { // localStorage not available, use default values }

기억해야 할 또 다른 사항은 저장된 데이터가 URL이 아닌 도메인별로 저장된다는 것입니다. 따라서 많은 게임이 단일 도메인에서 호스팅될 위험이 있는 경우 저장할 때 접두사(네임스페이스)를 사용하는 것이 좋습니다. 위의 예에서 'myGame.' 는 이러한 접두사이며 일반적으로 게임 이름으로 바꾸고 싶습니다.

참고 : 게임이 iframe에 포함된 경우 localStorage는 iOS에서 유지되지 않습니다. 이 경우 대신 상위 iframe에 데이터를 저장해야 합니다 .

기본 조각 셰이더 교체를 활용하는 방법

Phaser와 PixiJS가 스프라이트를 렌더링할 때 간단한 내부 조각 셰이더를 사용합니다. 속도에 맞게 조정되어 있기 때문에 많은 기능이 없습니다. 그러나 목적에 따라 해당 셰이더를 교체할 수 있습니다. 예를 들어, 이를 활용하여 오버드로를 검사하거나 렌더링을 위한 더 많은 기능을 지원할 수 있습니다.

다음은 Phaser v2에 고유한 기본 조각 셰이더를 제공하는 방법의 예입니다.

 function preload() { this.load.shader('filename.frag', 'shaders/filename.frag'); } function create() { var renderer = this.renderer; var batch = renderer.spriteBatch; batch.defaultShader = new PIXI.AbstractFilter(this.cache.getShader('filename.frag')); batch.setContext(renderer.gl); }

참고: 기본 셰이더는 텍스처로 렌더링할 때뿐만 아니라 모든 스프라이트에 사용된다는 점을 기억하는 것이 중요합니다. 또한 모든 게임 내 스프라이트에 복잡한 셰이더를 사용하면 렌더링 성능이 크게 저하됩니다 .

기본 셰이더로 착색 방법을 변경하는 방법

사용자 정의 기본 셰이더는 Phaser 및 PixiJS의 기본 색조 방법을 대체하는 데 사용할 수 있습니다.

Phaser 및 PixiJS의 색조는 텍스처 픽셀에 주어진 색상을 곱하여 작동합니다. 곱셈은 ​​항상 색상을 어둡게 하는데, 이는 분명히 문제가 되지 않습니다. 단순히 플래시 틴팅과 다릅니다. 게임 중 하나의 경우 Flash와 유사한 색조를 구현해야 했으며 사용자 지정 기본 셰이더를 사용할 수 있다고 결정했습니다. 다음은 이러한 프래그먼트 셰이더의 예입니다.

 // Specific tint variant, similar to the Flash tinting that adds // to the color and does not multiply. A negative of a color // must be supplied for this shader to work properly, ie set // sprite.tint to 0 to turn whole sprite to white. precision lowp float; varying vec2 vTextureCoord; varying vec4 vColor; uniform sampler2D uSampler; void main(void) { vec4 f = texture2D(uSampler, vTextureCoord); float a = clamp(vColor.a, 0.00001, 1.0); gl_FragColor.rgb = f.rgb * vColor.a + clamp(1.0 - vColor.rgb/a, 0.0, 1.0) * vColor.a * fa; gl_FragColor.a = fa * vColor.a; }

이 셰이더는 색조에 기본 색상을 추가하여 픽셀을 밝게 합니다. 이것이 작동하려면 원하는 색상의 네거티브를 제공해야 합니다. 따라서 흰색을 얻으려면 다음을 설정해야 합니다.

 sprite.tint = 0x000000; // This colors the sprite to white Sprite.tint = 0x00ffff; // This gives red

게임의 결과는 다음과 같습니다.

채우기 비율 문제를 감지하기 위해 오버드로를 검사하는 방법

기본 셰이더를 교체하는 것도 디버깅에 도움이 되도록 활용할 수 있습니다. 아래에서 이러한 셰이더로 오버드로를 감지하는 방법을 설명했습니다.

오버드로잉은 화면의 많은 또는 모든 픽셀이 여러 번 렌더링될 때 발생합니다. 예를 들어 많은 개체가 같은 위치에 있고 다른 개체 위에 렌더링됩니다. GPU가 초당 렌더링할 수 있는 픽셀 수를 채우기 비율이라고 합니다. 최신 데스크탑 GPU는 일반적인 2D 용도로 채우기 속도가 과도하지만 모바일 GPU는 훨씬 느립니다.

PixiJS와 Phaser의 기본 전역 프래그먼트 셰이더를 다음으로 교체하여 화면의 각 픽셀이 몇 번이나 쓰여졌는지 알아내는 간단한 방법이 있습니다.

 void main(void) { gl_FragColor.rgb += 1.0 / 7.0; }

이 셰이더는 처리 중인 픽셀을 밝게 합니다. 숫자 7.0은 픽셀을 흰색으로 바꾸는 데 필요한 쓰기 횟수를 나타냅니다. 이 숫자를 원하는 대로 조정할 수 있습니다. 즉, 화면의 밝은 픽셀은 여러 번 작성되고 흰색 픽셀은 최소 7번 이상 작성되었습니다.

이 셰이더는 또한 어떤 이유로 인해 여전히 렌더링되는 "보이지 않는" 개체와 제거해야 하는 과도한 투명 영역이 있는 스프라이트를 모두 찾는 데 도움이 됩니다(GPU는 여전히 텍스처의 투명 픽셀을 처리해야 함).

왼쪽 그림은 플레이어가 게임을 보는 방식을 나타내고 오른쪽 그림은 동일한 장면에 오버드로 셰이더를 적용한 효과를 나타냅니다.

물리 엔진이 친구인 이유

물리 엔진은 물리 바디(일반적으로 강체 역학) 및 충돌 시뮬레이션을 담당하는 미들웨어입니다. 물리 엔진은 2D 또는 3D 공간을 시뮬레이션하지만 둘 다 시뮬레이션하지는 않습니다. 일반적인 물리 엔진은 다음을 제공합니다.

• 속도, 가속도, 관절 및 모터를 설정하여 개체 이동;
• 다양한 모양 유형 간의 충돌 감지;
• 충돌 응답 계산, 즉 두 물체가 충돌할 때 어떻게 반응해야 하는지.

Merixstudio에서 우리는 Box2D 물리 엔진의 열렬한 팬이며 몇 번 사용했습니다. 이 목적에 잘 맞는 Phaser 플러그인이 있습니다. Box2D는 Unity 게임 엔진과 GameMaker Studio 2에서도 사용됩니다.

물리 엔진이 개발 속도를 높이지만 지불해야 하는 대가가 있습니다. 바로 런타임 성능 저하입니다. 충돌 감지 및 응답 계산은 CPU를 많이 사용하는 작업입니다. 휴대 전화의 장면에서 수십 개의 동적 개체로 제한되거나 성능이 저하되고 60FPS 아래로 깊이 감소된 프레임 속도에 직면할 수 있습니다.

이미지의 왼쪽 부분은 게임의 한 장면이고 오른쪽은 Phaser 물리 디버그 오버레이가 위에 표시된 동일한 장면을 보여줍니다.

.fla 파일에서 사운드를 내보내는 방법

.fla 파일 내부에 Flash 게임 사운드 효과가 있는 경우 이 목적을 제공하는 메뉴 옵션이 없기 때문에 GUI에서 내보낼 수 없습니다(적어도 Adobe Animate CC 2017에서는 제외). 그러나 또 다른 솔루션이 있습니다. 바로 이 작업을 수행하는 전용 스크립트입니다.

 function normalizeFilename(name) { // Converts a camelCase name to snake_case name return name.replace(/([AZ])/g, '_$1').replace(/^_/, '').toLowerCase(); } function displayPath(path) { // Makes the file path more readable return unescape(path).replace('file:///', '').replace('|', ':'); } fl.outputPanel.clear(); if (fl.getDocumentDOM().library.getSelectedItems().length > 0) // Get only selected items var library = fl.getDocumentDOM().library.getSelectedItems(); else // Get all items var library = fl.getDocumentDOM().library.items; // Ask user for the export destination directory var root = fl.browseForFolderURL('Select a folder.'); var errors = 0; for (var i = 0; i < library.length; i++) { var item = library[i]; if (item.itemType !== 'sound') continue; var path = root + '/'; if (item.originalCompressionType === 'RAW') path += normalizeFilename(item.name.split('.')[0]) + '.wav'; else path += normalizeFilename(item.name); var success = item.exportToFile(path); if (!success) errors += 1; fl.trace(displayPath(path) + ': ' + (success ? 'OK' : 'Error')); } fl.trace(errors + ' error(s)');

스크립트를 사용하여 사운드 파일을 내보내는 방법:

1. 위의 코드를 컴퓨터에 .jsfl 파일로 저장하십시오.
2. Adobe Animate로 .fla 파일을 엽니다.
3. 상단 메뉴에서 '명령' → '명령 실행'을 선택하고 열리는 대화 상자에서 스크립트를 선택합니다.
4. 이제 내보내기 대상 디렉토리를 선택하기 위한 또 다른 대화 파일이 나타납니다.

그리고 완료! 이제 지정된 디렉토리에 WAV 파일이 있어야 합니다. 예를 들어 MP3, OGG 또는 AAC로 변환하기만 하면 됩니다.

Flash에서 MP3를 HTML5로 변환하는 방법

일부 특허가 만료되어 이제 모든 브라우저에서 MP3를 디코딩하고 재생할 수 있기 때문에 좋은 오래된 MP3 형식이 돌아왔습니다. 이것은 마침내 두 개의 개별 오디오 형식을 준비할 필요가 없기 때문에 개발을 조금 더 쉽게 만듭니다. 이전에는 예를 들어 OGG 및 AAC 파일이 필요했지만 지금은 MP3로 충분합니다.

그럼에도 불구하고 MP3에 대해 기억해야 할 두 가지 중요한 사항이 있습니다.

• MP3는 로드 후 디코딩해야 하며 특히 모바일 장치에서 시간이 많이 소요될 수 있습니다. 모든 자산이 로드된 후 일시 중지가 표시되면 MP3가 디코딩되고 있음을 의미할 수 있습니다.
• 반복되는 MP3를 끊김 없이 재생하는 것은 약간 문제가 있습니다. 해결책은 Compu Phase에서 게시한 기사에서 읽을 수 있는 mp3loop를 사용하는 것입니다.

그렇다면 Flash를 JavaScript로 변환해야 하는 이유는 무엇입니까?

보시다시피 Flash에서 JavaScript로의 변환은 무엇을 해야 하는지 안다면 불가능하지 않습니다. 지식과 기술이 있으면 Flash 사용을 중단하고 JavaScript로 만든 부드럽고 재미있는 게임을 즐길 수 있습니다. Flash를 수정하려고 하지 마십시오. 모든 사람이 강제로 수정하기 전에 제거하십시오!

더 알고 싶으십니까?

이 기사에서는 주로 Phaser v2에 중점을 두었습니다. 그러나 이제 최신 버전의 Phaser를 사용할 수 있으며 여러 카메라, 장면, 타일맵 또는 Matter.js 물리 엔진과 같은 새롭고 멋진 기능이 많이 도입되었으므로 확인하는 것이 좋습니다.

당신이 충분히 용감하고 브라우저에서 진정으로 놀라운 것을 만들고 싶다면 WebGL은 처음부터 배워야 할 올바른 것입니다. 다양한 게임 구축 프레임워크나 도구보다 추상화 수준은 낮지만 2D 게임이나 데모 작업을 하는 경우에도 더 높은 성능과 품질을 얻을 수 있습니다. WebGL의 기초를 배울 때 유용할 수 있는 많은 웹사이트 중에는 WebGL Fundamentals(대화형 데모 사용)가 있습니다. 그 외에도 WebGL 기능 채택률에 대해 자세히 알아보려면 WebGL 통계를 확인하세요.

특히 게임 개발과 관련하여 너무 많은 지식은 없다는 것을 항상 기억하십시오!