咪唑啉缓蚀剂厂家
免费服务热线

Free service

hotline

010-00000000
咪唑啉缓蚀剂厂家
热门搜索:
技术资讯
当前位置:首页 > 技术资讯

演示如何设置玩家触屏移动控制方式

发布时间:2021-01-20 11:05:21 阅读: 来源:咪唑啉缓蚀剂厂家

今天我花了很多的时间在触屏界面上尝试一款全新的游戏。这是一款迷宫游戏,其执行方式与《吃豆人》类似,但是内容却完全不同。

当我开始创造这款游戏的玩家精灵行为代码时,我知道自己将面对一个困难的决定,它与游戏的移动控制方式有关。

Danger Ranger

如果是在之前的游戏我便不会遇到这一问题,因为那时候我们可以用一种最基本的方式去处理移动问题。例如《Galactians》的控制便是简单的左右滑动;《Wizard Wars》是通过碰触去操纵游戏而《Danger Ranger》则是滑动手指去移动Ranger,操纵着他们向左或向右移动。但是在我的这款游戏中还有关于跳跃的内容。起初我只打算借用《Dragons》的移动代码,并且不想再添加其它内容了。但是考虑到这是一款迷宫游戏,如何让玩家更加自然地体验游戏也就变得更加重要。我不希望玩家在游戏中纠结该将手指置于哪里才能操纵角色的移动,因为我真的不喜欢采用半透明的虚拟方向键这种方法。我相信即使不使用这种方向键,我也能够有效地利用触屏界面。

但是我必须努力研究各种选择。

在开始阐述玩家移动设置之前,我想先列出我是如何创建并管理碰触代码。

function initToUCh() { if(checkForTouch()) { if (dEventListener) { dEventListener(‘touchmove’, touchMove, false); dEventListener(‘touchstart’, touchStart, false); dEventListener(‘touchend’, touchEnd, false); } else { dEventListener(‘touchmove’, touchMove, false); dEventListener(‘touchstart’, touchStart, false); dEventListener(‘touchend’, touchEnd, false); } } else { dEventListener(‘mousedown’, mouseDown, false); dEventListener(‘mousemove’, mouseMove, false); dEventListener(‘mouseup’, mouseUp, false); write(“No touch capability.”); } }; function checkForTouch() { var d = eateElement(“div”); tAttribute(“ontouchmove”, “return;”); return typeof touchmove == “function” ? true : false; };

我在此执行了一个基本的测试去判断触屏是否是一种有效的功能,如果不是的话我是否应该重新选择鼠标控制功能。如果你过去曾经在台式机上玩过我的游戏,你肯定都会看到一行“无碰触功能”的提示。

而这里的重点是,我们实现了通过碰触而开始游戏,移动角色并完成游戏的过程。这是一种非常强大的功能,让我们能够在控制游戏时能够拥有更多选择。

我们该如何利用这种碰触控制?

其实非常简单。我只需要在每次碰触事件发生时保存下碰触对象的坐标值即可。如下:

var touch = {}; function touchStart(event) { var xy = getXY(uches[0]); artx = xy.x; arty = xy.y; }; function getXY(event) { try { var xy = {}; xy.x = (geX – (fsetParent ? fsetLeft : 0)); xy.y = (geY – (fsetParent ? fsetTop : 0)); return xy; } catch (e) { write(“getXY: ” + ssage); } };

我在try/catch中涵括了大部分的函数。并只是假装调用了touchStar()函数。

所以这些代码的意思也是一目了然。回到只列出横坐标和纵坐标参数的对象,在此我能够控制玩家的移动。你们应该会注意到我在这里使用了船线坐标以表明玩家的真正位置——因为我将文件中心的游戏cavas边距设为“0px auto”以及320px的宽度。如果换成是桌面游戏这便是问题所在,但是因为在手机平台上我们是通过视口去处理显示器,所以就不会出现桌面游戏所面临的问题。

现在我已经获得了一些坐标值,所以我可以开始研究控制玩家的一些选择了。

我的这款迷宫游戏中布满了许多蜿蜒崎岖的道路,我希望玩家能够在此避开各种怪物并收集各种奖励而前进。当然不止这些内容了,不过因为想到玩家能够控制自己的角色移动我就有了继续前进的动力。

第一种选择便是设置虚拟方向键。玩家将能够清楚地看到这一控制方法,并也会因此感觉到不自然。这种方向键总是设置在屏幕下方的角落里,从而玩家就必须憋屈地在一小块空间中控制游戏的进行。

我创造了一个简单的方向键,并将其设置在屏幕的右下方角落中。然后我编写了一些代码去追踪玩家会按压方向键的哪一边,随后在手机上加载游戏并更新游戏。

(注:我的横坐标/纵坐标检测代码非常简单。我只需要在屏幕上检查碰触事件是否被记录在与方向键图表相同的位置即可。)

总而言之,如果使用这种方法玩家就必须投入一半的时间着眼于方向键的操作,而没有多余的时间去观看自己的角色是如何在迷宫中移动。

所以我立刻就放弃了这一选择。

第二种选择便是在游戏屏幕的最上方,最右边,最下方以及最左边添加箭头图标。

这一理念听起来是合理的。因为我将让玩家碰触屏幕上一些较大的领域而朝上,右,下,左四个方向移动角色。

我将再次在手机上加载并更新游戏。

一开始这种设置是合理的。我能够顺利地移动角色并且在角色的移动过程中也拥有更多的灵活空间。

但是很快地我也感到厌烦了,因为当角色移动到屏幕下方时我的手指可能会遮住下面的空间,从而需要寻找其它更好的移动方式。

所以我也抛弃了这一方法。

第三种选择与第一种选择类似,但是却扩大了玩家的控制范围。

我尝试着关掉手机并去碰触屏幕,想象着自己在玩一款游戏,以此感受怎样的设置才是真正合理的。

当我在屏幕上移动着自己的手指时我意识到自己所追求的控制方式其实与第一种方法相类似。但是我希望方向键能够设置在我第一次碰触到屏幕的位置(注:也就是用户可以自定义方向键的位置)。

所以我便开始着手创造一个续发事件,如下:

touchStar:记录方向键坐标的中心位置

touchMouve:让方向键处理器去处理事件并更新碰触对象的横坐标以及纵坐标

如此记录下来的方向键中心位置便是玩家的初始位置,而我接下来便需要思考如何将touchMove的坐标转变为玩家需要面对的新方向。

如下:

if (wx > artx) moveright;

但是这里也存在一些问题。

想象手指从初始位置的128,128点处开始向右移动。

随着touchMouve事件持续得到激活,横坐标的值将如预期那样开始往上增值(即129,130,131……)。而我也可以清楚地看到角色正在向右移动。

但是当我的拇指轻轻地碰触了屏幕时,我的纵坐标值也会从128开始往上攀升。

所以到底哪个方向才是对的?玩家是想要向右移动还是向下移动?

在这类型游戏中用户反馈和合理的碰触界面都至关重要。如果你不能处理好这些因素,也就等于扼杀了你自己的游戏,而你的玩家也将不再对游戏感兴趣。

我还对一个问题充满疑惑,也就是当角色沿着过道前行并碰触到一面墙时,他应该向右转还是向左转才能前往下一个通道。为了解决这个疑惑我玩了许多遍《吃豆人》,并在此获得了许多有价值的设计经验。并且为了能够创造出最合理的出口我也尝试着设置了stx和sty。并且这些代码也都能够有序地运行着。

挂机吧小精灵

幻域战魂神兽版

女神联盟2手机版