fix: make the pixi.js game render better with rendering pixelated and…

… by rounding the main sprite position

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);
-  //   }
-  // });
 });

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();

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();