add cookbook

craftyjs · May 9, 2012 · 8ce836e · 8ce836e
1 parent f3c59fa
commit 8ce836e
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 0 deletions.
diff --git a/_layouts/cookbook.html b/_layouts/cookbook.html
@@ -0,0 +1,20 @@
+--- 
+layout: default
+---
+
+<div id='doc-nav'>
+	<ul id='doc-level-one'>
+		<li>
+			Text
+			<ul>
+				<li><a href='/cookbook/text-sprite'>Text Sprites</a></li>
+			</ul>
+		</li>
+	</ul>
+</div>
+<div id='doc-content'>
+
+<h2> {{ page.title }} </h2>
+
+	{{ content }}
+</div>
diff --git a/cookbook/examples/textsprite/font-hand-24x32.png b/cookbook/examples/textsprite/font-hand-24x32.png
diff --git a/cookbook/examples/textsprite/textsprite.html b/cookbook/examples/textsprite/textsprite.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<head>	
+	<script type="text/javascript" src="http://craftyjs.com/release/0.4.8/crafty.js"></script>
+	<style>
+		body, html { margin:0; padding: 0; overflow:hidden; font-family:Arial; font-size:20px }
+		#cr-stage { color:white }
+	</style>
+</head>
+<body>
+<script type="text/javascript">
+	Crafty.init(300,600);
+
+	Crafty.sprite(24,32,"font-hand-24x32.png",
+	{
+		EMPTY:[0,0],
+		A:[1,2],
+		B:[2,2],
+		C:[3,2],
+		D:[4,2],
+		E:[5,2],
+		F:[6,2],
+		G:[7,2],
+		H:[8,2],
+		I:[9,2],
+		J:[10,2],
+		K:[11,2],
+		L:[12,2],
+		M:[13,2],
+		N:[14,2],
+		O:[15,2],
+		P:[0,3],
+		Q:[1,3],
+		R:[2,3],
+		S:[3,3],
+		T:[4,3],
+		U:[5,3],
+		V:[6,3],
+		W:[7,3],
+		X:[8,3],
+		Y:[9,3]
+	});
+
+	Crafty.c("Char",{
+		init:function(){
+			this.addComponent("2D,DOM").attr({w:24,h:32});
+		}
+	});
+	Crafty.c("SpriteText",{
+		init:function(){
+			this.addComponent("2D,DOM");
+		},
+		text:function(text){
+			var c;
+			for(var i = 0; i<text.length;i++){
+				c = Crafty.e("Char",text.charAt(i).toUpperCase());
+				c.shift(i*c.w);
+				this.attach(c);
+
+			}
+
+
+
+		}
+	});
+
+	var text = Crafty.e("SpriteText").text("Crafty Roxx");
+</script>
+
+</body>
+</html>
diff --git a/cookbook/index.md b/cookbook/index.md
@@ -0,0 +1,8 @@
+---
+layout: cookbook
+title: What we need
+---
+
+Welcome to the Crafty Cookbook - a collection of code snippets and ideas for solving common problems.
+
+If you want to add to this collection you can either [fork](https://github.com/craftyjs/craftyjs.github.com) this site on github, or ask somebody in the forum to help you out.
diff --git a/cookbook/text-sprite.md b/cookbook/text-sprite.md
@@ -0,0 +1,76 @@
+---
+layout: cookbook
+title: Text Sprites
+---
+
+If you want to be more creative about the fonts in your game you can create a sprite sheet of your font like this
+
+ ![examples/textsprite/font-hand-24x32.png](examples/textsprite/font-hand-24x32.png)
+
+and chop it up in Crafty like this 
+
+{% highlight javascript %}
+Crafty.init();
+
+Crafty.sprite(24,32,"http://opengameart.org/sites/default/files/font-hand-24x32.png",
+              {
+                  EMPTY:[0,0],
+                  A:[1,2],
+                  B:[2,2],
+                  C:[3,2],
+                  D:[4,2],
+                  E:[5,2],
+                  F:[6,2],
+                  G:[7,2],
+                  H:[8,2],
+                  I:[9,2],
+                  J:[10,2],
+                  K:[11,2],
+                  L:[12,2],
+                  M:[13,2],
+                  N:[14,2],
+                  O:[15,2],
+                  P:[0,3],
+                  Q:[1,3],
+                  R:[2,3],
+                  S:[3,3],
+                  T:[4,3],
+                  U:[5,3],
+                  V:[6,3],
+                  W:[7,3],
+                  X:[8,3],
+                  Y:[9,3]
+              });
+
+Crafty.c("Char",{
+    init:function(){
+        this.addComponent("2D,DOM").attr({w:24,h:32});
+    }
+});
+
+Crafty.c("SpriteText",{
+    init:function(){
+        this.addComponent("2D,DOM");
+    },
+    text:function(text){
+        var c;
+        for(var i = 0; i<text.length;i++){
+            c = Crafty.e("Char",text.charAt(i).toUpperCase());
+            c.shift(i*c.w);
+            this.attach(c);
+        }
+    }
+});
+{% endhighlight %}
+
+Then simply use the SpriteText component like this
+
+{% highlight javascript %}
+var text = Crafty.e("SpriteText").text("Crafty Roxx");
+{% endhighlight %}
+
+And the result
+
+<iframe width="600" height="300" src="examples/textsprite/textsprite.html">
+	This is an iframe. sorry.
+</iframe>