zim.js 파티클생성

｜emitter생성하기

emitter는 주로 3D특수효과 sw에 있는 기능이지만

zim.js는 간단한 eimitter효과를 제공한다.

 

[code]

<div id="zimBase"></div>

<script> 
const frame = new Frame( { 
   scaling:'zimBase', 
   width:724,  
   height:430,  
   color:light 
  }); 

frame.on("ready", () => { 
	const stage = frame.stage; 
	let stageW = frame.width; 
	let stageH = frame.height;
  
	const emitter = new Emitter({startPaused : true}).centerReg();
	stage.on("stagemousedown", (e)=>{
	   emitter.loc( frame.mouseX, frame.mouseY )
    		  .spurt(10);
	})
  stage.update();
});
</script>

코드는 정말 간단하다.

Emitter( )객체를 생성하고, 특정 이벤트에 emitter를 실행하면 된다.

 

[구현]

::마우스 클릭시 파티클 10개씩 발생

 

 

 

 

｜파티클 종류 변경하기

파티클 종류를 변경하기 위해서는 Emitter의 속성을 이용해야 한다. 

물리엔진에서 중력값(gravity), 부피값(volume), 부력(buoyancy), 등... 을 입력하듯이

표현하고자 하는 효과를 속성값으로 넣어준다.

 

[code]

//생략...
   const objects = [
	  new Rectangle(30, 30, [white, orange]).centerReg({add:false}),
	  new Squiggle({ interactive:false })
    ]
    
    const emitter = new Emitter({
    	gravity: -5,
      	force: 1,
      	shrink: false,
      	random:{
        	rotation:{ min:0, max:360 }
        },
      	startPaused : true,
      	obj: objects,
    }).centerReg(stage);
  
   stage.on("stagemousedown", (e)=>{
    	emitter.loc( frame2.mouseX, frame2.mouseY )
               .spurt(10);
   })

//생략...

 

[구현]

::클릭 시 파티클 생성됨

 

squiggle뿐만 아니라 이미지를 넣는다면,

훨씬 다양한 응용이 가능하다.