「zim.js」 물리엔진 적용하기(1)

 

 

 

 

유니티와 같은 게임엔진과 비교할 수는 없지만

zim.js는 나름대로의 물리엔진을 제공한다.

 

 

 

물리엔진을 적용하기 위해서는 일단 game, physics CDN을 추가해야한다.

 

<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/cat/04/zim.js"></script>
<script src="https://zimjs.org/cdn/game_2.5.js"></script>
<script src="https://zimjs.org/cdn/Box2dWeb-2.1.a.3.min.js"></script>
<script src="https://zimjs.org/cdn/physics_2.1.js"></script>

 

 

Physics( )인스턴스를 실행한 뒤

addPhysics( )를 적용해준다. 

 

//생략...
    const physics = new Physics();
    
    const ball = frame.asset('img%2FsoccerBall.png?alt=media&token=126de779-d676-4180-a38c-883fb9a9e135')
                  .sca(.2)
                  .centerReg(stage)
                  .addPhysics({
                    shape:'circle',
                    restitution:.7
                  });

//생략...

 

addPhysics는 대부분 물리엔진이 갖고 있는 기본속성들을 제공한다.

(마찰력, 중력, 점도, 부력, 탄성력, 기타...) 

 

obj.addPhysics(dynamic, contract, shape, friction, linear, angular, density, bounciness, maskBits, categoryBits, physics, restitution)

 

물리엔진은 결합해야 빛이 난다.

특히, 마우스이벤트, 이미지 텍스처와 결합한다면,

좀더 현실적인 느낌을 연출할 수 있다.

 

  ball.on("mousedown", e=>{
            ball.impulse(
              (ball.x-e.stageX/stage.scaleX)*15,
              (ball.y-e.stageY/stage.scaleY)*15
            )
          });