From 558906f2349403e781c78e0385b70a08d320a21e Mon Sep 17 00:00:00 2001 From: elioat <{ID}+{username}@users.noreply.github.com> Date: Fri, 27 Dec 2024 10:12:40 -0500 Subject: * --- .../1_Cat_Idle-Sheet.png | Bin 0 -> 587 bytes .../FreeCatCharacterAnimations/2_Cat_Run-Sheet.png | Bin 0 -> 1098 bytes .../3_Cat_Jump-Sheet.png | Bin 0 -> 469 bytes .../4_Cat_Fall-Sheet.png | Bin 0 -> 442 bytes .../assets/FreeCatCharacterAnimations/Contact.txt | 4 ++ .../assets/FreeCatCharacterAnimations/License.txt | 5 ++ html/rogue/index.html | 4 +- html/rogue/js/config.js | 2 +- html/rogue/js/hex.js | 67 +++++++++++++++++++++ html/rogue/js/hexGrid.js | 67 --------------------- html/rogue/js/player.js | 67 +++++++++++++++++++-- 11 files changed, 141 insertions(+), 75 deletions(-) create mode 100644 html/rogue/assets/FreeCatCharacterAnimations/1_Cat_Idle-Sheet.png create mode 100644 html/rogue/assets/FreeCatCharacterAnimations/2_Cat_Run-Sheet.png create mode 100644 html/rogue/assets/FreeCatCharacterAnimations/3_Cat_Jump-Sheet.png create mode 100644 html/rogue/assets/FreeCatCharacterAnimations/4_Cat_Fall-Sheet.png create mode 100644 html/rogue/assets/FreeCatCharacterAnimations/Contact.txt create mode 100644 html/rogue/assets/FreeCatCharacterAnimations/License.txt create mode 100644 html/rogue/js/hex.js delete mode 100644 html/rogue/js/hexGrid.js (limited to 'html/rogue') 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 Binary files /dev/null and b/html/rogue/assets/FreeCatCharacterAnimations/1_Cat_Idle-Sheet.png differ diff --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 Binary files /dev/null and b/html/rogue/assets/FreeCatCharacterAnimations/2_Cat_Run-Sheet.png differ diff --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 Binary files /dev/null and b/html/rogue/assets/FreeCatCharacterAnimations/3_Cat_Jump-Sheet.png differ diff --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 Binary files /dev/null and b/html/rogue/assets/FreeCatCharacterAnimations/4_Cat_Fall-Sheet.png differ diff --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 @@

+ + - + 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/hex.js b/html/rogue/js/hex.js new file mode 100644 index 0000000..0d1c2e5 --- /dev/null +++ b/html/rogue/js/hex.js @@ -0,0 +1,67 @@ +// Hex grid utilities and calculations +const HexGrid = { + get SIZE() { return Config.hex.SIZE }, + get WIDTH() { return Config.hex.WIDTH }, + get HEIGHT() { return Config.hex.HEIGHT }, + get GRID_SIZE() { return Config.hex.GRID_SIZE }, + COLOR: Config.colors.GRID, + IMPASSABLE_COLOR: Config.colors.BACKGROUND, + + // Convert hex coordinates to pixel coordinates + toPixel(hex) { + const x = this.SIZE * (3/2 * hex.q); + const y = this.SIZE * (Math.sqrt(3)/2 * hex.q + Math.sqrt(3) * hex.r); + return {x, y}; + }, + + // Convert pixel coordinates to hex coordinates + fromPixel(x, y) { + const q = (2/3 * x) / this.SIZE; + const r = (-1/3 * x + Math.sqrt(3)/3 * y) / this.SIZE; + return this.round(q, r); + }, + + // Round hex coordinates to nearest hex + round(q, r) { + let x = q; + let z = r; + let y = -x-z; + + let rx = Math.round(x); + let ry = Math.round(y); + let rz = Math.round(z); + + const x_diff = Math.abs(rx - x); + const y_diff = Math.abs(ry - y); + const z_diff = Math.abs(rz - z); + + if (x_diff > y_diff && x_diff > z_diff) { + rx = -ry-rz; + } else if (y_diff > z_diff) { + ry = -rx-rz; + } else { + rz = -rx-ry; + } + + return {q: rx, r: rz}; + }, + + // Calculate visible hexes + getViewportHexes() { + const hexes = []; + const halfGrid = Math.floor(this.GRID_SIZE / 2); + + for (let r = -halfGrid; r < halfGrid; r++) { + for (let q = -halfGrid; q < halfGrid; q++) { + hexes.push({q, r}); + } + } + return hexes; + }, + + // Add this method to check if a hex is passable + isPassable(hex) { + const halfGrid = Math.floor(this.GRID_SIZE / 2); + return Math.abs(hex.q) <= halfGrid && Math.abs(hex.r) <= halfGrid; + } +}; \ No newline at end of file diff --git a/html/rogue/js/hexGrid.js b/html/rogue/js/hexGrid.js deleted file mode 100644 index 0d1c2e5..0000000 --- a/html/rogue/js/hexGrid.js +++ /dev/null @@ -1,67 +0,0 @@ -// Hex grid utilities and calculations -const HexGrid = { - get SIZE() { return Config.hex.SIZE }, - get WIDTH() { return Config.hex.WIDTH }, - get HEIGHT() { return Config.hex.HEIGHT }, - get GRID_SIZE() { return Config.hex.GRID_SIZE }, - COLOR: Config.colors.GRID, - IMPASSABLE_COLOR: Config.colors.BACKGROUND, - - // Convert hex coordinates to pixel coordinates - toPixel(hex) { - const x = this.SIZE * (3/2 * hex.q); - const y = this.SIZE * (Math.sqrt(3)/2 * hex.q + Math.sqrt(3) * hex.r); - return {x, y}; - }, - - // Convert pixel coordinates to hex coordinates - fromPixel(x, y) { - const q = (2/3 * x) / this.SIZE; - const r = (-1/3 * x + Math.sqrt(3)/3 * y) / this.SIZE; - return this.round(q, r); - }, - - // Round hex coordinates to nearest hex - round(q, r) { - let x = q; - let z = r; - let y = -x-z; - - let rx = Math.round(x); - let ry = Math.round(y); - let rz = Math.round(z); - - const x_diff = Math.abs(rx - x); - const y_diff = Math.abs(ry - y); - const z_diff = Math.abs(rz - z); - - if (x_diff > y_diff && x_diff > z_diff) { - rx = -ry-rz; - } else if (y_diff > z_diff) { - ry = -rx-rz; - } else { - rz = -rx-ry; - } - - return {q: rx, r: rz}; - }, - - // Calculate visible hexes - getViewportHexes() { - const hexes = []; - const halfGrid = Math.floor(this.GRID_SIZE / 2); - - for (let r = -halfGrid; r < halfGrid; r++) { - for (let q = -halfGrid; q < halfGrid; q++) { - hexes.push({q, r}); - } - } - return hexes; - }, - - // Add this method to check if a hex is passable - isPassable(hex) { - const halfGrid = Math.floor(this.GRID_SIZE / 2); - return Math.abs(hex.q) <= halfGrid && Math.abs(hex.r) <= halfGrid; - } -}; \ No newline at end of file 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 => { -- cgit 1.4.1-2-gfad0