PSCOCOS 소개

HTML5의 애니메이션을 컨트롤하는 라이브러리이며

다음과 같은 목표를 가지고 제작되었습니다.

라이브러리가 라이트 해야한다(min버젼일경우 200k미만)
이미 만들어진 사이트에, 추가하기위해 설정이 쉬워야 한다.
Jquery를 사용하여 CSS 애니메이션을 제어하는것처럼 쉽고 강력해야 한다.

IE6점유율이 높았을 시점 아주오래전 제작된것이라, 캔버스를 다루는 더 최적화된

라이브러리가 많을것으로보이며 보이며, 자바스크립트를 연구하면서 작성된 라이브러리입니다.

호환성및 성능좋은 Canvas를 사용하려면 lime.js 와 같은 안정된 해외 오픈소스를 권장합니다.

var img2 = cocoApp.addImage('assets/frogy1.png', 120,100, false);
img2.moveTo({x:495,y:122,duration:3,angle:5 });

특징은 위와같이 단두줄의 코드로 가속이 적용된 애니메이션코드를 작동시킬수 있다란것입니다.

6년전(2014) JS를 학습하면서 작성한 코드로 코드 퀄리티에대한 태클은 금지합니다.

소스위치 : https://github.com/psmon/html5canvaslib
원본위치 : http://psmon.x-y.net/pscoco/sample.html

데모화면

위키내에서 작동화면을 보고싶다면 PC로 접속해주세요
http://wiki.webnori.com/display/codesniper/pscocos
모바일확인가능 페이지: 조금더 다양한 샘플이 준비되어있습니다.
http://psmon.x-y.net/pscoco/sample.html

최초셋팅법

<script src="http://psmon.x-y.net/pscoco/lib/cocos2d-beta2.js"></script>
<script src="http://psmon.x-y.net/pscoco/lib/pscoco.js"></script>

step.1
위 두 라인을 head 태그안에만 넣어줍니다.(가급적 위 두파일은 복사하여 사용합니다.)

step.2
<div id="psmon-demo" style="width: 600px; height: 480px;float: left;"></div>
위 태그를 Body 안에 넣어줍니다. Canvs를 사용할 레이아웃 입니다.

step.3
<script type="text/javascript">
var cocoApp=null;
cocoApp= new Application('psmon-demo',"gray");
cocoApp.run();
</script>

최초 셋팅을한이후
아래에 설명된 각종 여러가지 애니메이션 코드수행이 가능합니다.

사용법

딜레이애니

for(var i=0;i<52;i++){
    var imgRandom = cocoApp.addImage('assets/frogy1.png', 50,100);
    imgRandom.moveTo({x:548,y:200-i*0.2,duration:0.5,delay:i*0.1,angle:90,opacity:50,scale:0.5});
}

움직이지 않는 시간을 설정하는것으로
애니메이션시 가속과 더불어 가장중요한 설정입니다.

이벤트처리

//여기서 마지막 인자값 true,false 는 Layer를 사용할지 여부입니다. 사용하면 이벤트처리가 가능하지만 느려집니다.
var img3 = cocoApp.addImage('assets/frogy1.png', 120,200, true);
var img4 = cocoApp.addImage('assets/frogy1.png', 200,200, true)
img3.onMouseUp = function(event){
    img3.position.y=img3.position.y+5;
}
img4.onMouseUp = function(event){
    img4.position.y=img4.position.y+5;
}

모든 애니메이션 대상은 기본적인 레이아웃을 가지게 되며
필요하면 레이아웃 속성에 터치/클릭등의 이벤트 설정이 가능합니다.

가속애니메이션

var easeOpt = { type:"EaseIn", rate:3 }; //or Type EaseInOut
var img2 = cocoApp.addImage('assets/frogy1.png', 120,100, false);
img2.moveTo({x:495,y:122,duration:3,angle:5, ease:easeOpt });

애니메이션이 일정한 속도로 움직인다고하면 밋밋할것입니다.
점점빠르게등의 가속옵션을 줄수가 있습니다.

경로애니메이션

var img2 = cocoApp.addImage('assets/ball1.png', 120,100, false);
img2.seqTo([
	{x:100,y:122,duration:0.3,angle:5 },
	{x:250,y:50,duration:0.3,angle:45 },
	{x:300,y:300,duration:0.3,angle:90 ,opacity:50,scale:0.5}
]);

경로를 지정하여, 경로를 지나는동안 변형(회전,가속등)을 줄수가 있습니다.

스프라이트 애니메이션

for(var i=0 ; i< 10 ; i++){
	_demoRefCount++;
	var frogAni = new SpriteAnimation({fileName:"assets/ani/flog/frogy",width:700,height:1000,frameCount:15,scale:0.3,repeat:false ,oneDelay:0.03 * (i+1) });
	frogAni.position.x=70 * i;
	frogAni.position.y=150;
	cocoApp.addChild(frogAni,"frog"+ _demoRefCount );
	frogAni.play();
}

가장 고전적이고 , 2D애니메이션에 여전히 활용이되고있는
여러장의 이미지를 넘기는 방식입니다.

커스텀 수학에뮬레이션

var canvasWidth=600;
var canvasHeight=480;
for(var i=0;i<100;i++){
	var ballImg = cocoApp.addImage('assets/greencircle.png',0,-10,false);
	ballImg.position.x = Math.round(Math.random() * canvasWidth );
	ballImg.position.y = Math.round(Math.random() * canvasHeight );
	ballImg.drift = Math.random();
	ballImg.speed = Math.round(Math.random() * 5) + 1;
	ballImg.addSchedule({method:function(){
	this.speed = Math.round(Math.random() * 3) + 1;
	if(this.position.y <= canvasHeight){
	this.position.y = this.position.y+this.speed;
	if(this.position.y > canvasHeight){
		this.position.y = -5;
	}
	this.position.x+=this.drift;
	if(this.position.x > canvasWidth){
		this.position.x=0
	}}
	},target:ballImg,interval:0,paused:false});
}

수학함수와 연동이되어, 포지션이 변경되어야할때 사용됩니다.
슈팅게임의 유도미사일처럼 어떠한 커스텀한 수학적함수가 이용될때 활용할수 있습니다.

Content

Space Tools