Permalink
Browse files

easier local development

  • Loading branch information...
1 parent b6f625a commit bb2e123329fb553c92cf16018d6b3a7f135abb56 @dkln committed Dec 13, 2011
View
@@ -0,0 +1 @@
+rvm 1.9.3@canvas_library --create
View
@@ -0,0 +1,5 @@
+source :rubygems
+
+group :development do
+ gem 'guard-coffeescript'
+end
View
@@ -0,0 +1,22 @@
+GEM
+ remote: http://rubygems.org/
+ specs:
+ coffee-script (2.2.0)
+ coffee-script-source
+ execjs
+ coffee-script-source (1.1.3)
+ execjs (1.2.12)
+ multi_json (~> 1.0)
+ guard (0.8.8)
+ thor (~> 0.14.6)
+ guard-coffeescript (0.5.2)
+ coffee-script (>= 2.2.0)
+ guard (>= 0.8.3)
+ multi_json (1.0.4)
+ thor (0.14.6)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ guard-coffeescript
View
@@ -0,0 +1,4 @@
+#!/usr/bin/ruby
+#
+guard 'coffeescript', :input => 'demos'
+guard 'coffeescript', :input => 'src', :output => 'lib'
View
@@ -15,18 +15,18 @@ HTML:
Coffeescript:
run = ->
# this is the screen
- stage = new Stage('test_canvas')
+ stage = new CanvasLibrary.Stage('test_canvas')
# create a rectangle
- someShape = new Shape()
+ someShape = new CanvasLibrary.Shape()
someShape.x = 0
someShape.y = 0
someShape.fillStyle 'rgba(0, 0, 0, 1)'
someShape.fillRect 0, 0, 50, 50
# create another rectangle
- otherShape = new Shape()
+ otherShape = new CanvasLibrary.Shape()
otherShape.alpha = .5
otherShape.fillStyle 'rgba(255, 0, 0, 1)'
otherShape.fillRect 0, 0, 25, 25
@@ -39,7 +39,7 @@ Coffeescript:
stage.addChild otherShape
# setup renderer and connect it to the stage and run at 25 fps
- renderer = new Renderer(stage, 25)
+ renderer = new CanvasLibrary.Renderer(stage, 25)
renderer.run()
# tween some stuff
@@ -55,17 +55,17 @@ A DisplayContainer is an object that can hold other graphical objects. These gra
The +x+ and +y+ position of graphical objects are relative and are translated to canvas +x+ and +y+ positions during the rendering process. This rendering process can be triggered by calling the +draw+ function on any displaycontainer.
Nesting objects:
- obj = new Shape()
+ obj = new CanvasLibrary.Shape()
obj.x = 10
obj.y = 10
- otherObj = new Shape()
+ otherObj = new CanvasLibrary.Shape()
otherObj.x = 0
otherObj.y = 0
obj.addChild otherObj
- yetAnotherObj = new Shape()
+ yetAnotherObj = new CanvasLibrary.Shape()
yetAnotherObj.x = 0
yetAnotherObj.y = 0
@@ -80,9 +80,9 @@ Note: The stage is the main screen. This object also acts as an DisplayContainer
The drawing API is almost the same as the Canvas drawing API. If you want to draw paths to the canvas, use the +Shape+ class.
Drawing rectangles:
- stage = new Stage("the_screen");
+ stage = new CanvasLibrary.Stage("the_screen");
- rect = new Shape()
+ rect = new CanvasLibrary.Shape()
rect.x = 0
rect.y = 0
rect.fillStyle "rgb(255, 0, 0, 1)"
@@ -97,14 +97,14 @@ Drawing rectangles:
== Loading and drawing bitmaps
Bitmaps can easily be loaded with the +canavaslib.StackedLoader+ class. The +StackedLoader+ manages all your assets so you can preload images or audio assets before rendering all your stuff.
- screen = new Stage("the_screen")
+ screen = new CanvasLibrary.Stage("the_screen")
- StackedLoader.add "image_id", "image", "logo.png"
- StackedLoader.add "another_image", "image", "foo.png"
- StackedLoader.add "and_another_one", "image", "bar.png"
+ CanvasLibrary.StackedLoader.add "image_id", "image", "logo.png"
+ CanvasLibrary.StackedLoader.add "another_image", "image", "foo.png"
+ CanvasLibrary.StackedLoader.add "and_another_one", "image", "bar.png"
- StackedLoader.load =>
- bitmap = StackedLoader.get "image_id"
+ CanvasLibrary.StackedLoader.load =>
+ bitmap = CanvasLibrary.StackedLoader.get "image_id"
screen.addChild bitmap
screen.render
@@ -116,7 +116,7 @@ The +load+ function adds an asset to the loadstack. The +start+ function trigger
You can use the +Tween+ class to tween objects between two points.
...
- renderer = new Renderer(stage);
+ renderer = new CanvasLibrary.Renderer(stage);
renderer.run 25
...
@@ -143,7 +143,7 @@ Example of tween and mouse interaction:
== Pixel fun
- pixels = new PixelSprite()
+ pixels = new CanvasLibrary.PixelSprite()
pixels.drawPixel 0, 0, 'rgba(128, 128, 128, 1)'
pixels.drawPixel 1, 0, 'rgba(128, 128, 128, 1)'
pixels.drawPixel 2, 0, 'rgba(128, 128, 128, 1)'
@@ -157,12 +157,19 @@ Example of tween and mouse interaction:
Or even better, load a retro sprite file!
- StackedLoader.add 'logo', 'sprite', 'logo.spr'
+ CanvasLibrary.StackedLoader.add 'logo', 'sprite', 'logo.spr'
- StackedLoader.load =>
- logo = StackedLoader.get 'logo'
+ CanvasLibrary.StackedLoader.load =>
+ logo = CanvasLibrary.StackedLoader.get 'logo'
screen.addChild logo
+== Development
+
+Want to extend the library? If you are using rvm that should be a breeze!
+
+ bundle install
+ guard
+
= License and credits
Use it and have fun with it! Comments, cakes and hugs are welcome! Just stick to the license!
View
@@ -1,11 +1,11 @@
run = ->
# this is the screen
- stage = new Stage('test_canvas')
+ stage = new CanvasLibrary.Stage('test_canvas')
logo = null
# create a rectangle
- someShape = new Shape()
+ someShape = new CanvasLibrary.Shape()
someShape.id = "someShape"
someShape.x = 0
someShape.y = 0
@@ -14,7 +14,7 @@ run = ->
someShape.fillRect 0, 0, 50, 50
# create another rectangle
- otherShape = new Shape()
+ otherShape = new CanvasLibrary.Shape()
otherShape.id = "otherShape"
otherShape.alpha = .5
otherShape.fillStyle 'rgba(255, 0, 0, 1)'
@@ -32,7 +32,7 @@ run = ->
Tween.to otherShape, 500, { scaleX: 1, scaleY: 1 }
# make this shape follow the mouse
- mouseShape = new Shape()
+ mouseShape = new CanvasLibrary.Shape()
mouseShape.id = "mouseShape"
mouseShape.beginPath()
mouseShape.fillStyle 'rgba(255, 0, 0, 1)'
@@ -48,7 +48,7 @@ run = ->
mouseShape.y = stage.mouseY
# some text
- text = new TextField()
+ text = new CanvasLibrary.TextField()
text.id = "text"
text.mouseEnabled = true
text.useHandCursor = true
@@ -67,16 +67,16 @@ run = ->
Tween.kill logo
Tween.to logo, 500, { x: stage.mouseX, y: stage.mouseY }
- moreShapes = new Sprite()
+ moreShapes = new CanvasLibrary.Sprite()
moreShapes.x = 0
moreShapes.y = 0
- moreShape1 = new Shape()
+ moreShape1 = new CanvasLibrary.Shape()
moreShape1.id = "moreShape1"
moreShape1.fillStyle 'rgba(0, 255, 0, 1)'
moreShape1.fillRect 0, 0, 50, 50
- moreShape2 = new Shape()
+ moreShape2 = new CanvasLibrary.Shape()
moreShape2.x = 10
moreShape2.y = 10
moreShape2.fillStyle 'rgba(0, 255, 255, 1)'
@@ -95,7 +95,6 @@ run = ->
# load an external bitmap
StackedLoader.add 'logo', 'bitmap', 'logo.png'
- #StackedLoader.add 'sprite', 'sprite', 'logo.spr'
StackedLoader.load ->
logo = StackedLoader.get('logo')
@@ -104,11 +103,8 @@ run = ->
logo.alpha = 0
Tween.to logo, 10000, { alpha: 1 }
- #sprite = StackerLoader.get('sprite')
- #stage.addChild sprite
-
# setup renderer and connect it to the stage and run at 25 fps
- renderer = new Renderer(stage, 25)
+ renderer = new CanvasLibrary.Renderer(stage, 25)
renderer.run()
# tween some stuff
View
@@ -1,17 +1,18 @@
(function() {
var run;
- var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
run = function() {
var logo, moreShape1, moreShape2, moreShapes, mouseShape, otherShape, renderer, someShape, stage, text;
- stage = new Stage('test_canvas');
+ var _this = this;
+ stage = new CanvasLibrary.Stage('test_canvas');
logo = null;
- someShape = new Shape();
+ someShape = new CanvasLibrary.Shape();
someShape.id = "someShape";
someShape.x = 0;
someShape.y = 0;
someShape.fillStyle('rgba(0, 0, 0, 1)');
someShape.fillRect(0, 0, 50, 50);
- otherShape = new Shape();
+ otherShape = new CanvasLibrary.Shape();
otherShape.id = "otherShape";
otherShape.alpha = .5;
otherShape.fillStyle('rgba(255, 0, 0, 1)');
@@ -21,19 +22,19 @@
otherShape.scaleX = 1;
otherShape.scaleY = 1;
otherShape.mouseEnabled = true;
- otherShape.onMouseOver = __bind(function() {
+ otherShape.onMouseOver = function() {
return Tween.to(otherShape, 500, {
scaleX: 2,
scaleY: 2
});
- }, this);
- otherShape.onMouseOut = __bind(function() {
+ };
+ otherShape.onMouseOut = function() {
return Tween.to(otherShape, 500, {
scaleX: 1,
scaleY: 1
});
- }, this);
- mouseShape = new Shape();
+ };
+ mouseShape = new CanvasLibrary.Shape();
mouseShape.id = "mouseShape";
mouseShape.beginPath();
mouseShape.fillStyle('rgba(255, 0, 0, 1)');
@@ -42,40 +43,40 @@
mouseShape.fill();
mouseShape.x = 300;
mouseShape.y = 300;
- stage.onMouseMove = __bind(function() {
+ stage.onMouseMove = function() {
mouseShape.x = stage.mouseX;
return mouseShape.y = stage.mouseY;
- }, this);
- text = new TextField();
+ };
+ text = new CanvasLibrary.TextField();
text.id = "text";
text.mouseEnabled = true;
text.useHandCursor = true;
text.text = "canvas_library demo";
text.x = 10;
text.y = 450;
- text.onMouseOver = __bind(function() {
+ text.onMouseOver = function() {
return text.fillStyle = 'rgba(255, 0, 0, 1)';
- }, this);
- text.onMouseOut = __bind(function() {
+ };
+ text.onMouseOut = function() {
return text.fillStyle = 'rgba(0, 0, 0, 1)';
- }, this);
- stage.onMouseUp = __bind(function() {
+ };
+ stage.onMouseUp = function() {
if (logo) {
Tween.kill(logo);
return Tween.to(logo, 500, {
x: stage.mouseX,
y: stage.mouseY
});
}
- }, this);
- moreShapes = new Sprite();
+ };
+ moreShapes = new CanvasLibrary.Sprite();
moreShapes.x = 0;
moreShapes.y = 0;
- moreShape1 = new Shape();
+ moreShape1 = new CanvasLibrary.Shape();
moreShape1.id = "moreShape1";
moreShape1.fillStyle('rgba(0, 255, 0, 1)');
moreShape1.fillRect(0, 0, 50, 50);
- moreShape2 = new Shape();
+ moreShape2 = new CanvasLibrary.Shape();
moreShape2.x = 10;
moreShape2.y = 10;
moreShape2.fillStyle('rgba(0, 255, 255, 1)');
@@ -101,7 +102,7 @@
alpha: 1
});
});
- renderer = new Renderer(stage, 25);
+ renderer = new CanvasLibrary.Renderer(stage, 25);
renderer.run();
Tween.to(someShape, 5000, {
x: 100,
@@ -116,5 +117,7 @@
scaleY: 1
});
};
+
window.onload = run;
+
}).call(this);
View
@@ -1,2 +0,0 @@
-#!/bin/sh
-coffee -w -c demos/*.coffee
View
@@ -1,2 +0,0 @@
-#!/bin/sh
-coffee -w -b -o lib/ -c src/*.coffee
@@ -0,0 +1,2 @@
+
+
Oops, something went wrong. Retry.

0 comments on commit bb2e123

Please sign in to comment.