DEV Community

RunkBear
RunkBear

Posted on

【HarmonyOS Next】ArkUI-X Casual Puzzle Game

#harmonyos

一、Preface: When Puzzles Meet Cross-Platform Development

Recently, while developing a cross-platform children's puzzle game, I deeply experienced the power of the ArkUI-X framework—the same set of code could run smoothly on both a Huawei Mate60 Pro and an iPhone 15! This not only saved development costs but, more importantly, ensured a consistent user experience across multiple devices. Today, let's discuss the core technical points of this project, especially the "love-hate" challenges of drag coordinate calculation and image silhouette generation.
Native HarmonyOS Code Running Effect

Running Effect After Transpiling to iOS Code

二、Development Environment Overview

  • Operating System: macOS
  • Development Tool: DevEco Studio 5.0.4 (Build 5.0.11.100)
  • Target Devices: Huawei Mate60 Pro & iPhone15
  • Development Language: ArkTS
  • Framework Version: ArkUI API 16

💡 Code Repository Address: gitee

三、Core Implementation Analysis

3.1 3D Coordinate System for Drag Logic

In puzzle games, precise position calculation is paramount. We implement the drag logic using the PanGesture listener:

PanGesture()
  .onActionUpdate((event: GestureEvent) => {
    item.currentOffsetX = item.dragStartX + event.offsetX
    item.currentOffsetY = item.dragStartY + event.offsetY
  })
Enter fullscreen mode Exit fullscreen mode

There are two key points here:

  1. Initial Position Anchoring: dragStartX/Y records the starting point of the drag.
  2. Incremental Superposition Calculation: event.offsetX/Y obtains the movement increment in real-time.

Upon release, position validation is performed using a 50vp snap threshold for automatic alignment:

const isSnapped = Math.abs(currentX - targetX) < 50 
               && Math.abs(currentY - targetY) < 50
Enter fullscreen mode Exit fullscreen mode

3.2 Magical Generation of Image Silhouettes

To make target positions easier for children to identify, we use blend modes to create silhouette effects:

Image(item.imageResource)
  .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
Enter fullscreen mode Exit fullscreen mode

Analysis of this combination technique:

  • BlendMode.DST_IN: Performs pixel-level blending of the source and destination images.
  • BlendApplyType.OFFSCREEN: Completes the blending operation in an off-screen buffer.
  • Gray Background + Blend Mode: Generates a semi-transparent silhouette effect.

四、Practical Techniques for Multi-Device Adaptation

4.1 Landscape Orientation Adaptation Solution

Force landscape display using the window module:

window.getLastWindow().then(win => {
  win.setPreferredOrientation(Orientation.LANDSCAPE)
})
Enter fullscreen mode Exit fullscreen mode

4.2 Responsive Layout Design

Adopt a hybrid layout strategy using percentage + fixed values:

Stack()
  .width('100%')
  .height('100%')
Enter fullscreen mode Exit fullscreen mode

4.3 Key Performance Optimization Points

  • Use @ObservedV2 for fine-grained updates.
  • Utilize the Trace decorator to track critical data changes.
  • Employ hardware acceleration for animations: 
animateTo({
  duration: 200
}, () => { /* Animation logic */ })
Enter fullscreen mode Exit fullscreen mode

五、Project Highlights Summary

Technical Dimension Implementation Solution Cross-Platform Benefit
Gesture Interaction PanGesture + Coordinate Calculation Consistent Gesture Behavior
Visual Effects BlendMode Compositing Platform-Independent Rendering
State Management @ObservedV2 + Trace Data Tracking 30% State Sync Efficiency Gain
Layout System Hybrid Percentage + Fixed Layout Adapts to Different Screen Sizes

六、Development Pitfalls Record

6.1 Drag Jitter Issue

Symptom: Slight drag lag observed on iOS.

Solution: Reduced animation duration from 300ms to 200ms and enabled hardware acceleration.

6.2 Silhouette Blur Issue

Symptom: Blurry silhouette edges on Huawei devices.

Fix: Added the off-screen rendering parameter BlendApplyType.OFFSCREEN.

七、Future Optimization Directions

  1. Add difficulty levels (3x3 / 4x4 modes).
  2. Introduce AI for automatic puzzle shape generation.
  3. Add sound effects and haptic feedback.
  4. Implement multiplayer competitive mode.

Through this project, we have validated the powerful cross-platform capabilities of the ArkUI-X framework. Whether on Huawei's HarmonyOS or the iOS platform, it maintains a code reuse rate of over 90%, truly realizing the ideal state of "Develop Once, Deploy Everywhere". We look forward to the further development of the ArkUI-X ecosystem, opening up new and broader horizons for cross-platform development!

🚀 Full source code is open-source, welcome to exchange ideas: gitee

Top comments (0)