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

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

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

创建空项目

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

在新建项目页面,选中 LayaAir 空项目模板。LayaAir引擎学习日志9---- LayaAir IDE中显示文本Hello World(JS)_第1张图片

 

分别输入或选择一下项目的名称、路径、语言类型、引擎版本,然后点击 创建 按钮,就会创建一个空项目并打开。LayaAir引擎学习日志9---- LayaAir IDE中显示文本Hello World(JS)_第2张图片

 

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

输出 Hello World

在代码模式下,点击 src 目录下的 默认生成的主文件。
        在js文件里输入代码如下,用于在调试面板输出文字“Hello world!”。LayaAir引擎学习日志9---- LayaAir IDE中显示文本Hello World(JS)_第3张图片 

运行项目Hello World

        在菜单栏中点击 调试 按钮,会弹出预览面版。在调试控制台会显示项目中输出的内容。
        本实例,点击调试后,在调试控制台会输出文字“Hello World!”。LayaAir引擎学习日志9---- LayaAir IDE中显示文本Hello World(JS)_第4张图片

 

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

 

显示文本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”。

LayaAir引擎学习日志9---- LayaAir IDE中显示文本Hello World(JS)_第5张图片

 

不懂的可以关注我的公众号,里面有你想要的(有问题公众号留言必回答)https://mp.weixin.qq.com/s?__biz=MzIyOTM4MDMxNw==&mid=2247483836&idx=1&sn=4bac1428b9d9470000ca159aba4038d8&chksm=e842d80edf355118659c51356e5a92ff5c995729b7f361a1d0207060721852d2b8d7ec4bad03&token=1082408202&lang=zh_CN#rd

你可能感兴趣的:(LayaAir引擎开发)