zim.js 지우개 구현하기

｜ hitTestBounds( )

zim.js는 물리엔진을 사용하지 않는 선에서 '충돌'을 잡아낼 수 있는 기능을 제공한다.

hitTestBouds( )메서드는 오브젝트와 충돌한 객체를 콜벡으로 반환한다.

 

[코드]

//네번째 타일
  	const fourth = new Container(stageW/2, stageH/2)
    			.pos(0, 0, RIGHT, BOTTOM);
  
  	const pixel = new Tile(new Rectangle(30, 30, [pink, yellow, green, orange], dark), 9, 5, 4, 4)
    			.center(fourth);
  	
  	const eraser = new Rectangle(30, 30, grey, dark)
    			.pos(pixel.x-30, 0, LEFT, BOTTOM, fourth)
    			.sha()
    			.drag();
  
  	eraser.on('pressmove', ()=>{
    	pixel.loop(pixels=>{
        	if(eraser.hitTestBounds(pixels)){
			//pixels.removeFrom();
			pixels.alp(0).animate({
				wait:2,
				props:{alpha:1}
			});
		   stage.update();
		}
        },true);
    });

 

eraser는 hitTestBounds( )의 반환값에 애니메이팅 효과를 적용함으로써

마치 지우개로 지우는 듯한 기능을 만들 수 있다.

 

[구현]

 

 

 

 

 

 

｜컨테이너 애니메이팅

 

현재 컨테이너가 순차적으로 나타나는 애니메이팅 코드가 다소 지저분하다.

같은 구문이 반복됨으로써 장황한 느낌이다.

 

// part5 - animations
	ANIMATE = true;   //애니메이팅 기능설정

	first.animate({
	   props:{alpha:0},
	   from:true,
	   time:0.7
	});

	second.animate({
	   props:{alpha:0},
	   from:true,
	   time:0.5,
	   wait:0.4*2
	})

	three.animate({
	   props:{alpha:0},
	   from:true,
	   time:0.6,
	   wait:0.5*3
	});

	fourth.animate({
	   props:{alpha:0},
	   from:true,
	   time:0.6,
	   wait:0.5*4
	})

 

위의 코드를 9~10줄로 줄여보자.

 

[코드]

// part5 - animations
ANIMATE = true;
let animTime = 0.7;
let parts = [first, second, third, fourth];

loop(parts, (part, i)=>{
	part.animate({
    	props:{alpha:0},
        from:true,
        time:animTime,
        wait:animTime*i
    })
})

 

loop구문에 컨테이너 데이터를 배열로 넣음으로써

간단하게 컨테이너 애니메이팅 기능을 구사할 수 있다.