Fix bleeding pixels problem

app/.gitignore

@@ -41,3 +41,4 @@
 # Session related
 *.png~
 *.tiled-session
+/node_modules

app/assets/tiles/ground.tsx

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<tileset version="1.10" tiledversion="1.10.2" name="ground" tilewidth="16" tileheight="16" tilecount="64" columns="8">
- <image source="../images/ground.png" width="128" height="128"/>
+<tileset version="1.10" tiledversion="1.10.2" name="ground" tilewidth="16" tileheight="16" spacing="2" margin="1" tilecount="64" columns="8">
+ <image source="../images/ground.png" width="144" height="144"/>
 </tileset>

app/assets/tiles/wall.tsx

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<tileset version="1.10" tiledversion="1.10.2" name="wall" tilewidth="16" tileheight="16" tilecount="64" columns="8">
- <image source="../images/wall.png" width="128" height="128"/>
+<tileset version="1.10" tiledversion="1.10.2" name="wall" tilewidth="16" tileheight="16" spacing="2" margin="1" tilecount="64" columns="8">
+ <image source="../images/wall.png" width="144" height="144"/>
 </tileset>

app/index.js

@@ -0,0 +1,15 @@
+import { extrudeTilesetToImage } from "tile-extruder";
+
+const files = [
+    "ground.png",
+    "player.png",
+    "wall.png"
+];
+
+async function main() {
+    for (const file of files) {
+        await extrudeTilesetToImage(16, 16, `images/${file}`, `assets/images/${file}`);
+    }
+}
+
+main();

app/lib/game/player.dart

@@ -1,17 +1,14 @@
 import 'dart:async';
-import 'dart:math';
 import 'dart:ui' as ui;
 
 import 'package:flame/collisions.dart';
 import 'package:flame/components.dart';
 import 'package:flame/effects.dart';
 import 'package:flame/flame.dart';
 import 'package:flame/text.dart';
-import 'package:flame_tiled/flame_tiled.dart';
 import 'package:qeck/game/board.dart';
 import 'package:qeck/game/wall.dart';
-
-enum PlayerState { idle, walking, jumping }
+import 'package:qeck/services/network.dart';
 
 class _PreviousPlayerPositionComponent extends ReadOnlyPositionProvider {
   final BoardPlayer player;
@@ -58,21 +55,26 @@ class BoardPlayer extends SpriteAnimationGroupComponent<PlayerState>
     );
 
     add(_text);
-    add(RectangleHitbox(size: size));
+    final realSize = Vector2.all(12);
+    add(RectangleHitbox(
+      size: realSize,
+    ));
   }
 
   SpriteAnimation _getAnimation({
     required List<Vector2> frames,
     double stepTime = double.infinity,
   }) {
-    final size = Vector2.all(16);
+    final size = Vector2.all(18);
     return SpriteAnimation.spriteList(
       frames
           .map(
             (vector) => Sprite(
               _image,
               srcSize: size,
-              srcPosition: vector.clone()..multiply(size),
+              srcPosition: vector.clone()
+                ..multiply(size)
+                ..add(Vector2.all(1)),
             ),
           )
           .toList(),

app/lib/services/network.dart

@@ -27,15 +27,19 @@ enum NetworkingType {
       };
 }
 
+enum PlayerState { idle, walking, jumping }
+
 @MappableClass()
 class NetworkingUser with NetworkingUserMappable {
   final String name;
+  final PlayerState state;
   final (double, double) position;
   final (double, double) velocity;
 
   const NetworkingUser({
     required this.name,
     required this.position,
+    this.state = PlayerState.idle,
     this.velocity = const (0, 0),
   });
 }

app/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "qeck-app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "node index.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "tile-extruder": "^2.1.0"
+  }
+}