만재송

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

모든 스마트폰은 크기가 다르다 우리가 스마트폰 게임을 만들었다고 가정을 했다고 가정하자. 어떤 스마트폰은 정사각형 모양이고 어떤스마트폰은 직사각형 모양이라고 했을때 해상도에 맞는 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) 타일의 맵을 선택할 수 있다. 우리는 정사각형 타일의 모양으로 맵을 만들것..

Tiled Map 이란? 타일맵은 일정한 크기와 모양을 가진 그림조각들을 의미하고, 게임에서는 이 조각들을 맞춰서 게임의 배경을 완성하고, 이렇게 완성된 배경을 타일맵이라 한다. 이처럼 게임에서 타일을 이용해 배경 맵을 만드는 이유는 게임의 배경이 크고 또한 장면이 많을 경우 배경이 되는 비트맵을 모두 메모리에 읽어들여아 한다면 매우 큰 메모리가 필요한데, 타일을 사용해서 반복하게 되면 메모리를 적게 사용하고도 게임 플레이에 필요한 배경을 만들 수 있기 때문이다. 만약 위 이미지들을 이용해서 가로 20 세로 10줄로 구성된 배경을 구성하게 된다면 타일이 총 200개로 구성이 된것일까? 그렇지 않다. 왜냐하면 같은 조각들 즉, 텍스처들을 그대로 갖다 붙여서 사용하면 되기 때문이다. 맵이 커질수록 타일맵은 ..

lerp (Linear Interpolation) lerp 는 한국말로 선형 보간법이라고 하고 그 뜻은 두점이 주어졌을 때 그 사이에 위치한 값을 추정하기 위하여 직선 거리에 따라 선형적으로 계산하는 방법이다. 뭔가 수학적인 방법을 어떻게 게임에서 사용하지? 하는 생각이 들수도 있다. 하지만 이미 유니티에서는 굉장히 자주 쓰이고 있고 앞으로 게임을 만들기 위해 없어서는 안될 방법이다. 그러면 lerp는 어디서 사용이 될까? 쉽게 설명하면 "어떤 수치에서 어떤 수치로 값이 변경되는 데 한번에 변경되지 않고 부드럽게 변경하고 싶을 때" 사용한다. 유니티에서는 보통 어떤 오브젝트를 부드럽게 이동하거나 회전시킬 때, 카메라를 부드럽게 이동시킬 때 사용한다. 유니티에서도 자주 사용하는데 cocos creator ..

Collider Component cocos creator 에서 물리 시스템은 2가지 기능을 제공하고 있다. cocos2d-js 에서 사용하는 chipmunk와 비슷한 기능을 하는 Box2d 물리 엔진과, body의 기능을 하지않는 즉, 중력, 회전, 속도 같은 기능처리를 하지않고 오직 충돌 검사만 수행하는 Collider Component 가 있다. 그 중 Collider Component 를 통하여 오직 서로간의 충돌하는 기능만을 수행하고 싶을 때 코드가 복잡한 물리엔진 대신 간단한 코드로 충돌처리를 확인할 수 있다. Collider Component 를 어떻게 사용하고 효과적으로 사용할 수 있는지 알아보자. 컴포넌트 추가 먼저 Creator 테스트 프로젝트를 하나 만들자 (javaScript, ty..