by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2017/09/basic-concepts-of-h5-game/

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

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

H5游戏的一些基础概念

游戏引擎

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

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

基本概念

舞台

H5游戏的一些基础概念

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

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

H5游戏的一些基础概念

​帧——影像动画中最小单位的单幅影像画面,相当于电影胶片上的每一格镜头。 一帧就是一副静止的画面,连续的帧就形成动画。 H5游戏的一些基础概念

我们通常说帧数,就是图形处理器每秒钟能够处理图片的帧数,通常用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);

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

H5游戏的一些基础概念

层级

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

坐标系

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

H5游戏的一些基础概念

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

相对坐标

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

动画

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

H5游戏的一些基础概念

结语

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

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2017/09/basic-concepts-of-h5-game/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号