Rev. 2.73

언아더 월드(Another World)Eric Chahi씨에의해 개발되어 1991년에 발표한 아주 오래된 게임입니다. 당시 독창적인 그래픽과 부드러운 애니메이션 탄탄한 스토리 등으로 큰 화제를 불러일으켰던 게임입니다. 저 역시도 이 게임에 심취하여 밤잠을 설쳤던 기억을 가지고 있습니다.

Gil Megidish씨는 이 게임의 일부분을 순수 자바스크립트만으로 포팅하는데 성공했습니다. <canvas>요소를 이용하여 그래픽을 표현하고 base64로 데이터들을 처리합니다. 그래픽이 깨지고 음향효과를 구현하지 못한 등의 문제점을 그는 잘 알고 있지만 이것은 단순히 <canvas>요소를 이용한 테스트 케이스 이며 포팅 작업을 끝까지 마무리할 생각이 없다는 의사를 밝혔습니다. 조금 아쉽네요.

Comments

jQuery용으로 만들어진 jQSlickWrap 플러그인을 이용하면 보시는 것 처럼 이미지의 피사체를 피하여 문자열들을 어울리게 배치할 수 있습니다. 실제로 애플로고 이미지를 첨부하고 jQSlickWrap 플러그인을 적용한 것입니다. 작동원리는 간단합니다. HTML5의 <canvas> 요소를 이용하여 이미지 데이터의 정해진 구간으로 루프를 돌면서 색상값을 근거로 피사체가 끝나는 위치을 분석하고 가상의 <div> 요소에 분석한 너비를 적용하여 바꿔치기하는 것입니다.
이 블로그는 Prototype 라이브러리를 사용하기 때문에 jQSlickWrap 플러그인을 그대로 날로먹을 수가 없어서 Prototype의 클래스로 변환하여 적용하였습니다. MIT 라이센스라 부담없이 마구 때려 고쳤습니다. 필요하신 분은 가져다 쓰셔도 무방합니다.

사용법 :

new SlickWrap(img, {
  bgColor: null,
  bloomPadding: false,
  resolution: 18,
  cutoff: 5
});

다운로드 :

Comments

Jacob Seidelin씨는 WebGL 가속이 지원되는 Canvas요소와 Audio요소를 결합하여 "WebGL Musical Solar System"이라는 골때리는 데모을 만들어 냈습니다. 이 데모를 감상하기 위해서는 파이어폭스 나이틀리 빌드(nightly build) 또는 크롬의 나이틀리 빌드를 필요로 합니다. 설치한 후에는 WebGL기능을 활성화 시켜주어야 하는데, 파이어폭스는 "about:config"에서 "webgl.enabled_for_all_sites"의 값을 true로 변경하면 되고, 크롬은 "chrome.exe --enable-webgl --no-sandbox" 옵션으로 실행하여 활성화 할 수 있습니다. 설치하기 귀찮은 분들은 YouTube 동영상으로도 감상할 수 있습니다. Yohei Shimomae씨가 만든 Cube Defense 게임 역시 WebGL을 이용하여 만들어진 것이라고 합니다.

webgl.jpg

WebGL은 브라우저가 플러그인의 도움을 받지 않고 3D 웹 그래픽을 표현하기 위한 OepnGL ES 2.0의 자바스크립트 바인딩입니다. 이것은 하드웨어 가속이 되는 실시간 3D 그래픽을 표현할 수 있습니다. AMD, 구글, 모질라, 엔비디아 등의 굵직한 벤더들이 이미 워킹 그룹에 참여하고 있다고 합니다. 보다 자세한 내용을 에오닐님께서 잘 정리해 두셨으니 참고하세요.

Comments