Sprite scale. Set initial action to be the first one. Sprite test to …

…show it works.

TODO.txt

@@ -1,9 +1,18 @@
-* migrate site to php
+ * Start doing unit tests = http://qunitjs.com/
+ * download page - allow user to assemble minified thing from component parts
+ * remove dependencies from the project and make the get sucked in some other way
+ * RSS feed on site
+ * Resize event
+   * callback on all entities
+   * look at Nick's resize code http://onetwenty.org/upload/soupbox/
+   * re-jig the canvas size to make it still fit it's container
+
+old note
+--------
+
 * move lineOnLine and pointInPoly out of the global namespace
 * test multiplayer demo with all three browsers at the same time for a while
-* Make a 'vanilla' project people can start from (with Android/iPhone default stuff + flashcanvas)
 * put json2.js fetch into the documentation generation Makefile externals
-* RSS feed on site
 * update FallingGame with audio
 * update AsteroidsTNG with audio
 
@@ -64,6 +73,5 @@
   * http://www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-with-html5-and-canvas/
   * FlashCanvas works fastest from inside same canvas - double canvas width and buffer from left-to-right
 
-* integrate Nick's resize code http://onetwenty.org/upload/soupbox/
 * try and get audio onload working on all platforms
 * fix internet explorer offset bug

js/sprite.js

@@ -4,8 +4,9 @@
 	@param anchor selects which side of the sprite's rectangle to 'anchor' the animation to. e.g. ["center", "bottom"] will anchor the sprite to the ground (side view) whilst ["right", "center"] would anchor it to the right hand side.
 	@param frames is a dictionary containing all actions and their associated set of images and the number of frames to show each image for. For instance: {"stand": [["img/stand.png", 0],], "walk": [["img/walk1.png", 3], ["img/walk2.png", 3],]} where each walk frame is shown for three frames.
 	@param loadedcallback is a function that is called once all of the frames in all action animations are successfully loaded.
+	@param scale is a floating point number that will scale the sprite in size.
 */
-function Sprite(anchor, frames, loadedcallback) {
+function Sprite(anchor, frames, loadedcallback, scale) {
 	var loadcount = 0;
 	var action = "";
 	var framecount = -1;
@@ -16,6 +17,7 @@ function Sprite(anchor, frames, loadedcallback) {
 	this.loaded = false;
 	this.width = 0;
 	this.height = 0;
+	var scale = scale ? scale : 1.0;
 
 	// load up all of the images
 	for (var a in frames) {
@@ -33,7 +35,7 @@ function Sprite(anchor, frames, loadedcallback) {
 						sprite.height = parseInt(img.height);
 						sprite.loaded = true;
 						if (loadedcallback) {
-							loadedcallback();
+							loadedcallback(sprite);
 						}
 					}
 				}
@@ -47,7 +49,7 @@ function Sprite(anchor, frames, loadedcallback) {
 			}
 			sprite.loaded = true;
 			if (loadedcallback) {
-				loadedcallback();
+				loadedcallback(sprite);
 			}
 		}
 	}
@@ -58,10 +60,10 @@ function Sprite(anchor, frames, loadedcallback) {
 			return 0;
 		},
 		"right": function(frame) {
-			return frame.width;
+			return frame.width * scale;
 		},
 		"center": function(frame) {
-			return frame.width / 2;
+			return frame.width * scale / 2;
 		}
 	}
 
@@ -70,10 +72,10 @@ function Sprite(anchor, frames, loadedcallback) {
 			return 0;
 		},
 		"bottom": function(frame) {
-			return frame.height;
+			return frame.height * scale;
 		},
 		"center": function(frame) {
-			return frame.height / 2;
+			return frame.height * scale / 2;
 		}
 	}
 
@@ -123,6 +125,11 @@ function Sprite(anchor, frames, loadedcallback) {
 		frame = newframe;
 	}
 
+	/** Gets the current size of the current frame, scaled appropriately. **/
+	this.get_size = function() {
+		return [this.width * scale, this.height * scale];
+	}
+
 	// increment frame counter etc.
 	this._update = function() {
 		framecount -= 1;
@@ -141,13 +148,13 @@ function Sprite(anchor, frames, loadedcallback) {
 	// draw this sprite on canvas c at position with respect to the anchor specified
 	this._draw = function(c, pos) {
 		var i = frames[action][frame][0];
-		c.drawImage(i, pos[0] - calc_x[anchor[0]](i), pos[1] - calc_y[anchor[1]](i));
+		c.drawImage(i, pos[0] - calc_x[anchor[0]](i), pos[1] - calc_y[anchor[1]](i), scale * this.width, scale * this.height);
 	}
 
 	// returns the axis-aligned bounding-box of this sprite	for the current frame
 	this._aabb = function(pos) {
 		var i = frames[action][frame][0];
-		return [pos[0] - calc_x[anchor[0]](i), pos[1] - calc_y[anchor[1]](i), i.width, i.height];
+		return [pos[0] - calc_x[anchor[0]](i), pos[1] - calc_y[anchor[1]](i), i.width * scale, i.height * scale];
 	}
 
 	/** Call this method from inside the owner entity's update() method. */
@@ -165,6 +172,12 @@ function Sprite(anchor, frames, loadedcallback) {
 		@param pos is the position to get the aabb relative to (factors the anchor point in too).
 	**/
 	this.aabb = function() { return [0, 0, 0, 0]; };
+
+	// set the action to the first one available by default
+	for (var a in frames) {
+		this.action(a);
+		break;
+	}
 }
 
 /**

tests/sprite.html

@@ -0,0 +1,104 @@
+<html>
+<head>
+	<meta charset='utf-8'> 
+	<!-- ***** Load flashcanvas for Internet Explorer compatibility ***** -->
+
+	<!--[if lt IE 9]>
+		<script type="text/javascript" src="flashcanvas/bin/flashcanvas.js"></script>
+	<![endif]-->
+
+	<!-- ***** load the jsGameSoup library and define our game objects and launch function ***** -->
+
+	<script src="../js/jsgamesoup.js"></script>
+	<script src="../js/sprite.js"></script>
+	<script>
+	function WobblePlane(gs) {
+		var s = new Sprite(["center", "center"], {"default": [["plane-1.png", 3], ["plane-2.png", 3], ["plane-3.png", 3]]});
+
+		this.update = function() {
+			s.update();
+		}
+
+		this.draw = function(c) {
+			s.draw(c, [gs.width / 2.0 + 100 * Math.sin(gs.frameCount * 0.05), gs.height / 2.0]);
+		}
+	}
+
+	function SmallPlane(gs) {
+		var x = 0.5;
+		var y = 0.5;
+		var s = new Sprite(["center", "center"], {"default": [["planeb-1.png", 3], ["planeb-2.png", 3]]}, false, 0.5);
+
+		this.update = function() {
+			s.update();
+		}
+
+		this.draw = function(c) {
+			s.draw(c, [gs.width / 2.0, gs.height / 3.0]);
+		}
+	}
+
+	JSGameSoup.ready(function() {
+		// use the DIV tag with Id of 'surface' as our game surface
+		var gs = new JSGameSoup("surface", 30);
+		var images = ["plane-1.png", "plane-2.png", "plane-3.png"];
+		Sprite.preload(images, function() {
+			// add an instance of the TestSprite class
+			gs.addEntity(new WobblePlane(gs));
+			gs.addEntity(new SmallPlane(gs));
+		});
+		// launch the game
+		gs.launch();
+	});
+	</script>
+
+	<!-- ***** basic style for our demo page to fill the screen ***** -->
+	<style>
+		html, body {
+			margin: 0px;
+			padding: 0px;
+			overflow: hidden;
+		}
+		div {
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			top: -1px;
+			left: -1px;
+		}
+	</style>
+
+	<!-- ***** iPod/iPad and Android compatibility ***** -->
+
+	<!-- icon for the ipod -->
+	<link rel="apple-touch-icon" href="ipod-icon.png">
+	<!-- this is a web app -->
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<!-- default size apple viewport -->
+	<meta name="viewport" content="width=850">
+	<!-- app style status bar -->
+	<meta name="apple-mobile-web-app-status-bar-style" content="black">
+	<style type="text/css">
+	<!--
+		* {
+			/* disable callout sheet */
+			-webkit-touch-callout: none;
+			/* disable highlighting links when tapped */
+			-webkit-tap-highlight-color: rgba(0,0,0,0);
+			/* prevent automatic resizing of text */
+			-webkit-text-size-adjust: none;
+			/* disable copy paste */
+			-webkit-user-select: none;
+		}
+
+		/* allow copy paste for some elements */
+		.copypaste {
+			-webkit-user-select: text;
+		}
+	-->
+	</style>
+</head>
+<body>
+	<div id='surface'></div>
+</body>
+</html>