p5.js 스케치에 Tiled TMX(Tile Map XML) 파일을 포함하려면 "p5.js-tmx" 또는 "tmx-parser"와 같은 라이브러리를 사용하여 TMX 파일을 로드하고 구문 분석해야 합니다. 여기서는 "tmx-parser" 라이브러리를 사용하여 p5.js 스케치에 Tiled TMX 맵을 로드하고 표시하는 방법을 보여 드리겠습니다.
1단계: tmx-parser 라이브러리 설치 npm을 사용하여 "tmx-parser" 라이브러리를 설치하거나 스크립트 태그를 통해 직접 포함할 수 있습니다. 스크립트 태그를 통해 포함하는 방법은 다음과 같습니다.
<script src="https://cdn.jsdelivr.net/npm/tmx-parser@1.2.3/dist/tmx-parser.js"></script>
2단계: TMX 파일 만들기 Tiled Map Editor를 사용하여 Tiled TMX 지도를 만들고 .tmx 파일로 저장합니다. TMX 파일에 타일셋과 레이어가 정의되어 있는지 확인하세요. 3단계: p5.js에서 TMX 맵 로드 및 표시 이제 p5.js 스케치에 TMX 맵을 로드하고 표시할 수 있습니다. 예는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TMX Map in p5.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tmx-parser@1.2.3/dist/tmx-parser.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
Sketch.js 파일을 만듭니다.
let tmxMap;
let tileSize = 32; // Adjust this according to your tile size
function preload() {
// Load the TMX map file
tmxMap = loadTMX('your_map.tmx');
}
function setup() {
createCanvas(tmxMap.width * tileSize, tmxMap.height * tileSize);
noLoop();
}
function draw() {
background(255);
// Display layers from the TMX map
for (let i = 0; i < tmxMap.layers.length; i++) {
let layer = tmxMap.layers[i];
for (let row = 0; row < layer.height; row++) {
for (let col = 0; col < layer.width; col++) {
let tile = layer.data[row][col];
if (tile !== 0) {
// Draw the tile using its tileset
let tileset = tmxMap.getTilesetByGid(tile);
let img = tileset.getTileImage(tile);
image(img, col * tileSize, row * tileSize, tileSize, tileSize);
}
}
}
}
}
이 코드에서는 tmx-parser 라이브러리에서 제공하는 loadTMX 함수를 사용하여 preload() 함수에서 TMX 맵을 로드합니다. 지도의 크기와 타일 크기에 따라 적절한 크기의 캔버스를 만듭니다. draw() 함수에서는 지도 레이어를 반복하고 관련 타일셋을 사용하여 각 타일을 그립니다. TMX 지도에 사용된 타일 크기와 일치하도록 TileSize 변수를 조정하세요. 'your_map.tmx'를 TMX 파일의 실제 경로로 바꾸십시오. 다음 단계를 수행하면 p5.js 스케치에 Tiled TMX 맵을 표시할 수 있습니다.
댓글