스프라이트 이미지를 움직이는 데는 두 가지 방법이 있다
1. 예를 들어 프레임이 8개면 an1.jpg~an8.jpg 이렇게 나누는 것!
2. 하나의 파일에 다그려 넣고 그때그때 좌표를 얻어오는 것!
난 개인적으로 어렵게 느껴졌지만 효율적이라고 생각해서 2번째 방법을 선택했다!
코드를 보자!
1. 이미지/좌표 불러오기!
-p5js에서 preload를 만들어준다 저기에 이제 뭐 mp3나 이런 거를 불러올 때 쓰는 기능 같다!
spritedata= loadJSON('p5/horse/horse.json');
spritesheet = loadImage('p5/sheep.png');
자바스크립트는 별게 다된다 ㅋㅋ
2. 좌표를 지정해 배열에 하나하나 하나 넣어준다!]
-setup으로 가자!
제일 충격적인 부분이었다
처음 봤을 때 이런 게 되는구나라고 하고!
frames=spritedata.frames;
for (var i = 0; i < frames.length; i++) {
var pos = frames[i].position;
var img = spritesheet.get(pos.x, pos.y, pos.w, pos.h);
animation.push(img);
}
var about=[startframe=0,framspeed=10];///<-굳이 배열로 안 줘도 된다 그냥 허세 한번...
주의할 점
자 draw함수를 보자!
-background();
이렇게 생각하자 setup은 한 번만 읽어도 되는 것들 draw는 계속 읽어주는 것들이다
왜 근데 background가 여기 있어야 하냐면!
-background(); 에러가 발생하는경우에는
수정 background('gray');
이전 이미지 위에 계속 그리는 것이다!
그래서 즉 background가 있어야 이전 이미지가 지워지고 새로운(?) 캔버스 위에 양을 그리는 것이다!
이것도 은근히 멘탈 나가게 하는 버그이다 ㅋㅋㅋ
자 이제 sprite클래스를 만들어보자!
1.frameup이라는 함수를 만들어서 속도를 지정해서 애니메이션이 다음장 다음장~넘어가게 해 준다!
this.about[1]++; //얘가늘어난다
if(this.about[1]%5==0)///얘가 5의 배수면
{
this.about[0]++;///애니메이션장수 넘어간다
this.about[1]=0;////애는 다시0으로
}
if(this.about[0]==7)/////만약 애니메이션 끝인 7에 도착한다면! 다시 0으로 가게 해줘야한다!
{
this.about[0]=0;
}
2.draw 함수!
this.frameup();////이미지를 넘겨준다!
translate(x,y);///나중에설명해보자
image(this.animation[this.about[0]],0,0,80,80);
-자 원래 0,0자리에 x, y를 넣으면 된다 하지만
우리는 언덕 위를 걷게 하기 위해 좀 더 다른 걸로 컨트롤하겠다!
바로 translate()!
나도 프로젝트 막바지에 아 이게 왜 필요한지 알았고 넣은 코드다!
이건 다음에 자세히 이야기해보자!
image(this.animation[this.about[0]],0,0,80,80);
-this.animation[this.about[0]]=이미지
80,80=양 크기 지정 가로세로 80으로 양을 그려준다!
짠
가로 80세로 80짜리 양을 캔버스 위 가로 x 세로 y지점에 그려주고 있다!
근데 코딩을 모르는 사람 혹은 나처럼 얼마 시작하지 않은 사람은 생각할 게 있다
어?? 분명히 걷는데 왜 앞으로 안 가지??
위에서 말했다시피 컴퓨터는 아기다 ㅋㅋㅋㅋㅋ그래서 하나하나 직접 해줘야 한다 ㅋㅋㅋ
물론 움직임에 따라 프레임이 넘어가게 해 주면 되지만
그건 우리에겐 아직 버거울 테니 우린 여기서 만족하자!
몇 달 뒤 혹은 몇 년 뒤 내가 하고 있을 테니까!
다음번에는 양이 이제 앞으로 가는 걸 해볼 건데 그건 어렵지 않다!
여담으로 자바/자바스크립트를 공부하면서
처음 c를 공부할 때가 생각난다 c는 엥 왜 안되지? 이게 안돼??
했던 것들이 여긴 다 된다 ㅋㅋㅋㅋ
웃긴 건 c에서 컴퓨터가 어떻게 동작하는지 대충 익혀서
이제 이게 좀 어색할 뿐 사실 내가 처음 코딩할 때 생각이 여기서는 어느 정도는 가능하다는 것이다!
'p5js로 인터렉티브 흉내내기' 카테고리의 다른 글
| 언덕을 그리자(1)! (0) | 2021.05.05 |
|---|---|
| 스프라이트 이미지 움직이기(3) (0) | 2021.05.02 |
| 스프라이트 이미지 움직이기(2) (0) | 2021.04.30 |
| 이게dom..?이라는 건가... (0) | 2021.04.22 |
| p5js로 인터렉티브 흉내내기 (0) | 2021.04.22 |