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

주의) 좆도 모르는 일반인이 적는 글임 고수들은 답답해도 좀 참아

나는 언어나 제작툴을 제대로 알고 있는게 없음

제목에 자바스크립트로 게임을 만들어 보자고 적었는데

사실 조건문밖에 쓸 줄 모름

나처럼 진짜 언어나 제작툴이 문외한인 사람들 대상으로 글을 적어봄

5년전쯤인가 나도 모바일 게임 만들어 보고 싶어서 알아보니까 그당시에도 유니티를 많이들 추천했었지

근데 어디서 배워야 할지 어떤거부터 시작해야될지 막막하더라고

어렸을때 하던 알만툴 같이 간단한거 없나 찾아보니까

자바스크립트 라이브러리를 모아서 간단하게 게임을 만들 수 있다는걸 알아냄

5년전에 알아냈는데 왜 여태 완성한 겜이 없냐면

각잡고 만들어 볼까 하던차에 일이 바빠져서 신경을 못씀

그러다가 이제 코로나때문에 돈은 없고 시간은 많아서 다시 깔짝 거리는 거임

이제 어제 까지 만들다 때려친 rpg 올려놓은 주소를 첨부함

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

별거 없긴한데 이런식으로 웹브라우저에서 실행도 가능하고

viewimage.php?id=2abcdd23dad63db0&no=24b0d769e1d32ca73cec84fa11d028316f6e59db3d00f81430124d7064eb965dc9ee68d2df2a92757601f908187e9e8be42ec19fbd245ff7f85dc58cf7af8e

이런식으로 앱으로 만들수도 있음

이거 이어서 계속 만들려다가 여기 갤에 쌩초보들이 따라할만한 글은 딱히 안보이는거 같아서

이왕이니 이렇게 글을 쓰면서 아주 간단한 모바일 rpg게임 만들어서 apk까지 뽑아보려고 함

팔릴만한 게임은 나중에 만들어보고 일단 시간때우기 정도 ㅋㅋㅋ

5년전에도 비슷하게 만들어서 블로그에 올렸었는데 그거 재탕이긴 함 ㅋㅋ

자, 그럼 이제 게임을 만들어 보자

준비물은 메모장이랑 그림판을 일단 쓰기로 하고

테스트용 웹브라우저는 아무거나 쓰셈 나는 웨일을 쓰는데

크롬이나 엣지도 상관없을듯 익스플로러는 모르겠다

마지막으로 맵칩을 지원하는 라이브러리를 하나 쓰자고

옛날에 쓰던거라 지금은 홈페이지가 없어졌던데

비슷한 다른 라이브러리 찾기도 귀찮고

어짜피 간단한 기능만 쓸거니까 그냥 이거 쓰자

https://github.com/wise9/enchant.js/

viewimage.php?id=2abcdd23dad63db0&no=24b0d769e1d32ca73cec84fa11d028316f6e59db3d00f81430124d7064eb965dc9ee68d2df2a92753253a8087374988e563598a046af252744340a1be6e929ea2e690dd2

그래도 깃헙은 남아있네 ㅋㅋㅋ

다운받았으면 압축 풀고 build 폴더 안에 enchant.js 파일만 일단 필요함

나머지는 시간날때 찬찬히 살펴봐봐 ㅋㅋㅋㅋ

그럼 작업할 폴더를 만들어 보자

그냥 나는 바탕화면에 rpg라는 폴더를 만들었음

그 안에 enchant.js 파일을 집어넣자고.

viewimage.php?id=2abcdd23dad63db0&no=24b0d769e1d32ca73cec84fa11d028316f6e59db3d00f81430124d7064eb965dc9ee68d2df2a92753253a8087374988e563598a046af252744385b4bedbc29ee6bc3233e

이제 웹브라우저에서 볼수 있도록 html 파일 만들어야됨

html 초딩때 배우지 않나? 라떼는 컴퓨터실에서 배우고 그랬었는데

메모장 열어서 아래와 같이 적어봐라

<!DOCTYPE html>

<html>

<head>

body {

margin: 0;

};

</style>

</head>

</html>

이렇게 적고 index.html 로 저장해서 작업폴더에 넣어놔

저장할때 모든 파일(*.*)로 한다음에 저장하는것 까지 설명해야되나?

그정도는 알아서 해봐...

그다음에 더블클릭해서 실행해보면 아무것도 안나오겠지 ㅋㅋㅋㅋ

일단 그 창을 켜놔라

앞으로 작업하고나서 브라우저 창을 f5 눌러서 새로고침하면

변경한 부분이 바로 적용되니까 직관적으로 확인이 가능함

다음에는 이 화면에다 뭘 그려넣어 보자

다시 메모장을 하나 켜서 아래와 같이 적어봐라

//뒤에 적어놓은건 그냥 내가 설명하는거라 안적어도 된다 복붙은 그냥 해도됨

enchant();

window.onload = function(){

var core = new Core(320, 320); //기본화면 픽셀 사이즈임 나중에 설명해줌

core.onload = function(){

core.rootScene.backgroundColor = 'yellow'; //기본화면 배경을 노란색으로 바꿔준다

var label = new Label('안녕 세계!') //글자를 표현하는 오브젝트를 하나 만들고 내용은 안녕세계! 이름은 label 이라고 적는다.

core.rootScene.addChild(label); //기본화면에 label이라는 오브젝트를 보이게함

};

core.start();

};

이렇게 적어서 main.js 파일로 저장한뒤에

아까 웹브라우저를 새로고침 해봐

viewimage.php?id=2abcdd23dad63db0&no=24b0d769e1d32ca73cec84fa11d028316f6e59db3d00f81430124d7064eb965dc9ee68d2df2a92753253a8087374988e563598a046af2527473c5b1bbce37feec8f23ff0

viewimage.php?id=2abcdd23dad63db0&no=24b0d769e1d32ca73cec84fa11d028316f6e59db3d00f81430124d7064eb965dc9ee68d2df2a92753253a8087374988e563598a046af252714385e1cbfe82fed43b003ac

노란 바탕에 글씨가 나오면 정상적으로 되는거겠지

글이 길어진다 다음 글에 이어서 써볼게

고수들은 답답한 내용일테지만 혹시 도움될 애들을 위해서 적어봄

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

댓글 1

다른 게시글