jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

text example updated

Browse source
This commit is contained in:
Mat Groves 2013-04-26 02:13:43 +01:00
parent 422b60662c
commit 7fff2f52ba
18 changed files with 153 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

4
bin/pixi.dev.js
View file

@ -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("//")

4
bin/pixi.js
View file

File diff suppressed because one or more lines are too long

2
docs/files/src_pixi_Text.js.html
View file

@ -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("//")

96
docs/files/src_pixi_renderers_WebGLShaders.js.html
View file

@ -127,70 +127,56 @@
* @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.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;",
"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.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 = "";
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;
return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
}
PIXI.CompileFragmentShader = function(gl, shaderSrc)
{
var src = "";
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;
return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_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>

4
examples/example 1 - Basics/pixi.js
View file

@ -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("//")

107
examples/example 10 - Text/index.html
View file

@ -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 {
@ -17,50 +17,87 @@
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// Load them google fonts before starting...!
WebFontConfig = {
google: {
families: [ 'Snippet', 'Arvo:700italic', 'Podkova:700' ]
},
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(620, 400);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
active: function() {
// do something
init();
},
requestAnimFrame( animate );
};
(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()
{
var textSample = new PIXI.Text("Pixi.js can has text!", "50px Arial", "rgba(1,1,1,0.5)", "red", 1);
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
var spinningText = new PIXI.Text("I'm fun!", "italic 30px Arial", "green");
// add a shiney background..
var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
stage.addChild(background);
spinningText.anchor.x = spinningText.anchor.y = 0.5;
spinningText.position.x = 620/2;
spinningText.position.y = 400/2;
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(620, 400);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
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);
requestAnimFrame( animate );
function 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;
requestAnimFrame( animate );
count++;
if(count == 50)
{
count = 0;
score ++
countingText.setText("I count: " + score )
// 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);
}
// just for fun, lets rotate mr rabbit a little
spinningText.rotation += 0.03;
// render the stage
renderer.render(stage);
}
</script>

4
examples/example 10 - Text/pixi.js
View file

@ -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("//")

BIN
examples/example 10 - Text/textDemoBG.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 72 KiB

3
examples/example 2 - SpriteSheet/index.html
View file

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

4
examples/example 2 - SpriteSheet/pixi.js
View file

@ -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("//")

4
examples/example 3 - MovieClip/pixi.js
View file

@ -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("//")

4
examples/example 4 - Balls/pixi.js
View file

@ -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("//")

4
examples/example 5 - Morph/pixi.js
View file

@ -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("//")

4
examples/example 6 - Interactivity/pixi.js
View file

@ -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("//")

4
examples/example 7 - Transparent Background/pixi.js
View file

@ -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("//")

4
examples/example 8 - Dragging/pixi.js
View file

@ -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("//")

4
examples/example 9 - Tiling Texture/pixi.js
View file

@ -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("//")

2
src/pixi/Text.js
View file

@ -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("//")