Design and Implementation of a Lightweight Map Solution for King of Glory Using Unity and Native Views
This article details the end‑to‑end design, technical selection, and implementation of a lightweight map solution for the mobile game King of Glory, covering cross‑platform UI framework, Unity‑native view integration, data transmission via JCE, handling of Android/iOS click events, immersive mode, and nine‑patch image support.
The article presents a comprehensive case study of building a lightweight map solution for the popular mobile game King of Glory. It begins with the project background, outlining the need to integrate map functionality into the game while meeting strict package size constraints.
Technical Solution Evolution
Two main approaches were considered for displaying the map on Android and iOS: launching a new Activity, using a WindowManager overlay, or embedding a native View into the Unity Activity. The third approach—mounting the native View onto the Unity Activity—was chosen for its flexibility.
Key code for mounting the Android view:
ViewGroup rootView = (ViewGroup) activity.getWindow().getDecorView();
ViewGroup.LayoutParams param = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
rootView.addView(mView, param);On iOS, the native view is attached to the key window:
+ (UIView *)getMountPoint {
UIWindow *window = [UIApplication sharedApplication].keyWindow;
NSAssert(window != nil, @"window must not be nil");
return window;
}
- (void)mount {
UIView *mountPoint = [[self class] getMountPoint];
NSAssert(self.underlyingView.superview == nil, @"scene super view must be nil");
[mountPoint addSubview:self.underlyingView];
}UI Framework Design
A three‑layer UI framework is defined: Scene (the overall container), Page (individual screens), and View (UI controls such as UKLabel, UKButton, UKImageView, UKMapView, etc.). Each view has common properties like id , rect , zIndex , invisible , and backgroundColor . The framework uses JCE (Tencent's binary protocol) to describe UI elements, enabling a single data payload to drive rendering on both Android and iOS.
Example JCE definition for a label:
struct UKLabel {
0 require UKInt id;
1 optional UKInt zIndex;
2 require UKRect rect;
3 optional UKBool invisible;
4 optional UKColor backgroundColor;
5 optional UKString text;
6 optional UKColor textColor;
7 optional UKColor highlightedTextColor;
8 optional UKFont font;
9 optional UKTextAlignment textAlignment;
10 optional UKEllipsis ellipsis;
}Data‑Driven Method Calls and Callbacks
Method invocations from Unity to native code are encoded as JCE messages containing a target (view id and type) and method parameters. Callbacks (e.g., button clicks, table view selections) are sent back using a similar JCE structure that includes the target id, type, and specific event data.
Native method signature example:
public void call(byte[] target, byte[] method);Callback signature example:
public void callback(byte[] target, byte[] data);Handling Android Immersive Mode and Click Events
To forward touch events from Unity to Android, the manifest is updated with:
<meta-data android:name="android.app.lib_name" android:value="unity"/>
<meta-data android:name="unityplayer.ForwardNativeEventsToDalvik" android:value="true"/>Additionally, a transparent overlay is added in Unity when a native view is displayed to prevent Unity from consuming the touch events.
Nine‑Patch Image Support
The article explains how to create NinePatch drawables programmatically by constructing the required binary chunk. By scaling the bitmap and the nine‑patch insets according to the device density, the visual artifacts at the edges are eliminated.
float density = context.getResources().getDisplayMetrics().density;
Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap,
(int)(bitmap.getWidth() * density),
(int)(bitmap.getHeight() * density), true);
ByteBuffer buffer = getByteBufferFixed((int)(left * density), (int)(top * density), (int)(right * density), (int)(bottom * density));
NinePatchDrawable drawable = new NinePatchDrawable(res, scaledBitmap, buffer.array(), new Rect(), null);Debug and Integration Workflow
To accelerate debugging, the team introduced a data‑first approach: UI definitions are generated on a Windows machine, serialized to JCE, and then directly rendered on Android/iOS without rebuilding the entire Unity project. This reduced iteration time from hours to minutes.
In summary, the project delivered a cross‑platform, data‑driven map UI for King of Glory, addressing challenges such as view hierarchy integration, event forwarding, immersive mode handling, and scalable image rendering, while establishing a workflow that dramatically speeds up development and debugging.
Architect
Professional architect sharing high‑quality architecture insights. Topics include high‑availability, high‑performance, high‑stability architectures, big data, machine learning, Java, system and distributed architecture, AI, and practical large‑scale architecture case studies. Open to ideas‑driven architects who enjoy sharing and learning.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.