这篇文章讨论如何在基于Babylon.js的WebGL场景中,实现多个简单卡牌类对象的显示.选择.分组.排序,同时建立一套实用的3D场景代码框架.由于作者美工能力有限,所以示例场景视觉效果可能欠佳,本文的重点在于对相关技术的探讨. 因为文章比较长,读者可以考虑将网页导出为mhtml格式,使用Word浏览.Chrome浏览器导出mhtml文件的方法见末尾. 一.显示效果: 1.访问https://ljzc002.github.io/CardSimulate/HTML/TEST2.html查看“卡牌…

这篇文章讨论如何在基于Babylon.js的WebGL场景中,建立棋盘状的地块和多个可选择的棋子对象,在点选棋子时显示棋子的移动范围,并且在点击移动范围内的空白地块时向目标地块移动棋子.在这一过程中要考虑不同棋子的移动力和影响范围不同,以及不同地块的移动力消耗不同. 一.显示效果: 1.访问https://ljzc002.github.io/CardSimulate/HTML/TEST3tiled.html查看“棋盘测试页面”: 场景中是一个20*20的棋盘,地块随机为草地.土地.雪地,棋盘中央…

  这篇文章将讨论如何在一个自定义的地面网格上进行简单的2D寻路,以及确定路径后如何使用基于物理引擎的运动方式使物体沿路径到达目标地点.读者需要预先对WebGL和Babylonjs知识有一些了解,可以参考我录制的WebGL入门视频教程和翻译的官方入门文档,当然也可以用自己喜欢的其他方式来学习. 文章主要分成如下几部分: 1.自定义地面网格与寻路矩阵 2.生成Babylon格式3D模型 3.使用pathfinding库进行2D寻路 4.基于cannon.js物理引擎使物体沿路径移动 场景可以通过h…

在前三篇文章的基础上,为基于Babylon.js的WebGL场景添加了类似战棋游戏的基本操作流程,包括从手中选择单位放入棋盘.显示单位具有的技能.选择技能.不同单位通过技能进行交互.处理交互结果以及进入下一回合恢复棋子的移动力.因为时间有限,这一阶段的目的只是实现基本规则的贯通,没有关注场景的美观性和操作的便捷性,也没有进行充分的测试. 一.显示效果: 1.访问https://ljzc002.github.io/CardSimulate2/HTML/TEST4rule.html查看“规则测试页面…

前几天解决了原生WebGL开发中的一个问题,就是在一个场景中绘制多个几何网格特征不同的模型,比如本文所做的绘制多个圆锥和圆柱在同一个场景中,今天抽空把解决的办法记录下来,同时也附上代码.首先声明,圆柱和圆锥的网格生成是我自己写的polyhedron.js模块,如果要加载其他模型,只需要把geometry换成其他几何体的网格即可,本文的重点不在于使用什么几何模型,而在于如何将各种不同的模型绘制到同一个场景中去. 第一件事,我们还是先把依赖的模型生成的js文件贴出来,以便参考者能够将代码组装起来.首…

    启动屏界面.主菜单界面.选关界面.游戏界面 卡牌01_启动屏界面 传送门 卡牌02_主菜单界面 传送门 卡牌03_选关界面 传送门 卡牌04_游戏界面    传送门 选关界面效果 (源代码在文章最下面,本篇有点长 (´･_･`) ) 实现过程 选关界面 添加Canvas画布自适应屏幕分辨率.设置背景图片 添加显示关卡文本 两个文本Text,LevelLabel文本显示固定关卡文字,leveltxt文本作为LevelLabel文本的子对象,动态显示关卡数 创建三个按钮控件(主菜单.声音.游…

池管理类有啥用? 在游戏场景中,我们有时候会需要复用一些游戏物体,比如常见的子弹.子弹碰撞类,某些情况下,怪物也可以使用池管理,UI部分比如:血条.文字等等 这些元素共同的特性是:存在固定生命周期,使用比较频繁,场景中大量使用. 所以,我们就通过池管理思路,在游戏初始化的时候,生成一个初始的池,存放我们要复用的元素, 当要用到时,从池中取出:生命周期结束,放回到池中. 代码 这个池的参数有两个:1池中存放的元素 2 池的初始容量(如果池不够了,则会按照这个容量进行扩展) 代码如下 using S…

构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景.这个例子我觉得既美观又代表性很强,所以拿出来给大家分享一下. 本例地址:http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html 例子动图: 上面场景中主要的知识点包括:3D 灯光以及 3D 模型的流动. 场景搭建整个场景中包括 2D 场景(也就是鹰眼部分)以及 3D 场景: dm = ne…

总述:大部分3D编程都涉及到地面元素,在场景中我们使用地面作为其他物体的承载基础,同时也用地面限制场景使用者的移动范围,还可以在通过设置地块的属性为场景的不同位置设置对应的计算规则.本文在WebGL平台上使用Babylon.js库探索并实现了两种地面构造方法,除了两种确定的构造方法外,本文还包含了对一些其他选择的探讨和一些对电子游戏艺术的观点.建议你在阅读本文前,先学习3D编程入门知识和Babylon.js的官方入门教程,前者可以在 https://space.bilibili.com/2534…

如何在LoadRunner测试场景中添加负载生成器 本文对如何在LoadRunner的测试场景中添加负载生成器,如何使用负载生成器的方法,总结形成操作指导手册,以指导测试人员指导开展相关工作. 1.什么是测试场景 测试场景是将测试需求结合测试用例进行转化后,用来承载实现测试用例测试目标的测试脚本的容器,对这个容器,我们可以定义出容器的规格,这个有了规格的容器的执行,就相当于测试需求被覆盖. 在LoadRunner中,测试场景在Controller中管理,一般一个场景打开后的界面如下图: 图一:场…