Devjo의 코딩

캐릭터 좌우대칭 추가 계속 미뤘던 작업이었다. 중앙에서 공이 나가는 것이 아니기에 캐릭터가 반전되면 공의 발사위치부터 조준점 등 위치를 모두 바꿔야했다 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..

본래 1주일 정도를 기간으로 잡았지만 다른 활동참여로 인해 예상보다 늦어졌다 마무리 계획은 다음과 같다 1) 현재와 반대 방향키를 누를 때 마법사의 캐릭터와 좌표 모두 대칭이동 하나의 변수(on_left)를 지정한 뒤 마법사의 width를 중심으로 좌표들을 옮기는 방식을 구상하고 있다 2) 게임 진입화면 변경: 현재 너무 심플하다 canvas나 애니메이션을 활용하여 기대감을 높혀도 된다고 생각했다 ex) 마법사의 지팡이를 크게 그리고 반짝이는 이벤트 추가 3) 조준 가이드라인 변경: 현재 점선으로 되어있지만 원 두개를 활용하여 나침반 모양의 화살표를 좌표로 나타낼 수 있다고 생각했다 내일 도전해봐야 알 것이다

스테이지 시작화면, 클리어화면 추가 현재 코드와 맞물리게 하는 것이 조금 복잡했다 이런 방식으로 풀어갔다 1) 전역변수로 wait_load라는 변수와 wait_timer를 만든다 2) 스테이지가 로드될 때 변수(wait_load)가 켜진다 3) wait_load가 켜지는 순간 시작화면이나 클리어화면이 보이며 wait_timer는 증가하기 시작한다 4) wait_timer가 text라는 인스턴스 내부 조건문에서 특정 시간을 달성하면 text내부의 특정 변수 this.text.wait이 켜진다 5) wait_load가 켜진 상태에서 this.text.wait도 켜지게 되면 모든 값이 초기화되며 화면은 사라지게된다 이렇게 복잡했던 이유는 두가지로 분석했다 1) 스테이지를 만들 때 같이 만들지 않았다: 당시에 ..

마나라는 제한 조건을 만들어준다 이용자에게 처음 마나를 100부여하고 공을 사용할 때마다 마나를 소모해 게임 실패 조건을 만든다 마나는 다음과 같다 1) 공을 사용하면 마나의 값이 감소한다 2) 게이지를 채우는 중에 소모될 마나값이 깜빡거린다 3) 공을 쏘고나서 마나의 양은 바로 없어지는 것이 아니라 천천히 줄어든다 1) 소모될 마나값 정해주기 //ball.js 조건문에서 마나 소모량 값을 추가했다 switch(this.magnitude){ case 1: this.mass = 10; this.radius = this.stageWidth/80; this.mana_consumption = 2; break; case 2: this.g = 6.5; this.radius = this.stageWidth/35; t..

canvas내에서 애니메이션 동작을 직접 구현한다 gif 파일을 다 찾아놓았지만 canvas 내에서 활용할 방법이 구글 내에서는 없었다 또 이미지를 따로 로드하면 용량도 너무 커지고 각각 다른 이미지를 프레임마다 적용하려니 이게 맞나 싶었다 *핀터레스트(pinterest)에서 이미지를 무료로 제공해준다 결국 이미지 파일만 준비하고 나머지 애니메이션은 직접 그리기로 했다. 최소한의 부분만 준비한다 마법사의 부유효과 단순히 sin함수의 진동값을 사용하면된다 조준 방향키를 유지시 가속도가 붙는다 draw를 조금씩 이해하면서 자연스레 만들어냈다 하지만 다음 조건을 명심해야했다 1) 조준 방향이 이전 방향과 달라지면 가속도가 초기화된다 2) 한 방향으로 계속 유지해야만 가속도가 붙는다 이를 위해 timer함수와 ..

일정 목표를 달성했을 때 새로운 스테이지를 불러와야 한다 그래서 Constructor에서 한 번만 호출해주었던 Stage 인스턴스 정의를 animate로 조건문 안에 집어넣었다 1) 먼저 논리 변수를 true로 시작해 바로 stage1이 시작하도록 했다(당연히 사용된 stage_clear은 false(off)가 된다 2) 그리고 클리어 조건을 달성하면 stage_clear의 값을 true로 만들어 다음 스테이지가 로드된다 let stage_clear = true; //처음에 true값을 주어 시작 class App{ //animate내부에 if문에서 stage_clear가 켜지면 stage_level에 맞는 스테이지를 불러온다 animate(t){ window.requestAnimationFrame(th..

게임개발의 기초편에서 다음과 같이 draw내부에서 사용되는 함수들을 알아보았다 .getContext의 함수 (draw내부에서 사용) 색 정하기 fillStyle = 'color'; name, rgb(), #HEX 사각형 그리기 테두리만 존재 .strokeRect(x,y,width,height) x,y = 좌표 width, height = 크기 채워진 사각형 .fillRect(x,y,width,height) 사각형 지우기 .clearRect(x,y,width,height) 패스로 그리기 패스 열기 .beginPath(); 형식 ctx.beginPath(); 패스 시작점 .moveTo(x, y); 연결하기 .lineTo(x,y); 채우기 .fill();v *게임 개발의 기초: https://devyoseph..

포탄 게이지 만들기 로딩창에서 사용하는 프로그레스 바(Progress Bar)와 같은 개념이다 초기 설계는 이러했다 1) 게이지는 0에서 100으로 왕복운동한다 2) 스페이스바를 길게 누르면 게이지가 채워진다 3) 게이지가 채워진 양의 비율로 공의 속도가 결정된다 4) 스페이스바를 누를 때만 나타난다 1) 게이지는 0에서 100으로 왕복운동한다 시각화를 위해 strokeRect(빈 게이지)와 fillRect(현재 게이지)를 이용했다 0) 위치는 cannon의 위치 위에 만들어야 했다 i) app.js에 수치화된 변수(gauge_percent)를 만들었고 ii) 이 변수에 따라 Gauge class의 draw 메소드 내부에 그려지는 fillRect의 너비 비율이 변하도록 한다 export class Gau..

원할 때 공의 색 바꾸기 쉽게 생각했다. 외부에서 변수 ball_type을 만들고 addEventLister을 통해 ball_type을 바꾸면 공이 이 값에 맞춰서 나갈 것이라 생각했다. *드로우 함수를 완벽히 이해하지 못했다 애니메이션, 드로우에서는 계속해서 함수값에 맞추어 그려주는 것이기 때문에 변수가 변하면 현재 나와있는 모든 공의 색이 변해버린다. 값을 fix해주는 방법을 찾아내야 했다 1)실패: 드로우 함수에 if문 설정: forEach로 계속 그리기 때문에 if문으로 나눠도 값이 변하면 따라 변한다 balls.forEach((ball_each, i, o) =>{ if(ball_type == 1){ ball_each.draw(this.ctx, 1, this.stageWidth, this.stag..

방향성 어떤 컨셉으로 만들지 구상하기 위해 구글과 플레이스토어에서 '대포게임'과 '벽돌깨기'를 검색했다. 대부분 인기 게임은 3D형식이었고 2D일 경우 독특한 아이디어가 가미된 작품들이었다 대포의 이미지가 아닌 스토리텔링을 할 수 있는 '공을 던지는 사람'이나 '공을 던지는 동물' 등으로 컨셉을 바꾸고 정확히 어떤 게임을 만들지 구체화하기로 했다 현재 구상 중인 아이디어(전략): 마법사의 검은숲 탈출, 욕심많은 곰의 꿀 수집기 서 있을 때, 공이 발사될 때 타이머 등을 활용하여 애니메이션 동작을 수행하도록 한다 스테이지 구상 컨셉에 맞춰서 스테이지 또한 어떤 형식으로 만들어야 할지 고민해야된다 '전략성'을 강조해서 스테이지마다 전략을 이용해 특별한 임무를 수행하는 방식인지 '스트레스 해소'를 강조해 방식..