HTML5游戏制作之路_06_egret文本及相关属性

原创 2015年11月19日 21:50:59

一.创建文本

显示结果:

二.添加一些属性

三.绘制矩形并添加文字描边

/**
 * Created by 13641 on 2015/11/19.
 */
class Texttest extends egret.DisplayObjectContainer{

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.mainFunc, this);
    }

    private mainFunc():void{
        this.TextDisplay();
    }

    private TextDisplay():void{

        //绘制图形
        var shape:egret.Shape = new egret.Shape();
        //指定绘制颜色
        shape.graphics.beginFill(0xFF0000);
        shape.graphics.drawRect(0,0,400,400);
        shape.graphics.endFill();
        this.addChild(shape);


        var lable:egret.TextField = new egret.TextField();
        lable.text = "总有刁民想害朕";
        //描边的颜色
        lable.strokeColor = 0x0000ff;
        //描边的宽度
        lable.stroke = 2;
        lable.x = 120;
        lable.y = 150;
        this.addChild(lable);
    }
}

效果:


四.设置文字粗体(这个属性不能单独改某个文字,只能改全篇)

/**
 * Created by 13641 on 2015/11/19.
 */
class Texttest extends egret.DisplayObjectContainer{

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.mainFunc, this);
    }

    private mainFunc():void{
        this.TextDisplay();
    }

    private TextDisplay():void{

        //绘制图形
        var shape:egret.Shape = new egret.Shape();
        //指定绘制颜色
        shape.graphics.beginFill(0xFF0000);
        shape.graphics.drawRect(0,0,400,400);
        shape.graphics.endFill();
        this.addChild(shape);


        var lable:egret.TextField = new egret.TextField();
        lable.text = "总有刁民想害朕";
        lable.width = 400;
        lable.height = 400;
        //水平对其
        lable.textAlign = egret.HorizontalAlign.CENTER;
        lable.verticalAlign = egret.VerticalAlign.MIDDLE;
        //粗体
        lable.bold = true;
        //斜体
        lable.italic = true;
        this.addChild(lable);
    }
}

效果:


五.文本对齐

设置文本宽高,注意要放在显示代码之前。

六.指定文本的字体

1.

/**
 * Created by 13641 on 2015/11/19.
 */
class Texttest extends egret.DisplayObjectContainer{

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.mainFunc, this);
    }

    private mainFunc():void{
        this.TextDisplay();
    }

    private TextDisplay():void{

        //绘制图形
        var shape:egret.Shape = new egret.Shape();
        //指定绘制颜色
        shape.graphics.beginFill(0xFF0000);
        shape.graphics.drawRect(0,0,400,400);
        shape.graphics.endFill();
        this.addChild(shape);


        var lable:egret.TextField = new egret.TextField();
        lable.text = "总有刁民想害朕,总有刁民想害朕";
        lable.fontFamily = "KaiTi";
        this.addChild(lable);
    }
}


2.位图文本:自定义字体。

1)将fnt和png放在asset文件夹下

同样还是利用json和RES来加载,没什么意思了。

注意json里面的type为font


版权声明:本文为博主原创文章,未经博主允许不得转载。

Egret4.1.0的高清文本显示效果设置

用过Egret4.0.3的人都知道,文本显示有点模糊的问题。在论坛上查了资料,回答是4.1.0会进行修复。所以官方一升级引擎,就赶紧对项目进行升级了。先看看官方的升级信息吧:Egret4.1.0 ...
  • sujun10
  • sujun10
  • 2017年05月24日 12:44
  • 1929

egret native相关的一些记录

最近开始用egret做开发,主要做native相关的,遇到不少坑。 先吐槽一下,想要做app端的,最好还是选择cocos,因为egret的native有不少坑,最重要的是,不开源,相关文档也少,很多...
  • a102111
  • a102111
  • 2017年12月11日 12:00
  • 106

HTML5游戏制作之路_06_egret关于精灵表单spritesheet

/* 采用位图的版本:2.5 采用的编辑器webstrom */ 精灵表单就是将很多图片合成在一张图片中,然后 我们可以获取其中的任何一张图,这样做可以加快游戏的图片加载,类似于unity‘中的图集,...
  • qq_23156791
  • qq_23156791
  • 2015年11月19日 03:32
  • 1103

HTML5 文本属性

1.   边框属性           border=radius :上右下左; 取值和margin很像           border-radius :60px 30px 40px  50px...
  • qq_37133856
  • qq_37133856
  • 2017年04月12日 12:24
  • 659

HTML5笔试题

一、单选题 1、以下哪个单词属于javascript保留字: A. with B. parent C. class D. Void 答案:B 2、请选择结果为真的表达式: A. nul...
  • xq2768637066
  • xq2768637066
  • 2016年03月11日 11:53
  • 3075

html5 常用标签和属性

html5出现了很多让人兴奋的标签和属性,以前一些功能我们自己需要写组件或者去找组件,现在html5原生的就直接帮我们集成了,这当中就表单组件的一些常用功能。html5 input 组件 时间日期类型...
  • yingxiake
  • yingxiake
  • 2016年03月18日 01:13
  • 1316

HTML5游戏制作之路_04_来做个动画吧

/* 使用的egret版本:2.5 编辑器采用webstrom */ 通过上一篇03成功可以加载资源,这一篇我们在上一篇的基础上,通过位图来搞一个动画。 如果想参看注释请回到上一篇。 直接...
  • qq_23156791
  • qq_23156791
  • 2015年11月19日 02:51
  • 501

HTML5基础加强css样式篇(文字阴影css属性:text-shadow)(四十四)

1.文字阴影: .box { margin: 100px 0 0 100px; width: 20...
  • u010853130
  • u010853130
  • 2017年04月07日 16:43
  • 674

HTML5新增的标签和属性归纳

收集总结的HTML5的新特性,基本除了IE9以下都可以使用。 HTML5语法 大部分延续了html的语法 不同之处:开头的 字符编码变得简洁, 不区分大小写...
  • garvisjack
  • garvisjack
  • 2017年01月27日 11:21
  • 6737

游戏制作之路

  设计制作电脑游戏这一行,可能是当今世界上能够找到的为数不多的迷人工作之一。在高科技的不断带动下,她让你充分享受创作和玩耍游戏的乐趣。而像id Software 这样一夜成名的传奇经历,更让成千上万...
  • jlmugua
  • jlmugua
  • 2007年05月20日 13:23
  • 886
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5游戏制作之路_06_egret文本及相关属性
举报原因:
原因补充:

(最多只允许输入30个字)