From 8e34e4b2975064fabc16bafc441c7ee500190c92 Mon Sep 17 00:00:00 2001
From: Harry Mustoe-Playfair <harry.mustoeplayfair@gmail.com>
Date: Thu, 17 Oct 2024 16:36:26 +0100
Subject: [PATCH] fix: make the pixi.js game render better with rendering
 pixelated and by rounding the main sprite position

---
 docs/examples/html/lootbox_game.js       | 22 ----------------------
 docs/examples/html/lootbox_game/game.js  |  1 +
 docs/examples/html/lootbox_game/mover.js |  4 ++--
 3 files changed, 3 insertions(+), 24 deletions(-)

diff --git a/docs/examples/html/lootbox_game.js b/docs/examples/html/lootbox_game.js
index 01b732d..1b93551 100644
--- a/docs/examples/html/lootbox_game.js
+++ b/docs/examples/html/lootbox_game.js
@@ -8,30 +8,8 @@ const game = new Game(app);
 
 await game.init();
 
-// const loots = [];
-
-// run.on('pointerdown', () => {
-//   console.log('Clicked Down');
-//   const idle = new PIXI.AnimatedSprite(spritesheet.animations.idle);
-//   idle.animationSpeed = 1 / 6;
-//   idle.play();
-//   app.stage.addChild(idle);
-//   idle.x = run.x;
-//   idle.y = run.y;
-//   loots.push(idle);
-// });
-
 // Add a ticker callback to move the sprite back and forth
 let elapsed = 0.0;
 app.ticker.add((ticker) => {
   game.loop();
-  // elapsed += ticker.deltaTime;
-  // run.x = 0.0 + Math.pow(Math.cos(elapsed / 100.0), 2) * (640.0 - 64);
-  // loots.forEach(l => {
-  //   l.y += 4;
-  //   if (l.y > 360) {
-  //     app.stage.removeChild(l);
-  //     loots.splice(loots.indexOf(l), 1);
-  //   }
-  // });
 });
diff --git a/docs/examples/html/lootbox_game/game.js b/docs/examples/html/lootbox_game/game.js
index f588d6f..3926061 100644
--- a/docs/examples/html/lootbox_game/game.js
+++ b/docs/examples/html/lootbox_game/game.js
@@ -33,6 +33,7 @@ export default class Game {
     // The application will create a canvas element for you that you
     // can then insert into the DOM
     document.getElementById('app').appendChild(this.app.canvas);
+    this.app.canvas.style.imageRendering = 'pixelated';
 
     this.controller = new Controller();
     this.ul = new UltraLoot();
diff --git a/docs/examples/html/lootbox_game/mover.js b/docs/examples/html/lootbox_game/mover.js
index 5d15b46..e6c3060 100644
--- a/docs/examples/html/lootbox_game/mover.js
+++ b/docs/examples/html/lootbox_game/mover.js
@@ -106,8 +106,8 @@ export default class Mover {
     }
 
     if (this.sprite) {
-      this.sprite.x = this.position.x;
-      this.sprite.y = this.position.y;
+      this.sprite.x = Math.round(this.position.x);
+      this.sprite.y = Math.round(this.position.y);
     }
 
     this.nanCheck();