[💬] 간단한 모바일 rpg꼠을 만들어보자(3)

[익명(222.121)]

오늘은 어제 한 내용을 조금 세밀하게 해보는 시간을 갖기로 했었는데

이번에는 게임 해상도를 좀더 모바일 스럽게 바꾸고

캐릭터 조작을 좀더 쓸만하게 만들어보자

http://aaaga.dothome.co.kr/rpg1/index.html

오늘 예제의 결과는 여기서 확인 할 수 있음

이건 내가 만든 리소스인데 이번에는 이걸 써서 할게

원래는 그림판이랑 메모장으로 다 할려고 했는데

그림판으로 그림 그리기 귀찮다. 그냥 이거 다운받아서 연습하자구

기존 img.png 파일을 지우고 위에 두개의 파일을 다운받아서 img.png와 map.png로 저장했어

이제 여기에 맞게 main.js 파일을 수정해 보자 변경된 부분만 빨갛게 표시해 볼게

enchant(); window.onload = function(){

var winsize = window.innerWidth/window.innerHeight; //화면의 가로크기와 세로크기의 비를 winsize에 넣는다

var core = new Core(160*winsize.toFixed(2), 160); // 화면의 가로사이즈는 160 곱하기 winsize의 소수점2번째 자리까지를 곱한값이고 세로는 160

core.preload ('img.png','map.png'); //map.png 파일을 추가로 로드함

core.onload = function(){ core.rootScene.backgroundColor = 'yellow';

var label = new Label('안녕 세계!')

var sprite = new Sprite(16, 16);

sprite.image = core.assets['img.png'];

sprite.moveTo(16, 16);

sprite.frame = [0,0,0,0,1,1,1,1]; //바뀐 소스에 맞게 프레임을 수정함

//기존에 있던 up,down,left,right는 삭제함

var map = new Map(16, 16);

map.image = core.assets['map.png']; //추가된 이미지 파일로 변경함

map.loadData([

[0,0,0,0,0,0,0,0,0,0],

[0,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,0],

[0,0,0,0,0,0,0,0,0,0]]); // 바뀐 파일에 맞게 그림번호를 변경해줌

map.collisionData = [

[0,0,0,0,0,0,0,0,0,0],

[0,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,0],

[0,0,0,0,0,0,0,0,0,0]]; // 각타일이 지날수 없는 타일이면 0, 지날수 있으면 1을 집어넣었음

var controller0 = new Sprite(32, 32); //controller0 이라는 오브젝트를 만듬 그림이고 크기는 32x32픽셀

controller0.backgroundColor = 'black'; //그림의 색깔을 검은색으로 한다

controller0.opacity = 0.2; //투명도를 20%로 한다

var controller1 = new Sprite(16, 16); //controller1 이라는 오브젝트를 만든다 그림이고 크기는 16x16픽셀

controller1.backgroundColor = 'black'; //새깔을 검은색으로

controller1.opacity = 0.3; //투명도를 30%로

var movego ={}; //movego 라는 오브젝트를 만든다. 객체(속성을 가진 데이터)임.

var movend ={}; //movend 라는 오브젝트를 만든다.

var angle = 0; //angle 이라는 오브젝트를 만든다. 숫자를 저장한다.

var toward = 0; //toward 라는 오브젝트를 만든다. 숫자를 저장한다.

core.rootScene.on('touchstart', function(e){ //게임 화면을 터치할때 실행할 내용 (와 {가 열려있음을 주의

movego.x = e.x; // movego 객체 x속성에 e.x (터치한 곳의 x좌표)라는 값을 넣는다.

movego.y = e.y; // movego 객체 y속성에 e.y (터치한 곳의 y좌표)라는 값을 넣는다.

controller0.moveTo(movego.x -16, movego.y-16); //controller0를 해당 좌표로 이동시킴

core.rootScene.addChild(controller0); //controller0를 화면에 나타낸다

core.rootScene.addChild(controller1); //controller1을 화면에 나타낸다

}); //core.rootScene.on('touchstart', function(e){ 의괄호를 닫는부분

core.rootScene.on('touchmove', function(e){ //게임 화면에 손을 떼지 않은 상태에서 움직일 경우 실행할 내용 (와 {가 열려있음을 주의

movend.x = e.x; // movend 객체 x속성에 e.x (움직인 곳의 x좌표)라는 값을 넣는다.

movend.y = e.y; // movend 객체 y속성에 e.x (움직인 곳의 y좌표)라는 값을 넣는다.

angle = Math.atan2(movego.x-movend.x,movego.y-movend.y); //처음 터치한 점에서 나중에 움직인 점까지의 각도를 측정해서 angle에 저장

if (-0.78539<angle && angle<0.78539) {toward = 1}; //angle이 -π/4 보다 크고 π/4보다 작을경우에는 toward에 1을 저장한다.

if (-2.35619<angle && angle<-0.78539) {toward = 2}; //angle이 -3π/4 보다 크고 -π/4보다 작을경우에는 toward에 2를 저장한다.

if (0.78539<angle && angle <2.35619) {toward = 3}; //angle이 π/4 보다 크고 3π/4보다 작을경우에는 toward에 3을 저장한다.

if (2.35619<angle && angle<3.14159 || -3.14159<angle && angle<-2.35619) {toward = 4} //angle이 3π/4 보다 크고 π보다 작을경우 또는 -π보다 크고 -3π/4보다 작을 경우에는 toward에 4를 저장한다.

controller1.moveTo(movend.x-8, movend.y-8); //controller1을 해당 좌표로 이동시킴

}); //core.rootScene.on('touchmove', function(e){ 의괄호를 닫는부분

core.rootScene.on('touchend', function(e){ //게임 화면에 손을 떼었을경우 실행할 내용 (와 {가 열려있음을 주의

toward = 0; // toward에 0을 저장한다.

core.rootScene.removeChild(controller0); //controller0을 화면에서 제거한다

core.rootScene.removeChild(controller1); //controller0을 화면에서 제거한다

}); //core.rootScene.on('touchend', function(e){ 의괄호를 닫는부분

core.rootScene.on('enterframe', function(){ //게임이 실행되는 동안 항상 실행할 내용 (와 {가 열려있음을 주의

label.text = toward; // label의 내용을 toward에 저장된 값으로 바꾼다

switch(toward){ //toward 저장된 숫자에 따라 아래의 내용을 실행하라는 의미 {가 열려있음을 주의

case 0: break; // toward가 0일경우 아무것도 하지 않는다.

case 1: sprite.frame = [6,6,6,6,7,7,7,7]; //toward가 1일경우 sprite의 그림번호를 해당번호로 바꾼다.

if (map.hitTest(sprite.x, sprite.y-1)){sprite.moveBy(0,-1);}; break; //해당 좌표의 map.hitTest값이 true라면 sprite를 해당 좌표로 이동

case 2: sprite.frame = [2,2,2,2,3,3,3,3]; //toward가 2일경우 sprite의 그림번호를 해당번호로 바꾼다

if (map.hitTest(sprite.x+16, sprite.y)){sprite.moveBy(1,0);}; break; //해당 좌표의 map.hitTest값이 true라면 sprite를 해당 좌표로 이동

case 3: sprite.frame = [4,4,4,4,5,5,5,5]; //toward가 3일경우 sprite의 그림번호를 해당번호로 바꾼다

if (map.hitTest(sprite.x-1, sprite.y)){sprite.moveBy(-1,0);}; break;

case 4: sprite.frame = [0,0,0,0,1,1,1,1]; //toward가 4일경우 sprite의 그림번호를 해당번호로 바꾼다;

if (map.hitTest(sprite.x, sprite.y+16)){sprite.moveBy(0,1);}; break; //해당 좌표의 map.hitTest값이 true라면 sprite를 해당 좌표로 이동

}; // switch(toward){ 의 괄호를 닫는 부분

}); //core.rootScene.on('enterframe', function(e){ 의괄호를 닫는부분

core.rootScene.addChild(map);

core.rootScene.addChild(sprite);

core.rootScene.addChild(label); //두개의 순서가 바뀌었음. 밑에 있는게 제일 위에 나타나

};

core.start();

};

이글을 보며 따라하는 사람들은

그냥 복사 붙여넣기만 하지 말고 해당 내용을 자기 입맛대로 바꾸면서 어떻게 바뀌는지

새로고침을 반복하면서 확인해보면 실력이 금방 늘거야

복잡해 보여도 뜯어보면 진짜 별거 없다. 화이팅!