前端小游戏开发｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第17天游戏发展历史广泛意义上的游戏最广

这是我参与「第四届青训营」笔记创作活动的的第17天

游戏发展历史

广泛意义上的游戏

最广泛的定义一种有组织的玩耍，一般是以娱乐为目的，有时也有教育目的在英语中，体育比赛(Game)也是游戏，只要其活动本质带有目的、规则、挑战和互动，我们都可以把其归为游戏。

举个例子拔河作为体育活动具有一定的规则约束、对参与者的体力和策略选择有要求，双方具有对抗性和互动最终通过胜利来获得心理上的愉悦，因此可以定义为游戏。

我们把范围缩小一下:电子游戏在游戏中，玩家依托电子设备(如电脑、游戏机、手机等)进行交互。

截屏2022-08-17 11.26.06.png

截屏2022-08-17 11.26.21.png

狭义上的游戏

截屏2022-08-17 11.26.43.png

前端场景下的游戏开发

截屏2022-08-17 13.46.59.png

开发角色和链路

截屏2022-08-17 13.47.29.png

为什么要用游戏引擎

游戏引擎最大的游戏:渲染

引擎的诞生就是因为一家公司做了一款游戏，做下一款游戏时复用了上一款游戏的代码，后来发现这些代码几乎每个游戏都会用到，抽离出来就成了一个引擎。如果不使用引擎，你可以做复杂的动效渲染和交互吗?当然可以。方便吗?不一定。

所以游戏引擎更像是一套解决方案，让你在制作某一类型的产品的时候能够提高你的开发效率。

你要做多平台移植?React Native、Weex、Cordova等方案也可以做到。

你要做物理效果?MatterJS、ammo.js等物理引擎可以用。

你要做动画?CSS实现又不是不行。复杂点?封装一个动画库。

那为什么要用游戏引擎呢? 因为你想要的它能够给你一套完整的实现方案，不需要你再自己去拼凑、封装，让你花更少的时间做出更好的效果，特别是关于渲染效率和性能优化。它提供游戏开发时需要的常见功能:引擎会提供许多组件，使用这些组件能缩短开发时间，让游戏开发变得更简单;专业引擎通常会能比自制引擎表现出更好的性能。

游戏引擎通常会包含渲染器，2D/3D 图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分。

前端开发过渡到游戏开发

需要先有一个明确的认知:前端开发和游戏开发不是相斥的。

现在市场上很多H5游戏、小游戏都是Web前端开发制作的，而不是专门的游戏开发团队、专业的游戏研发同学开发。其原因可能在于:

接触前端开发的研发数量远大于接触游戏开发的数量(招聘成本高)
2d游戏引擎的上手门槛已经足够低(易上手
活动H5中的游戏玩法的实现方式比较模糊(开发界限模糊) 现在很多主流的2d游戏引擎都支持使用Javascript进行开发同时使用相关的工程化能力，也是游戏开发回web前端开发靠拢的一种表现。

因此，以web前端开发的视角看2d游戏引擎，无非是一套框架、一套解决方案而已。但是开发理念上还是有差别的:游戏开发更关注内容。

游戏引擎

市面上常见的游戏引擎

我们暂且不讨论一些端游的引擎，比如

Unreal(虚幻引擎，代表作《PUBG》、《GTA5》)、

Source(起源引擎，代表作《cs》、《Dota2》)、

Frostbite Engine(寒霜引擎，代表作《战地》、《极品飞车18》)

Unity3D(代表作《炉石传说》、《王者荣耀》)。

路要一步一步走，我们先看看我们作为前端开发最容易上手的引擎。

特定类型的客户端游戏引擎

截屏2022-08-17 13.53.57.png

截屏2022-08-17 13.54.13.png

RPG Maker

截屏2022-08-17 13.54.38.png

Web游戏引擎

利用 Canvas 和 WebGL 为底层技术抽象的图像绘制库(往往还附带一些其他的功能) Web游戏引擎的通用能力: ·预加载:游戏中往往存在大量的静态素材，包括场景、元素、声音、动画、模型、贴图等，如果以原生 JS 进行请求，并统筹请求时间和加载的时机，将会非常麻烦。游戏引擎中的预加载引擎将加载时机，加载过程加以抽象，解决加载编码中的效率问题。、展示与图层、组合系统:对于 Web游戏编程而言，往往选择 Canvas 或 WebGL 作为渲染方式(大家可以想想为什么不用 DOM 作为渲染方式?)。而 Canvas 和 WebGL 作为底层的 API，接口非常基础，需要用大量的编码来编写简单的展示。而且图形之间没有组合和图层，很难处理元素组合和图层问题。渲染引擎和图层、组合系统应运而生。 0动画系统:动画往往被分为缓动动画和逐帧动画，这里讨论缓动动画系统。缓动动画系统在原生 JS 中需要搭配帧渲染进行考量而进行书写，代码量和思考量巨大，抽象程度低，所以需要游戏引擎动画系统。音效和声音系统:游戏相较于普通的 Web 前端而言需要更加立体、及时的反馈，声音和音效是反馈的重要组成部分。所以声音和音效系统往往包含了声音的播放、音量、截止、暂停等功能的集成。