Laya商业级3d实战-03创建游戏首页

视频观看地址:https://www.bilibili.com/video/BV12T4y157PU/

laya商业级3d游戏开发

目标:制作首页界面

点击开始游戏按钮输出Logo

界面适配

比如

苹果6s  16:9

苹果x 19.5：9。

 

本课用到的资源可以在课程资料区下载

选中Scenes目录,右键创建目录

views

在目录下右键创建->场景

参数

名称:home

设置分辨率750x1334

 

 

F9

预览设置

 

导入素材包到IDE

 

打开素材\LayaIde\ui拷贝所有文件夹放到laya\assets\目录下

 

 

摆放ui，对象类型IMAGE

顶部名字为logo

底部名字为startImage

 

 

Laya F8 ctrl+f12

Vscode f5

 

Chrome f12 ,选中开手机模式，选择机型苹果X

 

每次这样设置是不是很麻烦呢？

设置自动打开开发者工具(手机浏览模式)

.vscode/launch.json

runtimeArgs增加

 "--auto-open-devtools-for-tabs"

 

选中scr目录,创建scripts\views目录

创建脚本HomeView.ts

export default class HomeView extends Laya.Scene {

 

    startImage: Laya.Image;

 

    onAwake() {

 

    }

    onOpened(data) {

        this.startImage.on(Laya.Event.CLICK, this, this.OnStartImageClick);

    }

 

    OnStartImageClick() {

        console.log('OnStartImageClick');

    }

}

添加到runtime

 

设置开始游戏图片var 属性startImage

 

简单说下runtime

Homeview脚本为什么继承scene?

因为宿主类型为scene

 

因为开始按钮设置了var 属性，运行时startImage成员 就获得了对象的引用

Laya保存(ctrl+s)-> f8(编译)-> 发布(ctrl+f12)->Chrom运行(f5)

点击开始游戏,能看到logo即可

切换机型预览,发现按钮没有底部对齐

 

UI适配：

 

新建BaseView.ts

export default class BaseView extends Laya.Scene {

 

    constructor() {

        super();

 

    }

    onAwake() {

        this.height = Laya.stage.height;

    }

}

 

Homeview.ts

 

 onAwake() {

        super.onAwake()

    }

 

 

 

HomeView继承BaseView 运行时动态赋值高度

容器距离的使用

Logo采用顶部对齐

 

开始游戏按钮采用底部对齐

 

F8 Ctrl+f12 f5

商业游戏注意事项

拷贝素材真机模拟器页面devad.scene

开始按钮底部距离为270

尽量给底部和顶部留出安全区域

调整

Laya保存(ctrl+s)->发布(ctrl+f12)->  Chrome运行(f5)

结语:

本节学习了如何构建UI，

对象runtime特性， 使用var 定义脚本成员

Ui对象采用容器属性相对位置实现ui适配,

ui避免超出安全区域，比如刘海屏和banner广告位置