web前端游戏初识| 青训营笔记

155 阅读4分钟

web前端游戏初识 | 青训营笔记

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

一、游戏是什么?

广泛意义上的游戏

image.png

image.png

最广泛的定义

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

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

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

狭义上的游戏

image.png

狭义上的游戏即通过游戏引擎制作的电子游戏
游戏的分类:根据玩法进行大类分,再经过小类细化。

二、前端场景下的游戏开发

游戏开发的团队分工

image.png 组建一个最小但最完整的游戏开发团队只需要3个人:策划、程序、美术。当然,能力足够强的话可以作为独立开发者。

游戏开发的基本链路

image.png

为什么要用游戏引擎**

因为你想要的它能够给你一套完整的实现方案,不需要你再自己去拼凑、封装,让你花更少的时间做出更好的效果,特别是关于渲染效率和性能优化。

它提供游戏开发时需要的常见功能:引擎会提供许多组件,使用这些组件能缩短开发时间,让游戏开发变得更简单;专业引擎通常会能比自制引擎表现出更好的性能。

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

前端开发过渡到游戏开发

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

现在市场上很多H5游戏、小游戏都是Web前端开发制作的,而不是专门的游戏开发团队、专业的游戏研发同学开发。 其原因可能在于:
1.接触前端开发的研发数量远大于接触游戏开发的数量(招聘成本高)
2.2d游戏引擎的上手门槛已经足够低(易上手)
3.活动H5中的游戏玩法的实现方式比较模糊(开发界限模糊)

现在很多主流的2d游戏引擎都支持使用Javascript进行开发同时使用相关的工程化能力,也是游戏开发向web前端开发靠拢的一种表现。

三、游戏引擎

我们暂且不讨论一些端游的引擎,比如 Unreal(虚幻引擎,代表作《PUBG》、《GTA5》)、Source(起源引擎,代表作《CS》、《Dota2》)、 Frostbite Engine(寒霜引擎,代表作《战地》、《极品飞车18》) 、 Unity3D (代表作《炉石传说》、《王者荣耀》)。

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

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

The NVL Maker—文字冒险游戏制作器
No Code形式的开发,只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。

image.png RPG Maker
RPG Maker可以Low Code搭建一个关卡类型的游戏,适合代码能力不强但是想发挥自己的创意的开发者。

image.png

Web游戏引擎

利用Canvas和WebGL为底层技术抽象的图像绘制库(往往还附带一些其他的功能)

image.png

Web游戏引|擎- Cocos

image.png

Web游戏引擎-Laya

image.png

Web游戏引擎- Egret

image.png

Web游戏引|擎CreateJS & Phaser

image.png

功能引擎

大型游戏引擎往往是由小的功能引擎组装成的,一个大型游戏引擎往往包含渲染引擎、物理引擎、UI 系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎。

功能引擎是专注某个方向能力的引擎,其特点是体积小、功能完善。特别是Pixi.js和Three.js这两个 渲染引擎,通常被误以为是一个完整的游戏引擎,但它们是专注渲染能力的渲染引擎。

下面介绍几种可能会经常接触的功能引擎:

image.png