이제 Flash가 HTML5 요소 (비디오, 오디오, 캔버스 등)로 대체되면서 완전히 개방 된 표준 (Javascript, HTML 및 CSS를 의미)을 기반으로하는 웹 기반 게임의 좋은 예가 있습니까? 플래시에 한 번만 있었지만 (예 : http://www.html5rocks.com/ ) Flash에서 여전히 지배적 인 도메인 인 많은 HTML5 구현에 대한 예제가 많이 있습니다 . 가능한 것과 한계가 무엇인지 궁금합니다.
답변:
HTML5에 대한 과대 광고가 많이 있지만 플래시가 대체로 대체되고 있다고 말하는 것은 과장된 표현입니다. 비디오 및 오디오 태그가 인기를 끌 수 있지만 게임은 툴링 및 성능 향상뿐만 아니라 Swf 파일 배포를 중심으로 구축 된 비즈니스 인프라가 있기 때문에 오랫동안 유지되는 영역 중 하나입니다. HTML과 js에 적응하십시오. 캔버스를 사용하여 봤던 html5 게임은 대략 7 년 전의 플래시였으며, ie9가 널리 배포 될 때까지 캔버스가 실행 가능한 옵션이 될 정도로 플래시는 이미 계획된 3d 및 하드웨어 가속 기능을 도입했을 것입니다.
최신 브라우저를 얼마나 멀리 가져갈 수 있는지 탐색하기 위해 저와 일부 동료는 Quake II의 오픈 소스 Java 포트를 Safari / Chrome으로 크로스 컴파일했습니다 (일부 시점에서도 Firefox에서 작동해야합니다. 처음에는 그렇지 않았지만 주로 성능상의 이유로). 프로젝트는 다음과 같습니다 : http://code.google.com/p/quake2-gwt-port/
그래도 웹 브라우저는 기본적으로 배송 브라우저에서 기본적으로 활성화되어 있지 않지만 http://www.youtube.com/watch?v에 동영상을 올렸습니다 . = XhMN0wlITLk (죄송합니다-감마 문제가 남아 있습니다) : Google I / O 대화는 여기 ( http://code.google.com/intl/fr-FR/events/io/2010/sessions/gwt) 에서 볼 수 있습니다 . -html5.html
이 새로운 브라우저 기능 (WebGL, WebSocket, 오디오 / 비디오, 로컬 스토리지 등)에 현실적으로 의존하기까지 얼마나 걸리는지 모르겠지만, 모두 함께 제공된다면 큰 차이를 만들 수 있습니다 웹에서 직접 게임을 제공 할 수 있습니다. 그러나 여전히 많은 장애물이 남아 있습니다 (예를 들어, Microsoft가 IE10에서 WebGL을 구현하도록 숨을 쉬지 마십시오).
"가능한 것이 무엇이고 한계가 무엇인지 궁금합니다."
제한 사항은 브라우저 기반입니다. Webkit nightlies와 같이 뜨거운 것을 사용하는 경우 기본적으로 브라우저가 기본적으로 할 수없는 작업은 다음과 같습니다.
AFAIK는 Chrome에서도 가능하며 가능하지 않은 경우 곧 제공 될 예정입니다. 나에게 완벽한 게임 환경처럼 들린다 :)
(나는 첫 번째 초안 에이 모든 것들에 대한 링크를 포함했지만 StackExchange는 처음부터 게시 할 수 없었습니다. 죄송합니다!)
jquery UI 사람이 javascript / html을 사용하여 Aves라는 게임 엔진을 구축 중입니다. 이 비디오 는 개발하는 동안 그가 겪었던 몇 가지 문제를 설명합니다. 그는 캔버스의 속도가 느리고 현재 가속되지 않는 것에 대해 많이 이야기했습니다.
Effect Games 엔진을 사용하여 개발 된 게임을 찾을 수도 있습니다. 엔진은 모든 툴링과 자산이 존재하는 사이트로 상당히 샌드 박스로 보입니다.
IMO js / html 게임 개발의 가장 큰 한계는 건전합니다. 이 태그는 사파리 / 파이어 폭스 / 크롬에서 다르게 이벤트 방식으로 수행되며 모두 최신 버전이어야합니다. 마지막으로 Safari는 MP3에서만 작동하고 Firefox는 OGG에서만 작동합니다. 서버 측 로직을 결합하여이를 극복 할 수는 있지만 완전히 가능합니다.
저는 현재 플래시 게임 작성에 취미가 있으며 포털에서 포털을 수락하거나 웹 앱 스토어가 온라인 상태가 될 때까지 HTML5 (js / css / html)가 도메인을 극복하고 있음을 알 수 없습니다.
이 게임은 피, 땀, 눈물 및 HTML5로 힘들게 만들어졌습니다. 핵심 매트릭스 변환 라이브러리는 Matrix.js 로 분리되었습니다 . 또한 많은 핵심 언어 확장, 스프라이트, 사운드 및 캔버스 라이브러리가 The Pixie Game Platform에 적용되고 있습니다.
플래시 없음, 모든 HTML5 캔버스 및 오디오. Chrome에서 가장 잘 작동합니다.
CAAT 라이브러리를 확인해야합니다. 대단합니다! 캔버스 용 장면 그래프 (예 : thing.addchild / thing2.removechild) 라이브러리입니다.
이 데모는 해당 페이지에 포함 된 게임과 함께 저를 날려 버렸습니다 : http://labs.hyperandroid.com/animation
너무 많이 사용하여 게임을 사용하여 하룻밤을 보냈습니다.
드롭 다운, 멀티 플레이어 눈싸움 http://holiday2010.ogilvy.com
그래서 나는 서정을 향상시키고 다시 물건을 추가하려고 노력했습니다 : http://github.com/onedayitwillmake/CAAT-Hello
github에서 사용 가능 : http://github.com/onedayitwillmake/CAAT-Hello/tree/circlepack
통제가 망쳐 져 있거나 필요한 작업이지만, 나는 아키하바라를 좋아합니다-http: //www.kesiev.com/akihabara/
Darius Kazemi 와 Darren Torpey가 함께한 Akihabara 라이브러리에 대한 훌륭한 자습서가 있습니다 : Akihabara Tutorials
Biolab Disaster는 html5 및 js로 수행 할 수있는 작업을 보여주는 꽤 좋은 사이드 스크롤 플랫폼입니다. http://playbiolab.com/
방금 Silverlight / C #에서 순수한 HTML5 / Javascript / Canvas로 우주 전략 게임을 포팅하는 작업을 마쳤습니다.
이 게임은 2D 게임이며 그래픽 적으로 매우 간단하므로 많은 그림이 없기 때문에 캔버스를 사용하는 것이 좋습니다. 즉, 다른 기술을 사용하여 다른 애니메이션 게임에서 수행하는 작업에 깊은 인상을 받았습니다. Chrome 웹 스토어의 Angry Birds : Angry Birds 와 같이 Chrome 웹 스토어에서 다른 게임 중 일부를 확인하는 것이 좋습니다.
게임을 이식 한 이유 중 하나는 Java 또는 Objective C로 전체를 다시 코딩 할 필요없이 태블릿 / 모바일 기기에서 실행할 수 있기를 원했기 때문입니다. iOS와 Android에는 모두 'WebView'컨트롤이있어이를보다 쉽게 만들 수 있습니다. 나는 그것으로 한 주변에서 약간의 땜질에 어려움을 겪었습니다 (iOS는 내가 본 한 모든 폴더가 하나의 폴더에 있어야합니다).
이러한 유형의 크로스 플랫폼 요구 사항은 일부 사람들이 Flash에서 HTML5로 이동하는 좋은 이유이지만 단점은 N 개의 다른 브라우저 및 버전에서 테스트해야하며 일반적인 웹 개발과 관련된 모든 문제가 있다는 것입니다. 이러한 문제는 jQuery와 같은 라이브러리와 여기에 언급 된 다른 HTML5 게임 라이브러리 / 플랫폼에 의해 완화됩니다 ( ImpactJS 는 내가 보았지만 시도하지 않은 것입니다). 또한 FireFox 7이 종료되고 IE 9+가 널리 보급되면 이러한 문제는 그다지 문제가되지 않습니다.
Silverlight에서 HTML5 Canvas로 포팅하는 문제에 관심이 있으시면 블로그 게시물을 확인하십시오 .HTML5 Canvas 태그를 사용하여 Silverlight 앱을 Javascript로 포팅
다음은 ImpactJS 엔진을 사용하는 3 가지 훌륭한 게임 입니다.
Impact는 데스크탑 및 모바일 브라우저를위한 놀라운 HTML5 게임을 개발할 수있는 JavaScript 게임 엔진입니다.
현재 HTML5로 무엇을 할 수 있는지 잘 모르겠다면, 이것이 가장 좋은 예라고 말하고 싶습니다. 매우 인기있는 주제이기 때문에 현장은 빠르게 변하고 있습니다.
타이핑하여 촬영할 수있는 Space Shoot'em'Up.
이 Jump'n'Run에서 감염된 Biolab을 통해 길을 싸우십시오. 플라즈마 건을 사용하여 움직이는 모든 것을 촬영하십시오! 3 가지 레벨로 탐험하고 6 가지 유형의 적과 싸울 수 있습니다.
젊은 보물 사냥꾼이 중세 성에서 엄청난 양의 보물을 훔치는 데 도움이되는 액션 퍼즐 게임.
우연히도 오늘 Slashdot에 html5 / javascript 게임에 관한 질문이있었습니다.
http://ask.slashdot.org/story/10/07/14/0632238/JavaScriptHTML-5-Gaming
여기에는 측면 스크롤 공간 사수 인 Galactic Plunder가 언급되어 있습니다.
내가 최근에 우연히 발견 한 정말 흥미로운 HTML5 개발 프레임 워크는 Sencha입니다. 주로 핸드 헬드 / 터치 장치 용이지만 몇 년 후에는 터치 기반이 아닌 것은 무엇 입니까? 다음은 카드 게임을 포함한 흥미로운 데모입니다.
다음은 Effects Games의 일부 HTML5 게임입니다 . 참여할 수있는 프로젝트도 있습니다. 크리스탈 갤럭시 데모를 사용하여 컴파일간에 킬 시간이 발생했습니다.
사이트에서 : "Cycleblob은 WebGL 및 HTML 5 캔버스 요소를 사용하여 구현되며 JavaScript로 완전히 작성됩니다."
2D 복고풍 아케이드 사수를 위해 Private Joe 를 사용해보십시오.
모바일에 최적화 된 게임을 사용하려면 marketJS로 이동하십시오.