{"id":39307,"date":"2024-11-02T04:22:33","date_gmt":"2024-11-02T04:22:33","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=39307"},"modified":"2024-11-26T06:41:53","modified_gmt":"2024-11-26T06:41:53","slug":"%ea%b2%8c%ec%9e%84%ea%b7%b8%eb%9e%98%ed%94%bd-%ec%a0%9c%ec%9e%91-2d-%ec%8a%a4%ed%94%84%eb%9d%bc%ec%9d%b4%ed%8a%b8-%ec%8b%9c%ed%8a%b8%eb%a1%9c-%ea%b0%84%eb%8b%a8%ed%95%9c-%ec%95%a0%eb%8b%88%eb%a9%94","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/39307\/","title":{"rendered":"\uac8c\uc784\uadf8\ub798\ud53d \uc81c\uc791, 2D \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\ub85c \uac04\ub2e8\ud55c \uc560\ub2c8\uba54\uc774\uc158 \ub9cc\ub4e4\uae30"},"content":{"rendered":"

<\/p>\n

\n
\n

1. \uc11c\ub860<\/h2>\n

\n \uac8c\uc784 \uac1c\ubc1c\uc5d0\uc11c \uadf8\ub798\ud53d\uc740 \ud50c\ub808\uc774\uc5b4\uc640\uc758 \uccab \uc778\uc0c1\uc774\uc790 \uac8c\uc784\uc758 \uc804\ubc18\uc801\uc778 \ubd84\uc704\uae30\ub97c \uacb0\uc815\uc9d3\ub294 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. \ub9ce\uc740 \uac8c\uc784\ub4e4\uc774 2D \uadf8\ub798\ud53d\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\uc73c\uba70, \uc774 \uc911\uc5d0\uc11c\ub3c4 \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8(Sprite Sheet)\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\ub294 \ub370 \ub9e4\uc6b0 \uc720\uc6a9\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 2D \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\ub97c \ud65c\uc6a9\ud55c \uac04\ub2e8\ud55c \uc560\ub2c8\uba54\uc774\uc158 \uc81c\uc791 \ubc29\ubc95\uc744 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

2. \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\ub780?<\/h2>\n

\n \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\ub294 \uc5ec\ub7ec \uac1c\uc758 \uc774\ubbf8\uc9c0(\uc2a4\ud504\ub77c\uc774\ud2b8)\ub97c \ud558\ub098\uc758 \ud070 \uc774\ubbf8\uc9c0 \ud30c\uc77c\ub85c \uacb0\ud569\ud55c \uac83\uc785\ub2c8\ub2e4. \uc774 \ubc29\uc2dd\uc740 \uba54\ubaa8\ub9ac \uc0ac\uc6a9\ub7c9\uc744 \uc904\uc774\uace0 \ucd5c\uc801\ud654\ub41c \ub80c\ub354\ub9c1\uc744 \uac00\ub2a5\ud558\uac8c \ud569\ub2c8\ub2e4. \uac8c\uc784\uc5d0\uc11c \uce90\ub9ad\ud130\uc758 \ub2e4\uc591\ud55c \ub3d9\uc791(\uac77\uae30, \ub6f0\uae30, \uc810\ud504 \ub4f1)\uc744 \ud45c\ud604\ud558\uae30 \uc704\ud574 \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\ub97c \uc885\uc885 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

3. \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8 \uc900\ube44\ud558\uae30<\/h2>\n

\n \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574 \uba3c\uc800 \uc774\ubbf8\uc9c0 \ud3b8\uc9d1 \ub3c4\uad6c(\uc608: Photoshop, GIMP)\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac01 \uc560\ub2c8\uba54\uc774\uc158 \ud504\ub808\uc784\uc744 \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uac04\ub2e8\ud55c \uac77\uae30 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc704\ud574 \uce90\ub9ad\ud130\uc758 \uc774\ub3d9 \ub3d9\uc791\uc744 \uc5ec\ub7ec \uac1c\uc758 \ud504\ub808\uc784\uc73c\ub85c \ub098\ub204\uc5b4 \uadf8\ub9bd\ub2c8\ub2e4. \uacb0\uacfc\uc801\uc73c\ub85c \uc138\ub85c \ub610\ub294 \uac00\ub85c\ub85c \ubc30\uc5f4\ub41c \ud504\ub808\uc784\uc744 \uac00\uc9c4 \ud558\ub098\uc758 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc744 \ub9cc\ub4e4\uac8c \ub429\ub2c8\ub2e4.\n <\/p>\n

\n \uc5ec\uae30\uc11c\ub294 \uc608\ub85c 4\uac1c\uc758 \ud504\ub808\uc784\uc73c\ub85c \uad6c\uc131\ub41c \uac77\uae30 \uc560\ub2c8\uba54\uc774\uc158 \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\ub97c \uc0dd\uc131\ud588\ub2e4\uace0 \uac00\uc815\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc758 \uc608\uc2dc \uc774\ubbf8\uc9c0\ub97c \ucc38\uace0\ud558\uc138\uc694.\n <\/p>\n

\"\uc560\ub2c8\uba54\uc774\uc158
\n<\/section>\n

\n

4. \uc2a4\ud504\ub77c\uc774\ud2b8 \uc560\ub2c8\uba54\uc774\uc158 \ucf54\ub4dc<\/h2>\n

\n \uc2a4\ud504\ub77c\uc774\ud2b8 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 \uac8c\uc784 \uc5d4\uc9c4\uc774\ub098 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 HTML5 Canvas\ub97c \ud65c\uc6a9\ud558\uc5ec \uac04\ub2e8\ud558\uac8c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n

\n                \n                    <!DOCTYPE html>\n                    <html lang=\"ko\">\n                    <head>\n                        <meta charset=\"UTF-8\">\n                        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n                        <title>\uc2a4\ud504\ub77c\uc774\ud2b8 \uc560\ub2c8\uba54\uc774\uc158 \uc608\uc81c<\/title>\n                        <style>\n                            canvas {\n                                border: 1px solid #000;\n                            }\n                        <\/style>\n                    <\/head>\n                    <body>\n                        <canvas id=\"gameCanvas\" width=\"500\" height=\"500\"><\/canvas>\n                        <script>\n                            const canvas = document.getElementById('gameCanvas');\n                            const ctx = canvas.getContext('2d');\n\n                            const spriteSheet = new Image();\n                            spriteSheet.src = 'sprite_sheet_example.png';\n\n                            const spriteWidth = 64; \/\/ \uac01 \uc2a4\ud504\ub77c\uc774\ud2b8\uc758 \ub108\ube44\n                            const spriteHeight = 64; \/\/ \uac01 \uc2a4\ud504\ub77c\uc774\ud2b8\uc758 \ub192\uc774\n                            const totalFrames = 4; \/\/ \ucd1d \ud504\ub808\uc784 \uc218\n                            let currentFrame = 0; \/\/ \ud604\uc7ac \ud504\ub808\uc784\n                            let frameInterval = 100; \/\/ \ud504\ub808\uc784 \uc0ac\uc774\uc758 \uc2dc\uac04 (\ubc00\ub9ac\uc138\ucee8\ub4dc)\n                            let lastFrameTime = 0; \/\/ \ub9c8\uc9c0\ub9c9 \ud504\ub808\uc784 \uc2dc\uac04\n\n                            function updateAnimation(timestamp) {\n                                if (timestamp - lastFrameTime > frameInterval) {\n                                    currentFrame = (currentFrame + 1) % totalFrames; \/\/ \ub2e4\uc74c \ud504\ub808\uc784\uc73c\ub85c \uc804\ud658\n                                    lastFrameTime = timestamp;\n                                }\n                                drawAnimation();\n                                requestAnimationFrame(updateAnimation); \/\/ \ub2e4\uc74c \ud504\ub808\uc784 \uc694\uccad\n                            }\n\n                            function drawAnimation() {\n                                ctx.clearRect(0, 0, canvas.width, canvas.height); \/\/ \uce94\ubc84\uc2a4 \uc9c0\uc6b0\uae30\n                                \/\/ \ud604\uc7ac \ud504\ub808\uc784\uc744 \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\uc5d0\uc11c \uadf8\ub9ac\uae30\n                                ctx.drawImage(\n                                    spriteSheet,\n                                    currentFrame * spriteWidth, 0, \/\/ \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\uc5d0\uc11c x, y \uc704\uce58\n                                    spriteWidth, spriteHeight, \/\/ \uc2a4\ud504\ub77c\uc774\ud2b8 \ub108\ube44 \ubc0f \ub192\uc774\n                                    0, 0, \/\/ \uce94\ubc84\uc2a4\uc5d0 \uadf8\ub9b4 x, y \uc704\uce58\n                                    spriteWidth, spriteHeight \/\/ \uce94\ubc84\uc2a4\uc5d0 \uadf8\ub9b4 \ub108\ube44 \ubc0f \ub192\uc774\n                                );\n                            }\n\n                            spriteSheet.onload = () => {\n                                requestAnimationFrame(updateAnimation); \/\/ \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc791\n                            };\n                        <\/script>\n                    <\/body>\n                    <\/html>\n                <\/code>\n            <\/pre>\n
\n                \uc704\uc758 \ucf54\ub4dc\ub294 HTML5 Canvas\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc2a4\ud504\ub77c\uc774\ud2b8 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4. \ucf54\ub4dc\uc758 \uc8fc\uc694 \ubd80\ubd84\uc744 \uc0b4\ud3b4\ubcf4\uba74:\n            <\/p>\n