使用IVX来创造一个自己的3D小游戏【后台和中台、React Core、three.js、Pixi.js、Krpano、antD......】

简介: 使用IVX来创造一个自己的3D小游戏【后台和中台、React Core、three.js、Pixi.js、Krpano、antD......】

微信图片_20220927112237.gif微信图片_20220927112241.gif

iVX整体技术

原子组件:(专利技术)

抽象出超过200+前端和后台原子组件,每个组件都具备“不可拆分”特性,并表达独立具有特征的属性;同时每个组件都具备“属性”“触发条件”“功能(函数)”。

逻辑编辑框架:(专利技术)通过事件面板,以及内部的“条件”“循环”“回调”“延时调用”,实现了完成的“触发式逻辑控制”。例如:当“按钮A”被“点击”,“视频B”开始“Play”中;“点击”是对象“按钮A”这个对象的一个“触发条件”,而“Play播放”则是对象“视频B”的一个“函数”。


快速事件面板:(保密技术)

由于要在Web环境下容纳超过10万行事件的快速编辑和响应,iVX需要对事件面板做很多算法优化,冲突检测。


应用预览模拟器:(保密技术)

为了用户可以快速预览,iVX开发了一套基于WASM(网页汇编语言)的快速预览框架,由于不需要编译过程,大大缩短预览时间。


AST(抽象语法树):

(专利技术)将所有对象在事件面板中的逻辑表达,转换为一个新的中间语言,这就是抽象语法树。随着AST的演进和发展,将可以独立生成各种基于代码的语言,例如Java、Python、C/C++等。


编译器:(保密技术)

将AST抽象语法树,编译为目标语言执行代码,例如编译为WebApp、微信小程序、Windows应用等。


多人开发Git:(专利技术)

只要是从事程序员的工作应该都知道,只要一个项目是多人协作完成的基本上都会用到SVN或者git等代码托管工具。


由于iVX才有的对象存储的方式,并不是基于文本的代码,并不能直接使用开源的Git产品和框架,因此,iVX自行开发了一套自有知识产权的Git,专门用于对象的冲突检测、代码合并、代码拉取的算法。


3D小游戏开发(零基础)

3D游戏项目创建

首先我们需要找到ivx编辑器,然后选择你所需要的场景。这里可以开发web网页版、小程序(微信,支付宝),H5,原生Android以及IOS等等,可以说功能非常的全,面很广。最后,我们选择微信3D小游戏,项目的昵称随便起,但是还是建议和你们平时项目名一样,好歹也是开发,还是正规点吧。微信图片_20220927112505.png

首页效果图

创建项目,进入首页你会发现一个三维的操作界面,这是ivx平台已经初始化的,可以拖拖滑滑感觉一下。ok,下面就也可以进行操作了。微信图片_20220927112534.png

创建容器

容器内部塞入gif动态图,容器里面基本上什么都能塞,可以动动小手尝试尝试奥,文末链接都已经准备好了。微信图片_20220927112555.png


怎么样,是不是看到非常的炫酷。微信图片_20220927112606.png

设置触发器&&时间轴

设置时间轴和触发器,相当于设置一个监听,当你点击的时候会触发监听,也就是触发我们添加的触发器,接着可以执行触发器里的操作。怎么看怎么觉得,这就是Android里面的OnClick()点击监听。微信图片_20220927112624.png

六大变量&&三大数组微信图片_20220927112645.png

可以说变量是所有编程语言的关键,也可以将它们当作存储数据的容器。数组可以定位二维、三维坐标。

点光源微信图片_20220927112659.png

iVX前端技术栈

自定义组件:用户可以根据iVX提供的组件标准,自行编写组件或采用现成库npm包等,上传自己的组件。

React Core:前端生成代码以及前端IDE都是通过React实现的。

吸收Vue特性:相当于是用React将Vue的简洁的很多特性重新实现了一遍,将Vue的简洁+React的高效融为一体。

3D组件:three.js,3D实现基于three.js,能实现强大的3D在线编辑功能,可能控制对象旋转、运动、镜头等;能实现720云相关效果。

Pixi.js:物理引擎实现(类似egret)。

图标组件:Echart

富文本编辑器:Quill

全景组件:Krpano

默认UI组件:antD

前端伪类:修改属性,马上显示。

路由:自有技术支持。

搜索引擎优化:自有技术支持。

iVX中台后台技术栈

后台和中台的关系:在iVX中,自动生成的代码集中在前端和中台(中台包括所有的业务逻辑),这两部分都可以编译为JavaScript;而真正的后台部分,则是通过Go语言编写的DLL动态连接库来实现的,这个DLL是直接对接后端IaaS资源层,这个DLL是可以从网站上免费下载的。

微服务架构:采用iVX自身的方式来建立微服务和微服务上架管理机制。在iVX内部,包括“公开服务”“组内微服务”“(企业)微服务”“服务”的概念,灵活实现服务有序共享,并保证数据安全访问。

BaaS (Backend as a Service):“iVX云”后台高度集成AWS后台产品,将所有后台“数据”“API”“计算”都看成资源来进行管理,并将AWS的核心后台产品都抽象成了iVX中后台组件进行使用,方便用户快速搭建后台的同时,还透传了云计算厂商的后端能力,使得所有IaaS层资源“计算”“流量”“存储”所有节点都是弹性的;通过iVX发挥云计算最大能效。

FaaS(Function as a Service):直接使用AWS或阿里云的函数计算lambda。

资源和计费管理:通过云计算的方式对用户运营的应用进行收费和管理。







目录
相关文章
|
13天前
|
JavaScript
JS实现简单的打地鼠小游戏源码
这是一款基于JS实现简单的打地鼠小游戏源码。画面中的九宫格中随机出现一个地鼠,玩家移动并点击鼠标控制画面中的锤子打地鼠。打中地鼠会出现卡通爆破效果。同时左上角统计打地鼠获得的分数
30 1
|
2月前
|
前端开发 JavaScript 网络架构
react对antd中Select组件二次封装
本文介绍了如何在React中对Ant Design(antd)的Select组件进行二次封装,包括创建MSelect组件、定义默认属性、渲染Select组件,并展示了如何使用Less进行样式定义和如何在项目中使用封装后的Select组件。
89 2
react对antd中Select组件二次封装
|
10天前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏,捞出海里的鱼,捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码!
16 3
|
11天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
35 0
html5+three.js公路开车小游戏源码
|
11天前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏,捞出海里的鱼,捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码!
22 0
JS趣味打字金鱼小游戏特效源码
|
20天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
53 10
|
18天前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
42 5
|
2月前
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
115 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
2月前
|
前端开发
react使用antd中的Checkbox实现多选
在React项目中,通过Ant Design的Checkbox组件实现多选。引入Checkbox,使用Checkbox.Group来管理Checkbox,设置`value`属性绑定选中项数组,通过`onChange`更新数组。维护一个全选状态,根据选中项数量与总数决定全选按钮状态。全选按钮的`onChange`事件用于控制所有Checkbox的选中状态。
82 1
react使用antd中的Checkbox实现多选
|
2月前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
67 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用