小游戏 ｜ 青训营笔记

SaraiNoQ
206 阅读4分钟

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

游戏分类

前端场景下的游戏

项目分工

  • 策划

    • 数值
    • 内容

  • 美术

    • 2D/3D
    • 原画
    • 音效/动效

  • 程序

    • 前端
    • 后端

  • 其他

    • 运营
    • 运维
    • QA
    • 市场

游戏开发基本链路

游戏引擎

多平台移植：RN、Weex、Cordova

物理效果：MatterJS、ammo.js等物理引擎

动画：CSS动画库

端游引擎

  • Unreal（PUBG、GTA5）
  • Source（CS、Dota2）
  • Frostbite Engine（BattleField、极品飞车）
  • Unity3D（炉石传说、王者荣耀）

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

  • The NVL Maker：文字冒险游戏制作器

    • No Code，文字脚本 + 配置
    • AVG.js

  • RPG Maker：《To The Moon》

  • Web游戏引擎

Web游戏引擎的通用能力:

  • 预加载：游戏中往往存在大量的静态素材，包括场景、元素、声音、动画、模型、贴图等，如果以原生JS进行请求，并统筹请求时间和加载的时机，将会非常麻烦。游戏引擎中的预加载引擎将加载时机、加载过程加以抽象，解决加载编码中的效率问题。

  • 展示与图层、组合系统:对于Web游戏编程而言，往往选择Canvas或 WebGL作为渲染方式（大家可以想想为什么不用DOM作为渲染方式？）。而 Canvas和 WebGL作为底层的API，接口非常基础，需要用大量的编码来编写简单的展示。而且图形之间没有组合和图层，很难处理元素组合和图层问题。渲染引擎和图层、组合系统应运而生。

  • 动画系统：动画往往被分为缓动动画和逐帧动画，这里讨论缓动动画系统。缓动动画系统在原生JS中需要搭配帧渲染进行考量而进行书写，代码量和思考量巨大，抽象程度低，所以需要游戏引擎动画系统。

  • 音效和声音系统：游戏相较于普通的Web前端而言需要更加立体、及时的反馈，声音和音效是反馈的重要组成部分。所以声音和音效系统往往包含了声音的播放、音量、截止、暂停等功能的集成。

Web游戏引擎

  • Cocos

    • 优势

      • 平台支持能力好
      • 完善的游戏功能支持
      • 生态较好

    • 缺点

      • 3D能力仍在建设
      • 版本迭代过快

  • Laya

  • Egret

  • CreateJS

    • EASELJS（控制素材展示和组合）
    • TWEENJS（控制素材缓慢动画）
    • SOUNDJS（声音）
    • PRELOADJS（控制加载）

功能引擎

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

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

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

2D游戏引擎的技术架构

前端游戏开发入门技能树

PixiJS + Web开发

前置技术栈

  • Web前端开发基础

  • 用过JSON文件

  • 了解Canvas的绘图API

  1. 安装和引入

  2. 创建Pixi应用和舞台（Stage）

  3. 显示一张图片

    1. Sprite（精灵）
    2.   游戏引擎中Sprite的概念是一个用于承载图像的对象，你能够控制它的大小、位置等属性来产生交互、动画。
    3.   创建和控制Sprite是学习Pixi很重要的部分，而创建一个Sprite需要了解图片怎么加载到Pixi中。这里就有一个概念：纹理缓存（可以被GPU处理的图像）。
    4.   Pixi使用纹理缓存来存储和引用Sprite所需要的纹理。纹理的名称字符串就是图像的地址。

  4. 让图片动起来

    1. 设置Sprite的位置和大小

    2. 游戏中的元素每帧发生变化：游戏循环

线上演示平台

官网Demo：

pixijs.io/examples/#/…

Cocos开发

Cocos工作流程

小游戏核心架构

avatar
文章
阅读
粉丝