[COCOS2D-JS] chipmunk 물리엔진 정복(4) - Sprite에 물리 적용하기

Sprite에 물리 적용하기

물리에 대해서 어느정도 배웠으니 이제 Sprite에 물리를 적용시켜보자. 먼저 addSpriteCircle메서드를 만들어서 Sprite를 생성해보자.

addSpriteCircle: function() {
    this.circleSprite = new cc.Sprite(res.orange);
    this.addChild(this.circleSprite);
},

여러분이 아는 그 코드다. cocos2d를 처음 배울 때 사용하는 Sprite 생성방법 그대로다. 리소스는 대충 아무 파일을 사용하기 바란다. 그런데 이방법으로 어떻게 Sprite에 물리를 입힐 수 있는것일까? 정답은 바로 물리가 움직이는 길에 Sprite의 포지션을 변경하면 된다.

update: function(dt) {
    this.space.step(dt);
    this.circleSprite.setPosition(this.body.getPos());
}

일단 body 변수를 GameScene 안에 접근하기 위해서 body를 프로퍼티에 달았다. 그리고 Sprite의 포지션을 update를 이용하여 body의 포지션으로 계속옮겨주기만 하면 된다. 코드를 실행해보면 맛있는 오렌지(필자 기준으로)가 위에서 떨어지는 모습을 보게 될것이다.

하지만 오렌지 100개에 물리를 구현해야한다면?? update에 100개의 오렌지의 포지션을 변경해야한다. 그만큼 코드도 100만큼 늘어나게 되어 보기 안좋은 코드가 된다. 이방법을 해결할수는 없을까?? 방법이있다.

PhysicsSprite

역시 cocos2d는 개발자를 힘들게 만들지 않는다!  cocos2d 에서 Sprite에 물리를 입힐 수 있는 PhysicsSprite가 있다. 이름만 봐도 물리 기능이 있는 Sprite 같아 보인다. 

먼저 기존에 만들었던 addSpriteCircle 메서드를 지우고 addPhysicsCircle에 코드를 추가하자.

addPhysicsCircle: function() {
    this.sprite = new cc.PhysicsSprite(res.orange); // PhysicsSprite 객체 생성

    this.body = new cp.Body(10, cp.momentForCircle(10, 0, 64, cp.v(0, 0)));
    this.body.setPos(cp.v(360, 720));

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

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

    this.sprite.setBody(this.body); // Sprite에 body 설정
    this.addChild(this.sprite);
},

코드가 3줄 추가됬다. 먼저 기존에는 Sprite객체를 생성했지만 우리는 물리를 사용하기위하여 PhysicsSprite 객체를 생성 할 것이다. PhysicsSprite의 내부코드를 보면 Sprite를 상속했기 때문에 Sprite의 기능을 사용 할 수 있다.

다음으로 중요한 부분이 sprite에 body를 다는 부분이다. body는 setBody를 통하여 sprite에 달 수 있게 된다. 다음으로 addChild를 하면 이전에 update로 포지션을 변경하는 코드를 내부적으로 PhysicsSprite에서 하게된다. 코드를 실행해보면 이전에 실행했던 모습과 너무 똑같아서 당황했을 것이다.

이제 Sprite에다 물리도 입혔겠다 두 물체가 충돌했을 때 일어나는 효과를 알아보자. 

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();
        this.addWallsAndGround();
    },

    addWallsAndGround: function() {
        var bottomWall = new cp.SegmentShape(this.space.staticBody,
            cp.v(0, 0), cp.v(720, 0), 100);
        this.space.addStaticShape(bottomWall);
    },

    addPhysicsCircle: function() {
        this.sprite = new cc.PhysicsSprite(res.orange); // PhysicsSprite 객체 생성

        this.body = new cp.Body(10, cp.momentForCircle(10, 0, 64, cp.v(0, 0)));
        this.body.setPos(cp.v(360, 720));

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

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

        this.sprite.setBody(this.body); // Sprite에 body 설정
        this.addChild(this.sprite);
    },

    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의 기능