Back to Details

platform-building

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Platform Building

平台化构建系统

Touch controls, VR input, and accessibility patterns for building systems.
适用于构建系统的触摸控制、VR输入及无障碍设计模式。

Quick Start

快速开始

javascript
import { TouchBuildController } from './scripts/touch-build-controller.js';
import { VRBuildingAdapter } from './scripts/vr-building-adapter.js';
import { AccessibilityConfig } from './scripts/accessibility-config.js';

// Mobile touch building
const touch = new TouchBuildController(canvas, {
  doubleTapToPlace: true,
  pinchToRotate: true,
  swipeToChangePiece: true
});

touch.onPlace = (position, rotation) => buildingSystem.place(position, rotation);
touch.onRotate = (angle) => ghost.rotate(angle);

// VR building with hand tracking
const vr = new VRBuildingAdapter(xrSession, {
  dominantHand: 'right',
  snapToGrid: true,
  comfortMode: true // Reduces motion sickness
});

vr.onGrab = (piece) => selection.select(piece);
vr.onRelease = (position) => buildingSystem.place(position);

// Accessibility configuration
const a11y = new AccessibilityConfig({
  colorblindMode: 'deuteranopia', // red-green
  highContrast: true,
  screenReaderHints: true
});

// Apply to ghost preview
ghost.setColors(a11y.getValidityColors());
javascript
import { TouchBuildController } from './scripts/touch-build-controller.js';
import { VRBuildingAdapter } from './scripts/vr-building-adapter.js';
import { AccessibilityConfig } from './scripts/accessibility-config.js';

// 移动端触摸构建
const touch = new TouchBuildController(canvas, {
  doubleTapToPlace: true,
  pinchToRotate: true,
  swipeToChangePiece: true
});

touch.onPlace = (position, rotation) => buildingSystem.place(position, rotation);
touch.onRotate = (angle) => ghost.rotate(angle);

// 带手部追踪的VR构建
const vr = new VRBuildingAdapter(xrSession, {
  dominantHand: 'right',
  snapToGrid: true,
  comfortMode: true // 减少晕动症
});

vr.onGrab = (piece) => selection.select(piece);
vr.onRelease = (position) => buildingSystem.place(position);

// 无障碍配置
const a11y = new AccessibilityConfig({
  colorblindMode: 'deuteranopia', // 红绿色盲
  highContrast: true,
  screenReaderHints: true
});

// 应用到预览虚影
ghost.setColors(a11y.getValidityColors());

Reference

参考资料

See 
references/platform-considerations.md
for:
  • Mobile gesture patterns (Fortnite Mobile, Minecraft PE)
  • VR building research and comfort guidelines
  • Colorblind palette recommendations
  • Screen reader integration patterns
  • Cross-platform input abstraction
查看
references/platform-considerations.md
获取以下内容：
  • 移动端手势模式（参考《堡垒之夜手游》《我的世界口袋版》）
  • VR构建研究与舒适度指南
  • 色盲友好调色板推荐
  • 屏幕阅读器集成模式
  • 跨平台输入抽象方案

Scripts

脚本文件

FileLinesPurpose
touch-build-controller.js
~450Mobile gestures: tap, drag, pinch, swipe
vr-building-adapter.js
~400VR hand/controller input, comfort settings
accessibility-config.js
~350Colorblind modes, contrast, screen reader
文件代码行数用途
touch-build-controller.js
~450移动端手势：点击、拖拽、捏合、滑动
vr-building-adapter.js
~400VR手部/控制器输入、舒适度设置
accessibility-config.js
~350色盲模式、对比度、屏幕阅读器支持

Platform Detection

平台检测

javascript
// Detect platform capabilities
const platform = {
  isMobile: /Android|iPhone|iPad|iPod/i.test(navigator.userAgent),
  isTouch: 'ontouchstart' in window,
  isVR: navigator.xr !== undefined,
  prefersReducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
  prefersHighContrast: window.matchMedia('(prefers-contrast: more)').matches
};

// Initialize appropriate controllers
if (platform.isVR && xrSession) {
  setupVRControls();
} else if (platform.isTouch) {
  setupTouchControls();
} else {
  setupMouseKeyboard();
}
javascript
// 检测平台能力
const platform = {
  isMobile: /Android|iPhone|iPad|iPod/i.test(navigator.userAgent),
  isTouch: 'ontouchstart' in window,
  isVR: navigator.xr !== undefined,
  prefersReducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
  prefersHighContrast: window.matchMedia('(prefers-contrast: more)').matches
};

// 初始化对应控制器
if (platform.isVR && xrSession) {
  setupVRControls();
} else if (platform.isTouch) {
  setupTouchControls();
} else {
  setupMouseKeyboard();
}

Mobile Considerations

移动端注意事项

Fortnite Mobile demonstrates effective touch building with customizable HUD, auto-material selection, and gesture-based piece rotation. Key patterns include dedicated build mode toggle, large touch targets (minimum 44px), and visual feedback for all actions.
《堡垒之夜手游》展示了高效的触摸构建方案，包括可自定义HUD、自动材质选择及基于手势的部件旋转。核心设计模式包括专属构建模式切换按钮、最小44px的大触摸目标，以及所有操作的视觉反馈。

VR Considerations

VR端注意事项

VR building requires attention to comfort. Snap rotation reduces motion sickness, and arm-length building distances prevent fatigue. Hand tracking enables intuitive grab-and-place, while controller building benefits from laser-pointer selection for distant pieces.
VR构建需注重舒适度。吸附式旋转可减少晕动症，臂长范围内的构建距离可避免疲劳。手部追踪支持直观的抓取放置操作，而控制器构建则受益于激光指针选择远处部件的功能。

Accessibility Patterns

无障碍设计模式

Valheim uses blue/yellow instead of green/red for stability indicators, supporting deuteranopia (the most common colorblind condition). High contrast modes should use 7:1 ratio for critical indicators, and all visual feedback should have audio/haptic alternatives.
《英灵神殿》使用蓝/黄替代绿/红作为稳定性指示器，以支持红绿色盲（最常见的色盲类型）。高对比度模式下，关键指示器应采用7:1的对比度比例，且所有视觉反馈都应提供音频/触觉替代方案。