Cannon Game_day11: (2021.10.7) 조준점 개선, 캐릭터 좌우대칭 추가, 인트로화면 개선

캐릭터 좌우대칭 추가

계속 미뤘던 작업이었다. 중앙에서 공이 나가는 것이 아니기에 캐릭터가 반전되면
공의 발사위치부터 조준점 등 위치를 모두 바꿔야했다
canvas에서 좌우대칭에 대해 알아봤고 확대·축소 기능이 있는 scale을 사용해야했다: ctx.scale(-1,1);
하지만 이미지에 적용했더니 반짝거리는 오류가 있었다. 검색했으나 관련 내용이 적어 단순하게
대칭되는 이미지를 업로드 후 연결했고 onLeft 변수를 통해 캐릭터의 상태에 따라 반응하도록 했다

//전역변수 on_Left
let onLeft = false;

//ball.js의 경우
if(onLeft == true){
        this.cannonX = cannonX;
        this.cannonY = cannonY;
        this.x = this.cannonX;
        this.y = this.cannonY;
    }    
        if(onLeft == false){
        this.cannonX = cannonX;
        this.cannonY = cannonY;
        this.x = this.cannonX+this.stageWidth/13;
        this.y = this.cannonY;    
    }

*이 외 guideline, gauging에서도 적용했다

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

조준점 개선

이 활동의 의의는 평소에 까다롭다, 번거롭다고 생각한 ctx.beginPath()를 자발적으로 했다는 점에 있다.
조준점을 어떻게 개선할 수 있을까 생각했고, 시계방향으로 도는 공의 모양이 마치 나침반과 비슷해
나침반의 모양을 본떠 만들기로 했다. 그림을 좌표로 이해하고 아는 만큼 활용 수 있는 부분은 매우 흥미로웠다

생각으로 구상했던 좌표계

//좌우로 나눠서 작성했다
if(onLeft == false){
this.startX = cannon.x+this.stageWidth/13+ this.length*Math.cos(angle)*3/2;
this.startY = cannon.y - this.length*Math.sin(angle)*3/2;
this.arriveX = this.startX + this.length*Math.cos(angle)/2;
this.arriveY = this.startY - this.length*Math.sin(angle)/2;
this.sideX1 = cannon.x + this.stageWidth/13 + this.length*Math.cos(angle+Math.PI/6);
this.sideY1 = cannon.y - this.length*Math.sin(angle+Math.PI/6);
this.sideX2 = cannon.x + this.stageWidth/13 + this.length*Math.cos(angle-Math.PI/6);
this.sideY2 = cannon.y - this.length*Math.sin(angle-Math.PI/6);}
       
else if(onLeft ==true){
this.startX = cannon.x + this.length*Math.cos(angle)*3/2;
this.startY = cannon.y - this.length*Math.sin(angle)*3/2;
this.arriveX = this.startX + this.length*Math.cos(angle)/2;
this.arriveY = this.startY - this.length*Math.sin(angle)/2;
this.sideX1 = cannon.x + this.length*Math.cos(angle-Math.PI/6);
this.sideY1 = cannon.y - this.length*Math.sin(angle-Math.PI/6);
this.sideX2 = cannon.x + this.length*Math.cos(angle+Math.PI/6);
this.sideY2 = cannon.y - this.length*Math.sin(angle+Math.PI/6);}

//위 삼각형
        if(ball_type ==1){
            ctx.fillStyle = 'rgba(14,39,168,0.6)';}
        if(ball_type ==2){
            ctx.fillStyle = 'rgba(49,79,63,0.6)';}
        if(ball_type ==3){
            ctx.fillStyle = 'rgba(177,57,37,0.6)';}
       
        ctx.beginPath();
        ctx.setLineDash([0]);
        ctx.lineJoin = 'round';
        ctx.moveTo(this.startX, this.startY);
        ctx.lineTo(this.arriveX, this.arriveY);
        ctx.lineTo(this.sideX1, this.sideY1);
        ctx.lineTo(this.startX, this.startY);
        ctx.fill();
        ctx.closePath();
       //아래 삼각형
        if(ball_type ==1){
            ctx.fillStyle = 'rgba(14,39,168,0.3)';}
        if(ball_type ==2){
            ctx.fillStyle = 'rgba(49,79,63,0.3)';}
        if(ball_type ==3){
            ctx.fillStyle = 'rgba(177,57,37,0.3)';}
       
        ctx.beginPath();
        ctx.setLineDash([0]);
        ctx.lineJoin = 'round';
        ctx.moveTo(this.startX, this.startY);
        ctx.lineTo(this.arriveX, this.arriveY);
        ctx.lineTo(this.sideX2, this.sideY2);
        ctx.lineTo(this.startX, this.startY);
        ctx.fill();
        ctx.closePath();

코드는 길어도 원 좌표계 원리의 연장선이었다. 공에 대한 조건을 많이 넣었기에 길었다

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

인트로화면 개선

원래는 지팡이가 중앙에 크게 있는 일러스트를 구상했지만 이미지를 찾기 어려웠다
괜찮은 인트로화면을 찾았지만 일러스트와 게임의 괴리가 발생했다
최종보스를 보여주는 식으로 흥미를 끌지는 더 고민해야겠다

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.