*

author: elioat <{ID}+{username}@users.noreply.github.com> 2024-12-27 10:12:40 -0500
committer: elioat <{ID}+{username}@users.noreply.github.com> 2024-12-27 10:12:40 -0500
commit: 558906f2349403e781c78e0385b70a08d320a21e (patch)
tree: 3fe1985fbd0f7c8cb131e940b9ba4e42a4c3cc6f /html/rogue
parent: 17a21fefda47f5c6d70c450dd6782e1c1e2d5877 (diff)
download: tour-558906f2349403e781c78e0385b70a08d320a21e.tar.gz
10 files changed, 74 insertions, 8 deletions
diff --git a/html/rogue/assets/FreeCatCharacterAnimations/1_Cat_Idle-Sheet.png b/html/rogue/assets/FreeCatCharacterAnimations/1_Cat_Idle-Sheet.png
new file mode 100644
index 0000000..466ce64
--- /dev/null
+++ b/html/rogue/assets/FreeCatCharacterAnimations/1_Cat_Idle-Sheet.png
Binary files differdiff --git a/html/rogue/assets/FreeCatCharacterAnimations/2_Cat_Run-Sheet.png b/html/rogue/assets/FreeCatCharacterAnimations/2_Cat_Run-Sheet.png
new file mode 100644
index 0000000..65dd33c
--- /dev/null
+++ b/html/rogue/assets/FreeCatCharacterAnimations/2_Cat_Run-Sheet.png
Binary files differdiff --git a/html/rogue/assets/FreeCatCharacterAnimations/3_Cat_Jump-Sheet.png b/html/rogue/assets/FreeCatCharacterAnimations/3_Cat_Jump-Sheet.png
new file mode 100644
index 0000000..2d8d026
--- /dev/null
+++ b/html/rogue/assets/FreeCatCharacterAnimations/3_Cat_Jump-Sheet.png
Binary files differdiff --git a/html/rogue/assets/FreeCatCharacterAnimations/4_Cat_Fall-Sheet.png b/html/rogue/assets/FreeCatCharacterAnimations/4_Cat_Fall-Sheet.png
new file mode 100644
index 0000000..83d8e1f
--- /dev/null
+++ b/html/rogue/assets/FreeCatCharacterAnimations/4_Cat_Fall-Sheet.png
Binary files differdiff --git a/html/rogue/assets/FreeCatCharacterAnimations/Contact.txt b/html/rogue/assets/FreeCatCharacterAnimations/Contact.txt
new file mode 100644
index 0000000..b5d14c7
--- /dev/null
+++ b/html/rogue/assets/FreeCatCharacterAnimations/Contact.txt
@@ -0,0 +1,4 @@
+You can contact me at:
+
+email
+	oboropixelart@gmail.com
\ No newline at end of file
diff --git a/html/rogue/assets/FreeCatCharacterAnimations/License.txt b/html/rogue/assets/FreeCatCharacterAnimations/License.txt
new file mode 100644
index 0000000..f6c32f2
--- /dev/null
+++ b/html/rogue/assets/FreeCatCharacterAnimations/License.txt
@@ -0,0 +1,5 @@
+You can use this asset for personal and commercial purpose,
+you can modify this object to your needs.
+Credit is not required but would be appreciated
+
+You can NOT redistribute or resell it.
\ No newline at end of file
diff --git a/html/rogue/index.html b/html/rogue/index.html
index f3338b0..5d1b52b 100644
--- a/html/rogue/index.html
+++ b/html/rogue/index.html
@@ -19,8 +19,10 @@
 </head>
 <body>
     <canvas id="gameCanvas"></canvas>
+    <img id="catIdle" src="assets/FreeCatCharacterAnimations/1_Cat_Idle-Sheet.png" style="display: none;">
+    <img id="catRun" src="assets/FreeCatCharacterAnimations/2_Cat_Run-Sheet.png" style="display: none;">
     <script src="js/config.js"></script>
-    <script src="js/hexGrid.js"></script>
+    <script src="js/hex.js"></script>
     <script src="js/camera.js"></script>
     <script src="js/fow.js"></script>
     <script src="js/player.js"></script>
diff --git a/html/rogue/js/config.js b/html/rogue/js/config.js
index cabc068..399a8a5 100644
--- a/html/rogue/js/config.js
+++ b/html/rogue/js/config.js
@@ -26,7 +26,7 @@ const Config = {
 
     player: {
         MOVE_SPEED: 0.1,
-        SIZE_RATIO: 1/3,
+        SIZE_RATIO: 0.8,
         VISION_RANGE: 3 // Number of hexes the player can see
     },
 
diff --git a/html/rogue/js/hexGrid.js b/html/rogue/js/hex.js
index 0d1c2e5..0d1c2e5 100644
--- a/html/rogue/js/hexGrid.js
+++ b/html/rogue/js/hex.js
diff --git a/html/rogue/js/player.js b/html/rogue/js/player.js
index 22e57e0..09984dc 100644
--- a/html/rogue/js/player.js
+++ b/html/rogue/js/player.js
@@ -6,11 +6,30 @@ const player = {
     movementProgress: 0,          // Progress of current movement (0 to 1)
     moveSpeed: Config.player.MOVE_SPEED,              // Movement speed (0 to 1 per frame)
     
+    // Animation properties
+    sprites: {
+        idle: null,
+        run: null
+    },
+    currentFrame: 0,
+    frameCount: 0,
+    FRAME_DELAY: 8, // Adjust this to control animation speed
+    SPRITE_WIDTH: 32, // Adjust these based on your sprite sheet dimensions
+    SPRITE_HEIGHT: 32,
+    IDLE_FRAMES: 6, // Number of frames in idle animation
+    RUN_FRAMES: 8,  // Number of frames in run animation
+    facingLeft: false,
+    
     // Initialize player
     init() {
         this.position = { q: 0, r: 0 };
         this.target = null;
         this.path = [];
+        
+        // Load sprites
+        this.sprites.idle = document.getElementById('catIdle');
+        this.sprites.run = document.getElementById('catRun');
+        
         return this;
     },
 
@@ -132,14 +151,50 @@ const player = {
         const screenX = pixelPos.x - camera.x;
         const screenY = pixelPos.y - camera.y;
 
-        ctx.fillStyle = Config.colors.PLAYER;
-        ctx.beginPath();
-        ctx.arc(screenX, screenY, HEX_SIZE * Config.player.SIZE_RATIO, 0, Math.PI * 2);
-        ctx.fill();
+        // Update animation frame
+        this.frameCount++;
+        if (this.frameCount >= this.FRAME_DELAY) {
+            this.frameCount = 0;
+            this.currentFrame++;
+            
+            // Reset frame counter based on current animation
+            const maxFrames = this.target ? this.RUN_FRAMES : this.IDLE_FRAMES;
+            if (this.currentFrame >= maxFrames) {
+                this.currentFrame = 0;
+            }
+        }
+
+        // Determine facing direction based on movement
+        if (this.target) {
+            this.facingLeft = (this.target.q - this.position.q) < 0;
+        }
+
+        // Draw the sprite
+        const sprite = this.target ? this.sprites.run : this.sprites.idle;
+        const scale = (HEX_SIZE * Config.player.SIZE_RATIO * 2) / this.SPRITE_HEIGHT;
         
-        // Optionally, draw the remaining path
+        ctx.save();
+        ctx.translate(screenX, screenY);
+        if (this.facingLeft) {
+            ctx.scale(-1, 1);
+        }
+        
+        ctx.drawImage(
+            sprite,
+            this.currentFrame * this.SPRITE_WIDTH, // Source X
+            0,                                     // Source Y
+            this.SPRITE_WIDTH,                     // Source Width
+            this.SPRITE_HEIGHT,                    // Source Height
+            -this.SPRITE_WIDTH * scale / 2,        // Destination X
+            -this.SPRITE_HEIGHT * scale / 2,       // Destination Y
+            this.SPRITE_WIDTH * scale,             // Destination Width
+            this.SPRITE_HEIGHT * scale             // Destination Height
+        );
+        ctx.restore();
+
+        // Draw path (if needed)
         if (this.path.length > 0) {
-            ctx.strokeStyle = Config.colors.PLAYER + '4D'; // 30% opacity version of player color
+            ctx.strokeStyle = Config.colors.PLAYER + '4D';
             ctx.beginPath();
             let lastPos = this.target || this.position;
             this.path.forEach(point => {
author	elioat <{ID}+{username}@users.noreply.github.com>	2024-12-27 10:12:40 -0500
committer	elioat <{ID}+{username}@users.noreply.github.com>	2024-12-27 10:12:40 -0500
commit	558906f2349403e781c78e0385b70a08d320a21e (patch)
tree	3fe1985fbd0f7c8cb131e940b9ba4e42a4c3cc6f /html/rogue
parent	17a21fefda47f5c6d70c450dd6782e1c1e2d5877 (diff)
download	tour-558906f2349403e781c78e0385b70a08d320a21e.tar.gz