游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

开发者分享修改游戏控制方式的经验

发布时间:2011-08-08 13:29:07 Tags:,,,

作者:Matt Hackett

《Onslaught!》移植到iOS平台的过程中遇到了不少困难,我们认为最难逾越的障碍莫过于获取合适的帧速率。这一点以及包括音效处理在内的问题,可以通过Game Closure的SDK获得解决,但还是存在其他不易攻克的难关,其中之一就是最基本的用户输入方式。

Chorome和OSX版本的《Onslaught! Arena》采用的是鼠标和键盘输入控制方式,玩家可以使用方向键进行导航,并用鼠标定位和发动攻击。这种输入方式显然无法与触摸屏设备兼容,为了让手机版游戏体验更为流畅,我们尝试了不同的控制方式,最终为用户提供了两种选择:

control scheme(from gamasutra)

control scheme(from gamasutra)

1.点触控制。我们将这一选项命名为“初级”选项,要求玩家使用一个手指控制游戏。这是一种流线型的AI控制方式,玩家点触屏幕就可以引导游戏角色行动方向,然后该角色就会根据就近原则自动攻击敌人或射弹。

2.虚拟摇杆。这是一种相对“更高级”的控制方式,要求玩家使用两个手指控制游戏。这个机制为玩家提供了控制角色移动地点、方向、攻击时间和角度等全套的操作功能。

我们经过谨慎考虑和反复论证才制定出这两个决策。首先,我们了解虚拟摇杆操作方式本身就存在一些问题,所以我们参考了许多最佳案例,研究了一些热门射击游戏(游戏邦注:包括《迷你戈尔》和《几何战争》)。通过这些调查,我们发现了静态和动态这两种虚拟摇杆控制方式。

动态虚拟摇杆(《几何战争》所使用的控制方式)仅在玩家手指碰触到屏幕界面时,才会显示定位点。角色将根据这些定位点进行移动,其优点在于可为玩家创造舒适体验,如果他们的手指靠近屏幕边缘,那也不会影响游戏操作。它支持那些不习惯或暂时无法将手指放在合适位置的玩家进行无障碍的游戏操作,但这种方式的劣势在于缺乏首要的可见指示,所以可能不容易让玩家理解如何与游戏进行互动,或者手指应该点触在屏幕的哪个位置。

静态虚拟摇杆的主要特点是,其定位点会一直显示于屏幕界面。我们决定采用这种方法,因为它可以提供良好的初次体验,便于新玩家看到手指点触的位置,除此之外,它还能避免怪物或陷阱隐藏在玩家手指之下(玩家看不到这些危险),从而导致角色死亡的现象。

技术解决方案

我们提倡代码重用,希望可以将游戏代码轻松植入任何一个项目,所以就创建了一个摇杆类,其设置方式如下:

var stick = new Stick(40); // 40 is the size of the input
document.addEventListener(“mousemove”, function (e) {
e.preventDefault();
stick.setInputXY(e.pageX, e.pageY);
});

它很容易用以下代码在画布元素中实现:

context.beginPath();
context.arc(stick.limit.x, stick.limit.y, limitSize, 0, (Math.PI * 2), true);
context.stroke();

本文为游戏邦/gamerboom.com编译,如需转载请联系:游戏邦

From keyboard and mouse to on-screen analog thumb sticks

by Matt Hackett

You may have read before about some of the difficulties of porting Onslaught! to iOS. The first major hurdle we had to jump was getting a decent framerate. This and many other technical issues (including audio) were solved by Game Closure’s SDK, but there were other critical issues to address, including a fundamental difference in user input.

Versions of Onslaught! Arena for Chrome and OSX rely on mouse and keyboard controls. Players can use the WASD keys (or arrow keys) to navigate, as well as the mouse for aiming and attacking. Obviously these input mechanisms are not compatible with touch devices. To make the jump to mobile as smooth as possible, we experimented with many different control schemes, and ended up providing players with two options:

Touch to move. We labeled this as the “Beginner” option, informing players to “Use one finger.” This is a streamlined, AI-assisted control scheme. Players touch the device where they want their character to move, and the character automatically attacks the nearest enemy or projectile.

Analog thumb sticks. This is the (comparatively) “Advanced” scheme, asking players to “Use two thumbs.” This mechanism provides players with complete control over where their character is moving, where he is facing, when to attack, and fine granular control over the angle of the thrown projectiles.

None of the decisions we made regarding user input were decided on lightly. First, we understood that analog thumb sticks have issues of their own, so we read up on best practices and studied the approach used by other popular games in the shoot ‘em up genre (including Minigore and Geometry Wars). Based on this research, there seemed to be two very different approaches to the positioning of digital thumb sticks: dynamic and static.

Dynamic thumb sticks (like those used in Geometry Wars) appear on the screen only after the player touches the device, creating anchor points. Movement is then recorded as relative to those points. This has advantages such as user comfort; if one player likes to have his or her thumbs near the edge of the screen, that’s fine. Likewise this method supports players who would prefer to reach farther into the device for stability or other reasons. One potential downside is that without prior visual indication, it may not be easily understood how to interact with the game or where to touch the device to begin input.

Static thumb sticks are typically always visible and in fixed positions on the screen. We decided to go with this option for a few reasons, including what we believe to be a more robust first-time experience; players new to the game could see at a glance where to put their thumbs. Additionally, it removed issues with monsters or traps being hidden beneath players’ thumbs!

Technical approach

We strongly believe in code reuse so we wanted something that could easily be dropped into just about any project. This led to the creation of a Stick class that can be used like so:

var stick = new Stick(40); // 40 is the size of the input
document.addEventListener(“mousemove”, function (e) {
e.preventDefault();
stick.setInputXY(e.pageX, e.pageY);
});This is easily rendered to the canvas element with code like:

context.beginPath();
context.arc(stick.limit.x, stick.limit.y, limitSize, 0, (Math.PI * 2), true);
context.stroke();Examples(source:gamasutra)


上一篇:

下一篇: