众所周知,网站的前端页面结构一般是由div组成,父div包涵子div,子div包涵各种标签和项,
同理,游戏中我们也将若干游戏模块拆分成层,在后续的代码维护和游戏程序逻辑中将更加清晰和便于控制。
Web页面的层结构:
游戏中的层结构:
如下图,用谷歌debug一下可以看到游戏初始化后,自动生成了一个Canvas画布,
那么我们本篇讨论的重点就是在Canvas中如何设计分层。
依照“怪兽必须死”这个游戏,主要的玩法就是升级英雄、技能、镶嵌宝石等一系列提升属性的功能来攻击屏幕中心的若干怪兽,
同时还有全屏技能,点击攻击等玩法,我们由浅入深,先从最基本的功能模块划分开始,设想一下,刚进入游戏时我们最先看到的是什么,
应该先加载什么,很显然,首先是游戏背景,其次是英雄层,怪物层,菜单层,头部游戏信息层,对照游戏实际画面,大的分层应如下图:
如上图所示,这是显式分层,是肉眼能看见的大体布局,但在实际开发过程中,这样的分层并不能满足我们的要求,
就会有隐式的层结构,更加便于开发,例如怪物层,同层级关系下其实还有怪物被攻击时显示的数字层,爆出金币的效果层等等,
这在后续的教程中我们将深入浅出,跟随项目进度和源代码,实现一个完整的游戏层结构。
本篇结束 主要是一些基本概念 下一篇我们将讲解 游戏中图像的加载与操作