Commits

Anonymous committed 18f6c17

Started implementing the requestAnimationFrame API

  • Participants
  • Parent commits 610b82c

Comments (0)

Files changed (6)

File jquery.frigame.canvas.js

 			if (typeof animation !== 'number') {
 				if (animation) {
 					animation_options = animation.options;
-					options.posOffsetX = -(animation_options.frameWidth / 2);
-					options.posOffsetY = -(animation_options.frameHeight / 2);
-					options.translateX = options.posx - options.posOffsetX;
-					options.translateY = options.posy - options.posOffsetY;
+					options.translateX = options.posx + animation_options.halfWidth;
+					options.translateY = options.posy + animation_options.halfHeight;
 				}
 			}
 
 			return this;
 		},
 
-		posx: function (x) {
-			var
-				options = this.options;
-
-			if (x !== undefined) {
-				options.posx = x;
-				options.translateX = x - options.posOffsetX;
-
-				return this;
-			} else {
-				return options.posx;
-			}
-		},
-
-		posy: function (y) {
-			var
-				options = this.options;
-
-			if (y !== undefined) {
-				options.posy = y;
-				options.translateY = y - options.posOffsetY;
-
-				return this;
-			} else {
-				return options.posy;
-			}
-		},
-
-		transform: function () {
-			// The transformations are applied in the draw() function
-			return this;
-		},
-
 		draw: function () {
 			var
 				options = this.options,
 					animation_options.offsety + options.multiy + (currentFrame * animation_options.deltay),
 					frameWidth,
 					frameHeight,
-					options.posOffsetX,
-					options.posOffsetY,
+					-(animation_options.halfWidth),
+					-(animation_options.halfHeight),
 					frameWidth,
 					frameHeight
 				);

File jquery.frigame.common.js

 	};
 }
 
+// shim layer with setTimeout fallback by Paul Irish
+window.requestAnimFrame = (function () {
+	return window.requestAnimationFrame || 
+		window.webkitRequestAnimationFrame || 
+		window.mozRequestAnimationFrame || 
+		window.oRequestAnimationFrame || 
+		window.msRequestAnimationFrame || 
+		function (callback, element) {
+			window.setTimeout(callback, 1000 / 60);
+		};
+}());
+
 (function ($) {
 	var
 		friGame = {};
 		groups: {},
 		callbacks: [],
 
+		drawDone: true,
+
 		PrototypeBaseAnimation: {
 			defaults: {
 				imageURL: '',
 				offsety: 0,
 				frameWidth: 0,
 				frameHeight: 0,
+				halfWidth: 0,
+				halfHeight: 0,
 				deltax: 0,
 				deltay: 0,
 				multix: 0,
 					options.frameHeight = img.height - options.offsety;
 				}
 
+				options.halfWidth = options.frameWidth / 2;
+				options.halfHeight = options.frameHeight / 2;
+
 				if (options.type & friGame.ANIMATION_ONCE) {
 					options.once = true;
 				}
 			defaults: {
 				posx: 0,
 				posy: 0,
+				translateX: 0,
+				translateY: 0,
 				posOffsetX: 0,
 				posOffsetY: 0,
-				translateX: 0,
-				translateY: 0,
+				oldPosx: 0,
+				oldPosy: 0,
 				idleCounter: 0,
 				currentFrame: 0,
+				multix: 0,
+				multiy: 0,
 				angle: 0,
 				factor: 1,
-				multix: 0,
-				multiy: 0,
+				oldAngle: 0,
+				oldFactor: 1,
 				factorh: 1,
-				factorv: 1
+				factorv: 1,
+				oldFactorh: 1,
+				oldFactorv: 1
 			},
 
 			init: function (name, options, parent) {
 				return this;
 			},
 
+			posx: function (x) {
+				var
+					options = this.options,
+					animation = options.animation;
+
+				if (x !== undefined) {
+					options.posx = x;
+
+					if (animation) {
+						options.translateX = x + animation.options.halfWidth;
+					} else {
+						options.translateX = x;
+					}
+
+					return this;
+				} else {
+					return options.posx;
+				}
+			},
+
+			posy: function (y) {
+				var
+					options = this.options,
+					animation = options.animation;
+
+				if (y !== undefined) {
+					options.posy = y;
+
+					if (animation) {
+						options.translateY = y + animation.options.halfHeight;
+					} else {
+						options.translateY = y;
+					}
+
+					return this;
+				} else {
+					return options.posy;
+				}
+			},
+
 			rotate: function (angle) {
 				var
 					options = this.options;
 
 				options.angle = angle;
 
-				if (options.animation) {
-					this.transform();
-				}
-
 				return this;
 			},
 
 
 				options.factor = factor;
 
-				if (options.animation) {
-					this.transform();
-				}
-
 				return this;
 			},
 
 					options.factorh = 1;
 				}
 
-				if (options.animation) {
-					this.transform();
-				}
-
 				return this;
 			},
 
 					options.factorv = 1;
 				}
 
-				if (options.animation) {
-					this.transform();
-				}
-
 				return this;
 			},
 
 			}
 		},
 
+		draw: function () {
+			friGame.groups.sceengraph.draw();
+			friGame.drawDone = true;
+		},
+
 		refresh: function () {
 			var
 				callbacks = friGame.callbacks,
 
 			if (sceengraph) {
 				sceengraph.update();
-				sceengraph.draw();
+
+				if (friGame.drawDone) {
+					friGame.drawDone = false;
+					window.requestAnimFrame(friGame.draw);
+				}
 			}
 
 			for (i = 0; i < len_callbacks; i += 1) {

File jquery.frigame.dom.js

 			return this;
 		},
 
-		posx: function (x) {
-			var
-				options = this.options;
-
-			if (x !== undefined) {
-				this.dom.css('left', [String(x - options.posOffsetX), 'px'].join(''));
-
-				options.posx = x;
-
-				return this;
-			} else {
-				return options.posx;
-			}
-		},
-
-		posy: function (y) {
-			var
-				options = this.options;
-
-			if (y !== undefined) {
-				this.dom.css('top', [String(y - options.posOffsetY), 'px'].join(''));
-
-				options.posy = y;
-
-				return this;
-			} else {
-				return options.posy;
-			}
-		},
-
 		transform: function () {
 			var
 				dom = this.dom,
 			var
 				options = this.options,
 				currentFrame = options.currentFrame,
-				animation_options;
+				animation_options,
+				posx = options.posx,
+				posy = options.posy,
+				angle = options.angle,
+				factor = options.factor,
+				factorh = options.factorh,
+				factorv = options.factorv;
 
 			if (options.animation) {
+				if (posx !== options.oldPosx) {
+					this.dom.css('left', [String(posx - options.posOffsetX), 'px'].join(''));
+					options.oldPosx = posx;
+				}
+
+				if (posy !== options.oldPosy) {
+					this.dom.css('top', [String(posy - options.posOffsetY), 'px'].join(''));
+					options.oldPosy = posy;
+				}
+
+				if ((angle !== options.oldAngle) ||
+						(factor !== options.oldFactor) ||
+						(factorh !== options.oldFactorh) ||
+						(factorv !== options.oldFactorv)) {
+					this.transform();
+					options.oldAngle = angle;
+					options.oldFactor = factor;
+					options.oldFactorh = factorh;
+					options.oldFactorv = factorv;
+				}
+
 				animation_options = options.animation.options;
 				if ((options.idleCounter === 0) && (animation_options.numberOfFrame !== 1)) {
 					this.dom.css('background-position', [

File jquery.frigame.webgl.js

 			var
 				gl = friGame.gl,
 				options = this.options,
-				halfWidth = options.frameWidth / 2,
-				halfHeight = options.frameHeight / 2,
+				halfWidth = options.halfWidth,
+				halfHeight = options.halfHeight,
 				vertices,
 				vertexPositionBuffer;
 
 			if (typeof animation !== 'number') {
 				if (animation) {
 					animation_options = animation.options;
-					options.posOffsetX = -(animation_options.frameWidth / 2);
-					options.posOffsetY = -(animation_options.frameHeight / 2);
-					options.translateX = options.posx - options.posOffsetX;
-					options.translateY = options.posy - options.posOffsetY;
+					options.translateX = options.posx + animation_options.halfWidth;
+					options.translateY = options.posy + animation_options.halfHeight;
 				}
 			}
 
 			return this;
 		},
 
-		posx: function (x) {
-			var
-				options = this.options;
-
-			if (x !== undefined) {
-				options.posx = x;
-				options.translateX = x - options.posOffsetX;
-
-				return this;
-			} else {
-				return options.posx;
-			}
-		},
-
-		posy: function (y) {
-			var
-				options = this.options;
-
-			if (y !== undefined) {
-				options.posy = y;
-				options.translateY = y - options.posOffsetY;
-
-				return this;
-			} else {
-				return options.posy;
-			}
-		},
-
-		transform: function () {
-			// The transformations are applied in the draw() function
-			return this;
-		},
-
 		draw: function () {
 			var
 				options = this.options,

File tests/transformation/test1_dom.html

+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="jquery.js"></script>
+        <script src="../../jquery.frigame.common.js"></script>
+        <script src="../../jquery.frigame.dom.js"></script>
+        <script>
+            $(function(){
+                var animation = $.friGame.Animation({imageURL: "sh.png", type: $.friGame.ANIMATION_HORIZONTAL, numberOfFrame: 4, delta: 32, rate: 300});
+
+
+				$.friGame.startGame(function () {
+					$.friGame.playground()
+						.addSprite("rotate",{animation: animation, posx: 0, posy: 16})
+						.addSprite("scale",{animation: animation, posx: 80, posy: 16})
+						.addSprite("rotateScale",{animation: animation, posx: 160, posy: 16})
+						.addSprite("scaleRotate",{animation: animation, posx: 240, posy: 16});
+
+					$.friGame.sprites.rotate.rotate(Math.PI / 4);
+					$.friGame.sprites.scale.scale(2);
+					$.friGame.sprites.rotateScale.rotate(Math.PI / 4).scale(2);
+					$.friGame.sprites.scaleRotate.scale(2).rotate(Math.PI / 4);
+				});
+            });
+        </script>
+    </head>
+    <body style="position: relative;">
+        <h2>1st 45deg rotate, 2nd 2x scale, two last both combined:</h2>
+        <div id="playground" style="position: absolute; width: 350px; height: 64px; background: white"></div>
+    </body>
+</html>

File tests/transformation/test2_dom.html

+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="jquery.js"></script>
+        <script src="../../jquery.frigame.common.js"></script>
+        <script src="../../jquery.frigame.dom.js"></script>
+        <script>
+            $(function(){
+                var animation = $.friGame.Animation({imageURL: "sh.png", type: $.friGame.ANIMATION_HORIZONTAL, numberOfFrame: 4, delta: 32, rate: 300});
+
+				$.friGame.startGame(function () {
+					var angle = 45, angle_rad = (angle * Math.PI) / 180;
+
+					$.friGame.playground()
+						.addSprite("aRotateScale",{animation: animation, posx: 16, posy: 16})
+						.addSprite("scaleARotate",{animation: animation, posx: 80, posy: 16})
+						.addSprite("rotateAScale",{animation: animation, posx: 180, posy: 16})
+						.addSprite("aScaleRotate",{animation: animation, posx: 240, posy: 16});
+
+					$.friGame.registerCallback(function(){
+							$.friGame.sprites.aRotateScale.rotate(angle_rad).scale(2);
+							$.friGame.sprites.scaleARotate.scale(2).rotate(-angle_rad);
+							$.friGame.sprites.rotateAScale.rotate(Math.PI / 4).scale(Math.cos(angle_rad)*2);
+							$.friGame.sprites.aScaleRotate.scale(-Math.cos(angle_rad)*2).rotate(Math.PI / 4);
+							angle -= 1;
+							angle %= 360;
+							angle_rad = (angle * Math.PI) / 180;
+						}, 30);
+				});
+            });
+        </script>
+    </head>
+    <body style="position: relative;">
+        <h2>Animated rotation (CCW, CW), 2x scale (two sprites); 45deg rotation, Animated scale (two sprites out-of-phase):</h2>
+        <div id="playground" style="position: absolute; width: 350px; height: 64px; background: white"></div>
+    </body>
+</html>
+