diff --git a/README.md b/README.md index 8902584..4b339ca 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,8 @@ A WIP game for learning purpouses ## Credits - Created by Juan Sebastián Montoya - +- Assets by: + - [ArMM1998](https://opengameart.org/content/zelda-like-tilesets-and-sprites) ## License This project is licensed under the [MIT License](https://opensource.org/licenses/MIT). diff --git a/assets/cave.png b/assets/cave.png new file mode 100644 index 0000000..1df7b3e Binary files /dev/null and b/assets/cave.png differ diff --git a/assets/character.png b/assets/character.png new file mode 100644 index 0000000..a50ceb0 Binary files /dev/null and b/assets/character.png differ diff --git a/assets/font.png b/assets/font.png new file mode 100644 index 0000000..0128151 Binary files /dev/null and b/assets/font.png differ diff --git a/assets/inner.png b/assets/inner.png new file mode 100644 index 0000000..a07be97 Binary files /dev/null and b/assets/inner.png differ diff --git a/assets/log.png b/assets/log.png new file mode 100644 index 0000000..b952a9a Binary files /dev/null and b/assets/log.png differ diff --git a/assets/npc_test.png b/assets/npc_test.png new file mode 100644 index 0000000..4e3c1c9 Binary files /dev/null and b/assets/npc_test.png differ diff --git a/assets/objects.png b/assets/objects.png new file mode 100644 index 0000000..f76813f Binary files /dev/null and b/assets/objects.png differ diff --git a/assets/overworld.png b/assets/overworld.png new file mode 100644 index 0000000..c03c380 Binary files /dev/null and b/assets/overworld.png differ diff --git a/public/index.html b/index.html similarity index 87% rename from public/index.html rename to index.html index 6696de1..416a2b2 100644 --- a/public/index.html +++ b/index.html @@ -34,7 +34,7 @@
- + \ No newline at end of file diff --git a/package.json b/package.json index 9a9600d..9eec8c3 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "dependencies": {}, "devDependencies": { "@rollup/plugin-commonjs": "^26.0.1", - "@rollup/plugin-image": "^3.0.3", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-terser": "^0.4.4", @@ -21,7 +20,8 @@ "chalk": "^5.2.0", "del-cli": "^5.1.0", "rollup": "^4.18.0", + "rollup-plugin-copy2": "^0.4.0", "rollup-plugin-serve": "^1.1.1", "rollup-plugin-zip": "^1.0.3" } -} \ No newline at end of file +} diff --git a/rollup-plugins/bundle-size.mjs b/rollup-plugins/bundle-size.mjs index f5c517b..fe3ac01 100644 --- a/rollup-plugins/bundle-size.mjs +++ b/rollup-plugins/bundle-size.mjs @@ -15,16 +15,27 @@ export default function bundleSize({ file, maxSize = 13 }) { ); for (const file in bundle) { const { modules } = bundle[file]; - for (const moduleName in modules) { - const module = modules[moduleName]; - const name = path.basename(moduleName); - uncompressedSize += module.renderedLength; + if (bundle[file].type === 'chunk') { + for (const moduleName in modules) { + const module = modules[moduleName]; + const name = path.basename(moduleName); + uncompressedSize += module.renderedLength; + console.log( + `${chalk.cyan(name.padEnd(30, " "))}\t ${chalk.cyan( + module.renderedLength + )}` + ); + } + } else if (bundle[file].type === 'asset') { + const { size } = fs.statSync(file); + uncompressedSize += size; console.log( - `${chalk.cyan(name.padEnd(30, " "))}\t ${chalk.cyan( - module.renderedLength + `${chalk.cyan(file.padEnd(30, " "))}\t ${chalk.cyan( + size )}` ); } + } console.log( diff --git a/rollup.config.mjs b/rollup.config.mjs index 8fdea53..aae7b8e 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -1,11 +1,11 @@ import json from "@rollup/plugin-json"; -import image from "@rollup/plugin-image"; import terser from "@rollup/plugin-terser"; import { rollupPluginHTML as html } from "@web/rollup-plugin-html"; import zip from "rollup-plugin-zip"; import serve from "rollup-plugin-serve"; import { nodeResolve } from "@rollup/plugin-node-resolve"; import commonjs from "@rollup/plugin-commonjs"; +import copy from "rollup-plugin-copy2"; import bundleSize from "./rollup-plugins/bundle-size.mjs"; const zipPlug = zip({ file: "game.zip" }); @@ -15,7 +15,7 @@ zipPlug.writeBundle.sequential = true; * @type {import('rollup').RollupOptions} */ export default { - input: "public/index.html", + input: "index.html", output: [ { inlineDynamicImports: true, @@ -33,9 +33,9 @@ export default { plugins: [ html({ minify: true }), json(), - image(), nodeResolve(), commonjs(), - serve({ contentBase: "dist", port: 8080, verbose: true }), + copy({ assets: ["assets/*"] }), + serve({ contentBase: "dist", port: 9000, verbose: true }), ], }; diff --git a/src/canvas-windows.js b/src/canvas-windows.js index 65a6c29..fe83d7a 100644 --- a/src/canvas-windows.js +++ b/src/canvas-windows.js @@ -75,16 +75,17 @@ export default class CanvasWindow { */ this.canvasHeight = this.nativeHeight; - window.addEventListener('resize', () => { - this.resize(); - }); + window.addEventListener("resize", () => this.resize()); + } - window.addEventListener('load', () => { - // initialize native height/width - console.log('load') - this.canvas.width = this.canvasWidth; - this.canvas.height = this.canvasHeight; - this.resize(); + async load() { + return new Promise((resolve) => { + window.addEventListener("load", () => { + this.canvas.width = this.canvasWidth; + this.canvas.height = this.canvasHeight; + this.resize(); + resolve(); + }); }); } diff --git a/src/index.js b/src/index.js index 5163e55..54d588e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,41 @@ import CanvasWindow from "./canvas-windows"; -const canvas = document.querySelector("canvas") -new CanvasWindow({ - canvas, - maxMultiplier: 5, - windowPercentage: 0.9 -}) \ No newline at end of file +import ResourceLoader from "./resource-loader"; + +const canvasWindow = new CanvasWindow({ + canvas: document.querySelector("canvas"), + maxMultiplier: 5, + windowPercentage: 0.9, +}); + +const DEBUG = true; +const GAME_TILE = 16; +const ROWS = canvasWindow.nativeHeight / GAME_TILE; +const COLUMNS = canvasWindow.nativeWidth / GAME_TILE; + +(async () => { + await canvasWindow.load(); + const { canvas } = canvasWindow; + const ctx = canvas.getContext("2d"); + + const [overworld] = await Promise.all( + ["assets/overworld.png"].map(ResourceLoader.load) + ); + for (let row = 0; row < ROWS; row++) { + for (let col = 0; col < COLUMNS; col++) { + ctx.drawImage( + overworld, + 0, + 0, + GAME_TILE, + GAME_TILE, + col * GAME_TILE, + row * GAME_TILE, + GAME_TILE, + GAME_TILE + ); + + DEBUG && + ctx.strokeRect(col * GAME_TILE, row * GAME_TILE, GAME_TILE, GAME_TILE); + } + } +})(); diff --git a/src/resource-loader.js b/src/resource-loader.js new file mode 100644 index 0000000..4b86564 --- /dev/null +++ b/src/resource-loader.js @@ -0,0 +1,15 @@ +export default class ResourceLoader { +/** + * Loads an image from the specified URL. + * + * @return {Promise} A Promise that resolves with the loaded image. + */ + static load(url) { + return new Promise((resolve, reject) => { + const image = new Image(); + image.src = url; + image.onload = () => resolve(image) + image.onerror = reject; + }); + } +} diff --git a/yarn.lock b/yarn.lock index d2ad74d..fb9df20 100644 --- a/yarn.lock +++ b/yarn.lock @@ -115,14 +115,6 @@ is-reference "1.2.1" magic-string "^0.30.3" -"@rollup/plugin-image@^3.0.3": - version "3.0.3" - resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-3.0.3.tgz#025b557180bae20f2349ff5130ef2114169feaac" - integrity sha512-qXWQwsXpvD4trSb8PeFPFajp8JLpRtqqOeNYRUKnEQNHm7e5UP7fuSRcbjQAJ7wDZBbnJvSdY5ujNBQd9B1iFg== - dependencies: - "@rollup/pluginutils" "^5.0.1" - mini-svg-data-uri "^1.4.4" - "@rollup/plugin-json@^6.1.0": version "6.1.0" resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-6.1.0.tgz#fbe784e29682e9bb6dee28ea75a1a83702e7b805" @@ -660,6 +652,18 @@ glob@^10.0.0, glob@^10.4.1: package-json-from-dist "^1.0.0" path-scurry "^1.11.1" +glob@^10.2.2: + version "10.4.5" + resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956" + integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg== + dependencies: + foreground-child "^3.1.0" + jackspeak "^3.1.2" + minimatch "^9.0.4" + minipass "^7.1.2" + package-json-from-dist "^1.0.0" + path-scurry "^1.11.1" + glob@^7.1.3: version "7.2.3" resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b" @@ -996,11 +1000,6 @@ min-indent@^1.0.1: resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== -mini-svg-data-uri@^1.4.4: - version "1.4.4" - resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939" - integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg== - minimatch@^3.1.1: version "3.1.2" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b" @@ -1229,6 +1228,13 @@ rimraf@^3.0.2: dependencies: glob "^7.1.3" +rollup-plugin-copy2@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-copy2/-/rollup-plugin-copy2-0.4.0.tgz#52e8cb0a900150f2050f2b2a2aaa62bc387a23f2" + integrity sha512-ZsJhj+gDwyWRTu6KwyYLmw0mGcdzZ/BuxpHxXYWmp8H9PVKgVVdWpM+W6vOjv6MjNBW9ORBadmBx83R51r+fsA== + dependencies: + glob "^10.2.2" + rollup-plugin-serve@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/rollup-plugin-serve/-/rollup-plugin-serve-1.1.1.tgz#bc06363a23d0a207f61f9b2bed8100a539481cbd" @@ -1359,8 +1365,16 @@ spdx-license-ids@^3.0.0: resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.18.tgz#22aa922dcf2f2885a6494a261f2d8b75345d0326" integrity sha512-xxRs31BqRYHwiMzudOrpSiHtZ8i/GeionCBDSilhYRj+9gIcI8wCZTlXZKu9vZIVqViP3dcp9qE5G6AlIaD+TQ== -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0: - name string-width-cjs +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -1378,8 +1392,14 @@ string-width@^5.0.1, string-width@^5.1.2: emoji-regex "^9.2.2" strip-ansi "^7.0.1" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: - name strip-ansi-cjs +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==