白黒羊

白黒羊

白黒羊

  • Home
  • Products
  • News
  • Support
  • Contact

SHIROKUROHITSUJI

WebGLのUnity InputField 日本語入力について

2019年4月11日Unity, WebGL By: shimahinuko

プレイヤーの名前を入力するときなどに使える「InputField」ですが、WebGLで出力するとデフォルトでは日本語が使えません。

WebGLでの日本語入力・コピー&ペーストについて – ユニティ・テクノロジーズ・ジャパン合同会社

「InputField等でユーザーからの入力を受けつけるのですが、WebGLでは、日本語での入力ができない・コピー&ペーストが出来ない」というお問合せが現在 多数寄せられております。

IMEの仕組みに頼れないInputシステムのため、Unity自体の改善には時間を要するものと思われます。

そこで、unitypackage「WebGLNativeInputField」が用意されました。

使い方は、既存のInputFieldコンポーネントをWebGLNativeInputFieldコンポーネントに置き換えるだけととても簡単です。
詳しくは上記のページを見れば分かると思います。

しかし、実際に使ってみると下記のようなエラーが出ました。

#####に埋め込まれているページの内容

An error occurred running the Unity content on this page.
See your browser JavaScript console for more info.
The error was: Uncaught TypeError: Cannot read property ‘style’ of null

画面上部にエラーダイアログが表示される

このエラーは、無視して続行することができるのですが、その事情を知らない他の人にプレイしてもらうことを考えると気になります。
エラーを表示しない方法として下記リンクのように、「index.html」に、

<script> window.alert = _ => {}; </script>

を書き加えるという対策を取ることができるようです。

https://blog.httqs.com/log/39

公式のデモでは、そのようなエラーは出ないので、表示させないのではなくエラー自体を発生させない方法はあるのでしょうが、少し見ただけでは分かりませんでした。
分かり次第追記しようと思います。

また、公式のものではありませんが以下のパッケージをお借りすることで、JavaScriptを呼び出すことなく日本語入力ができるので、現時点で一番簡単な解決方法かと思います。
別画面に入力するのではないため、見た目もきれいです。

kou-yeung_WebGLInput_ IME for Unity WebGL

WebGLInputを利用するとこのように入力できる

今回出てきた3種類を並べてみました。
試してみてください。

また、記事中のゲームはこちらから遊べるのでぜひどうぞ。
PCからアクセスしてください。

ハナヤコネクト _ フリーゲーム投稿サイト unityroom

少し前に『Unity 1週間ゲームジャム/ お題「つながる」』に提出した作品です。

別で記事書こうと思っていたのですが順番が前後しました。
色々と勉強になったのでそのうち思ったことを書きます。

Share:

Previous

GitLab初期設定覚書

Next

sudoできない状況でもg++を8.3.0にアップデートする

Leave a Comment コメントをキャンセル

カテゴリー

  • CFD (9)
    • OpenFOAM (9)
  • Design (5)
    • Adobe_XD (1)
    • Font (3)
    • Photoshop (2)
  • Diary (2)
  • Event (9)
    • AdventCalendar (3)
    • unity1week (6)
  • Git (2)
    • GitLab (1)
  • Programming (6)
    • C# (2)
      • Rider (1)
    • C++ (2)
    • javascript (2)
  • Unity (18)
    • Editor拡張 (1)
    • UniTask (1)
    • UnityAsset (8)
    • UnityCloudBuild (2)
    • WebGL (2)
  • ゲーム (2)
    • 冠を持つ神の手 (2)
  • 機械学習 (1)
  • 開発 (15)
    • Admob (1)
    • Android (2)
    • Database (1)
      • MySQL (1)
    • DiscordAPI (2)
    • iOS (2)
    • PlayFab (1)
    • Web (2)
      • AmazonS3 (2)
      • Heroku (1)
      • RestAPI (1)
      • WordPress (1)
    • 虹の降る海 (4)
    • 設計 (1)
2019年4月
日 月 火 水 木 金 土
 123456
78910111213
14151617181920
21222324252627
282930  
« 2月   5月 »

アーカイブ

  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年2月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月

カテゴリー

  • Admob
  • Adobe_XD
  • AdventCalendar
  • AmazonS3
  • Android
  • C#
  • C++
  • CFD
  • Database
  • Design
  • Diary
  • DiscordAPI
  • Editor拡張
  • Event
  • Font
  • Git
  • GitLab
  • Heroku
  • iOS
  • javascript
  • MySQL
  • OpenFOAM
  • Photoshop
  • PlayFab
  • RestAPI
  • Rider
  • UniTask
  • Unity
  • unity1week
  • UnityAsset
  • UnityCloudBuild
  • Web
  • WebGL
  • WordPress
  • 冠を持つ神の手
  • 機械学習
  • 虹の降る海
  • 設計
  • 開発

メタ情報

  • ログイン
  • 投稿フィード
  • コメントフィード
  • WordPress.org