H5游戏的一些基础概念

最近项目需要，开始学习游戏开发。感觉隔行如隔山，虽然都叫开发，但完全不是一个样。组内已有人在用LayaAir游戏引擎，统一流程，我也拿它入门学习。

下图是laya官方的一张介绍图片，引擎涵盖的东西比较多，后续我会分别写下我的一些想法，分享一些例子和遇到的问题。

游戏引擎

市面上的H5引擎已经好多，比较知名的有Egret白鹭、Cocos2d-JS、Laya等等。各引擎的差别也很大，但一些基本的概念都差不多，最终的性能会有差别。

比较简单的游戏原生DOM就足够，但要制作大型复杂的页游，还是需要借助牛逼的引擎，才能事半功倍。

基本概念

舞台

舞台是显示游戏元素的平台，在游戏视觉编程里，一切游戏的元素必须添加到舞台才能被显示。因此，舞台也是放置显示对象的最终容器。

​ 舞台也是一种可以显示的对象，从编程的角度讲，任何对象都具有属性和行为。如，舞台对象具有宽、高、帧频等属性，具有添加显示对象的方法。 ​

帧

​帧——影像动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。 一帧就是一副静止的画面，连续的帧就形成动画。

我们通常说帧数，就是图形处理器每秒钟能够处理图片的帧数，通常用fps（Frames Per Second）表示。fps越大则越流畅，所以当游戏画面出现卡顿时，我们就有必要关注fps。

时间

那么怎么让游戏表现出动画？就需要在一定时间内绘制好多帧图片。引擎提供接口不断重复执行绘制操作，然后绘制出每个时间点的帧，这样游戏里面的人物就会动起来。

精灵 Sprite

Sprite 是Laya里面基本的显示图形的显示列表节点。 Sprite 默认没有宽高，默认不接受鼠标事件。通过 graphics 可以绘制图片或者矢量图，支持旋转，缩放，位移等操作。Sprite同时也是容器类，可用来添加多个子节点。也就是说Sprite可以层层嵌套，最后被添加的节点被显示在最上层。

var sp = new Laya.Sprite();
sp.graphics.drawRect(0, 0, 100, 100, 'red');

var sp1 = new Laya.Sprite();
sp1.graphics.drawRect(0, 0, 150, 150, 'blue');

var sp2 = new Laya.Sprite();
sp2.graphics.drawRect(0, 0, 200, 200, 'green');

Laya.stage.addChild(sp2);
Laya.stage.addChild(sp1);
Laya.stage.addChild(sp);



var sp = new Laya.Sprite();
sp.graphics.drawRect(0, 0, 100, 100, 'red');

var sp1 = new Laya.Sprite();
sp1.graphics.drawRect(0, 0, 150, 150, 'blue');

var sp2 = new Laya.Sprite();
sp2.graphics.drawRect(0, 0, 200, 200, 'green');

Laya.stage.addChild(sp2);
sp2.addChild(sp1);
sp2.addChild(sp);

上面两段代码的效果是一样的，如下图。越是后面添加的精灵，展示的越靠前。

层级

最后被添加的元素总是被显示在最上面。元素被添加后不能再更改层级，只能隐藏或者移除。

坐标系

众所周知，我们可以把游戏世界看成是现实的一个映射，那么就需要坐标来管理游戏世界中物体的位置。

laya中2D坐标系是以左上角的屏幕第一点为坐标原点（0, 0）。横轴是x轴，往右是正方向。纵轴是y方向，往下是正方向。

相对坐标

这个后面单独一节来讲，相对坐标指的是，容器的子元素总是相对于父容器的起始点(0, 0)来计算，并不是屏幕的原点。和缩放、旋转、位移等操作强相关，后续单独章节并加例子说明。

动画

动画是游戏里面最重要的元素之一。原理很简单，结合前面讲到的帧，如果帧数够大，那么静止的图片就能动起来。实际例子也就是改变可视元素的位置、大小、透明度等等方式。

结语

游戏世界就是对现实世界的模拟，只有了解构建游戏世界的最基础元素，才能设计出众的游戏。

个人知乎，欢迎关注：https://www.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】