Basic easing demo, and some mouse event handling stuff

compiled/radium.js

@@ -246,6 +246,193 @@
 
   })();
 
+  Engine.prototype.draw = {
+    _startPath: (function(_this) {
+      return function(surface, options) {
+        var _ref;
+        surface = _this.getSurface(surface);
+        if ((_ref = !options._is_text) != null ? _ref : false) {
+          surface.beginPath();
+        }
+        return surface;
+      };
+    })(this),
+    _finishPath: (function(_this) {
+      return function(surface, options) {
+        var _ref, _ref1, _ref10, _ref11, _ref12, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
+        if ((_ref = options.stroke) != null ? _ref : true) {
+          surface.lineWidth = (_ref1 = (_ref2 = options.lineWidth) != null ? _ref2 : (_ref3 = options.pen) != null ? _ref3.lineWidth : void 0) != null ? _ref1 : 1;
+          surface.strokeStyle = (_ref4 = (_ref5 = options.lineColor) != null ? _ref5 : (_ref6 = options.pen) != null ? _ref6.lineColor : void 0) != null ? _ref4 : "black";
+          if ((_ref7 = options._is_text) != null ? _ref7 : false) {
+            surface.strokeText(options.text, options.x, options.y);
+          } else {
+            surface.stroke();
+          }
+        }
+        if ((_ref8 = options.fill) != null ? _ref8 : false) {
+          surface.fillStyle = (_ref9 = (_ref10 = options.fillColor) != null ? _ref10 : (_ref11 = options.pen) != null ? _ref11.fillColor : void 0) != null ? _ref9 : "white";
+          if ((_ref12 = options._is_text) != null ? _ref12 : false) {
+            return surface.fillText(options.text, options.x, options.y);
+          } else {
+            return surface.fill();
+          }
+        }
+      };
+    })(this),
+    _getTextWidth: (function(_this) {
+      return function(surface, text, options) {
+        var width;
+        _this._applyTextContext(surface, options);
+        width = surface.measureText(text).width;
+        surface.restore();
+        return width;
+      };
+    })(this),
+    _applyTextContext: (function(_this) {
+      return function(surface, options) {
+        var font_family, font_size, font_style, font_weight, scale, _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
+        font_family = (_ref = options.font) != null ? _ref : "sans-serif";
+        font_size = (_ref1 = options.size) != null ? _ref1 : 16;
+        font_weight = (_ref2 = options.weight) != null ? _ref2 : "normal";
+        font_style = (_ref3 = options.style) != null ? _ref3 : "normal";
+        scale = (_ref4 = options.scale) != null ? _ref4 : 1;
+        surface.save();
+        surface.font = "" + font_weight + " " + font_style + " " + font_size + "px '" + font_family + "'";
+        surface.globalAlpha = (_ref5 = options.alpha) != null ? _ref5 : 1;
+        return surface.scale(scale, scale);
+      };
+    })(this),
+    line: (function(_this) {
+      return function(x1, y1, x2, y2, options, surface) {
+        if (options == null) {
+          options = {};
+        }
+        if (surface == null) {
+          surface = "";
+        }
+        surface = _this._startPath(surface, options);
+        surface.moveTo(x1, y1);
+        surface.lineTo(x2, y2);
+        return _this._finishPath(surface, options);
+      };
+    })(this),
+    rectangle: (function(_this) {
+      return function(x1, y1, x2, y2, options, surface) {
+        if (options == null) {
+          options = {};
+        }
+        if (surface == null) {
+          surface = "";
+        }
+        surface = _this._startPath(surface, options);
+        surface.rect(x1, y1, x2 - x1, y2 - y1);
+        return _this._finishPath(surface, options);
+      };
+    })(this),
+    boxEllipse: (function(_this) {
+      return function(x1, y1, x2, y2, options, surface) {
+        var rx, ry, x, y;
+        if (options == null) {
+          options = {};
+        }
+        if (surface == null) {
+          surface = "";
+        }
+        x = (x1 + x2) / 2;
+        y = (y1 + y2) / 2;
+        rx = (x2 - x1) / 2;
+        ry = (y2 - y1) / 2;
+        return _this.radiusEllipse(x, y, rx, ry, options, surface);
+      };
+    })(this),
+    radiusEllipse: (function(_this) {
+      return function(x, y, rx, ry, options, surface) {
+        var i, step, _i, _ref, _ref1;
+        if (options == null) {
+          options = {};
+        }
+        if (surface == null) {
+          surface = "";
+        }
+        surface = _this._startPath(surface, options);
+        step = (_ref = options.step) != null ? _ref : 0.1;
+        if (rx === ry) {
+          surface.arc(x, y, rx, 0, 2 * Math.PI, false);
+        } else {
+          surface.moveTo(x + rx, y);
+          for (i = _i = 0, _ref1 = Math.PI * 2 + step; 0 <= _ref1 ? _i <= _ref1 : _i >= _ref1; i = 0 <= _ref1 ? ++_i : --_i) {
+            surface.lineTo(x + (Math.cos(i) * rx), y + (Math.sin(i) * ry));
+          }
+        }
+        return _this._finishPath(surface, options);
+      };
+    })(this),
+    boxPolygon: (function(_this) {
+      return function(x1, y1, x2, y2, sides, options, surface) {
+        if (options == null) {
+          options = {};
+        }
+        if (surface == null) {
+          surface = "";
+        }
+        return pass;
+      };
+    })(this),
+    radiusPolygon: (function(_this) {
+      return function(x, y, r, sides, options, surface) {
+        if (options == null) {
+          options = {};
+        }
+        if (surface == null) {
+          surface = "";
+        }
+        return pass;
+      };
+    })(this),
+    text: (function(_this) {
+      return function(x, y, text, options, surface) {
+        var text_width;
+        if (options == null) {
+          options = {};
+        }
+        if (surface == null) {
+          surface = "";
+        }
+        if (options.alignment == null) {
+          options.alignment = "left";
+        }
+        if (options.scale == null) {
+          options.scale = 1;
+        }
+        options._is_text = true;
+        options.text = text;
+        options.y = y;
+        if (options.fill == null) {
+          options.fill = true;
+        }
+        if (options.fillColor == null) {
+          options.fillColor = "black";
+        }
+        if (options.stroke == null) {
+          options.stroke = false;
+        }
+        if (alignment === "left") {
+          options.x = x;
+        } else {
+          text_width = _this._getTextWidth(text, options);
+          if (alignment === "center") {
+            options.x = x - ((text_width / 2) * scale * scale);
+          } else if (alignment === "right") {
+            options.x = x - text_width;
+          }
+        }
+        _this._startPath(surface, options);
+        _this._finishPath(surface, options);
+        return surface.restore();
+      };
+    })(this)
+  };
+
   Engine.prototype.ease = {
     _calculateElasticValues: function(duration, amplitude, period, change, inout) {
       var overshoot;
@@ -1057,7 +1244,9 @@
         mouseover: this.onMouseOver,
         mouseout: this.onMouseOut,
         create: this.onCreate,
-        step: this.onStep
+        step: this.onStep,
+        click: this.onClick,
+        click_global: this.onClickGlobal
       };
       switch (name) {
         case "draw":
@@ -1261,6 +1450,9 @@
       this.iteration = __bind(this.iteration, this);
       this.checkActive = __bind(this.checkActive, this);
       this.removeTargetSurface = __bind(this.removeTargetSurface, this);
+      this.handleMouseDown = __bind(this.handleMouseDown, this);
+      this.handleMouseUp = __bind(this.handleMouseUp, this);
+      this.handleClick = __bind(this.handleClick, this);
       this.addTargetSurface = __bind(this.addTargetSurface, this);
       this.instances = {};
       this.surfaces = [];
@@ -1285,9 +1477,55 @@
           return _this.checkMouseCollisions();
         };
       })(this));
+      $(surface).on("click.radium", (function(_this) {
+        return function(event) {
+          return _this.handleClick(event);
+        };
+      })(this));
+      $(surface).on("mouseup.radium", (function(_this) {
+        return function(event) {
+          return _this.handleMouseUp(event);
+        };
+      })(this));
+      $(surface).on("mousedown.radium", (function(_this) {
+        return function(event) {
+          return _this.handleMouseDown(event);
+        };
+      })(this));
       return this.checkActive();
     };
 
+    Scene.prototype.handleClick = function(event) {
+      var id, instance, _ref;
+      _ref = this.instances;
+      for (id in _ref) {
+        instance = _ref[id];
+        instance.callEvent("click_global", {
+          x: this.mouse_x,
+          y: this.mouse_y,
+          button: event.which
+        });
+        if (instance.checkPointCollision(this.mouse_x, this.mouse_y)) {
+          instance.callEvent("click", {
+            x: this.mouse_x,
+            y: this.mouse_y,
+            button: event.which
+          });
+        }
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    };
+
+    Scene.prototype.handleMouseUp = function(event) {
+      return pass;
+    };
+
+    Scene.prototype.handleMouseDown = function(event) {
+      return pass;
+    };
+
     Scene.prototype.removeTargetSurface = function(surface) {
       this.surfaces = this.surfaces.filter(function(obj) {
         return obj !== surface;

easing/core.coffee

@@ -0,0 +1,33 @@
+$(->
+	manager = new ResourceManager("easing/assets")
+	engine = new Engine(manager)
+	window.debug_engine = engine
+
+	# Configure game assets
+	manager.addImages([
+		"images/cursor.png"
+	])
+
+	manager.prepare()
+	manager.preload(null, ->
+		engine.addCanvas($("#gamecanvas"));
+
+		scene = engine.createScene("main")
+
+		engine.createSprite("cursor", "images/cursor.png")
+
+		cursor = engine.createObject("cursor")
+		cursor.sprite = engine.getSprite("cursor")
+
+		cursor.onClickGlobal = (event) ->
+			@x = @engine.ease.quadInOut(@x, event.x - 41, 15)
+			@y = @engine.ease.quadInOut(@y, event.y - 41, 15)
+
+		cursor.onStep = ->
+			return true
+
+		scene.createInstance(cursor, 0, 0)
+
+		engine.start()
+	)
+)

easing/easing.css

@@ -0,0 +1,7 @@
+body {
+  background-color: #ebebeb; }
+
+canvas {
+  background-color: white; }
+
+/*# sourceMappingURL=easing.css.map */

easing/easing.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "file": "",
+  "sources": ["easing.scss"],
+  "names": [],
+  "mappings": "AAAA;EAEC,kBAAkB;;AAGnB;EAEC,kBAAkB"
+}

easing/easing.js

@@ -0,0 +1,29 @@
+// Generated by CoffeeScript 1.7.1
+(function() {
+  $(function() {
+    var engine, manager;
+    manager = new ResourceManager("easing/assets");
+    engine = new Engine(manager);
+    window.debug_engine = engine;
+    manager.addImages(["images/cursor.png"]);
+    manager.prepare();
+    return manager.preload(null, function() {
+      var cursor, scene;
+      engine.addCanvas($("#gamecanvas"));
+      scene = engine.createScene("main");
+      engine.createSprite("cursor", "images/cursor.png");
+      cursor = engine.createObject("cursor");
+      cursor.sprite = engine.getSprite("cursor");
+      cursor.onClickGlobal = function(event) {
+        this.x = this.engine.ease.quadInOut(this.x, event.x - 41, 15);
+        return this.y = this.engine.ease.quadInOut(this.y, event.y - 41, 15);
+      };
+      cursor.onStep = function() {
+        return true;
+      };
+      scene.createInstance(cursor, 0, 0);
+      return engine.start();
+    });
+  });
+
+}).call(this);

easing/easing.scss

@@ -0,0 +1,9 @@
+body
+{
+	background-color: #ebebeb;
+}
+
+canvas
+{
+	background-color: white;
+}

radium/engine.ease.coffee

@@ -273,3 +273,5 @@ class Ease
 		else
 			time = time - 1
 			return -@change / 2 * (time * (time - 2) - 1) + @start
+
+

radium/object.coffee

@@ -15,6 +15,8 @@ class Object
 			mouseout: @onMouseOut
 			create: @onCreate
 			step: @onStep
+			click: @onClick
+			click_global: @onClickGlobal
 		
 		switch name
 			when "draw"

radium/scene.coffee

@@ -13,14 +13,46 @@ class Scene
 	addTargetSurface: (surface) =>
 		@surfaces.push(surface)
 		@engine.updateCanvasSize(surface, @width, @height)
+
 		$(surface).on("mousemove.radium", (event) =>
 			canvas_pos = surface.getBoundingClientRect()
 			@mouse_x = (event.clientX - canvas_pos.left) | 0
 			@mouse_y = (event.clientY - canvas_pos.top) | 0
 			@checkMouseCollisions()
 		)
+
+		$(surface).on("click.radium", (event) =>
+			@handleClick(event)
+		)
+
+		$(surface).on("mouseup.radium", (event) =>
+			@handleMouseUp(event)
+		)
+
+		$(surface).on("mousedown.radium", (event) =>
+			@handleMouseDown(event)
+		)
+
 		@checkActive()
 		
+	handleClick: (event) =>
+		for id, instance of @instances
+			instance.callEvent("click_global", {x: @mouse_x, y: @mouse_y, button: event.which})
+
+			if instance.checkPointCollision(@mouse_x, @mouse_y)
+				instance.callEvent("click", {x: @mouse_x, y: @mouse_y, button: event.which})
+
+		# Prevent default browser events from occurring on eg. right or middle click
+		event.preventDefault()
+		event.stopPropagation()
+		return false
+
+	handleMouseUp: (event) =>
+		pass
+
+	handleMouseDown: (event) =>
+		pass
+
 	removeTargetSurface: (surface) =>
 		@surfaces = @surfaces.filter (obj) -> obj isnt surface
 		$(surface).off("mousemove.radium")
@@ -77,4 +109,4 @@ class Scene
 		
 	changeScene: (scene) =>
 		# This will change to a different scene, but inherit the target surfaces
-		pass
+		pass

watch.sh

@@ -1,3 +1,4 @@
 #!/bin/bash
+coffee -w -c -j easing.coffee -o easing/ easing/*.coffee&
 coffee -w -c -j gemswap.coffee -o gemswap/ gemswap/*.coffee&
 coffee -w -c -j radium.coffee -o compiled/ radium/*.coffee