LayaAir引擎学习日志9---- LayaAir IDE中显示文本Hello World（JS）

前面的博客，我们已经讲了如何下载安装配置 LayaAir IDE 开发环境。接下来我们来看看如何创建一个 Hello World 项目，在控制台打印输出 Hello World 和在舞台上显示 Hello World 文本。

LayaAir IDE 支持三种语言来开发项目。此处我们以JavaScript 语言为例，其他两种语言只是在编辑代码时语法稍有差异，在创建项目和发布项目的使用上是一致的。

创建空项目

现在我们来学习 使用LayaAir IDE 创建一个空的项目来开始。

在新建项目页面，选中 LayaAir 空项目模板。

 

分别输入或选择一下项目的名称、路径、语言类型、引擎版本，然后点击 创建 按钮，就会创建一个空项目并打开。

 

打开一个项目时，默认会打开代码模式，可以点击右上角的 编辑模式 切换至UI编辑模式。同理在UI编辑模式可以点击右上角的 代码模式 切换至代码编辑模式下。 

输出 Hello World

在代码模式下，点击 src 目录下的 默认生成的主文件。
        在js文件里输入代码如下，用于在调试面板输出文字“Hello world!”。 

运行项目Hello World

        在菜单栏中点击 调试 按钮，会弹出预览面版。在调试控制台会显示项目中输出的内容。
        本实例，点击调试后，在调试控制台会输出文字“Hello World!”。

 

        点击预览窗口菜单栏里 分辨率 下拉菜单，可以选择不同设备屏幕的预览效果。
        点击预览窗口菜单栏里 屏幕方向 下拉菜单，可以选择横竖屏的预览效果。

 

显示文本Hello World

        继续编辑代码，在舞台上添加一个文本，设置文本的内容的为“Hello World”，再设置一下文本的字体大小、文字颜色、对齐方式、宽高信息等。
        关于Text 文本类的详细属性和接口说明请参考 Text 的API。

 

1

2

3

4

5

6

7

8

9

10

var Text = laya.display.Text;

Laya.init(620, 400);

Laya.stage.bgColor = "#323232"; //设置舞台的背景颜色。

var text = new Text();          //实例化一个 Text 类，用于文本的显示。

text.fontSize =30;              //设置文本的字体大小。

text.color ="#db7644";          //设置文本的显示颜色。

text.size(200,100);             //设置文本的显示区域大小。

text.pos(100,100);              //设置文本的显示位置。

text.text="Hello World";        //设置文本的显示内容字符。

Laya.stage.addChild(text);      //将文本添加到舞台上。

  

运行项目

        在菜单栏中点击 调试 按钮，弹出预览面版。在预览窗可以看到舞台上显示了我们刚刚添加文本“Hello World”。

 不懂的可以加我的QQ群： 172719352（LayaAir引擎交流群 ）欢迎你的到来哦，看了博文给点脚印呗，谢谢啦~~