「zim.js」 모션 컨트롤러로 Sprite제어하기

 

 

 

zim.js에서는 Sprite( ), Scroller( )를 이용하여 위와같은 스프라이트를 간단하게 생성할 수 있다.

 

[code]

//생략...

//Sprite 배경생성
  	new Scroller(asset('img%2FgameBG.gif?alt=media&token=50072674-66b1-4c68-9baa-835eb90b75a2.gif').addTo(stage), 1);
  
  	new Sprite({
		image : asset('img%2Fkyo.png?alt=media&token=e9bbfb77-0c4d-431f-97be-db09dc91fb71.png'),
		json : asset('json%2FkyoCom.json?alt=media&token=7532a1b3-90ca-46de-b918-2ae7c2a001c5')
	}).centerReg(stage)
  	  .run({
		label:'run',
		loop:true,
		time:.7
	   })
	  .sca(-1,1)
	  .mov(0,150)
  
//생략...

 

체이닝 방식으로 .ord( )메서드를 통해 '백그라운드', '포그라운드(전경)'로 구분이 가능하다.

또한, reversible : true or false와 같은 속성값을 통해 앞,뒤 움직임도 제어할 수 있다.

 

[구현]

 

 

 

 

Sprite를 좀더 강력하게 만들 수 있는 기능은 'MotionController'이다.

 

[code]

 

//...생략
//Accelerator활용
  	const accel = new Accelerator([
			   new Scroller({
				backing : asset('img%2FgameBG.gif?alt=media&token=50072674-66b1-4c68-9baa-835eb90b75a2.gif').center(stage),
				speed : 1
			   }),
			   new Scroller({
				backing : asset('img%2Ffg.png?alt=media&token=01d8df62-7929-4c73-bf3c-fe518c48ee45').center(stage),
				speed : 2
			   }),
			   new Dynamo({
				sprite : new Sprite({
						image : asset('img%2Fkyo.png?alt=media&token=e9bbfb77-0c4d-431f-97be-db09dc91fb71.png'),
						json : asset('json%2FkyoCom.json?alt=media&token=7532a1b3-90ca-46de-b918-2ae7c2a001c5')
			   		}).centerReg(stage).sca(-1,1).mov(0,90).top().ord(-2),
				speed : 15,
				label : 'run',
				reversible : false,
				flip : true
		   	   })//Dynamo End
		     ]); //Accerlator End
  	
  	new MotionController({
		   target : accel,
		   type : "keydown",
		   speed : 20,
		   minPercentSpeed : -200,
		   maxPercentSpeed : 200,
		   axis : "horizontal"
	})
 
 stage.update();

 

[키보드 방향키로 제어가능]

 

*Dynamo :: Sprite속도, 방향, 자체기능(label) 조절

*Accelerator :: Scroller, Sprite 컨테이너 역할

 

위의 코드에서 Accelerator는 스프라이트, 스크롤러의 그룹이라 생각할 수 있다.

이와 같이, Accelerator로 스크롤러, 스프라이트를 묶는다면, 모션 컨트롤러에서 한번에 제어할 수 있다.