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

[익명(222.121)]

이번에는 캐릭터를 만들어서 애니메이션 시키고 이동하는걸 구현해봄

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

여기로 접속하면 예제의 결과를 볼수 있어

이건 여기에 사용한 img.png 파일 내용임

이제 main.js 내용을 설명해줄게

enchant(); // enchat.js 라이브러리를 시작한다는 뜻임

window.onload = function(){ // 이 안에 있는 내용에 따라 게임 내용이 바뀜 { 괄호가 열려있으니 제일 아래쪽에 }로 꼭 닫아줘야함.

var core = new Core(160, 160); // 이부분은 게임화면의 픽셀 크기를 말하는 거임 게임화면에 점에 갯수가 가로로 160개 세로로 160개 들어간다는 뜻

core.preload ('img.png'); // 게임이 시작하기 전에 메모리에 img.png 라는 파일을 불러놓는다는 뜻.

core.onload = function(){ // 본격적으로 게임이 시작하면 이 안의 있는 내용들이 실행됨 { 괄호가 열려있으니 나중에 }로 꼭 닫아줘야함

core.rootScene.backgroundColor = 'yellow'; // core의 배경을 노랗게 바꿔줌. 근데 지금 상황에서는 없어도 무방해 게임 화면을 다른 오브젝트가 가리고 있으니까

var label = new Label('안녕 세계!') // label 이라는 이름을 가진 오브젝트를 만듬. 텍스트를 표현하고 내용은 안녕 세계! 임

var sprite = new Sprite(16,16); // sprite 라는 이름을 가진 오브젝트를 만듬. 그림을 표현하고 크기는 16x16픽셀임

sprite.image = core.assets['img.png']; // sprite에 쓰일 그림 파일을 지정해줌 아까 메모리에 미리 불러놨던 img.png 파일임

sprite.moveTo(16, 16); // sprite를 가로 16 세로 16 위치로 옮겨놓음

sprite.frame = [0,0,0,0,3,3,3,3]; // sprite를 애니메이션 시킴 0번 그림을 4번띄운뒤에는 3번 그림을 4번띄우고 다시 반복

var up = new Sprite(16, 16); // up 이라는 이름을 가진 오브젝트를 만듬. 그림을 표현하고 크기는 16x16 픽셀임

up.image = core.assets['img.png']; // up에 쓰일 그림 파일을 지정해줌 아까 메모리에 미리 불러놨던 img.png 파일임

up.moveTo(32, 112); // up의 위치를 해당 좌표로 옮김

up.frame = 4; // up의 그림을 4번 그림으로 바꿈

up.opacity = 0.3; // up의 투명도를 30%로 바꿈

up.on('touchstart',function(){sprite.moveBy(0,-16);}); //up을 터치했을때 sprite를 위로 16픽셀 만큼 이동시킴

var down = new Sprite(16, 16); // down 이라는 이름을 가진 오브젝트를 만듬. 그림을 표현하고 크기는 16x16 픽셀임

down.image = core.assets['img.png']; // down에 쓰일 그림 파일을 지정해줌 아까 메모리에 미리 불러놨던 img.png 파일임

down.moveTo(32, 144); // down의 위치를 해당 좌표로 옮김

down.frame = 4; // down의 그림을 4번 그림으로 바꿈

down.rotate(180); // down의 그림을 180도 회전시킴

down.opacity = 0.3; // down의 투명도를 30%로 바꿈

down.on('touchstart',function(){sprite.moveBy(0,16);}); //down을 터치했을때 sprite를 아래로 16픽셀 만큼 이동시킴

var left = new Sprite(16, 16); // left 라는 이름을 가진 오브젝트를 만듬. 그림을 표현하고 크기는 16x16 픽셀임

left.image = core.assets['img.png']; // left에 쓰일 그림 파일을 지정해줌 아까 메모리에 미리 불러놨던 img.png 파일임

left.moveTo(16,128); // left의 위치를 해당 좌표로 옮김

left.frame = 4; // left의 그림을 4번 그림으로 바꿈

left.rotate(270); // left의 그림을 270도 회전시킴

left.opacity = 0.3; // left의 투명도를 30%로 바꿈

left.on('touchstart',function(){sprite.moveBy(-16,0);}); //left를 터치했을때 sprite를 왼쪽으로 16픽셀 만큼 이동시킴

var right = new Sprite(16, 16);; // right 라는 이름을 가진 오브젝트를 만듬. 그림을 표현하고 크기는 16x16 픽셀임

right.image = core.assets['img.png']; // right에 쓰일 그림 파일을 지정해줌 아까 메모리에 미리 불러놨던 img.png 파일임

right.moveTo(48,128); // right의 위치를 해당 좌표로 옮김

right.frame = 4; // right의 그림을 4번 그림으로 바꿈

right.rotate(90); // right의 그림을 180도 회전시킴

right.opacity = 0.3; // right의 투명도를 30%로 바꿈

right.on('touchstart',function(){sprite.moveBy(16,0);}); //right를 터치했을때 sprite를 오른쪽으로 16픽셀 만큼 이동시킴

var map = new Map(16, 16); //map이라는 이름을 가진 오브젝트를 가짐 타일을 이용해 만든 맵을 표현함 타일맵 한칸의 크기는 16px

map.image = core.assets['img.png']; //map에 쓰일 그림 파일을 지정해줌 아까 메모리에 미리 불러놨던 img.png 파일임

map.loadData([[2,2,2,2,2,2,2,2,2,2], //맵을 배치. 2번 그림과 1번 그림을 사용해서 모양과 같이 배치함

[2,1,1,1,1,1,1,1,1,2],

[2,1,1,1,1,1,1,1,1,2],

[2,1,1,1,1,1,1,1,1,2],

[2,1,1,1,1,1,1,1,1,2],

[2,1,1,1,1,1,1,1,1,2],

[2,1,1,1,1,1,1,1,1,2],

[2,1,1,1,1,1,1,1,1,2],

[2,1,1,1,1,1,1,1,1,2],

[2,2,2,2,2,2,2,2,2,2]]);

core.rootScene.addChild(map); // 게임화면에 위에 설정한 map을 보여줌

core.rootScene.addChild(label);

core.rootScene.addChild(sprite);

core.rootScene.addChild(up);

core.rootScene.addChild(down);

core.rootScene.addChild(left);

core.rootScene.addChild(right);

}; // 위에 core.onload = function(){ 를 마치는 괄호

core.start(); // 위에 설정한대로 게임을 실행함

}; // 위에 window.onload = function(){ 를 마치는 괄호

보라색은 게임을 시작하기 전에 미리 설정하는 내용이야.

빨간색 안에 있는 부분을 실행하게 되는거임

초록색은 각자의 오브젝트를 설정을 하는거임

검은색은 그 오브젝트를 보여줌

글씨로 되어있어서 각 내용이 무엇인지 잘 이해가 안될수 있어

그렇지만 메모장을 띄워놓고 바꾸고 저장하고 브라우저를 새로고침 하는걸 반복하면서

해당 내용이 뭘 뜻하는지 깨닳으면 쉽게 배울 수 있을거라 생각함

초딩도 하루만에 이해하는 내용이니까 아무것도 모르는 갤럼들도 이정도 내용은 조금만 집중해서 보고

새로고침하면서 뭐가 변하는지 실험해보면 금방 깨닳을거라 생각함

보이기는 무슨 프로그래밍 처럼 보이는데 솔직히 이걸 프로그래밍이라고 하기도 민망함 ㅋㅋㅋㅋㅋㅋ

내일은 좀더 디테일한 부분을 설정해보는걸로 할듯