diff --git a/registration-system/view/signups/game1/chars/bernd.svg b/registration-system/view/signups/game1/chars/bernd.svg index 27ddaae090dbcfbae14a7f5f7da8ea00d5cca43f..c8cf1447bfcb85d794a90ecb9e67f09cad0e32a7 100644 Binary files a/registration-system/view/signups/game1/chars/bernd.svg and b/registration-system/view/signups/game1/chars/bernd.svg differ diff --git a/registration-system/view/signups/game1/js/character.js b/registration-system/view/signups/game1/js/character.js index fca0afb94d8c570e6c4674cb11136fa5f4f54b2a..3c3768e244ac7db1995b5239e8b7d4e727c78e6a 100644 --- a/registration-system/view/signups/game1/js/character.js +++ b/registration-system/view/signups/game1/js/character.js @@ -6,6 +6,7 @@ function Char(svg, options) { this.translation = options.spawn ? options.spawn : this.findSpawn(); this.moveTarget = []; this.maxSpeed = 2; + this.loaded = false; var self = this; d3.xml('chars/bernd.svg', 'image/svg+xml', function(xml) { @@ -16,7 +17,10 @@ function Char(svg, options) { self.image[0][0].appendChild(this); }); + self.initializeAnimations(); self.updatePosition(); + + self.loaded = true; }); } Char.prototype.findSpawn = function() { @@ -25,7 +29,82 @@ Char.prototype.findSpawn = function() { var bbox = spawn[0][0].getBBox(); return Vec.add(getTranslation(this.svg[0][0], spawn[0][0]), [bbox.x, bbox.y]); } +Char.prototype.initializeAnimations = function() { + var self = this; + + this.animateStep = 0; + this.lastPosition = this.translation.slice(); + this.lastDirection = 2; + this.currentFrame = 0; + this.frames = null; + + this.animations = {}; + + this.image.selectAll('g').filter(function() { + return this.getAttribute('inkscape:groupmode') == 'layer'; + }).each(function() { + var label = this.getAttribute('inkscape:label'); + + var element = d3.select(this) + .style('display', 'block'); + + var frames = []; + element.selectAll('image') + .style('display', 'none') + .each(function() { + frames.push(this); + }); + + self.animations[label] = frames; + }); +} +Char.directionToName = ["UP", "RIGHT", "DOWN", "LEFT"]; Char.prototype.animate = function() { + this.animateStep += 1; + if (this.animateStep <= 8) return; + while (this.animateStep > 8) + this.animateStep -= 8; + + var xSpeed = this.translation[0] - this.lastPosition[0]; + var ySpeed = - this.translation[1] + this.lastPosition[1]; + this.lastPosition = this.translation.slice(); + var speed = Math.max(Math.abs(xSpeed), Math.abs(ySpeed)); // estimate + + var direction = this.lastDirection; + if (speed > g_smallValue) { + if (Math.abs(xSpeed) >= Math.abs(ySpeed)) + direction = (xSpeed >= 0) ? 1 : 3; + else + direction = (ySpeed >= 0) ? 0 : 2; + } + + // hide last visible frame + if (this.frames && this.frames[this.currentFrame]) { + var lastFrame = this.frames[this.currentFrame]; + lastFrame.style.display = 'none'; + } + // change animation + if (direction != this.lastDirection) { + this.lastDirection = direction; + this.currentFrame = 0; + this.frames = this.animations[Char.directionToName[direction]]; + } + // if no current frames available show fallback downwards frame + if (!this.frames || this.frames.length == 0) + this.frames = this.animations['DOWN']; + // if everything fails.. + if (!this.frames || this.frames.length == 0) + return; + + // frames depending on speed + if (speed < g_smallValue) + this.currentFrame = 0; // stand still + else + this.currentFrame += 1; // walk + this.currentFrame %= this.frames.length; + + // show current frame + this.frames[this.currentFrame].style.display = 'block'; } Char.prototype.physics = function() { if (this.moveTarget && this.moveTarget.length == 0) return; @@ -47,7 +126,7 @@ Char.prototype.physics = function() { if (this.pathFinder.canWalkOn(nextPosition[0], nextPosition[1])) Vec.assign(this.translation, nextPosition); else - this.moveTarget.shift(); + this.moveTarget.shift(); this.updatePosition(); } diff --git a/registration-system/view/signups/game1/js/game.js b/registration-system/view/signups/game1/js/game.js index 665642776704e00775ca13e39f30a58be6bb5673..5f5529130b5f42b2e3dc4060fb44f6b20eef7865 100644 --- a/registration-system/view/signups/game1/js/game.js +++ b/registration-system/view/signups/game1/js/game.js @@ -26,11 +26,13 @@ Game.prototype.run = function() { // animate setInterval(function() { - // move player - char.physics(); - char.animate(); - // cam movement - cam.movement(); + if (char.loaded) { + // move player + char.physics(); + char.animate(); + // cam movement + cam.movement(); + } }, 10); svg.on("click", function(d) {