콘텐츠
- 안녕하세요! 가서 자기 소개를 해보지 그래요?
- Mario 프로젝트는 어떻게 시작 되었습니까?
- 어른들도 왜 마리오에게 그런 애착을 가지고 있다고 생각합니까?
- 사이트의 정의적인 상호 작용은 어떻게 시작되고 발전 했습니까?
- 그렇다면 요소를 개별적으로 프로토 타입 한 다음 전체 사이트를 하나로 모았습니다.
- 내부적으로 어떤 기술이 가장 중요 했습니까?
- 구축하기 가장 어려웠던 것은 무엇입니까?
- 하나의 마지막 콘솔에서 마지막 게임. 무엇을 선택 하시겠습니까?
"나야, 마리오!" 모두가 미야모토 시게루의 이탈리아 배관공을 좋아하기 때문에 IGN의 마리오 박물관을보고 매료되었습니다.
이 사이트는 캐릭터의 진화를 탐구하는 매우 정통하고 상호 작용적인 회고전입니다. Donkey Kong 캐비닛으로 시작하여 Wii U까지 캐릭터의 성장을 추적합니다.
이 사이트는 HTML5 Hub에있는 사람들에 의해 만들어졌습니다. 그들의 이야기를 들으려면 동전을 넣고 시작을 누르십시오.
안녕하세요! 가서 자기 소개를 해보지 그래요?
저는 Mario 박물관 사이트 프로젝트의 수석 개발자이자 HTML5 Hub의 기고자 인 Kyle Simpson입니다.
Mario 프로젝트는 어떻게 시작 되었습니까?
브라우저와 기기에서 HTML5와 자바 스크립트의 경계를 넓히고 방문자의 기억과 연결되며 매우 재미있을 프로젝트에 대해 브레인 스토밍했습니다.
우리는 모두 게임을 좋아하고 Mario는 지난 30 년 이상 가장 상징적 인 게임 캐릭터이므로 당연한 일이었습니다. 그는 적절한 공물을받을 자격이 있었고 그것이 우리가하기로 한 것입니다. 우리는 그들과 파트너 관계를 맺기 위해 IGN에 접근했고, 그들도 즉시 매료되었습니다!
어른들도 왜 마리오에게 그런 애착을 가지고 있다고 생각합니까?
대부분의 성인은 실제로 콘솔에서 핸드 헬드에 이르기까지 다양한 게임 시스템에서 수십 가지 다른 게임에서 Mario를 플레이하면서 자랐습니다. Nintendo는 마리오를 더 새롭고 몰입도 높은 경험으로 계속 밀어 붙였고, 우리는 모두 함께 타기 위해 함께했습니다.
우리 중 일부는 Mario없이 게임을 기억하지 못합니다. 그는 우리 집단 기억의 일부입니다. Mario는 게임에서 최고의 이상을 나타냅니다. 그는 훌륭하고 깨끗한 재미를 보여 주지만 여전히 많은 도전과 복잡성을 가지고 있습니다.
그는 우리를 자신의 세계의 복잡성을 더 잘 인식하게하기보다는 우리가 탈출 할 수있는 그의 세계로 우리를 인도합니다.
사이트의 정의적인 상호 작용은 어떻게 시작되고 발전 했습니까?
우리는 강조하고 싶은 게임의 일부를 재현하기 시작했습니다. 우리는 결국 각 게임에서 가장 상징적이고 기억에 남는 경험을 강조하기로 결정했고 각 게임에 적어도 약간의 상호 작용을 엮으려고했습니다.
우리는 또한 이것이 게임의 세계에 들어가는 것처럼 느끼기를 원했습니다. 원래 게임지도 에서처럼 네 방향으로 모두 탐색했지만 기기의 복잡성으로 인해 '페이지 스크롤링'수직 환경에 도달했습니다.
그렇다면 요소를 개별적으로 프로토 타입 한 다음 전체 사이트를 하나로 모았습니다.
처음에는 다양한 작품이 매우 독립적이었습니다. 팀의 개발자들은 각각 한 페이지 또는 몇 페이지를 가져 와서 작업했고, 저 (및 다른 사람들)는 전체 사이트 아키텍처를 작업했습니다.
그러나 교차 기기에서 일관된 경험을 제공하는 데 따르는 복잡성으로 인해 각 페이지의 초기에 사이트와 통합되어 상호 작용이 합리적이고 사이트 및 탐색을 방해하지 않는지 확인해야했습니다. 전체적인 빌드와 디자인에 가깝습니다.
내부적으로 어떤 기술이 가장 중요 했습니까?
지금까지 말 그대로 수백만 번의 방문을 통해 간단한 사용자 지정 Node.js 서버 백엔드는 땀을 흘리지 않고도 부하를 처리 할 수 있습니다. Node.js와 함께 우리는 모든 빌드 및 배포 작업을 처리하기 위해 Grunt 및 다양한 플러그인을 많이 사용합니다.
프런트 엔드 측면에서는 반응 형 디자인 (중단 점이있는 CSS 미디어 쿼리)과 jQuery (및 다양한 플러그인)와 같은 도구에 크게 의존하여 무거운 작업을 처리했습니다. LABjs (내 스크립트 로더)는 모든 스크립트 리소스로드를 수행하고 그립 (내 템플릿 엔진)은 모든 마크 업 (노드의 서버 측과 클라이언트 측 모두)을 빌드합니다.
WebGL 작업 (예 : Donkey Kong 아케이드)에 Canvas와 Three.js를 많이 사용합니다. Adobe Edge는 많은 정교한 애니메이션의 초기 빌드에 필수적이었습니다.
구축하기 가장 어려웠던 것은 무엇입니까?
WebGL Donkey Kong 아케이드는 (우리에게) 새로운 기술이 포함되어 있고 아케이드 화면의 효과를 완성하기 위해 비디오를 올바른 각도로 배치해야했기 때문에 대부분의 것보다 힘들었습니다. 하지만 대부분이 프로젝트에서 가장 어려운 부분은 모든 장치에서 일관된 게임 경험을 만드는 것이 었습니다.
제대로하기 위해서는 많은 절충안과 타협이 필요했습니다. 우리는 데스크톱 외부에서 얻는 것을 심각하게 제한하는 일부 사이트보다 모바일을 일류 환경으로 만들기 위해 최선을 다했습니다. IGN은 모바일 시장에서 엄청난 점유율을 차지하고 있으며 웹은 점점 더 비 데스크톱이되고 있으므로 우리의 초점은 훨씬 더 넓어야했습니다.
하나의 마지막 콘솔에서 마지막 게임. 무엇을 선택 하시겠습니까?
오리지널 닌텐도의 대비. 여전히 내가 해본 게임 중 가장 화를 냈지만 가장 매력적인 게임입니다.
이 기사는 원래 인터넷 잡지 251 호에 실 렸습니다..
