[COCOS2D-JS] chipmunk 물리엔진 정복(2) - body 와 shape

body 와 shape

body와 shape는 물리에서 가장 중요한 기능을한다. 그러므로 이부분은 꼭 숙지를 하기 바란다. 

body는 물체에 물리적 특성 부여한다. 물리적 특성이라는 말은 속도, 회전, 중력, 저항 등 무언가를 움직일 수 있게 해준다. body는 따로 모양을 가지고 있지 않고, shape를 통해 모양을 가지게 된다. 그럼 body를 한번 생성해보자. 위의 GameScene에서 addPhysicsCircle 메서드를 추가하여 아래와 같이 구현해보자.

addPhysicsCircle: function() {
    var body = new cp.Body(10, cp.momentForCircle(10, 0, 64, cp.v(0, 0)));
    body.setPos(cp.v(360, 720));
    this.space.addBody(body);
},

처음으로 new cp.Body 객체를 생성하여 body 변수에 넣어준다. cp.Body는 2개의 파라미터가 있다.

첫번째 인자는 물체의 무게를 지정한다. 무게를 조절하여 중력이나 힘에 영향을 줄수가 있다. 필자는 보통 무게에 영향을 주는 게임을 만들지 않는이상은 10으로 고정한다. 

두번째 인자는 body의 관성 모멘트(moment of inertia)를 지정한다. 관성 모멘트는 회전운동을 기술하는 데 필요한 운동량, 각속도, 각가속도, 힘들 사이의 관계를 이어주는 물리량이다. shape 가 원모양 기준으로 body의 모멘트는 cp.momentForCircle로 생성한다. 파라미터는 총4개의 값이 들어가게 되는데 차례대로 무게, 기준점이 되는 반지름, 끝 반지름, offest(body기준에서 시작위치)이다. 2,4 째 인자는 0으로 고정하는것을 추천한다.

다음 body의 포지션을 정한다. 기존 sprite는 cc.p() 를 통해서 포지션을 정했는데, Space에서 사용하는 모든 물체는 cp.v로 정한다. 

마지막으로 Space에 body를 add 하면 완성이다. 하지만 실행해보면 아무것도 보이지 않는다. 이유는 shape가 없기 때문이다. 바디는 모양이 없기때문에 shape를 달아줘야만 비로소 모양을 갖게 된다. 이제 shape를 생성해보자.

var shape = new cp.CircleShape(body, 64, cp.v(0, 0));
this.space.addShape(shape);

shape는 body의 모양을 지정해주며 물체간의 충돌에 관여를 한다. 달랑 body만으로는 충돌에 관여를 하지않는다. 또한, shape는 body가 없으면 생성을 할수가 없다. 즉, 물리가 있는 물체를 생성하려면 body를 먼저 구현한 후, shape를 구현해야한다.  

shape는 선(Segment), 원(Circle), 사각형(Box), 다각형(Poly) shape가 있다. 다각형일수록 내부코드에서 연산이 많아지기 때문에 정확한 모양을 필요로 하지 않을때에는 원 모양을 추천한다. 필자는 circle기준으로 shape를 생성해보겠다.

원모양 Shape는 cp.CircleShape로 생성한다. 파라미터는 3개의 값이 들어가게 되는데 첫번째 인자는 모양을 입힐 body이다. 이부분에서 body를 먼저 생성해야하는 이유를 알수있다. 두번째 인자는 반지름이고 세번째 인자는 offest이다. 

다음 Space에 shape를 add 하면 완성이다. 여기까지 구현한 코드를 실행해보면 빨간 원이 아래로 떨어지는 모습을 볼 수 있을 것이다. 뭔가 이제 눈에 보이는게 있으니 물리에 대해 재미가 있을것이다!

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;

        this.addPhysicsCircle();
    },

    addPhysicsCircle: function() {
        var body = new cp.Body(10, cp.momentForCircle(10, 0, 64, cp.v(0, 0)));
        body.setPos(cp.v(360, 720));
        
        var shape = new cp.CircleShape(body, 64, cp.v(0, 0));
        
        this.space.addBody(body);
        this.space.addShape(shape);
    },

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

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

---

chipmunk 물리엔진 정복 시리즈

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