游戏开发：Html5版宝可梦 游戏制作与设计思路分享（一） 摇杆控制角色移动

刚刚毕业，心血来潮准备自己制作一个还原 宝可梦（口袋妖怪）游戏，接下来一段时间会持续更新一下这个游戏的开发进度以及心得分享的文章

整个游戏的逻辑都会用HTML5 + Js 来实现

目前游戏的完成进度：

1、虚拟摇杆控制器√

2、角色移动及移动动画√

3、角色居中视角跟随√

 

 

 

 

预览地址

http://h5demo.yyfuncdn.com/res/gameDemo/Pokemon/game.html

手机访问二维码

 

 

 

 

 

制作思路

1）游戏地图

利用宝可梦地图素材拼接一张1980×1980像素图片

 

 

 

2）虚拟控制器

两个圆形图片组合而成

 

 

 

利用大圆与小圆的圆心位置获得角色所需的移动方向

 

 

 

 

因为角色只能四个方向移动，所以只需要先判断小圆圆心据原点的X轴与Y轴绝对值的最大值，再判断最大值为正值或负值即可的出角色的移动方向

 

3）角色移动及动画

角色动画：

角色动画通过几张图片轮播实现，分别有上下左右四组动画素材，每组有两张移动图和一张站立图，下面的是向下移动的三张素材

 

 

角色移动：

根据虚拟摇杆功能，获得角色移动方向数据，控制角色的 x 、y 坐标进行移动

 

4）屏幕跟随功能

屏幕跟随的功能通过控制游戏地图的移动实现，当角色移动时偏移可视窗口的中心位置时

 

 

 

场景朝向角色移动方向移动后，使得角色处于可视窗口的中心位置

 

接下来准备做

1）角色与障碍物碰撞检测

2）角色可进入房屋的功能