LAYA和TypeScript制作H5入门——准备工作

最新推荐文章于 2023-04-24 16:13:56 发布
VIP文章 最新推荐文章于 2023-04-24 16:13:56 发布
阅读量993 收藏 5
点赞数 1
分类专栏： LAYA H5制作 文章标签： laya H5 入门 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40947729/article/details/102510231
版权

查看上一篇：
Laya和TypeScript制作H5——开始

第一步：
打开引擎，新建项目，选择layaair空项目，类型为typescript。创建项目
第二步：
了解laya编辑器的大致功能区域。
左侧的几个功能区域

第三步：
熟悉和了解一个laya ts空项目文件夹的组成和它们的功能。
四个我们平时需要操作的文件夹
上图中

最低0.47元/天 解锁文章
小凡4438
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LayaAir+FairyGUI+TypeScript打地鼠游戏LayaAir
07-20
利用LayaAir引擎+FairyGUI编辑器+TypeScript语言 制作的打地鼠游戏
在基于TypeScript的LayaAirHTML5游戏开发中使用AMD
08-07
在基于TypeScript的LayaAir HTML5游戏开发中使用AMD
laya资源下载的坑.docx
11-21
layabox在微信小游戏上，用wx.downfile下载资源后（3d资源），但是不会去使用本地的资源。而是每次用的时候都会去下载服务器上的资源。目前本人已经修改了一小段源码，实现了微信上的资源下载和读取哦
Laya 用TypeScript写的代码，编译成JavaScript后bundle.js没更新.pdf
12-16
Laya 用TypeScript写的代码，编译成JavaScript后bundle.js没更新
用TypeScipt和AMD模块化理念实现React官方教程(一)环境搭建
eureka2000的专栏
02-21 1621
世事沧桑，回望一开始在csdn上写的blog，既然已经超过14年了，这14年，在其它地方写的东西可能已经没了，而csdn上的依然还在，先赞一个。斗转星移，作为一个已经不在IT行业的程序员，依然执着于这些代码技术。这么多年后TypeScript和React的出现，但却缺少一些中文资料。所以特别推出这篇纯原创的中文教程。
LayaAir(一)—搭建TypeScript开发环境（TS代码编译器）
qq_40249982的博客
04-27 1221
操作说明链接: TS开发环境搭建。
Laya和TypeScript制作H5——开始
qq_40947729的博客
10-11 886
简单介绍一下自己 姓名：小凡， 编程时间：3年， 擅长的领域：Unity，Laya。 熟悉的语言：C#,TS,Js 喜欢的方向：游戏制作。 为什么要写这个系列 原因有二，第一是目前的主要工作内容是使用LAYA制作H5项目，工作中有时候会遇到一些问题，有时遍寻不到解决方案，唯有自己寻找解决方法。第二是有时候做了一些简单的效果，自我感觉还不错。故都集中在此交流和分享。 一些注意事项 本系列的主要内容...
适合小白的LayaAir使用说明（创建laya的简易程序教程1.0）
qq_42268898的博客
03-11 2843
先说一句，这篇文章适合刚上手Layaair啥都不懂的小白。 最近刚开始接触LayaBox引擎，发现除了官方的文档和一些示例，其他教材都要收费，坑爹。秉承勤俭持家的精神，于是就自己摸索（当然了，还是有他人指导的，这点很幸运）。这里简单介绍一下如何一步步使用编译器LayaAir来建一个场景以及建完之后关联代码吧。关于环境这一部分，官方文档写的很细致了，就不再...
Laya编辑器二次开发（一）找到需要操作的文件
lanuo的专栏
04-06 733
写在前面： 本系列教程非系统性的介绍Laya编辑器的结构及组织方式，只是通过分享一些二次开发功能的实现过程，抛砖引玉，给大家 提供编辑器二次开发的思路。 准备内容： 1、LayaAir IDE 项目中实际使用的编辑器版本为LayaAir IDE 2.0.0， 教程中使用的编辑器版本为LayaAir IDE 2.11.0beta1， 比较大的版本跨度验证了之后的开发方法没有版本问题需要注意。 2、sublime、vscode等可以全局快速查找内容的编辑器 打开Laya编辑器目录如下： .
Laya学习之游戏入口
Fictory的博客
04-24 148
会看到这样 这个就是laya的入口 从上到下加载多需要的库 最后执行代码bundle.js 是咱们的代码文件 进入Main.ts就可以开发砸门的游戏。一、打开Laya中的Index。
Laya《一张船票》H5源代码
03-17
Laya《一张船票》H5源代码
Laya 用TypeScript写的代码，编译成JavaScript后bundle.js没更新问题的原因追寻.pdf
12-16
Laya 用TypeScript写的代码，编译成JavaScript后bundle.js没更新问题的原因追寻
Laya微信排行榜(TypeScript脚本)
01-09
Laya制作的基于Ts脚本的微信排行榜功能，实现开放域的子域和父域功能，可以交互数据，默认有两个排行榜用标签页的方式分开，傍1傍2
Laya 2.0 开发3D小游戏 入门教学
07-01
本课程是用的Laya 2.0开发3D游戏，从安装开发环境，到游戏细节，手把手教学，详细开发思路和过程，希望能给想入行的同学带来些许帮助。
Laya和iframe通信.zip
11-23
Laya和iframe通信,Laya和iframe通信,Laya和iframe通信,非addeventLister监听通信
laya分包简单教程（无需积分和付费）
05-19
laya分包简单教程（无需积分和付费）
ltg-laya:Laya H5游戏智能开发框架
04-08
LTG-Laya 是一个Laya小游戏快速开发框架 相关功能 简化开发流程 小游戏平台async/await支持 简化平台sdk接入流程 一键自动发布 自动拆分子包 android/ios相关sdk接入 对应版本 Unity: 2018.4.17f1 Laya:2.9.0 目录...
FairyGUI-layabox:LayaAir的灵活UI框架
04-24
2.1这两个版本layair1.x 用于LayaAir1.x版本目录结构source fairygui的源码demo 例子工程,可用Laya IDE直接打开UIProject UI 工程,可以FairyGUI编辑器打开获取fairygui库如果你只是想添加或者更新fairygui库到你的...
laya-关于预设（无需积分和付费）
04-14
给刚学习laya的新手的预设入门教程
laya+typescript实现3d迷雾效果，走过的地方迷雾去除
最新发布
05-15
实现3D迷雾效果的关键是使用Shuriken粒子系统和深度纹理。以下是一些步骤： 1. 创建一个LayaAir3D项目并安装LayaAirIDE。 2. 创建一个3D场景并添加相机。 3. 添加一个平面地形和一个角色模型。 4. 创建一个空节点并将模型和地形添加到该节点下。 5. 创建一个Shuriken粒子系统并将其添加到空节点下。 6. 创建一个深度纹理，并将其添加到相机中。 7. 在代码中，使用Shader3D来控制深度纹理和粒子系统的渲染。 下面是一个简单的示例代码： ```typescript import { Laya } from "Laya"; import { Scene3D } from "laya/d3/core/scene/Scene3D"; import { Camera } from "laya/d3/core/Camera"; import { Vector3 } from "laya/d3/math/Vector3"; import { MeshSprite3D } from "laya/d3/core/MeshSprite3D"; import { Sprite3D } from "laya/d3/core/Sprite3D"; import { ShuriKenParticle3D } from "laya/d3/core/particleShuriKen/ShuriKenParticle3D"; import { Shader3D } from "laya/d3/shader/Shader3D"; import { ShaderDefine } from "laya/d3/shader/ShaderDefine"; import { ShaderData } from "laya/d3/shader/ShaderData"; import { ShaderPass } from "laya/d3/shader/ShaderPass"; import { BaseTexture } from "laya/resource/BaseTexture"; import { RenderTexture } from "laya/resource/RenderTexture"; import { TextureFormat } from "laya/resource/TextureFormat"; export class Fog3D { private _scene: Scene3D; private _camera: Camera; private _depthTexture: RenderTexture; private _depthShader: Shader3D; private _depthPass: ShaderPass; private _fogShader: Shader3D; private _fogPass: ShaderPass; private _depthData: ShaderData; private _fogData: ShaderData; private _fogTexture: BaseTexture; private _particles: ShuriKenParticle3D[]; constructor(scene: Scene3D, camera: Camera) { this._scene = scene; this._camera = camera; // 创建深度纹理 this._depthTexture = new RenderTexture(1024, 1024, TextureFormat.R8G8B8A8, BaseTexture.FORMAT_R8G8B8A8, true); this._camera.depthTextureMode |= Camera.DEPTHTEXTUREDEPTH; // 创建深度渲染Shader this._depthShader = Shader3D.find("DEPTH"); if (!this._depthShader) { this._depthShader = Shader3D.add("DEPTH"); this._depthShader.addSubShaderPass(ShaderPassNames.depth); } this._depthPass = this._depthShader.getSubShaderPass(ShaderPassNames.depth); // 创建迷雾渲染Shader this._fogShader = Shader3D.find("FOG"); if (!this._fogShader) { this._fogShader = Shader3D.add("FOG"); this._fogShader.addSubShaderPass(ShaderPassNames.fog); } this._fogPass = this._fogShader.getSubShaderPass(ShaderPassNames.fog); // 创建ShaderData this._depthData = new ShaderData(); this._fogData = new ShaderData(); // 获取粒子系统 this._particles = []; this._scene.traverse((node: Sprite3D) => { if (node instanceof ShuriKenParticle3D) { this._particles.push(node); } }); } public render() { // 渲染深度纹理 this._depthData.setMatrix4x4(Shader3D.WORLDVIEWPROJECT_MATRIX, this._camera.projectionViewMatrix); this._scene.render(this._depthTexture, this._camera, true, null, false, this._depthPass, this._depthData); // 设置ShaderData this._fogData.setTexture(Fog3D.FogTexture, this._fogTexture); this._fogData.setTexture(Fog3D.DepthTexture, this._depthTexture); this._fogData.setVector3(Fog3D.CameraPosition, this._camera.transform.position); // 渲染粒子系统 for (let i = 0, n = this._particles.length; i < n; i++) { let particle = this._particles[i]; particle.renderer.sharedMaterial.setShaderPass(this._fogPass); particle.renderer.sharedMaterial.setShaderData(this._fogData); } } public dispose() { this._depthTexture.destroy(); this._depthData.destroy(); this._fogData.destroy(); } static FogTexture: number = Shader3D.propertyNameToID("u_FogTexture"); static DepthTexture: number = Shader3D.propertyNameToID("u_DepthTexture"); static CameraPosition: number = Shader3D.propertyNameToID("u_CameraPosition"); } class ShaderPassNames { static depth: string = "DEPTH"; static fog: string = "FOG"; } // 初始化 Laya3D.init(0, 0, true); Laya.stage.scaleMode = Laya.Stage.SCALE_FULL; Laya.stage.screenMode = Laya.Stage.SCREEN_NONE; // 创建场景 let scene = Laya.stage.addChild(new Scene3D()); // 创建相机 let camera = new Camera(0, 0.1, 100); camera.transform.translate(new Vector3(0, 1, -5)); camera.transform.rotate(new Vector3(0, 0, 0), true, false); camera.clearColor = null; scene.addChild(camera); // 创建地形 let terrain = MeshSprite3D.createFromMesh(Laya.PrimitiveMesh.createPlane(100, 100, 100, 100)); terrain.transform.translate(new Vector3(0, 0, 0)); scene.addChild(terrain); // 创建角色 let character = Sprite3D.load("res/character.lh"); character.once(Laya.Event.HIERARCHY_LOADED, null, () => { scene.addChild(character); }); // 创建迷雾 let fog = new Fog3D(scene, camera); fog.FogTexture = Laya.loader.getRes("res/fog.png"); fog.FogTexture.wrapModeU = Laya.BaseTexture.WARPMODE_CLAMP; fog.FogTexture.wrapModeV = Laya.BaseTexture.WARPMODE_CLAMP; fog.FogTexture.filterMode = Laya.BaseTexture.FILTERMODE_BILINEAR; fog.FogTexture.anisoLevel = 16; // 渲染 Laya.timer.frameLoop(1, null, () => { character.transform.translate(new Vector3(0, 0, 0.01)); fog.render(); }); // 加载资源 Laya.loader.create([ { url: "res/character.lh", type: Laya.Loader.HIERARCHY }, { url: "res/fog.png", type: Laya.Loader.TEXTURE2D } ], Laya.Handler.create(null, () => { console.log("资源加载完成！"); })); ``` 在上面的示例代码中，我们使用Shader3D来控制深度纹理和粒子系统的渲染。我们创建了两个Shader：DEPTH和FOG，以及相应的ShaderPass。DEPTH Shader用于渲染深度纹理，FOG Shader用于渲染迷雾效果。我们还使用ShaderData来传递数据到Shader中，例如深度纹理、迷雾纹理和相机位置。最后，我们使用Shuriken粒子系统来实现迷雾效果。 在代码中，我们使用了一个Fog3D类来封装迷雾效果。在构造函数中，我们创建了深度纹理和Shader，并获取了粒子系统。在render()方法中，我们首先渲染深度纹理，然后设置ShaderData，并渲染粒子系统。在dispose()方法中，我们释放了深度纹理和ShaderData。 我们还封装了一些常量，例如FogTexture、DepthTexture和CameraPosition，它们用于传递数据到Shader中。 最后，我们创建了一个场景、相机、地形、角色和迷雾，并将它们渲染到屏幕上。注意，我们需要先加载资源，然后才能创建迷雾。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值