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모바일확인가능 페이지: 조금더 다양한 샘플이 준비되어있습니다.
최초셋팅법
<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});
}
수학함수와 연동이되어, 포지션이 변경되어야할때 사용됩니다.
슈팅게임의 유도미사일처럼 어떠한 커스텀한 수학적함수가 이용될때 활용할수 있습니다.
그외 여러가지 플랫폼을 이용해 애니메이션을 구현한 샘플
QML
HTML5 와 함께 멀티플랫폼대상 후보였으며
느낌을 알기위해 구현 ( 현재는 실패한 QT의 노키아진영에서 진행되던 모바일 플랫폼임)
HGE
2D에 사용되는 메뉴및 이펙트를 조사하기위해 시도
개발할 당시 실제 모습(현재의 모습과 많이 다름)
WPF/SILVER LIGHT
WPF로 시도된 데모 프로젝트
DIRECT X
3d엔진을 활용하기 어려웠던 시기 direct x 5,6을 이용 날코드(c++)로 구현 ( 2006년)
취업준비하면서 작성된 코드이며 가장 오래된 데모이자,가장 많은 코드가 사용되고,여러가지 어려운 컨셉들을 모두 구현함
이 데모를 마지막으로 나의 진로는 한국 게임계의 발전을 위해 3d를 안하기로~~~(국내 최초 강제 공중부양 캐릭터 레이싱 게임이다.)
Add Comment