「zim.js」 마우스 이벤트 + Sprite

2D그래픽의 꽃은 sprite다.

SNS메신저의 이모티콘도 sprite효과를 사용하며,

슈퍼마리오와 같은 2D어드벤처 게임의 핵심이 Sprite에 있다.

 

zim.js는 createJS의 Sprite기능과 같다.

 

 

 

｜이미지 불러오기

 zim DOC의 Frame( )을 참고하여 이미지를 불러온다.

 

아래와 같이 Frame( )인스턴스를 선언하기 전에 assets변수를 생성해두면,

frame.asset( )메서드로 zim Frame내부에서 사용할 수 있다.

 

[코드]

<script> 
    const scaling = "zimBase"
    const width = 724;
    const height = 430;
    const color = light;
   
    let assets = [
      		"img%2FkyoBase.png?alt=media&token=b07d0670-9a02-4963-8681-f4c9e420dedc",
      		"sound%2Fexplosion.mp3?alt=media&token=8e555aed-20f2-4e55-a823-b3bd9631e89c.mp3",
         	"img%2Fkyo.png?alt=media&token=e9bbfb77-0c4d-431f-97be-db09dc91fb71", 
         	"json%2FkyoCom.json?alt=media&token=7532a1b3-90ca-46de-b918-2ae7c2a001c5"
    ];
    
    let path = "https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/";
    const frame = new Frame({
    	scaling:scaling,
      	width:width,
      	height:height,
      	color:color,
      	assets:assets,
      	path:path
    }); 

    frame.on("ready", () => { 
        const stage = frame.stage; 
        let stageW = frame.width; 
        let stageH = frame.height;
        
      	const kyo = frame.asset("img%2FkyoBase.png?alt=media&token=b07d0670-9a02-4963-8681-f4c9e420dedc").centerReg(stage);     	
          	stage.update(); 	
        });
    
        stage.update(); 
    })
</script>

 

위와 같이 파이어베이스와 같은 클라우드 서버에서 소스를 불러온다면,

path경로에 공통된 url을 넣으면 된다. 

 

[구현]

 

 

 

KOF의 주인공, 쿠사나기 쿄의 모습이 보인다.

 

 

 

 

 

 

｜Sprite

sprite구현에서 가장 중요한 파일은 .json이다.

현재 json파일은 다음과 같다.

 

[sprite.json]

{
	"images": [
	   "img%2Fkyo.png?alt=media&token=e9bbfb77-0c4d-431f-97be-db09dc91fb71.png"
	],

	"frames": [
	   [1, 1, 61, 106, 0, -61, -2],
	   [142, 1, 64, 106, 0, -62, -2],
	   [288, 1, 66, 106, 0, -60, -2],
	   [431, 1, 61, 106, 0, -58, -2],
	   [576, 1, 63, 106, 0, -62, -2], 
	   [8, 168, 58, 80, 0, -59, -3], 
	   [154, 107, 42, 141, 0, -42, -2],
	   [290, 128, 58, 124, 0, -58, -6],
	   [420, 132, 78, 118, 0, -77, -9],
	   [576, 140, 80, 110, 0, -78, -14],
	   [1,302, 65, 90, 0, -64, -2], 
	   [124, 302, 108, 93, 0, -100, -2],
	   [274, 306, 104, 90, 0, -106, -2],
	   [428, 302, 68, 92, 0, -64, -2],
	   [552, 298, 112, 96, 0, -114, -2],
	   [704, 304, 104, 90, 0, -106, -2],
	   [1, 443, 75, 95 , 0, -78, 0], 
	   [128, 443, 72, 95, 0, -73, 0],
	   [256,451 , 84, 87, 0, -89, -1],
	   [420, 450, 66, 88, 0, -68, -1],
	   [572, 452, 50 , 86, 0, -60, -1] 
 	],

	"animations": {
		"idle": [0,4],
		"run": [10,15],
		"jump": {
			"frames" : [5,6,7,8,9,9,8,7,6,5,5],
			"next" : "idle"
		},
		"attack": {
			"frames" : [16,16,16,17,17,18,19,20,20,19,18,17,16,16],
			"next" : "idle"
		},
		"mix":{
			"frames" : [0,1,2,3,4,16,17,18,19,20,20,19,18,17,16,4,3,2,1,0],
			"next" : "idle",
			"speed" : 0.8
		}
	}
}​

 

frames 속성의 데이터는 ['시작점', '끝점', '너비', '높이', 'index', '중심점 x포인트', '중심점 y포인트']를 의미한다.

 

 

zim.js는 animations속성을 제공하며, 해당 속성에 입력한 frames값을 'label'로 등록하여 사용할 수 있다.

가령, 쿄가 필살기를 사용한다면, run( )메서드의 label값을 다음과 같이 지정하면 된다.

 

[코드]

//생략...
      
      	const kyoAttack = new Sprite({
        	image : frame.asset("img%2Fkyo.png?alt=media&token=e9bbfb77-0c4d-431f-97be-db09dc91fb71"),
          	json : frame.asset("json%2FkyoCom.json?alt=media&token=7532a1b3-90ca-46de-b918-2ae7c2a001c5")
        })
        
        
      	const kyo = frame.asset("img%2FkyoBase.png?alt=media&token=b07d0670-9a02-4963-8681-f4c9e420dedc").centerReg(stage);
      	kyo.on("mousedown", ()=>{
        	kyo.removeFrom();
          	kyoAttack
              .centerReg(stage)
              .loc(kyo)
          	  .run({
            	  time:1,
              	  label:'attack'
               });
          
	frame.asset("sound%2Fexplosion.mp3?alt=media&token=8e555aed-20f2-4e55-a823-b3bd9631e89c.mp3").play();
          
   //생략...

 

run( )메서드는 label이외에도 여러가지 기능(ex.콜벡기능)을 제공하며,

사용자 이벤트에 따라 여러 동작을 등록할 수 있다. 

 

[구현]

 

[클릭시 실행]