만재송

getLocale( )현재 로케일. 지원되는 로케일 값의 전체 목록은 https://origincache.facebook.com/developers/resources/?id=FacebookLocales.xml 을 참조. 현재 게임을 현지화 할 언어를 결정할 때 사용합니다. 값은 FBInstant.startGameAsync()가 호출 되어야만 합니다.Examples// This function should be called after FBInstant.startGameAsync() // resolves. var locale = FBInstant.getLocale(); // 'en_US'Returns string? The current locale.getPlatform( )게임이 현제 실행중인 플랫폼. FB..

payments[IN CLOSED BETA] 게임 제품의 결제 및 구매와 관련된 함수와 속성이 포함됩니다.getCatalogAsync( )게임 제품의 목록을 가져옵니다.ExamplesFBInstant.payments.getCatalogAsync().then(function (catalog) { console.log(catalog); // [{productID: '12345', ...}, ...] });Throws CLIENT_UNSUPPORTED_OPERATIONThrows PAYMENTS_NOT_INITIALIZEDThrows NETWORK_FAILUREReturns Promise 게임에 등록된 제품 세트입니다.purchaseAsync( )특정 제품의 구매 흐름을 시작합니다. FBInstant.star..

캡쳐 보통 우리가하는 온라인 게임들은 자기의 캐릭터나 사냥 모습을 커뮤니티에 올리거나 간직하기 위해서 흔히들 말하는 스샷을 찍는다. 하지만 웹게임을 만들때는 어떻게 스샷을 찍을수 있을까? cocos2d 에서 제공하는 스크린샷 기능은 아쉽지만 html5에서는 제공되지 않는다. 그래도 아주좋은 라이브러리가 있기에 우리는 그것을 사용하여 cocos2d 와 접목시켜 화면을 캡쳐해 볼 것이다. Html2Canvas 설치 먼저 html2canvas 홈페이지에 들어간다. https://html2canvas.hertzen.com/ 들어가면 아래와 같이 창이 뜰것이다. 그럼 중간하단에 있는 html2canvas.min.js 버튼을 클릭하자. 클릭하면 긴 자바스크립트 코드가 있다. 이걸 복사해서 html2canvas.mi..

V8 이란? V8은 독일 구글 개발 센터에서 만들어진 JavaScript 엔진이다. 오픈 소스이고 C++로 작성되었다. 클라이언트쪽(Google Chrome)과 서버쪽(node.js) JavaScript 어플리케이션 모두에 쓰인다. V8은 웹 브라우저 안에서 실행되는 JavaScript의 성능을 높이기 위해 처음 고안되었다. 속도를 높이기 위해서 V8은 인터프리터 (프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경)를 이용하는 대신 JavaScript 코드를 좀더 효율적인 기계어 코드로 번역한다. V8은 SpiderMonkey나 Rhino(Mozilla)같은 많은 요즘의 JavaScript 엔진처럼 JIT(Just-In-Time) 컴파일러를 적용하여 JavaScript 코드를 실행할..

모든 스마트폰은 크기가 다르다 우리가 스마트폰 게임을 만들었다고 가정을 했다고 가정하자. 어떤 스마트폰은 정사각형 모양이고 어떤스마트폰은 직사각형 모양이라고 했을때 해상도에 맞는 UI 배치를 기종에 따라 다르게 배치하는것은 불가능한 일이다. 언제 다른 스마트폰이 출시될지도모르고 출시된다 하더라도 그 스마트폰을 위해서 코드를 수정하기에는 수많은 유지보수가 뒤따른다. 그럼 어떻게 모양이 다른 디스플레이를 단 한번의 적용으로 채울수 있는 방법은 없을까?? 기준점을 잡자 PC 게임중 리그오브레전드 (롤) 를 예로 들어보자. 롤은 모니터의 크기에 따라 맞는 해상도를 지원한다. 모니터의 종류로는 정사각형도 있고 직사각형, 심지어 가로가 엄칭긴 스크린도 있다. 롤을 기준으로 해상도를 변경했을 때 UI가 어떻게 변할까..

아이템을 먹어보자 아이템이 있는 타일에 도착했을 때 아이템을 없애는 기능을 추가하자. 기존에 만든 TiledMap 스크립트를 실행시키면 아이템에 있는 타일에 도착했을 때 실행하는 문구가 빠져있다. (실수 아니다.) setTargetPosition: function (addingTilePos, addingTargetPos) { var tilePos = cc.v2(this.tilePos.x + addingTilePos.x, this.tilePos.y + addingTilePos.y); var tileGID = this.metaLayer.getTileGIDAt(tilePos); if (tileGID) { var properties = this.tiledMap.getPropertiesForGID(tileGID)..

없는게없는 Tiled Map Editor 하다하다 충돌체 까지 구현할 수 있다. Tiled 에디터만 있으면 봄버맨 같은 게임은 식은죽 먹기로 만들수 있을것같다. (심지어 누가 Tiled 에디터로 만들었다...) 우리도 빨리 Tiled Map 을 정복하고 봄버맨 같은 게임을 만들어보자! 기존에 만든 타일맵을 Tiled 에디터로 불러오자. 먼저 돌이나 벽같은 장애물에 충돌체를 구현하자. 장애물 지정 이전 챕터까지 완료했으면 키보드로 이동하는 외계인을 볼 수 있을것이다. 하지만 외계인도 UFO 가 있어야 나는법! 벽을 뚫고 지나갈수는 없을것이다. 그러니 벽이나 돌같은 장애물에 충돌했을때 못가게 하는 기능을 구현해보자. 충돌체를 지정하기 위해서는 메타 데이터로 사용할 레이어를 만들어야한다. 간단하게 충돌부분을 ..

Object 이동 이전장까지 글을 읽었으면 오브젝트 위치에 Sprite 노드를 옮기는것 까지 완료했을것이다. 이번에는 Spite 노드를 키보드를 통해서 움직이는 예제를 만들어 보겠다. 기존에 만들었던 TiledMap 스크립트를 열어서 키보드 이벤트를 추가하자. addKeyboardListener: function () { var self = this; var tileSize = this.tiledMap.getTileSize(); this.listener = cc.EventListener.create({ event: cc.EventListener.KEYBOARD, onKeyPressed: function (key, event) { switch(key) { case 65: cc.log("left"); bre..

Object Layer Object Layer 를 통해서 주인공이나 적들이 등장할 위치를 지정할수도 있다. 맵에 미리 위치를 지정하는 방식이다. Tiled 에디터를 실행시켜 기존에 만들었던 맵파일을 열자. 오른쪽에보면 레이어 박스가 있을것이다. 레이어 박스에 오른쪽버튼을 클릭하고 새로운 레이어 -> 오브젝트 레이어를 추가하자. 클릭하면 오브젝트 레이어 1 이라는 새로운 레이어가 추가될것이다. 이름도 알맞게 변경해보자. 필자는 Objects로 변경했다. 간단하게 오브젝트 레이어를 만들었다. 그럼 설정이 끝났으니 레이어 안에 들어갈 오브젝트를 만들어보자. Object 생성 오브젝트는 위쪽 툴바에 있는 파란색 아이콘들을 사용한다. 아이콘은 오브젝트 선택과 오브젝트 추가가 있다. 선택은 분홍색 모양 아이콘이며 ..

Tiled Map Editor 사용하기 이번장에는 타일맵 에디터인 Tiled 를 사용하여 맵을 생성하는 방법을 해보겠다. Cocos2d 는 Tiled 에서 TMX 형식으로 저장된 맵을 지원하고 있다. Cocos2d 에서도 지원을 하고 있으니 그럼 본격적으로 타일맵을 만들어보자. Map 생성 Tiled 에디터를 실행해보자. 그럼 아래 그림과 같이 뜰것이다. 처음에는 우리가 만든 파일이 없으니 새로운 맵을 생성해야한다. 첫번째 버튼인 새로운 맵을 클릭하자. 클릭하면 위와 같은 화면이 나올것이다. 첫번째 구도는 맵의 타입을 정할 수 있다. 맵의 타입은 정사각형 (Orthogonal), 마름모형 (Isometric), 육각형 (Hexa) 타일의 맵을 선택할 수 있다. 우리는 정사각형 타일의 모양으로 맵을 만들것..