2년전부터 해당 유튜브 강좌를 찾아서 공부해오던 것인데 게임 개발에 적용할 수 있는 형식이라서 정리해두고 있습니다.
유튜브에서 John McCaffrey라는 유튜버가 Processing 강좌를 하는데 2D Spritesheet로 프로세싱 게임 만드는 강좌를 가끔 올려서 시간 날때마다 코딩하고 제가 디자인한 캐릭터를 적용해서 테스트하면서 공부하고 있습니다.
Tile Map을 Image Texture가 아닌 Script(shape, 색상 코드)로 디자인 하다보니 타일맵 디자인이 투박하지만 용량면에서 가볍다고 생각합니다. 이 강좌에서는 2D Sprite 캐릭터 Package 잘라서 각 Frame마다 Animation하게 하고 키보드로 Control하게 하는 것을 주로 다룹니다.
아래 코드는 Processing 4 버전 IDE에서 짠 Script Tile Map 기본 코드입니다.
(참고) Processing (.pde 확장자)를 사용합니다.
Processing 4 버전 IDE는 Processing 공식 웹사이트에서 무료로 다운로드 받을 수 있고 프로세싱 관련 공식 예제와 튜토리얼 영상(영어)도 있습니다. 국내에도 Processing 강좌들이 종종 있으니 확인하면 좋을 것 같습니다. (위에서 언급한 John McCaffrey 강좌 추천!!)
Tile Map 코드
// tilemap
// 1 is wall
// 2 is floor
int [] maprow = {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1};
int [][] tilemap ={
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}
};
int rows, cols;
int cellWidth, cellHeight;
void setup() {
size(1000,1000);
//rows =10;
//cols = 10;
rows = tilemap.length;
cols = tilemap[0].length;
cellWidth = 92;
cellHeight = 92;
}
void draw(){
background(120);
renderMap();
}
void renderMap(){
for (int i = 0; i< rows; i++){
for(int j = 0; j < cols; j++){
switch (tilemap[i][j]){
case 0:
fill(80);
rect(j*cellWidth, i*cellHeight, cellWidth, cellHeight);
break;
case 1:
fill(114,188,128);
rect(j*cellWidth, i*cellHeight, cellWidth, cellHeight);
break;
default:
println("something is wrong with the map.");
} // end switch
} // end for cols
} // end for rows
}// end renderMap
변경한 Tile Map 코드
// tilemap
// 1 is wall
// 2 is floor
int [] maprow = {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1};
int [][] tilemap ={
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1},
{1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1},
{1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0},
{1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0},
{1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1}
};
int rows, cols;
int cellWidth, cellHeight;
void setup() {
size(1000,1000);
//rows =10;
//cols = 10;
rows = tilemap.length;
cols = tilemap[0].length;
cellWidth = 92;
cellHeight = 92;
}
void draw(){
background(120);
renderMap();
}
void renderMap(){
for (int i = 0; i< rows; i++){
for(int j = 0; j < cols; j++){
switch (tilemap[i][j]){
case 0:
fill(80);
rect(j*cellWidth, i*cellHeight, cellWidth, cellHeight);
break;
case 1:
fill(114,188,128);
rect(j*cellWidth, i*cellHeight, cellWidth, cellHeight);
break;
default:
println("something is wrong with the map.");
} // end switch
} // end for cols
} // end for rows
}// end renderMap
코드 변경은 이 부분입니다.
int [] maprow = {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1};
int [][] tilemap ={
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}
};
변경된 코드 ->
int [] maprow = {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1};
int [][] tilemap ={
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1},
{1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1},
{1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0},
{1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0},
{1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1}
};
=========================
실행 결과 화면
-------------------------------------------------------
변경한 Tile Map 실행 화면
* (주의) 여기 예제나 글들은 게임개발에 도움이 되는 정보 보다는 개인 공부을 위한 것이니 옳은 방법이 아닐 수 있으니 참고바랍니다.
댓글