HTML / JavaScript 기반 게임 제작을위한 필수 지식 [닫기]


17

최신 HTML 표준과 JavaScript로 게임을 시작하는 데 필요한 지식이나 리소스를 HTML 5라고 부르는 전문가가 있는지 궁금합니다. 프로세스에 필수적인 JavaScript 라이브러리가 있습니까? <canvas>태그 외에 다른 HTML 조각에 대해 알아야 할 사항은 무엇입니까?

답변:


9

오디오 및 비디오 태그를 알고 있어야 합니다. 저장된 게임 등을 위해 많은 데이터를 저장해야하는 경우 웹 저장소 는 매우 중요합니다.

이미 몇 가지 Javascript html5 게임 프레임 워크가 있으며 Akihabara 는 다소 인기가 있습니다.

다른 라이브러리와 마찬가지로 Jquery 와 Functional Javascript 는 내가 가장 좋아하는 것 중 2 가지입니다.


각 프레임 워크의 장점은 무엇입니까? 가장 간단하고 강력하고 깨끗한 코드는 무엇입니까? Functional Javascript 용어의 "Functional"이라는 단어는 흥미롭게 들립니다. 실제로 무엇에 관한 것입니까? pythonist에게 어떤 프레임 워크를 제안 하시겠습니까?

Web Storage는 db가 할 수없는 것을 제공합니까?
— 만료 된 닌자

@expiredninja 데이터베이스는 실제로 더 나을 것이지만 웹 저장소는 사용자 컴퓨터에 로컬입니다. Ajax 호출 등을 호스팅하는 것보다 호스팅이 빠르거나 빠릅니다.이 답변은 최신 브라우저 기반 게임에 사용 된 기술로 (약간) 구식입니다.
— jdeseno

6

jQuery가 애니메이션, 스프라이트 그룹화, 충돌 감지 및 플레이어 입력 읽기와 같은 일부 게임 관련 활동을 수행하기위한 플러그인 인 GameQuery 및 Akihabara 프레임 워크가 이미 있습니다.


4

더 많은 리소스를 버리 려면 RaphaelJS를 확인하십시오 . 멋진 API가있는 매우 멋진 SVG 그리기 및 애니메이션 라이브러리입니다. 데모를 확인하는 것을 잊지 마십시오.

전반적으로, 나는 <canvas>직접적인 DOM 조작보다 태그를 추천 한다 (예를 들어 <div>적중 테스트를 놀라 울 정도로 간단하게하기 위해 각 스프라이트를 독자적 으로 만드는 것). DOM 조작이 잘못되고 성능이 저하되는 것은 쉬운 반면, 기존 2D 개발 전략은 HTML 캔버스에서 잘 작동합니다.


3

HTML5 Canvas에 SVG 기반 애니메이션을 표시하기위한 JS 프레임 워크 인 Burst Engine에 대해 알고 있어야합니다.

http://burst.bocoup.com/

지금까지 사람들이 및 태그를 언급하는 것을 보았지만 'mousemove'및 'mousedown'이벤트와 같은 요소에 EventListener 콜백을 요소에 추가하는 것을 포함하여 JS / HTML 게임 개발에 필수적인 다른 DOM 항목이 있습니다. 예를 들어, 캔버스를 클릭 할 때 "shootAtClick"이라고 정의한 함수를 호출 할 수 있도록 첫 번째 캔버스 요소를 찾아 설정합니다.

document.getElementsByTagName ( "CANVAS") [0] .addEventListener ( 'mousedown', shootAtClick, false);

이 예제 에서 기본 마우스 컨트롤을 허용하도록 Akihabara 엔진을 확장 한이 예제 에서 작동하는 것을 볼 수 있습니다 . (Z를 눌러 시작하고 화살표 키를 사용하여 이동 한 다음 마우스를 클릭하여 커서 방향으로 촬영합니다.)


3

어떤 브라우저에서 어떤 HTML5 구성 요소가 지원되는지에 대한 지식

시간이 지남에 따라 크로스 브라우저 호환성이 점점 더 균일 해지지 만 일부 최신 구성 요소는 여전히 완전히 동일하게 지원되지 않습니다.

로컬 스토리지에는 브라우저마다 약간의 차이가있을 수 있으며 레거시 지원을 위해서는 jStorage 또는 YUI Storage Lite 와 같은 라이브러리가 필요합니다 .

웹 소켓은 브라우저마다 차이가있을 수 있지만 socket.io 는 편리한 추상화를 제공하는 유망한 라이브러리처럼 보입니다.

오디오 호환성은 브라우저마다 다른 사운드 파일이 필요한 매우 중요한 구성 요소입니다. http://html5doctor.com/native-audio-in-the-browser/

Chrome에는 짧은 오디오 파일을 재생할 수없고 많은 동시 사운드를 재생하면 브라우저 전체가 충돌 할 수있는 등 몇 가지 중요한 오디오 버그 가 있습니다.

가장 중요한 것은 라이브러리를 사용하여 브라우저의 차이점을 이해하고 필요에 따라 레거시 지원을 추상화하고 제공하는 것입니다.


1

HTML과 JavaScript는 솔직히 게임 개발에있어 좋지 않은 플랫폼이지만, 일종의 게임을 결정하기 전까지는 문제가되지 않습니다. 답은 1 인칭 슈팅 게임, RTS 또는 퍼즐 게임에서는 근본적으로 다릅니다.

산뜻한 것처럼 보이는 임의의 기술을 방해하는 모호하고 손이 닿는 답변을 얻기 시작했습니다. 이는 특히 합법적 인 답변이 포함 된 질문을하지 않았다는 경고 신호입니다.

응용 프로그램을 작성하는 데 필요한 C ++ 항목을 물을 수도 있습니다. 조건에 따라서. 프로젝트에 대해 자세히 알려 주면 유용한 답변을 얻을 수 있습니다.

대체로 거의 모든 웹 게임이 여전히 플래시 인 이유가 있습니다.


4
나는 그 질문이 모호하고 모든 곳의 답변에 동의하지만 "HTML과 [JS]는 ... 게임 개발에 나쁜 플랫폼"이라는 데 동의하지 않습니다. Google의 팩맨 기념일 로고를 기억하십니까? 스트레이트 HTML 및 JS. 특정 종류의 캐주얼 게임이 해당 플랫폼에서 잘 작동한다고 생각하며 웹을 사용하는 사람은 이미 런타임을 가지고 있습니다. (=
— drhayes

1
와우, 팩맨. 획기적인. 기술 데모 이외의 용도로 게임에서 HTML / JS를 사용하지 않는 이유가 있습니다.
— John Haugeland

1
@ Edmundito : 이것이 당신 이이 '질문'을 가야한다고 생각하는 경우 CW로 표시되어야합니다.
— Jesse Dorsey

12
-1 가치없는 답변. 웹 게임이 좋은 플랫폼이 아니라고 생각하면 앉으십시오. 나는 이것이 왜 그렇게 많은 투표를 받았는지 모릅니다. 다른 사람들이 당신의 의견을 공유 할 수도 있지만이 질문에 전혀 답하지 않습니다.
— Ricket

1
얘들 아. 2010 년의 답변은 오늘의 2014 년과는 매우 달랐습니다. 현재 HTML 게임이 많이 있습니다.
— John Haugeland
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.