手机游戏交互的一点想法

这一篇是延续去年的想法 。最近正在按这些想法改进我们正在制作的一款类异星工厂的手机游戏。

我们的游戏引擎是在 PC 上开发的，但希望专门用于手机。虽然我希望日常游戏开发都在真机上进行，引擎为之也做了很多的努力。但实际并不算顺利。主要还是引擎以及游戏的核心 C 部分还在频繁改动，在真机上调试毕竟不如 PC 上方便。好在最近已经慢慢稳定下来，开发中使用真机的机会越来越多，也就更多的考虑在手机上的交互问题。

我意识到的第一个问题就是：在 PC 上模拟的版本是无法体验手机上的交互感受的，想把手机上的交互做好，就必须时刻在手机上体验。

我们引擎原本的交互界面都是基于鼠标消息，触摸屏消息只是对鼠标消息的模拟。这样是不对的。意识到问题后，我们首先把鼠标消息从引擎中去掉，把触摸屏手势消息改为 first class ，而鼠标消息则反过来用手势消息模拟。

基本手势其实有四个：点击、长按、拖动、缩放。其中在不同场合下，拖动可以被清扫取代，但两者不可共存。

玩建设类游戏，触摸屏交互和鼠标交互看似差不多，实际差别很大。

触摸屏的点击面其实是一个圆形区域，而鼠标则是一个点。鼠标更容易精确定位点击，而触摸屏难以做到精确。

鼠标有移动和悬停消息，在类似游戏中非常有用，但触摸屏是没有悬停事件的。

手指点击物件的时候，手指会遮挡住点击处，如果按鼠标的模式进一步做拖动，更是会一直挡住被拖动物件，这会导致非常糟糕的交互体验。

所以，我思考了以上问题后，采取了如下的方案：

首先，我们需要定义出一个和游戏场景内物件聚焦的操作。这个操作类似鼠标的悬浮，表示交互焦点在某个物件上。由于触摸屏没有悬浮事件，用点击(tap) 作为等价行为是合适的。

当玩家点击屏幕某个位置时，我们认为他其实是想把交互焦点移到手指下的物件。手指点击难以精确，所以我们可以轮询点击处附近的物件。当物件挤在一起时，只要多次点击就能选中。对于选中物，应该有明确的视觉表现，比如对物件描边。

由于点击仅仅是聚焦（类似鼠标悬浮），而不是对该物件交互，所以误点永远不是问题。这好比用鼠标快速扫过若干物件，最后精确停在想选中的物件上。前面扫过无关的物件是无所谓的。

那么，每次点击都可以立即响应本该由鼠标悬浮触发的事件：比如显示物件的 tips 窗口。但不应该触发原本鼠标点击物件发生的交互事件。

然后，我们把和已聚焦物件的交互放在右下角大拇指最舒适的虚拟按钮上。也就是按下主按钮（右下角大按钮），才被视为鼠标点击了那个物件，与之交互。如果是鼠标操作，这个交互行为通常有两个：左键点击和右键点击。这恰好可以映射为轻点主按钮和长按住按钮。

在我们的游戏中，和物件交互通常是呼出交互菜单。如果是鼠标操作，交互菜单一般会放在交互物件的旁边。因为这样鼠标移动距离最短，操作最舒适，而且可以提示操作对象的位置。

但在手指操作时，交互是通过按下右下角按钮实现的。交互菜单自然可以环绕主按钮做一个扇面。这样也很舒适。特别是，它不会让手指遮挡住操作的物件。

如果是修建菜单，可以视为和场景地板交互，也就是在无聚焦物件时点下主按钮。这时在弹出的二级菜单中选择要修建的建筑，就可以把它在屏幕中心显示出来。通过移动场景的拖动手势，便可以定位。即，手指移动的是场景而不是建筑，建筑永远在屏幕中央。这比按住待修建筑在屏幕上拖动（鼠标逻辑）要好得多。因为玩家不用在拖动物件时兼顾移动场景，也不用担心手指遮住了准备施工的区域。

在手机屏幕上，所有的信息都应该简洁，避免过小的字体和密集的版面。这点说起来容易，做起来很容易忽视。主要原因还是开发时往往在 PC 显示器上进行，使用的是熟悉的桌面界面逻辑。

在手机上，我们通常不会将注意力同时在多个窗口间切换。但这在桌面环境却非常常见：窗口只在屏幕的一小部分，注意力也容易聚焦在屏幕的一个区域。手机上，我们需要当前展现的信息尽量在屏幕中央的阅读舒适区域，内容可以一目了然（而不需要视线来回扫动）。

我按以上逻辑设计了物件的 tips 窗口。当玩家清点屏幕聚焦物件时，tips 窗口显示在屏幕左侧，占大约 1/3 屏幕。切换聚焦物件，这个 tips 窗口内容就立即切换。

信息窗口仅供暂时物件的信息用，不设置任何进一步交互按钮。这一点和 tips 窗口的逻辑一样。这个信息窗口应该尽量少放信息，避免让玩家为分辨密集信息而疲劳。因为这个窗口上没有进一步交互按钮，我们就可以把点击信息窗口的各个区域设定为二级信息窗，用来在屏幕中央展示部分更详尽的信息。

这相当于把需要展示的信息分成两级，总览放在一级窗口，挂在屏幕左侧。一级窗口划分为三到四个区域，对应三四个二级信息面板，玩家触摸这些区域就可以在屏幕中央看到它们。

主屏幕我希望足够干净。做多放一两个常驻按钮就够了，可以放在屏幕的四角舒适的地方。玩家的主要操作是用手指拖动及缩放场景、轻点场景中的物件聚焦、以及按右下主按钮和聚焦物件交互。

如果需要更多的交互菜单，很多手机游戏会把它们放在屏幕左下，列成一行。我不喜欢这样的设计。所以把更多的交互菜单的入口设计为长按屏幕中央，弹出一个全屏的操作面板。相当于在 PC 上按 esc 键弹出的主菜单。

这样设计会让游戏主屏幕显得清爽很多。

​Read More