「zim.js」2D 어드벤처 게임 제작

 

물리엔진을 적용한 스테이지를 제작해보자.

 

 

｜배경 생성

배경은 zim.js의 자체 아이콘 기능, 'pizzazz'를 이용한다.

 

[코드]

//생략...
      const background = pizzazz.makePattern({
          type : 'stripes',
          size : 50,
          rows : 35,
          cols : 200
      }).alp(.1).pos(0,0).addTo(stage);

 

zim에서 제공하는 아이콘을 이용하기 위해서는 아래 CDN을 설정해줘야 한다.

 

<script src="https://zimjs.org/cdn/pizzazz_03.js"></script>

 

 

 

 

 

｜캐릭터 생성

현재 프레임에 물리엔진을 적용하고,

원을 생성하여 메인 캐릭터로 설정한다.

 

[코드]

      const size = 5000;
      const physics = new Physics({
                        linear : 2,
                        gravity : 5, 
                        borders : new Boundary(0, 0, background.width, stageH),
                        scroll : true,
                        frame : frame2
                      });


      const mainCharacter = new Circle(35, blue)
                            .center(stage)
                            .addPhysics({
                                // restitution : 0.5,
                                density : 5
                            })
                            .follow()
                            .control({speed:100})
                            .contact(obj=>{
                                if(obj && obj.type == 'Rectangle') obj.color = black;
                                mainCharacter.ground = true;
                            });

      const char2 = new Circle(10, yellow).center(mainCharacter).mov(25);

//생략...

 

Physics세부 속성은 zim.js DOC의 physics를 참고하자.

 

 

위의 코드에서는 density(밀도)값을 높였고,

restitution(탄성)값은 defualt로 설정했다.

 

만일, 고무공과 같은 효과를 내려면, gravity(중력)값을 낮추고 탄성값을 높이면 된다.

반대로 밀도가 높은 물질을 표현하려면 restitution값을 낮추고, density값을 높여주면 된다.

 

 

 

 

 

｜충돌

충돌하는 객체는 addPhysics(false)로 지정할 수 있다.

400, 70의 너비와 높이값을 갖는 사각형을 타일로 생성한 뒤.

루프구문으로 모조리 addPhysics( )를 적용해준다.

 

[코드]

//생략...
      frame2.on('keydown', (e)=>{
          if(mainCharacter.ground && e.keyCode == 38) {
            mainCharacter.ground = false;
            mainCharacter.impulse(0, -100);
          }
      });

      const platform = new Tile(
          new Rectangle(400, 70).centerReg(stage),
          10, 1, 1000, 0
      ).pos(500, 50, false, true);

      platform.loop(plat=>{
          plat.addTo().addPhysics(false);
      }, true);

//반복
      const platform2 = new Tile(
          new Rectangle(400, 70).centerReg(stage),
          10, 1, 1000, 0
      ).pos(1000, 150, false, true);

      platform2.loop(plat=>{
          plat.addTo().addPhysics(false);
      }, true);
      
//생략...

 

루프구문에서 콜벡이후 'true'로 지정하는 부분에 주의하자.

(true가 아닐 경우 첫번째 오브젝트만 적용됨)

 

 

[구현]