update tiled sprite draw

.prettierignore

@@ -1,5 +1,6 @@
 **/.git
 **/node_modules
+**/dist
 
 *.html
 *.css

src/js/objects.js

@@ -104,26 +104,62 @@ export class TiledSprite extends Sprite {
       return -1;
     }
 
+    // draw single image
     context.drawImage(this.image(), this.x, this.y);
+
     let copyUpByY = Math.ceil(this.y / this.image().height);
+    let copyUpByX = Math.ceil(this.y / this.image().width);
     let copyDownByY = Math.ceil(
       (context.canvas.height - this.y - this.image().height) / this.image().height
     );
+    let copyDownByX = Math.ceil(
+      (context.canvas.width - this.y - this.image().width) / this.image().width
+    );
 
-    for (let i = 0; i <= copyUpByY; i++) {
+    for (let iy = 0; iy <= copyUpByY; iy++) {
       if (copyUpByY === Infinity) {
         break;
       }
 
-      context.drawImage(this.image(), this.x, this.y - this.image().height * i);
+      for (let ix = 0; ix <= copyUpByX + 1; ix++) {
+        if (copyUpByX === Infinity) {
+          break;
         }
 
-    for (let i = 0; i <= copyDownByY; i++) {
+        context.drawImage(
+          this.image(),
+          this.x - this.image().width * ix,
+          this.y - this.image().height * iy
+        );
+        context.drawImage(
+          this.image(),
+          this.x + this.image().width * ix,
+          this.y - this.image().height * iy
+        );
+      }
+    }
+
+    for (let iy = 0; iy <= copyDownByY; iy++) {
       if (copyDownByY === Infinity) {
         break;
       }
 
-      context.drawImage(this.image(), this.x, this.y + this.image().height * i);
+      for (let ix = 0; ix <= copyUpByX + 1; ix++) {
+        if (copyUpByX === Infinity) {
+          break;
+        }
+
+        context.drawImage(
+          this.image(),
+          this.x - this.image().width * ix,
+          this.y + this.image().height * iy
+        );
+        context.drawImage(
+          this.image(),
+          this.x + this.image().width * ix,
+          this.y + this.image().height * iy
+        );
+      }
     }
   }
 }

test/js/game.example.js

@@ -1,6 +1,4 @@
-import { App } from './app.js';
-import { Scene, SceneLayer } from './scene.js';
-import { Rect, StrokeRect, Sprite } from './objects.js';
+import { App, Scene, SceneLayer, Rect, StrokeRect, Sprite } from './engine.js';
 
 // init player
 let Player = {
@@ -21,14 +19,14 @@ let layerBg = new SceneLayer('background', [
 ]);
 
 let layerHud = new SceneLayer('hud', [
-  new Sprite('compass.png', 15, 15),
-  new Sprite('compass-arrow.png', 27, 21),
+  new Sprite('/assets/compass.png', 15, 15),
+  new Sprite('/assets/compass-arrow.png', 27, 21),
 ]);
 
 let layerInstances = new SceneLayer('Instances', [Player.rect], { debug: true });
 
 // init app
-let app = new App(document.querySelector('canvas'), 400, 400);
+let app = new App(400, 400);
 
 // init scene
 let firstScene = new Scene(app.canvas, app.context, 400, 400);