Phaser的Text文字

//文字的阴影设置
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });

function create() {

    game.stage.setBackgroundColor(0xefefef);

    //  Here we set the shadow:
    //  The first 2 parameters control x and y distance  XY位置偏移
    //  The 3rd the shadow colour   颜色
    //  The 4th the amount of blur  模糊

    var text = createText(100, 'shadow 5');//第二个参数没用的
    text.setShadow(3, 3, 'rgba(0,0,0,0.5)', 5);

    text = createText(300, 'shadow 0');
    text.setShadow(5, 5, 'rgba(0,0,0,0.5)', 15);

    text = createText(500, 'shadow 10');
    text.setShadow(-5, 5, 'rgba(0,0,0,0.5)', 0);

}

function createText(y) {

    var text = game.add.text(game.world.centerX, y, '- phaser text shadow -');
    text.anchor.set(0.5);
    text.align = 'center';

    //  Font style
    text.font = 'Arial Black';
    text.fontSize = 50;
    text.fontWeight = 'bold';
    text.fill = '#ff00ff';

    return text;

}

效果：http://phaser.io/examples/v2/text/text-shadow

//又是一个阴影设置，这叫什么？描边？描边的阴影和文字的阴影的设置
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });

function preload() {

    game.load.image('lulu', 'assets/pics/shocktroopers_lulu2.png');

}

function create() {

    game.stage.backgroundColor = 0xbdbdbd;

    game.add.image(660, 412, 'lulu');
    
    var text1 = game.add.text(20, 50, "Shadow Stroke", { font: "74px Arial Black", fill: "#c51b7d" });
    text1.stroke = "#de77ae";
    text1.strokeThickness = 16;
    //  Apply the shadow to the Stroke only
    text1.setShadow(2, 2, "#333333", 2, true, false);//第五六个参数，文字阴影  描边的阴影，是true就有，false就没有

    var text2 = game.add.text(20, 180, "Shadow Fill", { font: "74px Arial Black", fill: "#c51b7d" });
    text2.stroke = "#de77ae";
    text2.strokeThickness = 16;
    //  Apply the shadow to the Fill only
    text2.setShadow(2, 2, "#333333", 2, false, true);

    var text3 = game.add.text(20, 310, "Shadow Both", { font: "74px Arial Black", fill: "#c51b7d" });
    text3.stroke = "#de77ae";
    text3.strokeThickness = 16;
    //  Apply the shadow to the Stroke and the Fill (this is the default)
    text3.setShadow(2, 2, "#333333", 2, true, true);

    var text4 = game.add.text(20, 440, "Shadow None", { font: "74px Arial Black", fill: "#c51b7d" });
    text4.stroke = "#de77ae";
    text4.strokeThickness = 16;
    //  Apply the shadow to neither stroke nor fill, if you don't need a shadow then don't call setShadow at all :)
    text4.setShadow(2, 2, "#333333", 2, false, false);

}

//渐变填充
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });

var text = null;

function create() {

    text = game.add.text(game.world.centerX, game.world.centerY, "- phaser gradient text -");

    //  Centers the text
    text.anchor.set(0.5);
    text.align = 'center';

    //  Our font + size
    text.font = 'Arial';
    text.fontWeight = 'bold';
    text.fontSize = 70;

    //  Here we create a linear gradient on the Text context.
    //  This uses the exact same method of creating a gradient as you do on a normal Canvas context.
    //在这里，我们创建一个线性梯度的文本上下文。

    //这个使用和在正常画布上下文中创建一个渐变的精确的相同的方法。
    var grd = text.context.createLinearGradient(0, 0, 0, text.height);

    //  Add in 2 color stops 添加在2个颜色站
    grd.addColorStop(0, '#8ED6FF');   
    grd.addColorStop(1, '#004CB3');

    //  And apply to the Text
    text.fill = grd;

}

//用图片做的填充
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });

function preload() {

    game.load.image('knightHawks', 'assets/fonts/retroFonts/KNIGHT3.png');

}

var font;

function create() {

    font = game.add.retroFont('knightHawks', 31, 25, Phaser.RetroFont.TEXT_SET6, 10, 1, 1);

    for (var c = 1; c < 19; c++)
    {
        var i = game.add.image(game.world.centerX, 6 + c * 32, font);
        i.tint = Math.random() * 0xFFFFFF;
        i.anchor.set(0.5, 1);
    }

}

function update() {

	font.text = "phaser x: " + game.input.x + " y: " + game.input.y;

}

效果：http://phaser.io/examples/v2/text/retro-font-1

//文字倒影，用了上面渐变填充的方法
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });

var text = null;
var textReflect = null;

function create() {

    game.stage.backgroundColor = 0x3b0760;

    text = game.add.text(game.world.centerX, game.world.centerY, "- PHASER -");

    //  Centers the text
    text.anchor.set(0.5);
    text.align = 'center';

    //  Our font + size
    text.font = 'Arial';
    text.fontWeight = 'bold';
    text.fontSize = 70;
    text.fill = '#ffffff';

    //  Here we create our fake reflection :)
    //  It's just another Text object, with an alpha gradient and flipped vertically

    textReflect = game.add.text(game.world.centerX, game.world.centerY + 50, "- PHASER -");

    //  Centers the text
    textReflect.anchor.set(0.5);
    textReflect.align = 'center';
    textReflect.scale.y = -1;

    //  Our font + size
    textReflect.font = 'Arial';
    textReflect.fontWeight = 'bold';
    textReflect.fontSize = 70;

    //  Here we create a linear gradient on the Text context.
    //  This uses the exact same method of creating a gradient as you do on a normal Canvas context.
    var grd = textReflect.context.createLinearGradient(0, 0, 0, text.canvas.height);

    //  Add in 2 color stops
    grd.addColorStop(0, 'rgba(255,255,255,0)');
    grd.addColorStop(1, 'rgba(255,255,255,0.08)');

    //  And apply to the Text
    textReflect.fill = grd;

}