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; }