我用AI做了一款一刀999的2.5D*页游戏？

最挣钱的*页游戏《神座》搬砖出金，日入30元

人气：去年开的新页游，人气来看目前还不错，龙头37平台每天能开8个服务器，一个新开服务器20个人，游戏热度也还是可以的，楼主大概测算下来，这款游戏本身基于神印王座，大天使之剑研发出来的，在西方魔幻为主的页游中是具有垄断地位的。

烧鹅：前端转型到游戏开发者，可以先试着做一款游戏三国arpg**单*游戏，或者说别人做了一款比较好玩的游戏，你不看源代码的情况下，你用自己具备的技术知识克隆出来，你在做的过程中自然而然会接触到游戏开发中的各种概念和知识体系。

制作*页游戏推荐店铺**

问2：老师您好，我们这边我们的团队都是Web开发的，对游戏开发不是很清楚，以现有的Web开发为基础，我们的同学应该学习那些知识？

烧鹅：这些都是骗人的，游戏引擎都封装了数学库。游戏开发中，边做边学很重要。我举个我上周在Unity Beijing听到的例子，开发青蛙旅行的人在他们**是个助理工程师，一群前辈都把活给都扔给了他，然后他就开发出来了。关于游戏和图形的数学方面的书，你只要搜一下游戏数学的关键词，就会出来非常多的结果。

最后讲一下我们团队思考的编辑器的架构，现在只是一张工程架构图。游戏最后发布的内容是什么？就是一堆资源，图片、模型、音频、脚本，在Web开发环境中最后都要发上CDN。游戏里的大部分资源如音频、全景图、模型这些都是第三方软件输入的，模型资源的序列化、减面、合并、烘培等操作我们暂时可能不会去做（还是交给Unity做），中间GUI部分就是编辑器的面板操作，最后 Script 组件和 Shader 可以通过 VS Code 来编辑。这张图是我一两年的心得，里面有一些细节时间问题这里就不展开了。OK，我讲完了，大家有什么问题。

还有一点就是Dom操作，在Web游戏开发中，Dom操作就是魔鬼。我抓了比较慢的一帧花了25毫秒（约40帧）。游戏逻辑加上WebGL渲染就花了那么几毫秒，而DOM操作却耗掉很长的时间，而且还引发了重绘（紫色部分）。所以 Dom 在游戏里是不合适的，GUI 部分需要用2D的Canvas或者WebGL渲染去解决。

我刚才讲了这么多，痛苦和迷茫。其实我之前做的东西也不能称之为真正的游戏，只能算是营销互动类游戏。我们还是觉得做游戏要向业界规范的方案靠拢，所以游戏编辑器是必须要做的。虽然我今天并没有做出一款游戏编辑器，我会跟大家分享为什么我要做游戏编辑器（现在已经正在做了），这中间的坎坷是今天要讲的重点。

这个项目还有一个性能问题，广告牌发光效果，我第一个想到的是后处理（Post Processing），大家不理解的话，可以把它当作实时滤镜，如果在**屏幕这么大的Bloom滤镜是会卡死的。我当时的方案是在每块广告牌上写一个独立的Shader，这样在iphone6上至少是可以流畅渲染的。

FRAMESTORE 当时给我的东西是这样的，俯视图是这样的，灯光是这样打的。虽然他们在影视特效领域非常牛逼，但是他们也没做过Web应用。而我当时也不知道怎么和设计团队合作，还是我的老方法*写代码。他们给我的模型，我当时也不知道其他高级的格式，只知道 Obj + Mtl。如果发现WebGL渲染有问题，我们就去代码里找原因，模型引用的材质对不对，贴图对不对。我们要翻代码看一下是不是引用错了。工作流的问题在这个项目中没有解决，但是促使我开始寻找问题的解法。

3D之旅才刚刚开启，我接下来会跟大家分享一下中间很多心情，以及我的思维是如何进化的。2017年的造物节时我们做了真正意义上的3D应用，当时跟英国一家设计**合作叫 FRAMESTORE，这个电影（《奇异博士》）大家知道吧，特效就是他们设计制作的。

刚刚有同学也提到过Page Visibility方面的API，我们发现安卓是支持这个API的， 但IOS还是需要调 Js Bridge接口来监听App的是否退后台的状态。接着，我把游戏主循环（或者动画主循环）停下来之后还发现一些用户会Crash。最后我发现一件非常神奇的事情，这个代码大家都知道，它是用来获取 Canvas 的 WebGL context，这行代码为什么Crash呢？我们翻了 Webkit 的源码发现它有一个 reshape 函数，reshape 会通过 GPU 获取当前画布的高宽，所以它还是会Crash。

我们刚开始尝试 WebGL 小心翼翼，因为怕给**带来影响，事实上也造成比较大的Crash。2016年的圣诞节，市场部同学说要不在首*里下一场雪吧，那就下了。后面我会让大家下这场雪的代价。我们还尝试做类似于右边这种模型粒子动画，这是一只天猫的模型。这两个都是粒子系统，因为我们刚开始不知道怎么做复杂的3D渲染，我们只能从最基础的绘制“点”出发去尝试。

大家之前理解了3D的概念，3D不是绘图引擎的功能，3D是数学的概念。那CPU绘图与GPU绘图有什么区别呢？大家看一个小电影，这是英伟达几个工程师录的视频，CPU这样绘图，GPU是这样绘图。我们可以看到，GPU是并行处理每一个像素的。

好不容易跨过了双十一的坎，我们已经看到 Canvas 2d 的方案在模型输入和绘制性能方面都是非常弱的。如何继续开发 3D 类的游戏呢？可能大家会问，WebGL在PC上都不行，在**上行不行呀？我跟大家说，现在完全没问题，我们在上亿台同时在线的设备上都试过了，前提是要做一下WebGL能力检测。PC还有一些古董浏览器不支持WebGL，反而**比PC发展快得太多。

当时的视角是这样的，以用户当前的位置经纬度为中心，辐射一圈就可以看到周围有多少只猫。这里的六边型地面如果用X、Y两个轴的算法去计算其实是比较慢的，我当时看了一篇论文，这是一个斯坦福的同学花了二十年研究六边型的算法，他本质上是以夹角为120度的X、Y、Z三个轴为坐标轴算，相比算X、Y两个轴的算法快很多。上面还有很多基于这个基础算法拓展的算法如寻路等。

这个项目中第一个难点的是建筑模型的制作。我们的设计师是个平面设计师，不会做3D，他当时给我的图是这样的，你看着办吧，我当时花了整整一天时间做模型。第二点难点是地面算法，这个地面是六边型的结构，要把地面从地球坐标系转换成3D世界里的场景，会分几步。我们小时候都看过世界地图，怎样把一个球形的面投射到平面上呢？这种投影叫做墨卡托投影（Mercator projection）。这个投影算法的代码是服务端拷给我的，因为要保持前后端算法一致，我复制了后端的投影算法。相比墨卡托投影，这是简化的算法，因为要求看到周围的猫是在五十米左右，所以精度并不是特别高，简单的算法就能够满足了。

2016年双十一我们做过一个小游戏，这个游戏有玩过的吗？（观众举*）。这个游戏是用Canvas 2d 绘制，就是用的 glMatrix 数学库画实现3D效果。当时为什么用Canvas 2d 呢？我们**市场部的同学说我们要做3D，因为人家 pokemongo 做了一个3D的，但是你这个东西最后要给我搞到 iPhone 4上去。大家知道 iPhone 4是不支持WebGL的，而当时开发时间非常紧张，我只能用了 Canvas 2d 的方案。

其实3D和2D并不是由绘图引擎来决定的，而是由数学家决定的。假如我们要画这样的曲面会怎么画呢？首先有描述这个面的*式，这个*式根据X、Y入参算出Z的坐标值，假设Z越大颜色越红，Z越小颜色越绿，画出来是这样的。如果X、Y、Z乘以一种神奇的东西叫矩阵（矩阵是数学家发明的），这是3×3的旋转矩阵，把每个点都乘一下，然后画到屏幕上得到的结果就是这样的。大家是不是一脸懵逼呀？这里有一篇MSDN的文章专门讲解了如何用 Canvas 2d 绘制3D曲面。我有一段时间写过CSS3D的库，就是用 glMatrix 数学库做出非常酷炫的效果。

有一句话叫：给我一个支点，我就能撬动地球。很多人都做过2D游戏，3D最大的区别就是多了一根Z轴，而给我一个Z轴我就能创造3D世界。很多做前端的同学对3D这个事情是有误解的，比如说 HTML5中的 Canvas 有两个上下文，大家认为 2d Context 只能画2D，WebGL context 才能画3D，这是一种误解。

自我介绍一下，我来自**虚拟互动团队，这个团队主攻3D/游戏/VR/AR。其中，我们有一个小团队叫斜杠实验室（），主攻Web方向上的动画和3D技术。为什么我们会在这样交叉领域去发力做一些事情？去年的双十一**去年交易额多少？一千多亿，其中有80%的GMV是来自移动端的，简单地理解就是说我们**在电商领域80%的成交是通过**客户端实现的，而不是PC。这就是为什么在我们要在移动端做3D/VR/AR的应用。

大家下午好！我们今天讲个比较有意思的话题，这个话题在业界被谈及得比较少。大家在座有做过移动端开发的同学吗？请举个*，人还挺多的。那做过3D应用的同学请举个*，有用过Threejs的请举个*，做过游戏的呢..人这么少，那我就放心了，可以大胆讲了(全场笑) 。今天讲的正是移动、3D、游戏三者交叉的话题。

FDCON2018中国前端开发者千人峰会上，来自**技术虚拟互动团队的烧鹅在现场分享了**Web 3D应用和游戏开发的实战。首先详细解释了3D与2D的区别，并阐述了在有限的环境下，**技术虚拟互动团队是如何通过Canvas去实现3D效果。随着Web GL的发展，如何在****中实践，以及在项目中如何与Unity结合提升开发效率。而现在，团队希望能够实现一个可视化的编辑器，帮助开发者快速得构建出相关的应用。

*页游戏平台有哪些 怎么选择

人们在闲暇的时间经常会在**平台中选择自己所喜爱的游戏，不仅能够放松工作之余所带来的压力，还能够感受到各种游戏所带来的乐趣，这也让不少的创业者看到了*页游戏代理行业所具有的广阔发展前景，下面来简单的了解一下，*页游戏代理平台有哪些呢？今天小编就带着大家来了解一下！

Brightlocker的创意看上去十分美好。一方面，它对接了有创意没制作能力的个体和有制作能力没创意的团队，另一方面，它通过众筹和外包等形式大大减少了游戏开发的成本和风险。然而这一模式是否可以运行顺畅，取决于**前期的资金链条是否强健，后期有无至少超出市场一般水准的作品诞生。“游戏化游戏制作”的想法听起来很棒，但游戏制作归根结底仍然是金钱的投入和能力的付出，社区投票和分红只能锦上添花，不能雪中送炭。

和传统众筹平台如Kickstarter不同，Brightlocker甚至游戏化了付费环节。多样的付款方式和付款对象让用户更有投资的感觉。例如，用户可以在**上购买代币（1美元能购买10元代币），给他们喜欢的游戏创意投币以让它获得更好的展示位置。投币越多，该游戏创意越有可能登上首页，然后进入制作环节。用户还可以通过投资升级自己的权限，投资越多的用户对游戏制作的话语权越大。为了平衡氪金用户的权重，普通用户可以通过提升论坛活跃度来升级权限，例如更积极地对游戏创意进行投票。如果游戏创意最终没能进入制作环节，投资人在一段时间后可以获得返利，确保用户利益和社区活跃度。

目前，Brightlocker已经成功运用这一模式制作了第一款游戏《Light Eaters》（一款iOS平台放置类游戏），并在紧锣密鼓地筹备第二款游戏。这两款游戏的创意都来自**内部，团队认为这是对**运营模式最好的测试。不过，**并没有*布《Light Eaters》花费了多少资金，但Cortez在接受外媒采访时自信满满地称，“我们有钱资助未来游戏。”

想要搭建*页游戏平台 需要多少成本？搭建成本解析

太原中软分享：12款超赞的游戏头图*页设计

HTML5游戏怎么做？

游戏中还包括卡牌抽取，并且进行了一定的创新。卡牌抽取分为很多类，通过人民币、红水晶、黄水晶等不同材料抽取，获得的英雄具有不同的功能，红水晶抽取的英雄善于PVE，黄水晶抽取的英雄善于贸易，每一种水晶都与玩家的游戏行为相结合，战斗时获得黄水晶，贸易获得红水晶等等。此外三国横版格斗单*游戏，每张卡牌都有自己的技能系统，并且可以互相继承，解决了传统卡牌游戏的缺陷。

游戏中最重要的就是异步实时多人国战，每个国家的玩家不管等级高低可以随时航行到正在发生国战的城市进行战斗，每个人都可以做出自己的贡献。国战又与游戏中的选举与官职系统相结合，尤其是当玩家被选举为国王时，他会产生强烈的社交付费需求。

再次，航海题材离不开航海贸易，每个城市都拥有自己的特色商品，这与另外两个系统相配合。第一，每个城市的商品除了可以低买高卖用来盈利以外，这些商品本身可以作为材料制造装备和恢复体力的食物。而这个制造系统又与游戏中重要的国战系统相联系，游戏中一共有四个国家，四个国家之间会因为争夺资源而产生冲突，如果城市被敌对国占领，玩家就无法购买这座城市的特色材料。

其次，游戏针对不同的地区设计了不同的建筑风格，如果玩家在加勒比诞生，那么建筑风格就为海盗风，此外还有英格兰、奥斯曼、华夏等风格。并且这些建筑风格还会发生变化，玩家的游戏行为会影响城市的发展度，发达的地区建筑风格也会相应的更加华丽。

山水地科技的一款重度策略类游戏，采用F2P加道具收费的模式。开发周期前后陆续加起来将近一年。这款游戏13年初已经初见成品，但当时的硬件无法支撑，因此项目停滞了一段时间。到了今年年中，游戏重新进行了一些开发，并且已经在*Q空间上线。

新*必看！请收下这个H5小游戏制作教程