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

一、本堂课重点内容：

游戏发展历史
前端场景下的游戏开发
游戏引擎
游戏开发技能树
PixiJS + Web开发
Cocos Creator编辑器开发
小游戏

二、详细知识点介绍：

1. 游戏发展历史

广义上的游戏：有组织的玩耍，一般以娱乐，有时以教育为目的

侠义上的游戏：电子游戏

常见的游戏类型：

2. 前端场景下的游戏开发

游戏团队分工：策划，程序，美术，有时会加入其它支持

游戏开发基本链路：

前端开发过渡到游戏开发：现在市场上很多H5游戏、小游戏都是Web前端开发制作的，而不是专门的游戏开发团队、专业的游戏研发同学开发。

原因：成本低，易上手，开发界限模糊。

3. 游戏引擎

游戏引擎：游戏引擎可以提供一套完整的实现方案，集成了开发游戏需要的共同部分，不用开发者自己编写渲染交互功能，减少开发成本，可以实现更好的效果，通常会包含渲染器,2D/3D图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分。

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

Web游戏引擎的通用能力:

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

常见的web游戏引擎：

1.Cocos
2.Laya
3.Egret
4.CeateJS
5.Phaser

4. 游戏开发技能树

5. PixiJS + Web开发

功能引擎

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

前置技术栈

Web前端开发基础
用过JSON文件,知道是用来干什么的
了解过Canvas的绘图API

开发案例

见PPT

6. Cocos Creator编辑器开发

Cocos Creator不仅是一个游戏引擎，它是一个完整的游戏开发解决方案，包含了轻量高效的跨平台游戏引擎，以及能让你更快速开发游戏所需要的各种图形界面工具。

Cocos工作流：

7. 小游戏

目前主要包含以下两种小游戏

三、实践练习例子：

PixiJS使用案例：

`const app = new PIXI.Application(); document.body.appendChild(app.view);

app.stop();

// load resources app.loader .add('spritesheet', 'examples/assets/spritesheet/monsters.json') .load(onAssetsLoaded);

// holder to store aliens const aliens = []; const alienFrames = [ 'eggHead.png', 'flowerTop.png', 'helmlok.png', 'skully.png', ];

let count = 0;

// create an empty container const alienContainer = new PIXI.Container(); alienContainer.x = 400; alienContainer.y = 300;

// make the stage interactive app.stage.interactive = true; app.stage.addChild(alienContainer);

function onAssetsLoaded() { // add a bunch of aliens with textures from image paths for (let i = 0; i < 100; i++) { const frameName = alienFrames[i % 4];

    // create an alien using the frame name..
    const alien = PIXI.Sprite.from(frameName);
    alien.tint = Math.random() * 0xFFFFFF;

    /*
     * fun fact for the day :)
     * another way of doing the above would be
     * var texture = PIXI.Texture.from(frameName);
     * var alien = new PIXI.Sprite(texture);
     */
    alien.x = Math.random() * 800 - 400;
    alien.y = Math.random() * 600 - 300;
    alien.anchor.x = 0.5;
    alien.anchor.y = 0.5;
    aliens.push(alien);
    alienContainer.addChild(alien);
}
app.start();

}

// Combines both mouse click + touch tap app.stage.on('pointertap', onClick);

function onClick() { alienContainer.cacheAsBitmap = !alienContainer.cacheAsBitmap;

// feel free to play with what's below
// var sprite = new PIXI.Sprite(alienContainer.generateTexture());
// app.stage.addChild(sprite);
// sprite.x = Math.random() * 800;
// sprite.y = Math.random() * 600;

}

app.ticker.add(() => { // let's rotate the aliens a little bit for (let i = 0; i < 100; i++) { const alien = aliens[i]; alien.rotation += 0.1; }

count += 0.01;

alienContainer.scale.x = Math.sin(count);
alienContainer.scale.y = Math.sin(count);
alienContainer.rotation += 0.01;

}); `

四、课后个人总结：

本节课介绍了游戏的发展历程，游戏相关的基本知识，前端开发和游戏开发的区别和联系，前端开发可以通过目前主流的web游戏引擎和功能引擎开发游戏，并详细介绍了Cocos Creator和PixiJS引擎，最后简单介绍了小游戏的基本结构。通过这节课的学习，系统了解了前端在游戏领域的相关应用，以及前端学习开发小游戏的基本路线和相关主流工具，了解了目前市面上的小游戏的基本开发流程，虽然仅通过一节课不能完整开发出一款小游戏，但是也揭开了以前看起来很厉害的各大平台如抖音上的小游戏的神秘面纱，为前端开发游戏指明了方向，以后有机会一定要试试开发出一款属于自己能上线的小游戏。

五、引用参考：

bytedance.feishu.cn/file/boxcnC…

【青训营】小游戏开发