diff options
| -rw-r--r-- | img/xy-grid.gif | bin | 0 -> 4135 bytes | |||
| -rw-r--r-- | index.js | 69 |
2 files changed, 42 insertions, 27 deletions
diff --git a/img/xy-grid.gif b/img/xy-grid.gif new file mode 100644 index 0000000..9e46216 --- /dev/null +++ b/img/xy-grid.gif Binary files differdiff --git a/index.js b/index.js index 8375346..e779ff8 100644 --- a/index.js +++ b/index.js @@ -76,7 +76,8 @@ class Sprite { class Backdrop extends Sprite { constructor() { super() - this.image.src = 'img/bg.png' + // this.image.src = 'img/bg.png' + this.image.src = 'img/xy-grid.gif' } } @@ -670,17 +671,21 @@ class BattleCharacter extends Sprite { // Boring physics stuff this.xvel = 0 this.yvel = 0 + this.zvel = 0 this.x = 0 this.y = 0 + this.z = 0 } update(dt) { this.hpBar.update(dt) - this.xvel *= 0.9 - this.yvel *= 0.9 + this.xvel *= 0.95 + this.yvel *= 0.95 + this.zvel *= 0.95 this.x += dt * this.xvel this.y += dt * this.yvel + this.z += dt * this.zvel if (this.dead) { this.deadUpdate(dt) @@ -871,7 +876,7 @@ class Battle { this.backdrop = new Backdrop() this.camera = new BattleCamera(this) - this.camera.follow(this.playerCharacter) + // this.camera.follow(this.playerCharacter) this.slideacrossMessage = new SlideacrossMessage() @@ -922,27 +927,30 @@ class Battle { } } - // ctx.translate(Math.round(-camera.x), Math.round(-camera.y)) const spriteData = [] for (const sprite of [this.backdrop, ...this.getAllBattleCharacters(), ...this.animationEntities]) { - // const x = Math.round(sprite.x - sprite.canvas.width / 2) - // const y = Math.round(sprite.y - sprite.canvas.height / 2) sprite.draw() const cameraOffsetX = sprite.x - camera.x - const cameraOffsetY = sprite.y - camera.y + const cameraOffsetY = camera.y - sprite.y const cameraOffsetZ = sprite.z - camera.z const scaleRatio = camera.getScaleRatio(cameraOffsetZ) - const drawX = scaleRatio * cameraOffsetX - const drawY = scaleRatio * cameraOffsetY - const canvasOffsetDrawX = drawX - sprite.canvas.width / 2 - const canvasOffsetDrawY = drawY - sprite.canvas.height / 2 - spriteData.push({drawX, drawY, canvasOffsetDrawX, canvasOffsetDrawY, scaleRatio, sprite}) + // const scaleRatio = 1 + const drawX = scaleRatio * cameraOffsetX + camera.width / 2 + const drawY = scaleRatio * cameraOffsetY + camera.height / 2 + + const drawW = sprite.canvas.width * scaleRatio + const drawH = sprite.canvas.height * scaleRatio + + const canvasOffsetDrawX = drawX - drawW / 2 + const canvasOffsetDrawY = drawY - drawH / 2 + + spriteData.push({drawX, drawY, canvasOffsetDrawX, canvasOffsetDrawY, drawW, drawH, scaleRatio, sprite}) } window.spriteData = spriteData - for (const { canvasOffsetDrawX, canvasOffsetDrawY, sprite: { canvas } } of spriteData) { - ctx.drawImage(canvas, Math.round(canvasOffsetDrawX), Math.round(canvasOffsetDrawY)) + for (const { canvasOffsetDrawX, canvasOffsetDrawY, drawW, drawH, sprite } of spriteData) { + ctx.drawImage(sprite.canvas, canvasOffsetDrawX, canvasOffsetDrawY, drawW, drawH) } for (const { drawX, canvasOffsetDrawY, sprite } of spriteData) { @@ -953,7 +961,7 @@ class Battle { } } - for (const { sprite, drawX, offsetDrawY } of spriteData) { + for (const { sprite, drawX, canvasOffsetDrawY } of spriteData) { if (!(sprite instanceof BattleCharacter)) { continue } @@ -964,7 +972,7 @@ class Battle { ctx.font = '5px pixel-font' const width = ctx.measureText(label).width + 4 const x = Math.round(drawX - width / 2) - const y = Math.round(offsetDrawY) + const y = Math.round(canvasOffsetDrawY) let textFillStyle if (sprite.team === this.playerCharacter.team) { @@ -982,7 +990,6 @@ class Battle { ctx.fillText(label, x + 3, y + 7) } } - // ctx.restore() // End camera-translated drawing if (this.nearlyDeadAnim) { const height = Math.min(60, this.canvas.height / 4) @@ -1084,10 +1091,12 @@ class Battle { } // Don't let the characters go out of bounds + /* for (const character of this.getAllBattleCharacters()) { character.x = Math.min(this.battlefieldMaxX, Math.max(this.battlefieldMinX, character.x)) character.y = Math.min(this.battlefieldMaxY, Math.max(this.battlefieldMinY, character.y)) } + */ this.camera.update(dt) @@ -1149,7 +1158,7 @@ class Battle { changeLeader(newCharacter) { if (newCharacter) { this.playerCharacter = newCharacter - this.camera.follow(newCharacter) + // this.camera.follow(newCharacter) newCharacter.atbBar.queuedActions.splice(0) newCharacter.isExecutingChain = false this.showTargetTypeMenu() @@ -1348,9 +1357,9 @@ class MagicProjectile { const actionKB = 'knockbackMultiplier' in this.action ? this.action.knockbackMultiplier : 1 - this.target.xvel += 2 * xvel * this.target.knockbackMultiplier * actionKB - this.target.yvel += 2 * yvel * this.target.knockbackMultiplier * actionKB - this.target.zvel += 2 * zvel * this.target.knockbackMultiplier * actionKB + // this.target.xvel += 2 * xvel * this.target.knockbackMultiplier * actionKB + // this.target.yvel += 2 * yvel * this.target.knockbackMultiplier * actionKB + // this.target.zvel += 2 * zvel * this.target.knockbackMultiplier * actionKB this.discarded = true } @@ -1471,11 +1480,11 @@ const basicAI = function() { const battle = new Battle({ teamData: [ {characterData: [ - {x: -55, y: 190, name: 'Ren', hp: 400, maxHP: 400, knownActions: ['fire', 'fira', 'firaga', 'blizz', 'blizzara', 'cure'], determineChain: basicAI}, - {x: -75, y: 225, name: 'Fie', hp: 375, maxHP: 375, knownActions: ['fire', 'blizz', 'blizzara', 'blizzaga', 'aqua', 'aquara', 'curasa'], determineChain: basicAI} + {x: 0, y: 0, name: 'Ren', hp: 400, maxHP: 400, knownActions: ['fire', 'fira', 'firaga', 'blizz', 'blizzara', 'cure'], determineChain: basicAI}, + {x: -100, y: 0, name: 'Fie', hp: 375, maxHP: 375, knownActions: ['fire', 'blizz', 'blizzara', 'blizzaga', 'aqua', 'aquara', 'curasa'], determineChain: basicAI} ]}, {characterData: [ - {x: 80, y: 200, name: 'Manasvin Warmech', hp: 1200, maxHP: 1200, knownActions: ['aqua', 'aquaga', 'manasvinSwipe', 'manasvinRecover'], determineChain: basicAI, knockbackMultiplier: 0} + {x: 0, y: -100, name: 'Manasvin Warmech', hp: 1200, maxHP: 1200, knownActions: ['aqua', 'aquaga', 'manasvinSwipe', 'manasvinRecover'], determineChain: basicAI, knockbackMultiplier: 0} ]} ] }) @@ -1487,12 +1496,15 @@ battle.teams[1].characters[0].image.src = 'img/warmech.png' const camera = battle.camera camera.width = canvas.width camera.height = canvas.height -camera.warpTo(battle.playerCharacter) +// camera.warpTo(battle.playerCharacter) +camera.x = 0 +camera.y = 0 +camera.z = 0 battle.canvas.width = canvas.width battle.canvas.height = canvas.height -battle.backdrop.y = 300 / 2 +battle.backdrop.y = 0 let lastTime = Date.now() @@ -1502,6 +1514,9 @@ function drawLoop() { battle.update(dt) + // camera.z += 1 + // camera.x -= 0.5 + const ctx = canvas.getContext('2d') ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = '#EEE' |
