李尔在此-优快云博客

原创 Laya3.x版本,2D使用自定义shader

Value2D类是 LayaAir 图形渲染系统中着色器处理的核心类，它主要用于封装 WebGL 渲染相关的数据，以便在着色器程序中使用。这些数据包括顶点、纹理、颜色等信息。Value2D的实例会根据不同的需求传递给 GPU，用于控制图形渲染。在 LayaAir 的绘制系统中，有许多继承自Value2D的子类，如TextureSV等。这些子类用于处理不同类型的图形渲染任务，例如纹理渲染、基本图形渲染等。总之，Value2D是 LayaAir 游戏引擎中一个关键的基础类，用于处理图形渲染的各种参数和数据。

2023-07-07 14:28:32 1258

原创 AI创作与游戏开发(一)引言

从游戏开发的角度来说，AI的辅助创作能力可以有效地提高游戏的制作效率。总的来说，AI的辅助创作能力有助于游戏开发人员更快、更高效地完成游戏开发任务，从而提高游戏的质量和开发效率。但是，要想发挥AI的最大潜力，开发人员需要充分了解AI的优势和局限，以便更好地使用它来辅助游戏开发。AI tts进行情感语音，定制音色的合成；如今各种的技术和大模型，赋予了每个人的创作力，未来的游戏开发中，人工智能在参与上会发生颠覆性的提升，游戏制作者会更加关注的游戏的设计本身，繁琐的实现则丢给AI，一种新的游戏制作方式会出现。

2023-06-27 14:19:16 428

原创 AI创作与游戏开发(二)工具方法概述

然后在这文本生成上,我依旧还是比较首推的ChatGPT/GPT4,他的这个效果上,在整个的这个对话质量上,还有他续写的文章的一些水平上,我觉得都是目前应该是最强的,而且他的这个通用性和广泛性,也是最好的.当然也是有一系列国产的可以用啊,像阿里的通义千问,但是我都没排队到,这里就不能推荐了.这个展开太多了呢,我们还没可以专门来一期玩玩.1.比如通过prompt,这里也推荐几个我比较常用的网站lexica和画宇宙,可以通过搜索来快速的获取,想要图片的关键字,prompt,尺寸啊,以及说它具体的随机种子是什么。

2023-06-27 14:15:08 618

原创 AI创作与游戏开发(三)世界观设计

不管AI发展到什么地步，要记住一点的是。它只是工具，还是要。

2023-06-27 14:11:41 575

原创 AI创作与游戏开发(四)类似炉石传说资料片的静态图动效制作

书接上回，在游戏开发中，资料片动画是非常重要的，因为它们可以增加游戏的吸引力和品牌价值。资料片动画可以向游戏中添加新的角色、场景和故事情节，这些元素可以增加游戏的可玩性。例如，在《炉石传说》的资料片中，新的卡牌和英雄角色背景内容，使得玩家可以体验到更多的游戏乐趣。资料片动画可以增加游戏品牌的价值和认可度。这些动画可以成为游戏品牌的标志性元素，例如《炉石传说》的资料片动画已经成为该游戏品牌的重要组成部分之一。这些动画可以向玩家和非玩家展示游戏品牌的风格、主题和价值观，从而增加品牌的认知度和忠诚度。

2023-06-27 13:49:05 251

原创前端防止恶意调试

一下敏感环境下,比如h5游戏,产品活动等页面下,我们是不希望用户可以打开控制台进行调试和查看代码的.所以要进行一些保护.解决方式:这个仅仅阻止了部分能打开控制台的方式,但还是会有漏网之鱼,可以先按F12,再访问网站就可以了在控制台打开的情况下, debugger语句用于停止执行JS代码，并调用 (如果可用) 调试函数。使用debugger语句类似于在代码中设置断点解决方式:浏览器里面关闭Debug调试利用了Error类型对象的get函数,实现了控制台触发的监听.使用时,初始化执行getChrom

2022-06-14 15:02:07 1111 2

原创编译级Javascript压缩混淆工具:Closure-Compiler

真正的编译器Closure-Compiler 主页：https://code.google.com/p/closure-compiler/压缩JS脚本的工具有很多,例如JSMin,UglifyJS等,相比于传统的压缩器只做了词法上的扫描,Google Closure-Compiler更类似于是一个编译器,分析AST来进行优化.GCC的压缩混淆除了变量替换,去除注释空格等,在高级模式下,它会破坏性的重写优化代码.对代码压缩做到了极致.优化策略是：1.更激进的重命名，如 obj.property 改为 a

2022-04-26 21:20:35 2793 2

原创 laya下优雅的节流/去抖装饰器

讲装饰器的文章一抓一大把，这里就不详细描述了。装饰器只可以修饰类和类属性。1.安装tslibtslib是一个的运行时库，其中包含所有TypeScript辅助函数。该库需要在tsconfig中的开启–importHelpers标志使用.项目目录下: npm i tslib2.配置tsconfig"compilerOptions": { "module": "commonjs", "target": "es6", "noEmitHelpers": true, "sou

2022-02-28 10:54:52 572

原创玩转WebGL(九)纹理贴花

纹理单元上节中通过采样器(Sampler)将纹理对象传给片段着色器uniform sampler2D u_Sampler;GLSL内建的texture函数来采样纹理的颜色，它第一个参数是纹理采样器，第二个参数是对应的纹理坐标。输出的是纹理的（插值）纹理坐标上的(过滤后的)颜色。sampler2D是个uniform变量，为了片段着色器中可以设置多个纹理，给纹理采样器分配的是一个位置值。一个纹理的位置值通常称为一个纹理单元(Texture Unit)。默认纹理单元是0，它是默认的激活纹理单元。 l

2022-02-09 19:56:18 2520

原创玩转WebGL(八)立方体纹理

纹理映射步骤：准备纹理图像配置集合图形纹理映射方式加载和配置纹理图像从纹理中抽出纹素赋给片元纹理坐标就是纹理图像上的坐标，通过纹理坐标可以在纹理图像上获取纹素颜色，webgl系统中的纹理坐标是二维的。设置纹理坐标： private texCoords = [ 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 1.0, 0.0,

2022-02-09 19:55:28 2311

原创玩转WebGL(七)冯氏光照模型

镜面光照镜面光照(Specular Lighting)依据光的方向向量和物体的法向量计算。我们通过反射法向量周围光的方向计算反射向量。然后我们计算反射向量和视线方向的角度，如果之间的角度越小，那么镜面光的作用就会越大。它的作用效果就是，当我们去看光被物体所反射的那个方向的时候，我们会看到一个高光。观察向量是镜面光照的一个附加变量，我们可以使用观察者世界空间位置(Viewer’s World Space Position)和片段的位置来计算。之后，我们计算镜面光亮度，用它乘以光的颜色，在用它加上作为之前

2022-02-09 19:54:56 2065

原创玩转WebGL(六)漫反射光照

现实世界的光照是极其复杂的，因此WebGL的光照仅仅使用了简化的模型并基于对现实的估计来进行模拟，光照模型都是基于我们对光的物理特性的理解。颜色根据物理知识，不透明物体的颜色是根据其反射的色光决定的。比如树叶反射绿光，就显示绿色。如果物体反射所有的色光，就显示白色。所以光源色和物体颜色的反射运算：vec3 lightColor = vec3(0.3, 0.4, 0.5);vec3 thingColor = vec3(0.5, 0.4, 0.5);vec3 resultColor = lightCo

2022-02-09 19:53:33 674

原创玩转WebGL(五)变换与坐标系统

1.变换为了深入了解变换,我们首先要在讨论矩阵之前回顾一下最基础的数学背景知识.1.1 向量向量有一个方向和大小.向量标量运算向量加减运算对应的直观表示加法:直观表示减法:向量长度使用勾股定理即可向量点乘两个向量的点乘也叫向量的内积、数量积,对两个向量执行点乘运算,就是对这两个向量对应位一一相乘之后求和的操作两个向量的点乘等于它们的数乘结果乘以两个向量之间夹角的余弦值向量叉乘叉乘只在3D空间中有定义,它需要两个不平行向量作为输入,生成一个正交于两个输入向量的第三

2022-02-09 19:51:50 949

原创玩转WebGL(四)缓冲区

1.缓冲区缓冲区是驻存于内存中的javascript对象,存储着即将推送到着色器中的attribute对象.最常用的attribute对象莫过于记录了空间中点位置信息的aVertexPosition了.缓冲区如同一个长长的队列,着色器每处理完一个顶点(或和顶点对应的其他attribute对象),缓冲区就提供下一个顶点给着色器处理.上节中,只绘制了一个点,这节来实现一个较为复杂的例子,用webgl来画一个正方形.可以通过4次每次画一个点,画4个点,然后将这4个点连起来就成为了一个正方形,此外如果我们要一次

2022-02-09 19:51:11 1640

原创玩转WebGL(三)着色器

上节中,将着色器代码直接写在字符串里太麻烦了,不方便.所以要把它拆分出去.1.拆分在src下创建shader文件夹,新建Dot.vs和Dot.fs文件Dot.vs:void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // Set the vertex coordinates of the point gl_PointSize = 50.0; // Set the point size}

2022-01-21 14:47:24 566

转载玩转WebGL(二)TypeScript开发环境搭建

1.安装安装好NodeJs和VsCode安装好TypeScript 执行npm i typescript -g2.初始化创建一个项目文件夹,执行命令生成package.jsonnpm init创建tsconfig.jsontsc --init创建项目子文件夹src 目录：存放项目ts源码lib 目录：存放库文件bin 目录：存放编译后的js3.初始化安装vscode插件Debugger for Chrome在.vscode文件夹下新增launch.json

2022-01-21 14:44:50 888

转载玩转WebGL(一)介绍

WebGLWebGL(Web Graphics Library)是一种绘图标准,使用js绑定调用OpenGL ES的API,通过 HTML5 中 canvas元素实现功能.WebGL1.0版本对应的是OpenGL ES2.0,WebGL2.0版本对应的是OpenGL ES3.0.WebGl的着色语言是GLSL ES.OpenGL ESOpenGL ES(OpenGL for Embedded Systems)早期是作为一种为嵌入式设备而设计的图形编程API.由Khronos集团定义,Khronos是

2022-01-21 14:43:47 1843

原创 LayaAir打包发布PC或MAC平台的桌面应用程序

主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate贡献主题：https://github.com/xitu/juejin-markdown-theme.

2022-01-21 14:40:17 1960

原创深入理解LayaAir引擎架构和实现原理(三)引擎渲染主循环与AOP介入控制

最近完善了下LayaTree，顺便看了看Laya引擎源码的主循环和渲染部分。这节的话，来聊聊Laya引擎的渲染主循环，以及如何在外部暂停和单帧步进调试。1.引擎启动入口工程的入口文件一般为Main.ts，这里面不仅需要处理项目相关的逻辑初始化，也会调用Laya3D.init()进行Laya引擎的初始化。在init中，可以看到创建了两个画布，mainCanvas是引擎的主画布，所有游戏内的canvas和webgl渲染都用这个画布。canvas是一个全局离线画布，不会加到DOM上，主要用来测量字体、获取i

2022-01-21 14:37:13 5171

原创深入理解LayaAir引擎架构和实现原理(二)项目调试原理及完美开发调试方案

1.背景通常情况下我们在做项目时都是在LayaAir IDE下进行调试和开发的。通常情况不会接触到typescript的“编译”和bundle过程。这节我们要深入了解其中的过程，并剥离出来，能够在VsCode中直接运行项目，实时编译调试。2.LayaAir的编译流程打开LayaAirIDE的文件夹LayaAirIDE_beta\resources\app\out\vs\layaEditor\laya\code\ts\empty我们创建空项目时会应用这个套模板，直接再IDE中编译时会使用IDE自带

2022-01-21 14:35:29 3202

原创深入理解LayaAir引擎架构和实现原理(一)跨平台引擎源码编译

拉取引擎源码LayaAir查看目录结构laya引擎是使用TypeScript开发的，引擎核心代码在src/LayaAir路径下，查看tsconfig.json文件可知其编译目标环境为es6。编译引擎代码项目路径下npm i安装所需依赖库查看package.json中的命令，会发现它的编译命令build是去执行public.bat，我觉得这个不行，引擎开发人员没有完成macOS环境下的编译，所以我们自己加个支持跨平台的编译命令crossBuild。 "scripts": { "

2022-01-21 14:34:37 1853

原创 laya-zip让你的游戏加载速度提升插件

前言laya-zip是一个用于laya引擎加载zip资源的扩展包，提供了友好和简单的API接口。与LayaTree一样，都使用Big AOP大切面理论进行设计，能够让游戏的加载速度提升350%。效果资源包体资源大小8.4M，压缩包体4.3MB情况下,:使用laya-zip下加载多个资源的耗时784毫秒使用普通资源加载耗时2798毫秒使用方法一普通项目的使用方法，下载扩展包laya-zip解压后，将laya-zip.js文件放入项目bin/libs/文件夹下，将laya-zip.d.ts文

2022-01-21 14:31:47 2796

原创 NevMesh.Js你可以在Laya引擎中直接使用的AI寻路

### 什么是NevMesh.js？NevMesh.Js是一个开源的JavaScript库,能够使用Unity导出的NavMesh文件进行AI寻路。是在ThreeJs的PatrolJS基础上，针对Laya引擎做了改造，本教程将会带大家简单了解和使用NevMesh.Js使用。![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b571c0a32aff4c9cb34a0b47db5cc17f~tplv-k3u1fbpfcp-watermark.ima

2022-01-21 14:29:16 2801

q641187432的专栏