major refactor of sprite.js, closing in on a final 0.1 API. New chain…

…able methods while still allowing use of fast variables in many cases. Bugfixes. Tons of new Sprite-tests, now over 110+ unittests. Quick Sprite API reference in README.
jduff · Mar 23, 2011 · 2fff8ce · 2fff8ce
1 parent f9c6e12
commit 2fff8ce
Show file tree

Hide file tree

Showing 6 changed files with 678 additions and 388 deletions.
diff --git a/README.rdoc b/README.rdoc
@@ -19,7 +19,7 @@ Licensed under LGPL so you're free to use it for commercial projects.
 * Documented code and explained examples
 
 Jaws also...
-* Does <canvas>-sprites (exprimental HTML-based sprites)
+* Does <canvas>-sprites (and exprimental HTML-based sprites)
 * Does not depend on any other javascript library
 * Doesn't try to force a certain "JS class pattern" on you, just pure javascript as mother nature intended it
 * Tries to make assets (images, music, json data) in webgames as easy as possible
@@ -143,3 +143,38 @@ A rule of thumb is that a file foo.js will include a contructor named Foo().
   </body>
   </html>
 
+== Sprite() 
+=== Chainable functions (they all return this)
+  sprite.setImage(resource)         // sets new image from an image, canvas or string representing an asset ("foo.png")
+  sprite.flip()                     // flips sprite horizontally
+  sprite.rotate(angle)              // modify angle
+  sprite.rotateTo(angle)            // set angle
+  sprite.move(x,y)                  // modify x/y
+  sprite.moveTo(x,y)                // set x/y
+  sprite.setWidth(width)            // sets width through scaling
+  sprite.setHeight(height)          // sets height through scaling
+  sprite.setX(x)                    // sets x
+  sprite.setY(y)                    // sets y
+  sprite.resize(width,height)       // modify width/height. Modifies scale_factor_x/scale_factor_y.
+  sprite.resizeTo(width,height)     // set fixed width/height. Modifies scale_factor_x/scale_factor_y.
+  sprite.scale(scale_factor)        // scale sprite by scale_factor. Modifies width/height.
+  sprite.scaleWidth(scale_factor)   // scale sprite horizontally by scale_factor. Modifies width.
+  sprite.scaleHeight(scale_factor)  // scale sprite vertically by scale_factor. Modifies height.
+  sprite.anchor(anchor_string)      // anchor x/y to a point on the sprite. For example "top_left", "center", "center_bottom"
+
+=== Simple variables for faster write/reads of properties
+  sprite.x              // horizontal position  (0 = furthest left)
+  sprite.y              // vertical position    (0 = top)
+  sprite.flipped        // true or false
+  sprite.angle          // 0-360
+  sprite.alpha          // transparency 0=fully transparent, 1=no transperency
+  sprite.image          // image or canvas object
+
+== Simple variables to read (not safe to modify directly!)
+  sprite.width          // width of sprite
+  sprite.height         // height of sprite
+  sprite.scale_factor_x // width scaling
+  sprite.scale_factor_y // height scaling
+
+== Other
+   rect()               // returns a new Rect() perfectly surronding the sprite no matter the anchor
diff --git a/benchmarks/benchmark3.html b/benchmarks/benchmark3.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html> 
+<html>
+  <head>
+    <script src="../jaws.js"></script>
+    <link type="text/css" rel="stylesheet" href="style.css" />
+    <title>Benchmark</title> 
+  <head>
+<body>
+
+  <canvas width=500 height=300></canvas><br />
+  FPS: <span id="fps">0</span>
+
+  <div id="info">
+    Sprites
+  </div>
+
+  <h3>jaws log</h3>
+  <div id="jaws-log"></div>
+
+  <script>
+    var loop = 10000;
+    var fps = document.getElementById("fps")
+    var sprite, image, canvas, context
+
+    function global_setup() {
+      image = jaws.assets.get("plane.png")
+      canvas = document.createElement("canvas")
+      canvas.width = image.width
+      canvas.height = image.height
+      context = canvas.getContext("2d")
+      context.drawImage(image, 0, 0)
+      sprite = new jaws.Sprite({image: canvas, x:100, y:100, center: "center"})
+    }
+
+
+    sprite.draw()function BenchSprite() {
+      this.setup = function() {
+        global_setup()
+      }
+
+      this.draw = function() {
+        for(var i=0; i < loop; i++) {
+          jaws.clear()
+          sprite.draw()
+        }
+        fps.innerHTML = jaws.gameloop.fps
+      }
+    }
+
+    /* --------------------------------------------------------- */
+
+    function BenchSprite2s() {
+      var rotation = 0
+      this.setup = function() {
+        global_setup()
+      }
+
+      this.draw = function() {
+        for(var i=0; i < loop; i++) {
+          jaws.clear()
+          sprite.draw()
+        }
+        fps.innerHTML = jaws.gameloop.fps
+      }
+    }
+
+    jaws.onload = function() {
+      jaws.assets.add("plane.png")
+      jaws.on_keydown("space", function() { jaws.switchGameState(BenchCanvas) })
+      jaws.on_keydown("esc", function()   { jaws.gameloop.stop() })
+      jaws.start(BenchSprite, 200) // Try impossible framerate
+    }
+    </script>
+</body>
+</html>
+