\uac8c\uc784 \uc544\ud2b8\ub294 \uac8c\uc784 \ub514\uc790\uc778\uc758 \ud575\uc2ec \uc694\uc18c \uc911 \ud558\ub098\uc774\uba70, \ud50c\ub808\uc774\uc5b4\uc758 \uacbd\ud5d8\uc744 \ud06c\uac8c \uc88c\uc6b0\ud569\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \uac8c\uc784 \uadf8\ub798\ud53d \uc81c\uc791\uc5d0 \ud544\uc694\ud55c \uae30\ubcf8\uc801\uc778 \uc6a9\uc5b4\uc640 \uac1c\ub150\uc744 \uc0b4\ud3b4\ubd05\ub2c8\ub2e4. \ud2b9\ud788 \uc2a4\ud504\ub77c\uc774\ud2b8, \ud0c0\uc77c\uc14b, UI \uc694\uc18c \ub4f1 \ub2e4\uc591\ud55c \uadf8\ub798\ud53d \uc694\uc18c\ub97c \uad6c\uccb4\uc801\uc73c\ub85c \uc124\uba85\ud558\uace0 \uc608\uc81c \ucf54\ub4dc\ub97c \ud1b5\ud574 \uc774\ud574\ub97c \ub3d5\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc2a4\ud504\ub77c\uc774\ud2b8\ub294 \uac8c\uc784 \ub0b4\uc5d0\uc11c \uc6c0\uc9c1\uc774\uac70\ub098 \ud589\ub3d9\ud558\ub294 \uadf8\ub798\ud53d \uc694\uc18c\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4. \ubcf4\ud1b5 \uce90\ub9ad\ud130, \ubaac\uc2a4\ud130, \uc544\uc774\ud15c \ub4f1\uacfc \uac19\uc740 \uac1c\ubcc4\uc801\uc778 \uac1d\uccb4\ub97c \ud45c\ud604\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n
\n \/\/ \uc608\uc2dc: \ud50c\ub808\uc774\uc5b4 \uc2a4\ud504\ub77c\uc774\ud2b8\ub97c \ub85c\ub4dc\ud558\ub294 \ucf54\ub4dc\n const playerSprite = new Image();\n playerSprite.src = 'assets\/player.png'; \/\/ \uc2a4\ud504\ub77c\uc774\ud2b8 \uc774\ubbf8\uc9c0 \uacbd\ub85c\n <\/code><\/pre>\n1.2 \uc2a4\ud504\ub77c\uc774\ud2b8 \uc560\ub2c8\uba54\uc774\uc158<\/h3>\n
\uc2a4\ud504\ub77c\uc774\ud2b8\ub294 \ub2e8\uc77c \uc774\ubbf8\uc9c0\uac00 \uc544\ub2c8\ub77c \uc5ec\ub7ec \uc7a5\uc758 \uc774\ubbf8\uc9c0\ub97c \uc21c\ucc28\uc801\uc73c\ub85c \ud45c\uc2dc\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ub370 \uc0ac\uc6a9\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\ub77c\ub294 \ud558\ub098\uc758 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc5d0 \uc5ec\ub7ec \uc2a4\ud504\ub77c\uc774\ud2b8\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\n \/\/ \uc608\uc2dc: \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\ub97c \uc0ac\uc6a9\ud55c \uc560\ub2c8\uba54\uc774\uc158\n const spriteSheet = new Image();\n spriteSheet.src = 'assets\/sprite_sheet.png';\n const spriteWidth = 64; \/\/ \uc2a4\ud504\ub77c\uc774\ud2b8\uc758 \ub108\ube44\n const spriteHeight = 64; \/\/ \uc2a4\ud504\ub77c\uc774\ud2b8\uc758 \ub192\uc774\n\n let currentFrame = 0; \/\/ \ud604\uc7ac \ud504\ub808\uc784\n const totalFrames = 4; \/\/ \ucd1d \ud504\ub808\uc784 \uc218\n\n function drawPlayer(ctx) {\n ctx.drawImage(\n spriteSheet,\n currentFrame * spriteWidth,\n 0,\n spriteWidth,\n spriteHeight,\n player.x,\n player.y,\n spriteWidth,\n spriteHeight\n );\n currentFrame = (currentFrame + 1) % totalFrames; \/\/ \ud504\ub808\uc784 \uc804\ud658\n }\n <\/code><\/pre>\n2. \ud0c0\uc77c\uc14b(Tileset)<\/h2>\n
\ud0c0\uc77c\uc14b\uc740 \uac8c\uc784\uc758 \ubc30\uacbd\uc774\ub098 \ud658\uacbd\uc744 \uad6c\uc131\ud558\ub294 \ub370 \uc0ac\uc6a9\ub418\ub294 \uadf8\ub798\ud53d \uc694\uc18c\uc758 \uc9d1\ud569\uc785\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c \uc77c\uc815\ud55c \ud06c\uae30\uc758 \uc791\uc740 \uc774\ubbf8\uc9c0 \uc870\uac01\ub4e4\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uc73c\uba70, \uc774\ub4e4\uc744 \uc870\ud569\ud558\uc5ec \ub354 \ud070 \uc7a5\uba74\uc744 \ub9cc\ub4e4\uc5b4\ub0c5\ub2c8\ub2e4.<\/p>\n
2.1 \ud0c0\uc77c\uc14b\uc758 \uc608<\/h3>\n\n \/\/ \uc608\uc2dc: \ud0c0\uc77c\uc14b\uc744 \ub85c\ub4dc\ud558\uace0 \uc0ac\uc6a9\ud558\uae30\n const tileset = new Image();\n tileset.src = 'assets\/tileset.png';\n\n const tileWidth = 32;\n const tileHeight = 32;\n\n function drawTile(ctx, tileIndex, x, y) {\n const tileX = (tileIndex % (tileset.width \/ tileWidth)) * tileWidth;\n const tileY = Math.floor(tileIndex \/ (tileset.width \/ tileWidth)) * tileHeight;\n\n ctx.drawImage(\n tileset,\n tileX,\n tileY,\n tileWidth,\n tileHeight,\n x,\n y,\n tileWidth,\n tileHeight\n );\n }\n <\/code><\/pre>\n2.2 \ud0c0\uc77c\ub9f5 \uc0dd\uc131<\/h3>\n
\ud0c0\uc77c\uc14b\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc81c \ud0c0\uc77c\ub9f5\uc744 \uc0dd\uc131\ud558\ub824\uba74 \uc774\ucc28\uc6d0 \ubc30\uc5f4\uc744 \uc0ac\uc6a9\ud558\uc5ec \uac01 \ud0c0\uc77c\uc758 \uc778\ub371\uc2a4\ub97c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\n \/\/ \uc608\uc2dc: \uac04\ub2e8\ud55c 2D \ud0c0\uc77c\ub9f5\n const map = [\n [0, 1, 2, 1, 0],\n [1, 1, 1, 1, 0],\n [2, 2, 1, 1, 0],\n [0, 1, 1, 1, 0],\n [0, 0, 0, 0, 0]\n ];\n\n function drawMap(ctx) {\n for (let row = 0; row < map.length; row++) {\n for (let col = 0; col < map[row].length; col++) {\n drawTile(ctx, map[row][col], col * tileWidth, row * tileHeight);\n }\n }\n }\n <\/code><\/pre>\n3. UI \uc694\uc18c(User Interface Elements)<\/h2>\n
\uac8c\uc784\uc758 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub294 \ud50c\ub808\uc774\uc5b4\uc640 \uac8c\uc784\uc758 \uc0c1\ud638\uc791\uc6a9\uc744 \ub3d5\ub294 \uc694\uc18c\ub4e4\uc785\ub2c8\ub2e4. UI \uc694\uc18c\ub294 \ubc84\ud2bc, \uba54\ub274, \uccb4\ub825 \ubc14, \uc810\uc218\ud310 \ub4f1\uc73c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4.<\/p>\n
3.1 UI \uc694\uc18c \ub514\uc790\uc778 \uc6d0\uce59<\/h3>\n
\ud6a8\uc728\uc801\uc778 UI \uc694\uc18c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uae30\ubcf8 \uc6d0\uce59\uc744 \ub530\ub985\ub2c8\ub2e4:<\/p>\n
\n- \uba85\ud655\ud55c \uc2dc\uac01\uc801 \uacc4\uce35 \uad6c\uc870<\/li>\n
- \uc77c\uad00\ub41c \uc2a4\ud0c0\uc77c\uacfc \uc0c9\uc0c1<\/li>\n
- \uc9c1\uad00\uc801\uc778 \uc544\uc774\ucf58\uacfc \ub808\uc774\ube14 \uc0ac\uc6a9<\/li>\n<\/ul>\n
3.2 \ubc84\ud2bc UI \uc608\uc81c<\/h3>\n\n \/\/ \uc608\uc2dc: \ubc84\ud2bc \ud074\ub9ad \uc774\ubca4\ud2b8 \ucc98\ub9ac\n const button = document.createElement('button');\n button.innerText = '\uac8c\uc784 \uc2dc\uc791';\n button.addEventListener('click', function() {\n startGame();\n });\n document.body.appendChild(button);\n\n function startGame() {\n console.log('\uac8c\uc784\uc774 \uc2dc\uc791\ub418\uc5c8\uc2b5\ub2c8\ub2e4!');\n \/\/ \uac8c\uc784 \ucd08\uae30\ud654 \ucf54\ub4dc\n }\n <\/code><\/pre>\n4. \uacb0\ub860<\/h2>\n
\uc774 \uae00\uc5d0\uc11c\ub294 \uac8c\uc784 \uadf8\ub798\ud53d \uc81c\uc791\uc758 \uae30\ucd08\uc778 \uc2a4\ud504\ub77c\uc774\ud2b8, \ud0c0\uc77c\uc14b, \ubc0f UI \uc694\uc18c\ub97c \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uac01\uac01\uc758 \uac1c\ub150\uc740 \uac8c\uc784\uc758 \uc804\ubc18\uc801\uc778 \uadf8\ub798\ud53d \ub514\uc790\uc778\uc5d0 \ud070 \uc601\ud5a5\uc744 \ubbf8\uce58\uba70, \uac1c\ubc1c\uc790\uc640 \uc544\ud2f0\uc2a4\ud2b8\uac00 \ud611\ub825\ud558\uc5ec \ud6a8\uacfc\uc801\uc778 \uac8c\uc784 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uae30\ubcf8 \uac1c\ub150\uc744 \ub9c8\uc2a4\ud130\ud558\uba74 \uac8c\uc784 \uadf8\ub798\ud53d \uc81c\uc791\uc5d0\uc11c \ub354 \ub9ce\uc740 \ucc3d\uc758\ub825\uc744 \ubc1c\ud718\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc55e\uc73c\ub85c \ub17c\uc758\ud560 \uae00\uc5d0\uc11c\ub294 \ub354 \uc2ec\ud654\ub41c \ub0b4\uc6a9\uc778 3D \ubaa8\ub378\ub9c1, \uc560\ub2c8\uba54\uc774\uc158 \uae30\uc220, \uc0c9\uc0c1 \uc774\ub860, \uadf8\ub9ac\uace0 \uac8c\uc784 \uc5d4\uc9c4\uc5d0\uc11c\uc758 \uadf8\ub798\ud53d \uad6c\ud604 \ubc29\ubc95 \ub4f1\uc744 \ub2e4\ub8f0 \uc608\uc815\uc785\ub2c8\ub2e4. \uc9c0\uc18d\uc801\uc778 \ud559\uc2b5\uc744 \ud1b5\ud574 \uc7a5\uae30\uc801\uc73c\ub85c \uac8c\uc784 \uadf8\ub798\ud53d \uc81c\uc791 \ub2a5\ub825\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc744 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
\uac10\uc0ac\ud569\ub2c8\ub2e4!<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"