じ☆ve撒哈拉-优快云博客

原创任务27：在IDE中直接创建不规则图形的hitArea

一、任务目标在上一任务中我们学习了如何使用代码创建图形的点击区域，其实在IDE中我们可以可视化的创建点击区域和非点击区域。二、任务分解首先在IDE中添加一个图片，并且为这个图片添加点击事件。onAwake(): void { this.image.on("click",this,()=>{ console.log("image click!"); });}将脚本挂载到场景中，运行可以发现目前只要是在红色框内的部分，都可以点击到。接着我们创建不可点击区域。在图片节点下创建G

2021-10-10 21:29:24 197

原创任务26：设置点击区域hitArea

一、任务目标如果我们对一个图片设置点击事件，那么这个图片的长宽所组成的矩形就是它的点击区域，为了自定义我们的点击区域，我们可以使用工具类Laya.hitArea进行设置。二、任务分解创建一个图片，利用代码添加一个点击区域，为了看的清楚，我们设置一个同样大小的有颜色的Sprite对比。自定义区域只支持圆形、矩形、多边形。export default class hitArea extends Laya.Script { /** @prop {name:image,tips:"image

2021-10-03 11:21:10 675

原创任务25：设置图片遮罩mask效果

文章目录一、任务目标二、任务分解2.1 利用代码创建图片遮罩2.2 在IDE中创建遮罩三、问题一、任务目标本任务的目标是利用代码和IDE两种方式，为图片创建遮罩。二、任务分解2.1 利用代码创建图片遮罩实现思路是，创建一个符合我们要求的遮罩形状，这就用到了我们之前学到的绘制矢量图的方式，然后将这个矢量图赋值给一个图片的mask属性，即可达到设置遮罩的作用。注意：遮罩需要放到图片的下层，否则遮罩会挡住要显示的图片onAwake(): void { let sprite: La

2021-10-02 17:06:13 559

原创任务24：LayaAir显示图形相关学习

一、任务目标在之前的学习中，我们特意放慢速度，让我们可以很好的入门和激发兴趣，很多知识学的相对较慢，如今我们已经学习完了所有UI组件，可以发现学习引擎的一些套路了，之后的学习中我们要加快吸收的速度，达到快速上手的目的，该任务则主要学习图行显示相关内容。二、任务分解2.1 Sprite节点可以作为容器使用Sprite节点的一个妙用就是可以作为一个父容器来使用，用于装载其他用于显示图像的Sprite节点，这样做的好处是同类图片我们可以装入一个容器中，这样方便统一回收和操作。//1.让Sprite作为容

2021-10-02 15:55:04 377

原创任务23：图片的显示与切换

文章目录一、任务目标二、任务分解2.1 loadImage()方法2.2 loadImage()实现切换图片2.3 drawTexture()方法2.4 drawImage()实现图片切换三、总结四、参考资料一、任务目标图片的显示和切换是游戏开发的基础，该任务并非介绍LayaAir中Image组件的使用，而是介绍两种引擎绘制图片的方式，通过比较这两种方式，可以让我们在最后的优化过程中有些许思路。二、任务分解2.1 loadImage()方法该方法是Sprite节点上的方法。Sprite 是基本的显

2021-09-27 11:34:36 269

原创任务22：SoundManager声音管理类

文章目录一、任务目标二、基本属性介绍三、参考资料一、任务目标背景音乐和音效在游戏制作中有着非常重要的地位，LayaAir引擎为我们提供了一个非常方便的音乐管理类SoundManager，可以实现音量大小控制，播放暂停，播放开始，失去焦点自动静音，恢复焦点后开始播放等功能。同时该类所有方法和属性都是静态属性和方法，我们直接利用类调用就可以了。二、基本属性介绍playMusic播放背景音乐，同时只能播放一个playSound播放音效，可以同时播放多个stop前缀方法，停止播放setMusicVo

2021-09-26 21:17:03 296

原创任务21：Timer类的简介

文章目录一、任务目标二、任务分解2.1 callLater方法介绍2.2 其他函数介绍一、任务目标Timer是LayaAir提供的一个时间管理类，一般的延迟事件的触发等都需要借助该类。需要注意的是Timer是一个单例，不需要我们手动实例化，直接使用Laya.timer调用即可。二、任务分解2.1 callLater方法介绍该方法官方的解释是延迟调用，很多小伙伴会误解，其实这里延迟调用的意思是callLater中传入的方法只触发一次，我们用for循环循环10次，其实只会触发一次，这是为了优化性能而引

2021-09-26 11:50:49 165

原创任务20：tree组件的学习和基本使用

文章目录一、任务目标二、任务分解2.1 认识Tree组件基本的层级关系2.2 组装xml信息2.3 Tree常用代码属性2.4 文件夹效果的实现三、参考资料一、任务目标Tree组件作为一个父容器，用于创建具有层级关系的目录，例如经典的文件夹案例，在游戏中的应用多为多层商店或者多层活动中使用，当然如果活动较少利用Tab组件也是非常方便的，该任务我们学校tree组件的基本使用。二、任务分解2.1 认识Tree组件基本的层级关系如图所示，在官方的介绍中，Tree组件下我们只需要将对应的组件改成他们规定

2021-09-26 10:01:36 416

原创任务19：IDE组件的学习.三

文章目录一、任务目标二、任务分解2.1 Radio和RadioGroupRadioGroup常用属性介绍：代码获取当前选中Radio的索引值2.2 Tab选项卡Tab常用属性介绍：代码实现不同页面的切换一、任务目标截至目前为止，我们已经学习了LayaAir IDE中的大部分UI组件了，简单的用合集介绍，稍微复杂或者使用较多的都用单独的篇幅介绍了，本次任务就来学习剩下的IDE组件。二、任务分解2.1 Radio和RadioGroupRadio按钮作为多选一按钮，单独出现时用途不是很广泛，只有成组的

2021-09-21 12:28:13 131

原创任务18：progressBar进度条的使用

文章目录一、任务目标二、任务分解2.1 基本属性的简介2.2 案例的实现三、参考资料一、任务目标进度条的使用在游戏开发中是非常常见的，该任务介绍LayaAir中的进度条组件progressBar的使用。二、任务分解2.1 基本属性的简介sizeGrid九宫格，改变范围防止拉升时变形，根据需要更改skin进度条的皮肤，皮肤由背景条和Bar条组成，根据皮肤的命名规则就可以替换自带的皮肤（testProgress.png，testProgress$bar.png）value当前进度值

2021-09-19 23:15:09 795

原创任务17：Box组件和List组件的组合使用实现排行榜

文章目录一、任务目标二、任务分解2.1 如何让Box容器在List下渲染多个2.2 List常用属性的介绍2.3 Box常用属性的介绍2.4 排行榜示例三、参考资料一、任务目标从继承关系上来说，List组件是继承自Box组件的，但是从使用上来说，List组件是作为Box组件的父容器使用的，当我们需要将多个同类组件组合起来的时候，比如游戏中的排行榜，Box和List就派上了用场。每个玩家的基本信息有头像，排名，得分，昵称等，将显示这些信息的组件放入一个Box容器中，如果此时我们希望节省一些力气，那么复制

2021-09-18 23:42:51 286

原创任务15：IDE组件的学习.二

一、任务目标接着之前的一中学习其余的组件。IDE组件的学习：https://blog.youkuaiyun.com/m0_56811106/article/details/120210308二、任务分解2.1 ComboBox组件该组件是一个下拉菜单的UI组件，在IDE中提供了非常丰富的属性供我们使用，基本可以满足所以关于下拉菜单的效果要求。组件的属性分为按钮标签和下拉菜单标签，从前缀上来说，一般带有label的属于按钮标签，带有item的属于下拉菜单标签labels下拉菜单中标签的值，中间用逗号

2021-09-16 20:48:20 135

原创任务16：Dialog弹出对话框组件的基本使用

一、任务目标任务15的内容还在更新中，这次提前出任务16是因为Dialog这个组件较为重要，使用的频率也较高。LayaAir提供的Dialog组件有如下特点：作为父容器，创建出来后可以容纳其他组件可以设置拖拽区域，进行全屏幕拖拽子组件中任意按钮如果按照一定的规则命名，那么点击该子组件就可以实现关闭Dialog，不用添加任何事件监听器二、任务分解2.1 基础属性学习这里注意，刚创建出来时宽度和高度都是0，可以根据自己需要修改，这里为了演示，直接修改为200，100。除此之外，轴心点决定着

2021-09-16 15:45:14 626

原创任务14：RunTime类的基本介绍和使用

文章目录一、任务目标二、任务分解三、参考资料一、任务目标在之前的学习中，我们大多数时间用的是挂载脚本来实现一个特定的功能或者效果，那么如果有大量相同的组件需要同一种功能或效果的时候怎么办呢？LayaAir中几乎买个组件都有一个runtime的属性，官方将其称为运行时的逻辑类，可以看作该组件下的一个实例，所以对于重复的功能我们只需要编写一份代码即可，大大的提高了我们的开发效率。在开始之前我们先列举一些注意事项：继承问题，runtime类可以直接使用this来指定组件的属性，所有继承一定要正确，否则可能

2021-09-12 21:33:09 237

原创任务13：IDE组件的学习

一、任务目标前面我们利用12个任务学习了LayaAir IDE相关环境搭建到文本类的所以相关基础内容，那么在之前学习的基础上，我们已经对LayaAir的学习有了初步的认识，为了满足我们在IDE中的创作，接下来我们将学习IDE中其他组件，帮助我们更好的创作。二、任务分解2.1 Button和checkBoxButton最需要理解的是皮肤的三态，它的皮肤资源是三个等比排列的按钮图片组成的一张.png图片，在IDE处理的时候等比进行了切割，分别表示常态、鼠标放上态和点击态，stateNum属性可以选择

2021-09-12 20:45:15 155

原创任务12：LayaAir替换TTF字体格式的方法

文章目录一、任务目标二、任务分解2.1 引擎IDE中查看示例效果2.2 在代码中加载资源2.3 参考资料一、任务目标在实际开发中引擎自带的字体有时难以满足我们的需求，所以我们要替换成其他的字体文件，其中ttf字体作为一种资源，如何加载并使用呢？本次任务将学习这部分内容，同时该方法可以类比到其他资源的加载中。二、任务分解2.1 引擎IDE中查看示例效果首先还是将我们需要用到的ttf字体文件放到Assets文件目录下，可以新建子目录也可以直接放到根目录在IDE中托一个Text文本框，设置对

2021-09-09 18:18:31 841

原创任务11：利用fontClip使用简单的位图字体

文章目录一、任务目标二、任务分解2.1 了解常用fontClip属性2.2 fontClip的使用一、任务目标前面三节左右我们学习了如何制作位图字体，以及如何在代码中使用，那么我们发现每次都要加载注册，那么对于简单的数值，比如金币、游戏得分等有没有简单的位图使用方法？答案是有的，该任务介绍的fontClip组件就可以实现这个功能。二、任务分解2.1 了解常用fontClip属性官方文档参考：https://ldc2.layabox.com/doc/?nav=zh-ts-3-3-3如图fontC

2021-09-08 09:13:32 145

原创任务10：使用制作的位图字体

文章目录一、任务目标二、任务分解2.1 官方资料与注意事项2.2 在IDE中使用位图字体2.3 在代码中注册位图字体一、任务目标前面两节我们学习了两种制作引擎使用的位图字体的方法，那么本次任务我们学习如何使用。在此之前我们提前提醒一下，之前获得的两个产物，一个.fnt文件一个.png图片，这两个文件的文件名要保持一致，这样才不会出错。另外位图字体使用时必须在代码中加载并注册才能使用，否则IDE中可以预览效果，但是实际运行时是没有效果的。二、任务分解2.1 官方资料与注意事项文档：https://l

2021-09-07 22:23:53 273

原创任务9：利用txt文档制作位图字体

文章目录一、任务目标二、制作步骤2.1 准备要制作的文本2.2 设置bmfont642.3 导入txt文件2.4 设置导出配置2.5 导出位图字体一、任务目标在任务8中我们学习了如何利用图片制作精美的位图字体，这样可以有效解决我们UI等少量字体在各个平台统一的问题，那么对于大量的文子对白，也就是剧情对话以及装备描述等文本，显然利用图片制作位图的成本是很高的，也不符合包体体积要求。本次任务目标学习利用txt文本来制作位图。二、制作步骤2.1 准备要制作的文本将自己需要制作的文本全部写入一个txt记

2021-09-06 20:38:39 328

原创任务8：位图字体的制作

文章目录一、任务说明二、操作步骤2.1 对比查看官方文档教程2.2 准备材料2.3 位图字体制作一、任务说明位图字体在游戏中的作用非常广泛，不仅可以解决用户没有安装字体库的显示问题，还有不同系统平台间的兼容问题，以及不同设备的像素显示问题…这些问题统统可以利用位图解决，让我们的UI变的更美观，同时消除差异。但是需要注意的是位图只能适用于不复杂的系统，比如一些数值或者特殊UI字体的显示，不能解决大段的对话剧情需求。二、操作步骤2.1 对比查看官方文档教程文档：https://ldc2.layabox

2021-09-06 12:27:00 514

原创任务7：文本输入类laya.ui.TextInput基础

文章目录一、任务目标二、任务分解2.1 官方文档2.2 常用属性2.3 常见问题解决一、任务目标文本输入在游戏中使用并不是很多，大多常见于个人信息填写，账号密码输入以及兑换码礼包码等，这里做简单了解使用即可，而且类本身也很简单。这里需要区别的是，LayaAir中提供了三个输入类，分别是laya.display.Input，laya.ui.TextInput，laya.3d.Input3D，其中我们一般使用的是laya.ui.TextInput类，Input3D是有关3D输入的类，而Input类是引擎封装

2021-09-05 11:28:41 699

原创任务6：利用scrollBar控制滚动文本

一、任务目标上一个任务我们讲到文本控制在游戏中的主要作用，而且采用鼠标点击文本域从而控制文本滚动，那么该任务我们就来学习scrollBar控制文本的滚动。二、任务分解2.1 熟悉scrollBar常用属性官方API：https://layaair2.ldc2.layabox.com/api2/Chinese/index.html?version=2.12.1beta&type=2D&category=UI&class=laya_ui_scrollbar.scrollbar#c

2021-09-04 11:59:21 470

原创任务5：文本类laya.display.Text基础

文章目录一、任务目标二、任务分解2.1 查阅API2.1.1 可视化创建文本2.1.2 通过代码创建文本2.2 文本对齐2.3 自动换行2.4 文本内容超出文本域问题2.5 滚动文本三、结语一、任务目标文本的显示在游戏开发中有着重要的地位，无论是纯文字向的游戏，还是其他类型游戏的剧情，乃至一些游戏页面的基本信息，都离不开文本类的支持。在LayaAir引擎laya.display.Text文本类就是用于创建可显示的文本对象的类，该任务了解文本类的基本使用。二、任务分解2.1 查阅API文本类基

2021-09-02 15:45:48 495

原创任务4：了解Psd2UI技术

文章目录一、任务目标二、实际操作2.1 官方资料2.2 注意事项一、任务目标Psd2UI是LayaAir引擎中一个可以将psd文件转换为引擎可以直接使用的组件的技术，将psd文件中的UI元素，按照一定的命名规则命名，就可以自动转换。二、实际操作2.1 官方资料Psd2UI 文档：https://ldc2.layabox.com/doc/?nav=zh-ts-3-2-5从官网给的示例中可以发现，在面对Button组件的三态时，要建立多个文件夹来命名，增大了美术的负担，更简便的方法是直接制作符合要

2021-09-02 10:01:52 515

原创任务3：熟悉并了解IDE各个功能的作用和位置

文章目录一、任务目标二、任务分解2.1 阅读官网文档2.2 项目设置2.2.1 场景宽高保持一致2.2.2 类库设置2.3 运行游戏一、任务目标使用LayaAir IDE开发游戏之前，我们首先要熟悉引擎IDE的各个功能，还有对界面要相对熟悉，当我们寻找某一功能的时候知道在哪里，或者我们在自学视频和官网文档中看到对应功能键，不至于寻找半天位置，所以首先第一步要做的就是熟悉引擎IDE界面。官网文档这些写的都较为详细。二、任务分解2.1 阅读官网文档官网文档：https://ldc2.layabox.c

2021-09-01 12:15:33 225

原创任务2：LayaAir自学准备工作

一、前言当我们学习一门新的技术或者语言时，官网无疑是最方便和权威的知识中心。特别的LayaAir小游戏引擎作为中国开发者研发的引擎，中文文档看起来简直不要太舒服，那么本篇文章就来梳理一下官方文档学习方式，不同文档的作用。二、学习渠道2.1 官网LayaAir引擎官网：https://www.layabox.com/打开官网，在这里可以看到LayaAir引擎的一个较为全面的一个介绍，但是对于开发者而言只是一个官方学习资料的入口，其他信息作为新闻了解即可。我们主要用到的是上面的开发者中心，点击即可进

2021-08-31 21:27:08 363

原创开发番外：vscode开发之前的准备

文章目录一、前言二、问题收集2.1 代码模板的创建2.2 vscode代码工作区字体大小调整2.3 vscode代码自动保存一、前言在使用vscode开发游戏之前，我们还需要解决一些较为常见的问题，帮助我们提高开发效率。二、问题收集2.1 代码模板的创建自从LayaAir IDE中将代码编辑器单另出去后，我们就采用vscode来开发代码，但是这样我们就没有引擎自带的代码模板了，只能自己去创建了。参考我的另外一篇博文：https://blog.youkuaiyun.com/m0_56811106/artic

2021-08-31 11:36:01 182

原创任务1：LayaAir开发游戏之环境搭建

文章目录一、前言二、环境搭建2.1 下载LayaAir IDE2.2 下载vscode2.3 搭建TypeScript语言环境2.4 关联LayaAir和vscode一、前言截至目前LayaAir游戏引擎已经更新到2.12.1beta版，在这个版本中官方取消了自带的代码编辑器，所以开发环境上我们选择LayaAir IDE和VS code，开发语言选择TypeScript。二、环境搭建2.1 下载LayaAir IDEhttps://ldc2.layabox.com/layadownload/?ty

2021-08-30 19:38:45 972 1

m0_56811106的博客