百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

APP、小程序开源小游戏引擎,支持2D、3D的游戏开发

zhezhongyun 2025-03-02 19:55 77 浏览

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个支持2D、3D的游戏与应用开发的的小游戏引擎——LayaAir。

支持WebGL 1.0与2.0 自适应。支持ActionScript3、TypeScript、JavaScript三种开发语言,适用2D、3D产品研发。性能媲美原生APP,一次开发HTML5、APP(安卓与iOS)、小游戏(微信小游戏、QQ小游戏、百度小游戏、支付宝小游戏、BiliBili小游戏、字节跳动小游戏、小米快游戏、OPPO小游戏、vivo小游戏、华为快游戏、等)各个平台同时发布。


功能特性

LayaAir引擎主要包括 引擎库LayaAir IDE 两大核心部分。

LayaAir2.0引擎库功能

  • LayaAir2.0引擎不仅保持了1.0的原有功能,比如:精灵、矢量图、文本、富文本、位图字体、动画、骨骼、音频与视频、滤镜、事件、加载、缓动、时间、网络、UI系统、物理系统、TiledMap、prtocol等API;
  • 还新增内置了box2D物理引擎、组件化支持,以及150多款3D功能,比如:新增的主要官方材质包括PBRStandardMaterial、PBRSpecularMaterial以及UnlitMaterial材质等。
  • 纹理方面,增加多种纹理参数配置(mipmap、format、wrapModeU、wrapModeV、filterMode、anisoLevel), 增加纹理上传像素接口, GPU纹理压缩。
  • 动画方面,新增Animator动画融合功能crossFade,新增动画多层混合播放,动画更新机制调整为实时插值,大幅减少内存和动画流畅度表现,新增多种材质属性动画
  • 支持开发2D、3D产品研发,支持同时发布为Web(浏览器、webView)、Native APP(IOS、安卓)、小游戏(微信、手Q、百度、头条、抖音、小米、OPPO、vivo、华为)、等多种版本。

LayaAir2.0 IDE功能

LayaAir2.0 IDE主要包括项目管理代码开发编辑器可视化编辑器第三方工具链支持工具等。其中主要功能包括:

  • 代码开发
  • UI与场景编辑器
  • 场景管理(2.0新增)
  • 粒子编辑器
  • 动画编辑器
  • 物理编辑器(2.0新增)
  • 组件化支持(2.0新增)
  • 3D支持(2.0新增)
  • LayaCloud项目支持(2.0新增)
  • 脚本扩展
  • 预设
  • APP打包
  • JS混淆与压缩
  • 第三方工具链转换工具(Unity3D、TiledMap、Spine、龙骨……)

Laya2.0 IDE 兼容LayaAir 1.x版本的写法,在2d项目中,可以不需要太大的改动即可把原有项目升级到2.0引擎(升级前建议备份)

Laya2.0 IDE 采用挂载组件脚本与场景管理的方式进行开发,在ide中编辑场景与页面组件,通过添加脚本的方式,使项目开发更利于程序,美术,策划的协同工作,并且对初次接触Laya的开发者,更易于上手,开发方式更友好。

开发语言

由于LayaAir引擎支持ActionScript3(AS3)TypeScript(TS)JavaScript(JS)三种语言开发,到底用哪种语言更好呢?常常困惑着刚接触引擎的新手们。这里简单介绍一下。

关于JS语言

需要大家注意的是JS语言虽然上手更为容易,但是作为一弱类型语言,开发与调试的难度,以及大型项目的管理与多人协作等方面,都不如TS与AS3这种可以在IDE中检测类型和语法语言。当代码越来越多的时候,JS一旦不小心写错,IDE中并不会有任何提示,只有在运行的时候才会发现问题,经常有开发者为了查一个小小的失误,花费大量的时间成本。所以虽然支持JS语言开发,但并不建议采用该语言作为中型或大型项目的开发。

关于TS语言

TS语言是LayaAir引擎官方推荐的开发语言,也是自2.2引擎开始,LayaAir引擎源码所使用的语言。在官方的2.0引擎视频教学中,也会仅采用TS语言进行教学。

关于AS语言

AS语言是LayaAir 2.2版本之前的引擎源码语言,AS3语言曾经是页游时代的霸主,但自从Adobe正式宣布放弃Flash之后,也代表着该语言也将步入无人维护的境地。那一些新的语言特性自然难以支持,毫无疑问,继续使用该语言将会拖引擎的后腿。所以,LayaAir引擎源码语言进行了变更,但2.X版引擎,AS语言版本仍会保持兼容及维护。但未来3.x一定会放弃该语言的支持。所以建议开发者在创建新项目的时候不要使用AS语言。

代码示例

ActionScript

package LayaAir3D_Scene3D {
	import common.CameraMoveScript;
	import laya.d3.core.Camera;
	import laya.d3.core.scene.Scene3D;
	import laya.d3.math.Vector3;
	import laya.d3.math.Vector4;
	import laya.display.Stage;
	import laya.utils.Handler;
	import laya.utils.Stat;
	
	public class SceneLoad1 {
		public function SceneLoad1() {
			//初始化引擎
			Laya3D.init(0, 0);
			Stat.show();
			Laya.stage.scaleMode = Stage.SCALE_FULL;
			Laya.stage.screenMode = Stage.SCREEN_NONE;
			//加载场景
			Scene3D.load("res/threeDimen/scene/LayaScene_dudeScene/Conventional/dudeScene.ls", Handler.create(this, function(scene:Scene3D):void {
				Laya.stage.addChild(scene) as Scene3D;
				
				//获取场景中的相机
				var camera:Camera = scene.getChildByName("Camera") as Camera;
				//移动摄像机位置
				camera.transform.position = new Vector3(0, 0.81, -1.85);
				//旋转摄像机角度
				camera.transform.rotate(new Vector3(0, 0, 0), true, false);
				//设置摄像机视野范围(角度)
				camera.fieldOfView = 60;
				//设置背景颜色
				camera.clearColor = new Vector4(0, 0, 0.6, 1);
				//加入摄像机移动控制脚本
				camera.addComponent(CameraMoveScript);
				
				//设置灯光环境色
				//scene.ambientColor = new Vector3(2.5, 0, 0);
			}));
		}
	}
}

JavaScript

class SceneLoad1{
	constructor(){
		Laya3D.init(0, 0);
        Laya.Stat.show();
        Laya.stage.scaleMode = Laya.Stage.SCALE_FULL;
        Laya.stage.screenMode = Laya.Stage.SCREEN_NONE;
        Laya.Scene3D.load("res/threeDimen/scene/LayaScene_dudeScene/Conventional/dudeScene.ls", Laya.Handler.create(this, this.sceneLoadFinished));
	}
	sceneLoadFinished(scene){
		Laya.stage.addChild(scene);
        let camera = scene.getChildByName("Camera");
        camera.addComponent(CameraMoveScript);
	}
}

//激活启动类
new SceneLoad1();

TypeScript

import CameraMoveScript from "./common/CameraMoveScript"
class SceneLoad1 {
    constructor() {
        Laya3D.init(0, 0);
        Laya.Stat.show();
        Laya.stage.scaleMode = Laya.Stage.SCALE_FULL;
        Laya.stage.screenMode = Laya.Stage.SCREEN_NONE;
        
        Laya.Scene3D.load("res/threeDimen/scene/LayaScene_dudeScene/Conventional/dudeScene.ls", Laya.Handler.create(null, function(scene:Laya.Scene3D):void {
            Laya.stage.addChild(scene) as Laya.Scene3D;
            var camera:Laya.Camera = scene.getChildByName("Camera") as Laya.Camera;
            camera.addComponent(CameraMoveScript);
        }));
    }
}
new SceneLoad1;

引擎示例



—END—

开源协议:
https://gitee.com/layabox/LayaAir/blob/master/LICENSE.md

开源地址:
https://gitee.com/layabox/LayaAir

相关推荐

JavaScript做个贪吃蛇小游戏(过关-加速),无需网络直接玩。

JavaScript做个贪吃蛇小游戏(过关-则加速)在浏览器打开文件,无需网络直接玩。<!DOCTYPEhtml><htmllang="en"><...

大模型部署加速方法简单总结(大模型 ai)

以下对大模型部署、压缩、加速的方法做一个简单总结,为后续需要备查。llama.cppGithub:https://github.com/ggerganov/llama.cppLLaMA.cpp项...

安徽医大第一医院应用VitaFlow Liberty(R)Flex为患者焕然一“心”

近日,在安徽医科大学第一附属医院心血管内科负责人暨北京安贞医院安徽医院业务副院长喻荣辉教授的鼎力支持和卓越带领下,凭借着先进的VitaFlowLiberty(R)Flex经导管主动脉瓣可回收可...

300 多行代码搞定微信 8.0 的「炸」「裂」特效!

微信8.0更新的一大特色就是支持动画表情,如果发送的消息只有一个内置的表情图标,这个表情会有一段简单的动画,一些特殊的表情还有全屏特效,例如烟花表情有全屏放烟花的特效,炸弹表情有爆炸动画并且消息和...

让div填充屏幕剩余高度的方法(div填充20px)

技术背景在前端开发中,经常会遇到需要让某个div元素填充屏幕剩余高度的需求,比如创建具有固定头部和底部,中间内容区域自适应填充剩余空间的布局。随着CSS技术的发展,有多种方法可以实现这一需求。实现步骤...

css之div内容居中(css中div怎么居中)

div中的内容居中显示,包括水平和垂直2个方向。<html><head><styletype="text/css">...

使用uniapp开发小程序遇到的一些问题及解决方法

1、swiper组件自定义知识点swiper组件的指示点默认是圆圈,想要自己设置指示点,需要获得当前索引,然后赋给当前索引不同的样式,然后在做个动画就可以了。*关键点用change方法,然后通过e.d...

微信小程序主页面排版(怎样设置小程序的排版)

开发小程序的话首先要了解里面的每个文件的作用小程序没有DOM对象,一切基于组件化小程序的四个重要的文件*.js*.wxml--->view结构---->html*.wxss--...

Vue动态组件的实践与原理探究(vue动态组件component原理)

我司有一个工作台搭建产品,允许通过拖拽小部件的方式来搭建一个工作台页面,平台内置了一些常用小部件,另外也允许自行开发小部件上传使用,本文会从实践的角度来介绍其实现原理。ps.本文项目使用VueCLI...

【HarmonyOS Next之旅】兼容JS的类Web开发(四) -> tabs

目录1->创建Tabs2->设置Tabs方向3->设置样式4->显示页签索引5->场景示例编辑1->创建Tabs在pages/index目录...

CSS:前端必会的flex布局,我把布局代码全部展示出来了

进入我的主页,查看更多CSS的分享!首先呢,先去看文档,了解flex是什么,这里不做赘述。当然,可以看下面的代码示例,辅助你理解。一、row将子元素在水平方向进行布局:1.垂直方向靠顶部,水平方向靠...

【HarmonyOS Next之旅】兼容JS的类Web开发(四) -> swiper

目录1->创建Swiper组件2->添加属性3->设置样式4->绑定事件5->场景示例编辑1->创建Swiper组件在pages/index...

CSS:Flex布局,网页排版神器!(css3 flex布局)

还在为网页排版抓狂?别担心,CSS的flex布局来了,让你轻松玩转各种页面布局,实现网页设计自由!什么是Flex布局?Flex布局,也称为弹性布局,是CSS中的一种强大布局方式,它能够让你...

移动WEB开发之flex布局,附携程网首页案例制作

一、flex布局体验传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局1.1flex弹性布局:操作方便,布局极为简单,移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本,不支持或仅部...

2024最新升级–前端内功修炼 5大主流布局系统进阶(mk分享)

2024最新升级–前端内功修炼5大主流布局系统进阶(mk分享)获课》789it.top/14658/前端布局是网页设计中至关重要的一环,它决定了网页的结构和元素的排列方式。随着前端技术的不断发展,现...