Game Development Diary

Multi-Platform Control Scheme Implementation

Overview

As a web-based game, it inherently supports multi-platform compatibility. To enhance this, I developed a unified control system that works seamlessly across keyboard and mouse, gamepad, and touchscreen devices. This system ensures a consistent user experience for various actions such as character control, environmental interactions, planting and harvesting, quick slot triggers, and inventory and system menu navigation.

Touchscreen Controls

The touchscreen interface required a distinct UI design due to the necessity of gesture controls. I am considering further layout updates to improve usability. The touch controls are divided into two types:

• Button-based controls: Standard touch buttons for actions.

• Omni-directional joystick: Implemented using nippleJS, which has proven to be highly effective, used for controlling character movement and camera perspective. More details can be found at nippleJS npm page.

  Mobile control UI Tablet control UI

Gamepad Controls

Since gamepads cannot specify exact coordinates for interaction, I aligned all UI elements to a grid. This allows the directional pad to move the focus across the UI elements, with specific grids offering corresponding menus for operations. Gamepad control UI

Keyboard and Mouse Controls

Being the primary input method during initial development, the keyboard and mouse setup is the most flexible:

• Keyboard: Uses number keys for quick slot triggers, WSAD for character movement, or in the inventory or settings interface, WSAD keys can be used for focus movement similar to a gamepad.
• Mouse: Moves the mouse to control the camera perspective, or clicks on specific interactive quick slots and menus.

Keyboard Mouse control UI

Automatic Switching and UI Feedback

The PC version supports automatic switching between gamepad and keyboard inputs. When a specific control mode is activated, relevant shortcut keys are displayed on important UI elements, providing guidance and enhancing user interaction across all control types.

This comprehensive approach ensures that regardless of the platform or input method, players can enjoy a smooth and intuitive gaming experience.

---

---

游戏开发日记

多平台控制方案实现

概述

作为一款网页游戏，它天生支持多平台兼容性。为了增强这一点，我开发了一套统一的控制系统，可以在键盘鼠标、手柄和触摸屏设备上无缝运行。该系统确保了在人物控制、环境交互、种植和收获、快捷栏触发以及物品栏和系统菜单导航等各种操作上的一致性用户体验。

触摸屏控制

由于手势操作的需求，触摸屏界面需要一个独特的UI设计。我正在考虑进一步的布局更新以提高可用性。触摸控制分为两种类型：

• 按钮类控制：用于操作的标准触摸按钮。

• 全向摇杆：使用nippleJS实现，效果非常好，用来控制人物移动和视角。更多详情可以在nippleJS npm页面找到。

  手机控制界面 平板控制界面

手柄控制

由于手柄无法指定精确的坐标进行交互，我将所有UI元素对齐到网格上。这使得方向键可以在UI元素之间移动焦点，对于特定内容的网格还有对应的菜单可供操作。 手柄控制界面

键盘和鼠标控制

作为初始开发阶段的主要输入方式，键盘和鼠标的设置最为灵活：

• 键盘：使用数字键触发快捷栏，WSAD控制人物移动，或在物品栏或设置界面使用WSAD键进行类似于手柄的焦点移动。

• 鼠标：移动鼠标控制人物视角，或点击具体可交互快捷栏和菜单等。

  键盘鼠标控制界面

自动切换和UI反馈

PC版本支持手柄和键盘输入的自动切换。某种控制模式激活时会在重要UI上显示快捷键，提供指引，增强了所有控制类型的用户交互体验。

这种全面的方法确保了无论使用哪种平台或输入方式，玩家都能享受到流畅且直观的游戏体验。