feat(#1): add image loader capabilities

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).

index.html

@@ -34,7 +34,7 @@
     <div id="game">
         <canvas></canvas>
     </div>
-    <script type="module" src="../src/index.js"></script>
+    <script type="module" src="src/index.js"></script>
 </body>
 
 </html>

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"
   }
-}
+}

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) {
+          if (bundle[file].type === 'chunk') {
-            const module = modules[moduleName];
+            for (const moduleName in modules) {
-            const name = path.basename(moduleName);
+              const module = modules[moduleName];
-            uncompressedSize += module.renderedLength;
+              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(
+              `${chalk.cyan(file.padEnd(30, " "))}\t ${chalk.cyan(
-                module.renderedLength
+                size
               )}`
             );
           }
+          
         }
 
         console.log(

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 }),
   ],
 };

src/canvas-windows.js

@@ -75,16 +75,17 @@ export default class CanvasWindow {
      */
     this.canvasHeight = this.nativeHeight;
 
-    window.addEventListener('resize', () => {
+    window.addEventListener("resize", () => this.resize());
-      this.resize();
+  }
-    });
 
-    window.addEventListener('load', () => {
+  async load() {
-      // initialize native height/width
+    return new Promise((resolve) => {
-      console.log('load')
+      window.addEventListener("load", () => {
-      this.canvas.width = this.canvasWidth;
+        this.canvas.width = this.canvasWidth;
-      this.canvas.height = this.canvasHeight;
+        this.canvas.height = this.canvasHeight;
-      this.resize();
+        this.resize();
+        resolve();
+      });
     });
   }
 

src/index.js

@@ -1,7 +1,18 @@
 import CanvasWindow from "./canvas-windows";
-const canvas = document.querySelector("canvas")
+import ResourceLoader from "./resource-loader";
-new CanvasWindow({
+(async function gameloop() {
-    canvas,
+  const canvasWindow = new CanvasWindow({
+    canvas: document.querySelector("canvas"),
     maxMultiplier: 5,
-    windowPercentage: 0.9
+    windowPercentage: 0.9,
-})
+  });
+  await canvasWindow.load();
+  const { canvas } = canvasWindow;
+  const ctx = canvas.getContext("2d");
+
+  const [overworld] = await Promise.all([
+    "assets/overworld.png",
+  ].map(ResourceLoader.load));
+
+  ctx.drawImage(overworld, 0, 0);
+})();

src/resource-loader.js

@@ -0,0 +1,15 @@
+export default class ResourceLoader {
+/**
+ * Loads an image from the specified URL.
+ *
+ * @return {Promise<HTMLImageElement>} 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;
+    });
+  }
+}

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:
+"string-width-cjs@npm:string-width@^4.2.0":
-  name string-width-cjs
+  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:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  name strip-ansi-cjs
+  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==