Laya Air+Unity3D双引擎带你做个天空球3D小游戏(上篇)

上个月有个gz让我高仿做一个的天空球微信小游戏,当晚做出Demo后第二天那gz居然说不要了(很气愤),所以这个Demo一直保留至今,今天刚好就做为供大家学习Laya3D的demo分享给大家

国际惯例先上效果图:

一、使用Unity3D引擎搭建游戏场景:

1.首先建立一个新的unity3d工程,新建两个文件夹分别用于保存资源、场景,并导入Laya官方提供的Unity插件:

2.将新建场景保存在Scenes文件夹(命名自取),然后在场景下创建一个Plane的3d物体重命名为bg,

3.然后我们在res下创建一个texture文件夹用于存放纹理,这里将我自己准备好的图片资源放进来:

4.再在res下新建一个metrail的文件夹,并创建四个材质球,分别用于做球体、背景、地板和拖尾的材质,我们直接在这里吧纹理关联到材质球中:

5.然后将bg的材质球给到刚刚创建的bg节点下的网格渲染器组件中,然后吧节点立起来(因为游戏是看向z轴的):

6.然后我们创建一个3d球体也给player的材质球并加上刚体组件(因为游戏是根据物理引擎的运作的),在节点创建一个Trail并挂上拖尾组件:

7.因为拖尾组件创建出来width是呈条带状的,所以我们要稍微改下他的显示拖尾为锥状,顺便也微调下显示遗留的时间,color调成自己喜欢的颜色:

8.玩家控制的球体有了背景图也有了,接下来就是要创建用于移动的地板,我们会创立一个floor_root的根节点,在下面存放Box网格的物体:

9.我们通过碰撞器的Edit调整下物体的状态(读者随意),也加上我们的刚体组件(注意一定是3d的刚体,不是2d的):

10.调整好摄像机的位置,使其对准物体:

11.基本的场景有了我们还要创建一组物体用于在球的两边建筑物循环显示(上面的gif可以看到),我们做好后直接拖成预制体放到文件夹下,在下篇的文章中通过代码动态创建(因为做起来要花点时间作者就懒得做了Q.Q直接上个效果图):

12.还有我们的地板也要做成预制体,因为目前场景只有提前放好的三个地板节点,后面通过代码动态生成:

13.接下来,也是最重要的一步,因为目前为止Laya对unity引擎组件的支持并不多,在材质方面也只能使用官方提供的,所以我们需要将所有的材质球变成Laya的,不然没有办法显示出来:

二、通过插件导出3d场景给Laya引擎使用:

找到导出场景的按钮:

然后我们配置好发布路径选择导出场景,这里建议大家跟作者一样把路径设置到Laya3D工程的bin/res目录下,方便每次修改导出后直接可以使用,发布后生成.ls数据文件:

场景导出后还有一个就刚刚制作的3d预制体,我们要选择吧场景所有节点忽略,只把预制体的暴露出来,选择导出预设,在路径下就会生产.lh的文件:

然后就能看到默认导出的场景(.ls)和预制体(.lh)文件:

三、加载3d场景到舞台下:

这里我们提前创建好代码的脚本文件,方便下篇文章直接上手写代码:

加载3d场景:

然后我们运行一下,就能看到场景已经被Laya加载进来:

可目前这个场景还是个死的,不能进行任何运动(上面的拖尾因由于球在空中收到物理引擎影响在往下掉),下一篇文章奎斯再带大家写代码让所有物体运行起来

 

感谢阅览奎斯文章,希望各位也在学习的Laya游戏引擎的小伙伴能有所收获

LayaAir3D是一个基于WebGL的3D引擎,使用它可以在网页上创建和显示3D内容。要使用LayaAir3D实现一个在立体空间中的弹跳效果,并播放立体空间音效,你需要完成以下几个步骤: 1. 创建3D场景和摄像机: 首先,你需要创建一个3D场景和一个摄像机,摄像机将用来从不同角度观看场景中的物体。 2. 添加地面: 为了实现弹跳效果,需要在场景中添加一个平面作为地面。 3. 创建体并添加物理组件: 创建一个体对象,并为其添加刚体组件(Rigidbody),以便它能够响应重力和碰撞。 4. 实现弹跳逻辑: 通过物理引擎来控制体的行为,使体在触碰地面时产生弹跳效果。通常需要设置体的物理属性,如质量、弹性等。 5. 添加立体空间音效: 在LayaAir3D中,立体空间音效可以通过设置音频源(AudioSource)和音频监听器(AudioListener)来实现。你需要准备一个音频文件,并将其设置为体或场景中某个对象的音频源。同时,确保场景中有音频监听器来捕捉和播放音效。 以下是一个简化的代码示例,用于演示如何在LayaAir3D中创建一个简单的弹跳: ```javascript // 初始化引擎 LayaAir.init(0, 0); // 创建场景 var scene = Laya.stage.addChild(new Laya.Scene3D()); // 创建摄像机 var camera = new Laya.Camera(0, 0.1, 100); camera.transform.position = new Laya.Vector3(0, 6, 8); camera.transform谯仰(0, -15); scene.addChild(camera); // 创建光照 var directionalLight = scene.addChild(new Laya.DirectionLight()); directionalLight.transform.position = new Laya.Vector3(1, 1, 0); directionalLight.transform谯仰(0, -30); // 创建地面 var ground = scene.addChild(new Laya.MeshSprite3D(Laya.PrimitiveMesh.createPlane(10, 10))); ground.transform.position = new Laya.Vector3(0, 0.5, 0); // 创建体 var sphere = scene.addChild(new Laya.MeshSprite3D(Laya.PrimitiveMesh.createSphere(1))); sphere.transform.position = new Laya.Vector3(0, 5, 0); sphere.meshRender.material = new Laya.StandardMaterial(); // 添加刚体组件 var rigidbody = sphere.addComponent(Laya.Rigidbody); rigidbody的质量 = 1; rigidbody.isKinematic = false; rigidbody.enableGravity = true; // 添加碰撞组件 sphere.addComponent(Laya.Collision); // 添加音效(需要先加载音频文件) var audio = sphere.addComponent(Laya.AudioSource); audio.clip = Laya.SoundManager.load("audio/yourAudio.wav"); sphere.addComponent(Laya.AudioListener); // 这里需要编写碰撞事件处理逻辑,使体在碰撞地面后弹跳 ``` 注意:上述代码仅为示例,具体实现时需要结合实际的项目需求进行调整,并且确保有正确的资源路径和物理参数设置。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值