[COCOS2D-JS] chipmunk 물리엔진 정복(7) - shape의 기능

shape의 기능

이전장까지가 chipmunk의 기본적인 기능이었더라면, 이번장은 코드를 훨씬 더 간단하게 구현하기 위해 심화기능을 알아볼 차례다.

충돌에 관여하는 shape는 우리의 코드작성을 덜어주기위해 많은 기능을 가지고 있다. 그중 알아두면 유용한 기능을 몇가지 설명하겠다.

setElasticity, setFriction

shape는 탄성과 마찰력을 설정할 수 있다. 사용법은 간단하다. 아래의 코드를 보자.

addPhysicsCircle: function() {
    var sprite = new cc.PhysicsSprite(res.orange);

    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));
    shape.setCollisionType(2000);
    shape.setElasticity(1); // 탄성 설정
    shape.setFriction(1); // 마찰력 설정
    shape.sprite = sprite;

    this.space.addBody(body);
    this.space.addShape(shape);

    sprite.setBody(body);
    this.addChild(sprite);
},

shape를 생성 후 setElasticity와 setFriction 으로 탄성과 마찰력을 설정할 수 있다. 값은 실수의 값으로 줄 수 있고 너무 많이주면 높게 튀어올라서 화면에서 안보일수도 있으니 주의하시길.

코드를 실행해보면 서로 부딪쳤을때 통통통 튀어오르는 모습을 볼수 있을 것이다.

setLayers

setLayers는 shape들간에 예외 충돌을 정할 수 있다. shape.setLayers(정수값) 을 통하여 사용할 수 있다. 이때 shape는 충돌하려는 대상의 layer 값을 얻어와 자기자신의 layer 값과 and 연산을 해서 0이 나오게 되면 충돌을 무시해버리게 된다. 물론 CollisionHandler에서 구현한 충돌 처리 함수들도 실행이 되지 않는다.

실험을 해보자. 2개의 물체에 1개의 shape에는 layer 값을 1로, 나머지 물체의 shape는 2로 설정해보자.

addPhysicsCircle: function() {
    var sprite = new cc.PhysicsSprite(res.orange);

    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));
    shape.setCollisionType(2000);
    shape.setElasticity(1); // 탄성 설정
    shape.setFriction(1); // 마찰력 설정
    shape.setLayers(1); // 레이어 값 설정
    shape.sprite = sprite;

    this.space.addBody(body);
    this.space.addShape(shape);

    sprite.setBody(body);
    this.addChild(sprite);
},

addPhysicsBox: function() {
    var sprite = new cc.PhysicsSprite(res.crate);

    var body = new cp.Body(10, cp.momentForBox(10, 128, 128));
    body.setPos(cp.v(360, 1000));

    var shape = new cp.BoxShape(body, 128, 128);
    shape.setCollisionType(1000);
    shape.setElasticity(1);
    shape.setFriction(1);
    shape.setLayers(2);
    shape.sprite = sprite;

    this.space.addBody(body);
    this.space.addShape(shape);

    sprite.setBody(body);
    this.addChild(sprite);
},

두 레이어의 값은 1과 2 이므로 and 연산을 하면 0이나온다.(1 & 01 = 0) 결과는 두 물체는 충돌하지 않고 겹치게 된다. 

group

만약 100개의 물체가 있는데 이물체들은 서로 친해서 충돌을 무시하고 싶다고 해보자. 이걸 만약 코드로 구현해야한다면 CollisionHandler 를 몇개를 선언해야할지 앞이 깜깜하다...

이 수고를 덜어주기 위하여 shape 간에는 group을 설정할 수 있다. group값을 같게 설정하면 같은 그룹의 shape는 충돌도하지 않고, CollisionHandler에 있는 함수도 실행되지 않는다. 아래의 코드를 구현한 후 실행해보자.

addPhysicsCircle: function() {
    var sprite = new cc.PhysicsSprite(res.orange);

    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));
    shape.setCollisionType(2000);
    shape.setElasticity(1); // 탄성 설정
    shape.setFriction(1); // 마찰력 설정
    shape.group = 1; // 그룹 설정
    shape.sprite = sprite;

    this.space.addBody(body);
    this.space.addShape(shape);

    sprite.setBody(body);
    this.addChild(sprite);
},

addPhysicsBox: function() {
    var sprite = new cc.PhysicsSprite(res.crate);

    var body = new cp.Body(10, cp.momentForBox(10, 128, 128));
    body.setPos(cp.v(360, 1000));

    var shape = new cp.BoxShape(body, 128, 128);
    shape.setCollisionType(1000);
    shape.setElasticity(1);
    shape.setFriction(1);
    shape.group = 1;
    shape.sprite = sprite;

    this.space.addBody(body);
    this.space.addShape(shape);

    sprite.setBody(body);
    this.addChild(sprite);
},

위의 코드를 보면 group의 값을 1로 같게 주었다. 즉 이 두물체는 충돌을 하지 않게 된다.

shape 의 기능을 통하여 충돌예외처리, 마찰, 탄성 기능을 추가해서 우리가 손수 코드를 작성할 필요를 덜 수 있게 된다. 위 의 코드를 잘사용하여 재밌는 게임을 만들 수 있길 바란다.

---

chipmunk 물리엔진 정복 시리즈

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