小游戏开发（下）|青训营笔记

星星Star98
194 阅读2分钟

小游戏开发（下）

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

功能引擎

大型游戏引擎往往是由小的功能引擎组装成的，一个大型游戏引擎往往包含渲染引擎、物理引擎、UI系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎。功能引擎是专注某个方向能力的引擎，其特点是体积小、功能完善。特别是Pixi.js和Three.js这两个渲染引擎，通常被误以为是一个完整的游戏引擎，但它们是专注渲染能力的渲染引擎。

几种可能会经常接触的功能引擎

  • Pixi.js

    • 2D渲染能力强（尤其是WebGL）
    • 复杂动画系统、复杂图片渲染形式、制作自己的2d游戏引擎等

  • Three.js

    • 3D渲染能力强
    • 适合3D效果演示或3D类的H5游戏或小游戏

  • Box2D.js

    • 2d物理引擎
    • 物体仿真能力

image.png

2D游戏引擎的技术架构

  • 以Cocos引擎的架构为例子：

    • ender（渲染器）、collision（）、Physical（）
    • 适配器 for PC、IOS、Andriod、H5…… 以及各平台的构建工具

Web游戏引擎的渲染原理（以Pixi的渲染流程为例子）

创建一个Renderer渲染器，获取它的view (一个canvas对象) ，添加到Dom Tree中。（或者指定Dom Tree中已经存在的canvas对象作为view）

在MainLoop (主循环）中调用Renderer.render()并传入一个DisplayObject作为根节点开发渲染。

从场景树的根节点开始，以zIndex为序从小到大进行深度优先遍历，对每个节点进行渲染操作，由后往前把整个场景绘制一次。(CanvasRenderer)

WebGL的render方法执行过程（科普）

Canvas的render方法执行过程

游戏开发的技能树

image.png

PixiJS+Web开发

Pixi简介

  • 它本质上还是一个渲染引擎，而且自称做得最好。

  • 它不仅仅能做游戏，还能使用这个技术去创建任何交互式内容，比如APP， 还能够在它的基础上做自己的游戏引擎。(AVG.js 和Phaserjs 的渲染引擎就是Pixi)

  • 前置技术栈

    • Web前端开发基础
    • 用过JSON文件，知道是用来干什么的
    • 了解过Canvas的绘图API
avatar
文章
阅读
粉丝