[COCOS2D-JS] chipmunk 물리엔진 정복(1) - 물리공간 생성 및 기본설정

물리엔진이란?

게임에서 현실세계의 동작을 쉽게 표현해주는 게임제작툴 이라고 생각하면 될 것 같다. 게임을 만들다 보면 물체의 낙하, 마찰 등 여러가지 물리계산이 필요한 가상공간을 생성하게 되는데 이러한 가상공간을 쉽게 표현해주는 도구라고 생각하면 될 갓 같다. 물리엔진 라이브러리는 chipmunk, box2d 등 여러 라이브러리가 있는데, cocos2d가 chipmunk 라이브러리를 더욱 간편하게 사용할 수 있게 구현이 되어있다.

그럼 이제 chipmunk를 cocos2d에서 어떻게 사용하는지 알아보자

들어가기전에

chipmunk 라이브러리를 사용하기 위해서는 project.json의 modules 프로퍼티에 "chipmunk"를 추가해야 한다.

"modules" : ["cocos2d", "external", "chipmunk"],

물리공간 생성 및 기본설정

간단하게 cc.Scene을 상속하는 GameScene 생성 후 생성자와 initPhysics 메서드를 구현해보자.

var GameScene = cc.Scene.extend({

    ctor: function () {
        this._super();
        
        this.initPhysics();
    },
    
    initPhysics: function () {

    }
});

이제 initPhysics 메서드 안에 물리공간을 생성하는 코드를 작성 할 것이다.

this.space = new cp.Space();

Space 객체는 chipmunk 물리를 사용할 수 있는 일종의 물리공간이다. 이제 이 Space를 통하여 물리의 운동(body)과 충돌(shape), 더 나아가 관절(joint) 기능을 추가하여 쉽게 물리기능을 사용 할 수 있다.

this.space.iterations = 10;

iterations 값을 통해 Space공간에서 사용하는 충돌체크같은 물리적 검사를 얼마나 많이 반복적으로 검사를 할 것인지를 정할 수 있다. 값은 높을수록 많이 반복하기 때문에 정확도가 높아지지만 CPU를 많이 사용하기 때문에 적당한 값을 정해야한다. 대부분의 단순한 미니게임은 기본값인 10정도면 충분하다.

this.space.gravity = cp.v(0, -800);

Space에 중력을 적용한다. 설정을 하지 않으면 기본값인 cp.v(0, 0) 다. cp.v(0, -800) 의 의미는 y 축으로 -800 만큼 가속도가 적용된다는 뜻이다.

this.space.damping = 1;

Space에 공기 저항을 적용한다. 설정을 하지않으면 기본값은 1이며 공기 저항을 받지 않겠다는 뜻이다. 값은 0이상부터 1이하의 소수 값이고 만약 값을 0.9로 했으면 Space에 있는 모든 물체의 속도가 초당 10%씩 감소한다는 의미이다. 모든 물체를 서서히 감소시키고싶으면 damping 값을 잘 조절해서 사용하는 방법을 추천한다.

this.space.collisionSlop = 0.1;

나중에 배울 shape들 간에 겹치는 허용 값이다. 값의 단위는 픽셀단위이고 만약 10으로 설정했으면 물체들 간에 10이하 만큼 겹쳐져도 충돌이 일어나지 않은것으로 간주한다. 

update: function(dt) {
    this.space.step(dt);
}

scheduleUpdate를 실행하여 update메서드를 오버라이드 한다. step은 Space에서 일어나는 물리현상을 델타타임 마다 실행하게 된다. step을 통하여 우리가 구현한 물체의 움직임을 볼 수 있는 것이다. 

initDebugMode: function() {
    var phDebugNode = new cc.PhysicsDebugNode(this.space);
    this.addChild(phDebugNode, 10);
},

디버그 모드는 Space 안에 물체들이 어떻게 이동하고 있는지 보여준다. 개발을 시작할때는 디버그 모드를 항시켜서 테스트를 하는것을 추천한다. 물론 게임을 배포할 때는 주석을 처리하거나 지우는것을 잊지 말아야 한다.

var GameScene = cc.Scene.extend({

    ctor: function () {
        this._super();
        
        this.initPhysics();
        this.initDebugMode();
        this.scheduleUpdate();
    },
    
    initPhysics: function () {
        this.space = new cp.Space();
        this.space.iterations = 10;
        this.space.gravity = cp.v(0, -800);
        this.space.damping = 1;
        this.space.collisionSlop = 0.1;
    },

    initDebugMode: function() {
        var phDebugNode = new cc.PhysicsDebugNode(this.space);
        this.addChild(phDebugNode, 10);
    },

    update: function(dt) {
        this.space.step(dt);
    }
});

이제 물리를 사용할 수 있는 공간과 설정이 모두끝났다! 다음은 Space 공간에 물체를 추가해보자.

---

chipmunk 물리엔진 정복 시리즈

• chipmunk 물리엔진 정복(1) - 물리공간 생성 및 기본설정
• chipmunk 물리엔진 정복(2) - body 와 shape 
• chipmunk 물리엔진 정복(3) - staticBody
• chipmunk 물리엔진 정복(4) - Sprite에 물리 적용하기
• chipmunk 물리엔진 정복(5) - 충돌체크
• chipmunk 물리엔진 정복(6) - body, shape 제거
• chipmunk 물리엔진 정복(7) - shape의 기능