Browse Source

Basic easing demo, and some mouse event handling stuff

feature/coffeescript
Sven Slootweg 8 years ago
parent
commit
29aab13dcd
  1. 240
      compiled/radium.js
  2. BIN
      easing/assets/images/cursor.png
  3. 33
      easing/core.coffee
  4. 7
      easing/easing.css
  5. 7
      easing/easing.css.map
  6. 29
      easing/easing.js
  7. 9
      easing/easing.scss
  8. 2
      radium/engine.ease.coffee
  9. 2
      radium/object.coffee
  10. 34
      radium/scene.coffee
  11. 1
      watch.sh

240
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;

BIN
easing/assets/images/cursor.png

After

Width: 82  |  Height: 82  |  Size: 1.4 KiB

33
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()
)
)

7
easing/easing.css

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

7
easing/easing.css.map

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

29
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);

9
easing/easing.scss

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

2
radium/engine.ease.coffee

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

2
radium/object.coffee

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

34
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

1
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
Loading…
Cancel
Save