How to Enable Japanese, Chinese, and Korean IME Input in Unity WebGL with NGUI (WebIME)
[Science]
Unity WebGL games that rely on NGUI UIInput often cannot accept Japanese, Chinese, or Korean text because the browser’s Input Method Editor (IME) never attaches to the WebGL canvas—this article explains how Happy Mates enabled full CJK IME composition in Arena of Clash WebGL using a WebIME bridge (hidden HTML input + jslib + NGUI labelIME). If you are searching for “Unity WebGL Japanese input,” “NGUI Chinese IME,” “Korean Hangul WebGL,” or “compositionupdate Unity,” the pattern below is the working approach we ship in production: keep NGUI for rendering, let the browser own IME, and mirror composition into a dedicated UILabel. Happy Mates Science · Arena of Clash WebGL · Practical engineering reference 1. Why Unity WebGL breaks Asian language input On desktop and native mobile builds, Unity and the OS cooperate: Input.compositionString and IMECompositionMode can show intermediate kana, pinyin, or Hangul syllables while the user converts them. On WebGL, the game lives inside a <canvas>. The canvas is not a text field. Browsers therefore do not open a proper IME session against it. • Japanese (かな／漢字): users need composition + candidate conversion. • Chinese (拼音 / 注音): multi-key sequences before a character is committed. • Korean (Hangul): syllable assembly is itself an IME composition process. Without a DOM text control, players see missing characters, Latin-only fallbacks, or broken chat and guild names. That is unacceptable for a multilingual community platform such as Happy Mates. 2. Design idea: WebIME — browser IME, Unity display WebIME (our name for this bridge) does not reinvent Japanese or Chinese conversion. It reuses the OS/browser IME that users already trust, then synchronizes results into NGUI. Figure 1. WebIME architecture: hidden HTML input ↔ WebGLInput.jslib ↔ WebGLInput.cs ↔ NGUI UIInput / txtIME. The data path in short: • On focus, C# creates an absolutely positioned <input> or <textarea> over (or near) the canvas. • Desktop builds usually keep the element visually hidden (opacity 0) so NGUI remains the visible UI. • Browser compositionstart / compositionupdate / compositionend drive a C# callback. • Committed text updates UIInput.value; in-progress text is shown on UILabel labelIME (child name txtIME). • On blur, the DOM node is destroyed and Unity may reclaim keyboard capture. 3. NGUI side: labelIME (Asser’s composition overlay) Stock NGUI UIInput was designed before WebGL IME was a first-class concern. Happy Mates extends UIInput with a public UILabel labelIME. While the user is composing, that label shows the temporary string above the caret; when composition ends, the label hides. public UILabel labelIME; // composition preview (Japanese / Chinese / Korean) // Prefab convention: direct child named "txtIME" UIInput.Start wires WebGL auto-attach through static delegates (NGUI cannot reference game assemblies via asmdef, so registration happens from WebGLInputAutoAttach): UIInput.webglAttach = WebGLInputAutoAttach.TryAttach; UIInput.webglHasInput = input => input.GetComponent<WebGLInput>() != null; Figure 2. Prefab checklist: add txtIME, assign labelIME, ship a WebGL build — WebGLInput attaches automatically. Setup checklist for each chat / name / search field that must accept CJK: • Add a child UILabel named txtIME under the UIInput GameObject. • Assign it to UIInput.labelIME in the Inspector (or rely on Find("txtIME") as a fallback). • Style txtIME for readability (often a slightly different color than the main label). • Do not name unrelated methods OnSelect on the same GameObject — NGUI’s UICamera.Notify uses SendMessage and can re-enter WebGL overlay logic. 4. Browser side: WebGLInput.jslib composition events The jslib plugin creates the DOM control, positions it from canvas coordinates (scaled by container size), and registers listeners. The critical IME piece is WebGLInputOnComposition: input.addEventListener('compositionstart', e => invoke(e.data)); input.addEventListener('compositionupdate', e => invoke(e.data)); input.addEventListener('compositionend', e => invoke("")); During composition, e.data is the provisional string. On compositionend we clear the overlay string in Unity (the committed characters already arrived through oninput / OnValueChange). This matches how users expect IME to feel in a normal web form. Also important: while the HTML field is focused, set UnityEngine.WebGLInput.captureAllKeyboardInput = false so Unity does not steal key events from the IME. Restore capture on blur. 5. Unity side: WebGLInput + WrappedNguiInput WebGLInput (WebGLSupport namespace) is a MonoBehaviour that wraps any IInputField. For NGUI, WrappedNguiInput adapts UIInput: text, caret, selection, multiline, password, and SetImeComposition(string). When the field is selected, CreateHtmlOverlay(): • Computes screen rect from the NGUI label. • Calls WebGLInputCreate(...) with isHidden typically true on desktop. • Hooks focus, blur, value change, edit end, keyboard, tab, and composition callbacks. • Focuses the DOM element so the OS IME can start. SetImeComposition mirrors the caret using the NGUI caret geometry and moves txtIME just above it—so players see composition where they are typing, not in a disconnected browser widget. Figure 3. In-game feel: NGUI field shows committed text; txtIME shows live IME composition above the caret. 6. Mobile browsers On mobile WebGL, a tiny opacity-0 field can fight the software keyboard. The same plugin can place a larger visible textarea near the bottom of the viewport (isMobile path). The principle is unchanged: the DOM owns IME; Unity mirrors state. 7. What not to do • Do not expect Input.compositionString alone to fix WebGL CJK input. • Do not build a custom Japanese/Chinese dictionary in game code—use the system IME. • Do not leave captureAllKeyboardInput = true while the HTML field is focused. • Do not forget labelIME: without it, composition is invisible even if commit works. • Do not name helper methods OnSelect / OnClick on the same object as UIInput if they are not real NGUI handlers. 8. Results on Happy Mates Arena of Clash on Happy Mates WebGL uses this WebIME path for fields that require Asian languages (guild names, chat, and similar). Players on Japanese, Chinese (Simplified/Traditional), and Korean layouts can compose naturally in Chrome and other Chromium browsers, with NGUI still driving the look of the game UI. The same codebase keeps native Win/Android input paths for non-WebGL builds; WebIME is a WebGL-specific bridge, not a replacement for desktop IME. 9. Minimal integration summary • Patch or extend UIInput with labelIME + optional webglAttach hook. • Ship WebGLInput.cs, WrappedNguiInput.cs, WebGLInput.jslib, WebGLInputAutoAttach.cs. • Mark IME-capable prefabs with txtIME. • Test composition (not only ASCII) on a real WebGL build in Chrome with JP/ZH/KR IME enabled. Further reading keywords (SEO) Unity WebGL IME, NGUI UIInput Japanese, Chinese pinyin WebGL, Korean Hangul canvas input, compositionupdate jslib, WebIME Happy Mates, Arena of Clash WebGL chat input. Licensing & reuse notice This article is published for free on the Happy Mates platform for reference only. Other sites may link to the Happy Mates page that hosts this article. Redistribution, reposting, mirroring, or republication of the full text or images elsewhere is not permitted. Access on Happy Mates is free of charge. © Chrome Cobalt Digital / Happy Mates. All rights reserved. Suggested Science category tags: Unity, WebGL, NGUI, IME, CJK, localization.