text example updated

bin/pixi.dev.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-04-24
+ * Compiled: 2013-04-26
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -912,8 +912,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

docs/files/src_pixi_Text.js.html

@@ -206,8 +206,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

docs/files/src_pixi_renderers_WebGLShaders.js.html

@@ -126,71 +126,57 @@
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
-	
-PIXI.shaderFragmentSrc = [	"precision mediump float;",
-					  		"varying vec2 vTextureCoord;",
-					  		"varying float vColor;",
-					  		"uniform sampler2D uSampler;",
-					  		"void main(void) {",
-					  		"gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));",
-					  		"gl_FragColor = gl_FragColor * vColor;",
-					  		"}"];
 
-PIXI.shaderVertexSrc = [	"attribute vec2 aVertexPosition;",
+PIXI.shaderFragmentSrc = [
-	    					"attribute vec2 aTextureCoord;",
+  "precision mediump float;",
-	    					"attribute float aColor;",
+  "varying vec2 vTextureCoord;",
-	  						"uniform mat4 uMVMatrix;",
+  "varying float vColor;",
-							"varying vec2 vTextureCoord;",
+  "uniform sampler2D uSampler;",
-							"varying float vColor;",
+  "void main(void) {",
-							"void main(void) {",
+    "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));",
-							"gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);",
+    "gl_FragColor = gl_FragColor * vColor;",
-							"vTextureCoord = aTextureCoord;",
+  "}"
-							"vColor = aColor;",
+];
-	   					 	"}"]
+
+PIXI.shaderVertexSrc = [
+  "attribute vec2 aVertexPosition;",
+  "attribute vec2 aTextureCoord;",
+  "attribute float aColor;",
+  "uniform mat4 uMVMatrix;",
+  "varying vec2 vTextureCoord;",
+  "varying float vColor;",
+  "void main(void) {",
+    "gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);",
+    "vTextureCoord = aTextureCoord;",
+    "vColor = aColor;",
+  "}"
+];
 
 PIXI.CompileVertexShader = function(gl, shaderSrc)
 {
-	var src = "";
+  return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
-	
-	for (var i=0; i < shaderSrc.length; i++) {
-	  src += shaderSrc[i];
-	};
-	
-	var shader;
-    shader = gl.createShader(gl.VERTEX_SHADER);
-       
-    gl.shaderSource(shader, src);
-    gl.compileShader(shader);
-
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        alert(gl.getShaderInfoLog(shader));
-        return null;
-    }
-    
-    return shader;
 }
 
 PIXI.CompileFragmentShader = function(gl, shaderSrc)
 {
-	var src = "";
+  return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER);
-	
-	for (var i=0; i < shaderSrc.length; i++) {
-	  src += shaderSrc[i];
-	};
-	
-	var shader;
-    shader = gl.createShader(gl.FRAGMENT_SHADER);
-        
-    gl.shaderSource(shader, src);
-    gl.compileShader(shader);
-	
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        alert(gl.getShaderInfoLog(shader));
-        return null;
-    }
-    
-    return shader;
 }
+
+PIXI._CompileShader = function(gl, shaderSrc, shaderType)
+{
+  var src = shaderSrc.join("\n");
+  var shader = gl.createShader(shaderType);
+  gl.shaderSource(shader, src);
+  gl.compileShader(shader);
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert(gl.getShaderInfoLog(shader));
+    return null;
+  }
+
+  return shader;
+}
+
     </pre>
 </div>
 

examples/example 1 - Basics/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-04-24
+ * Compiled: 2013-04-26
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -912,8 +912,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

examples/example 10 - Text/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-	<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>
+	<!--<link href='http://fonts.googleapis.com/css?family=Snippet|Arvo:700italic|Podkova' rel='stylesheet' type='text/css'>-->
 	<title>pixi.js example 10 Text</title>
 	<style>
 		body {
@@ -16,53 +16,90 @@
 </head>
 <body>
 	<script>
-	
-	// create an new instance of a pixi stage
-	var stage = new PIXI.Stage(0x66FF99);
-	
-	// create a renderer instance
-	var renderer = PIXI.autoDetectRenderer(620, 400);
-	// add the renderer view element to the DOM
-	document.body.appendChild(renderer.view);
-	
-	requestAnimFrame( animate );
-	
-	
-	var textSample = new PIXI.Text("Pixi.js can has text!", "50px Arial", "rgba(1,1,1,0.5)", "red", 1);
-	
-	var spinningText = new PIXI.Text("I'm fun!", "italic 30px Arial", "green");
-	
-	spinningText.anchor.x = spinningText.anchor.y = 0.5;
-	spinningText.position.x = 620/2;
-	spinningText.position.y = 400/2;
-	
-	var countingText = new PIXI.Text("Hello!", "70px Arial", "red");
-	countingText.position.x = 50;
-	countingText.position.y = 250;
-	stage.addChild(textSample);
-	stage.addChild(spinningText);
-	stage.addChild(countingText);
-	count = 0;
-	score = 0;
-	stage.addChild(bunny);
-	
-	function animate() {
-	
-	    requestAnimFrame( animate );
-		count++;
-		if(count == 50)
-		{
-			count = 0;
-			score ++
-			countingText.setText("I count: "  + score )
-		}
-	    // just for fun, lets rotate mr rabbit a little
-	    spinningText.rotation += 0.03;
-		
-	    // render the stage   
-	    renderer.render(stage);
-	}
 
+  	// Load them google fonts before starting...!
+	WebFontConfig = {
+	  google: {
+	    families: [ 'Snippet', 'Arvo:700italic', 'Podkova:700' ]
+	  },
+
+	  active: function() {
+	    // do something
+	    init();
+	  },
+	
+	};
+	(function() {
+        var wf = document.createElement('script');
+        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+        wf.type = 'text/javascript';
+        wf.async = 'true';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(wf, s);
+      })();
+     
+    function init()
+    {
+    	
+ 
+		// create an new instance of a pixi stage
+		var stage = new PIXI.Stage(0x66FF99);
+		
+		// add a shiney background..
+		var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
+		stage.addChild(background);
+		
+		// create a renderer instance
+		var renderer = PIXI.autoDetectRenderer(620, 400);
+		// add the renderer view element to the DOM
+		document.body.appendChild(renderer.view);
+		
+		requestAnimFrame( animate );
+		
+		// creat some white text using the Snippet webfont
+		var textSample = new PIXI.Text("Pixi.js can has text!", "50px Snippet", "white");
+		textSample.anchor.x = 0.5;
+		textSample.position.x = 620/2;
+		textSample.position.y = 10;
+		
+		// create a text object with a nice stroke
+		var spinningText = new PIXI.Text("I'm fun!", "bold 60px Podkova", "#cc00ff", "#FFFFFF", 6);
+		// setting the anchor point to 0.5 will center align the text... great for spinning!
+		spinningText.anchor.x = spinningText.anchor.y = 0.5;
+		spinningText.position.x = 620/2;
+		spinningText.position.y = 400/2;
+		
+		// create a text object that will be updated..
+		var countingText = new PIXI.Text("COUNT 4EVAR: 0", "bold italic 60px Arvo", "#3e1707", "#a4410e", 7);
+		countingText.position.x = 620/2;
+		countingText.position.y = 320;
+		countingText.anchor.x = 0.5;
+		stage.addChild(textSample);
+		stage.addChild(spinningText);
+		stage.addChild(countingText);
+		count = 0;
+		score = 0;
+		
+		function animate() {
+		
+		    requestAnimFrame( animate );
+			count++;
+			if(count == 50)
+			{
+				count = 0;
+				score ++
+				// update the text...
+				countingText.setText("COUNT 4EVAR: "  + score )
+			}
+		    // just for fun, lets rotate the text
+		    spinningText.rotation += 0.03;
+			
+		    // render the stage   
+		    renderer.render(stage);
+		}
+	}
+	   
 	</script>
 
 	</body>

examples/example 10 - Text/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-04-24
+ * Compiled: 2013-04-26
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -912,8 +912,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

examples/example 2 - SpriteSheet/index.html

@@ -26,7 +26,6 @@
 	//begin load
 	loader.load();
 	
-	
 	// holder to store aliens
 	var aliens = [];
 	var alienFrames = ["eggHead.png", "flowerTop.png", "helmlok.png", "skully.png"];
@@ -34,7 +33,7 @@
 	var count = 0;
 		
 	// create an new instance of a pixi stage
-	var stage = new PIXI.Stage(0xFFFFFF);;
+	var stage = new PIXI.Stage(0xFFFFFF);
 	
 	// create a renderer instance.
 	renderer = PIXI.autoDetectRenderer(800, 600);

examples/example 2 - SpriteSheet/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-04-24
+ * Compiled: 2013-04-26
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -912,8 +912,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

examples/example 3 - MovieClip/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-04-24
+ * Compiled: 2013-04-26
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -912,8 +912,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

examples/example 4 - Balls/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-04-24
+ * Compiled: 2013-04-26
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -912,8 +912,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

examples/example 5 - Morph/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-04-24
+ * Compiled: 2013-04-26
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -912,8 +912,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

examples/example 6 - Interactivity/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-04-24
+ * Compiled: 2013-04-26
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -912,8 +912,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

examples/example 7 - Transparent Background/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-04-24
+ * Compiled: 2013-04-26
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -912,8 +912,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

examples/example 8 - Dragging/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-04-24
+ * Compiled: 2013-04-26
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -912,8 +912,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

examples/example 9 - Tiling Texture/pixi.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-04-24
+ * Compiled: 2013-04-26
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -912,8 +912,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")

src/pixi/Text.js

@@ -82,8 +82,8 @@ PIXI.Text.prototype.updateText = function()
 
 	this.context.textBaseline="top"; 
 
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
     if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
+	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
 	
 	
 //	console.log("//")