Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Unityでチャットに使えるモバイルキーボードの実現
Search
Nakaji Kohki
February 19, 2021
Programming
2
4.3k
Unityでチャットに使えるモバイルキーボードの実現
CA.unity #1 - Unity Meetup
https://meetup.unity3d.jp/jp/events/1271
https://twitter.com/nkjzm
Nakaji Kohki
February 19, 2021
Tweet
Share
More Decks by Nakaji Kohki
See All by Nakaji Kohki
VRMアバターでギターの弾き語りがしたい!! 『Vフレット』の開発で考えたこと
nkjzm
0
180
『ALTDEUS: Beyond Chronos』で物語に没入できる操作感を実現するマルチプラットフォーム対応の道のり / The path to multi-platform support for immersive storytelling in ALTDEUS: Beyond Chronos
nkjzm
0
270
『ALTDEUS: Beyond Chronos』におけるマルチプラットフォーム向けコントローラーの対応 / Support for multi-platform controllers in "ALTDEUS: Beyond Chronos
nkjzm
0
320
Unityで使える汎用的な ハンバーガーメニューの実装 / UniHamburger
nkjzm
3
880
20時間超の物語をVRで!『ALTDEUS: Beyond Chronos』の制作を支えた”Uranus”の制作過程と機能紹介 [CEDEC2021] / Introduction of ALTDEUS' VR ADV tool "Uranus", CEDEC2021
nkjzm
1
2k
withコロナに見るXR業界のイマ! [CEDEC2021] / XR NOW CEDEC2021
nkjzm
3
1.7k
VRプロダクト開発ラウンドテーブル2021
nkjzm
0
1.3k
Notionで人生を公開している話
nkjzm
0
910
Oculusプラットフォームの最近の話
nkjzm
1
110
Other Decks in Programming
See All in Programming
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
640
エンターテイメント業界で利用されるAWS
demuyan
0
210
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
110
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
0
180
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.9k
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
Ruby Pattern Matching
bkuhlmann
0
920
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
520
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
920
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Principles of Awesome APIs and How to Build Them.
keavy
120
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
259
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Docker and Python
trallard
33
2.7k
The Invisible Side of Design
smashingmag
294
49k
GitHub's CSS Performance
jonrohan
1024
450k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Transcript
Unityでチャットに使える モバイルキーボードの実現 2020/01/19 CA.unity #1
Nakaji Kohki / なかじ Twitter: @nkjzm ・日本VR学会認定 上級VR技術者 ・専門学校の先生(VRエンジニア専攻) ・Podcast『xR.fm』のパーソナリティ
・エンジニア系勉強会のオーガナイザー 略歴: CyberAgent → メルカリ R4D XR → 現在 Unity / VR Engineer ~0:30
~1:00 ALTDEUS: Beyond Chronos • VRゲーム開発してます! ◦ アドベンチャー ◦ マシンアクション
◦ VRライブ • Quest/Riftで好評配信中 • Steam版 本日リリース!! • PSVR版 4/15発売
本日の内容 モバイルキーボードを 気持ちよく実装する方法 ~2:00 よくある実装 今回の実装 このアプリの開発で使用
アジェンダ ~2:30 1. キーボードの高さにチャット欄を調整する a. キーボード高さの取得 b. チャット欄に反映させる 2. ネイティブの入力フィールドを非表示に
3. ネイティブボタンのOKイベント取得 4. キーボードのハンドリング
キーボード高さの取得(1/2) iOSはそのままいける > Android では Rect は 0 です。 https://docs.unity3d.com/ja/current/ScriptReference/TouchScreenKeyboard-area.html
→ baba-s さんのスクリプトで対応 ~3:00 1. Rect area = UnityEngine.TouchScreenKeyboard.area; 2. int height = Mathf.RoundToInt(area.height);
キーボード高さの取得(2/2) 引用元: https://github.com/baba-s/UniSoftwareKeyboardArea/blob/master/Scripts/SoftwareKeyboardArea.cs ~3:30 1. var currentActivity = unityClass.GetStatic<AndroidJavaObject>( "currentActivity"
); 2. var unityPlayer = currentActivity.Get<AndroidJavaObject>( "mUnityPlayer" ); 3. var view = unityPlayer.Call<AndroidJavaObject>( "getView" ); 4. 5. if ( view == null ) return 0; 6. 7. int result; 8. using ( var rect = new AndroidJavaObject( "android.graphics.Rect" ) ) 9. { 10. view.Call( "getWindowVisibleDisplayFrame", rect ); 11. result = Screen.height - rect.Call<int>( "height" ); 12. }
チャット欄に反映させる(1/3) • uGUIに反映させる処理 ◦ 右図ならBottomに反映 ◦ uGUIの組み方次第 ◦ Debug表示で 実際の値が見られる
~4:00 1. chatContainer.sizeDelta = new Vector2(0, -margin);
チャット欄に反映させる(2/3) • 解像度の調整 ◦ キーボードの高さは端末の解像度で返ってくる ◦ uGUIはCanvasの解像度で制御されている(ことが多い) ~4:30 1. //
解像度比を取得 2. var resolutionHeight = chatContainer 3. .GetComponentInParent<CanvasScaler>() 4. .GetComponent<RectTransform>().sizeDelta.y; 5. var rate = resolutionHeight / Screen.height; 6. 7. var margin = height * rate; 8. chatContainer.sizeDelta = new Vector2(0, -margin);
チャット欄に反映させる(3/3) ~5:00 • SafeAreaの罠 ◦ TouchScreenKeyboard.areaは SafeAreaの下部領域の高さを含む
ネイティブの入力 フィールドを非表示 ~6:00 変数が用意されている TouchScreenKeyboard.hideInput →InputFieldの HideMobileInputで上書きされる ※ネイティブのコピペ機能などが使えなくなる ※Androidだと疑似的な実装 https://docs.unity3d.com/ja/current/ScriptReference/TouchScreenKeyboard-hideInput.html)
ネイティブボタンの OKイベント取得 • Androidだとキーボード表示中に キーボード外の入力が拾えない ◦ →ネイティブのOKボタンで送信 • keyboard.statusを監視で実現 ◦
Done:OKを押した時 ◦ LostFocus:フォーカスが外れた時 ~7:00
キーボードのハンドリング ~8:00 1. Keyboard = TouchScreenKeyboard.Open(string.Empty, TouchScreenKeyboardType.Search); 2. EventSystem.current.SetSelectedGameObject(chatInput.gameObject); •
Unity領域タップ or OKボタン押下でキーボードが閉じる ◦ →チャットだと開きっぱなしにしたい • 色々なタイミングで再表示/再フォーカス ◦ チャット送信をした時 ◦ Unityの送信ボタンを押した瞬間 ◦ ボタンを押しかけて押さなかった時
できなかった事 • キーボードの再表示 ◦ Androidは微妙にチラつく(ちょっと妥協している) • Androidで通知がくるとキーボードのheightに含まれる ◦ ネイティブ部分の処理を見直せば改善しそう ~8:30
解決方法わかる人いたら教えてくださいmm
• キーボードの高さ周りの処理は少し複雑 ◦ Android対応と解像度、SafeAreaを考慮しよう • TouchScreenKeyboard.hideInputはInputFieldで上書きされる • ネイティブのボタン:status監視で疑似的にハンドリング • キーボードの常時表示:再フォーカスを繰り返して実現
• (毎回ビルドして確認するのがめちゃくちゃ大変だった) ◦ →なので・・・ まとめ ~9:00
公開しました UnityMobileKeyboardSample (Unlicense) https://github.com /nkjzm/UnityMobileKeyboardSample ~9:30
最後に
Roppongi.unity開催します ~10:00 Unityに関するLTイベント • 2/24(水) 20:00〜 • YouTube Live &
cluster • 協賛 ◦ クラスター株式会社 ◦ 株式会社ハシラス • #roppongiunity
フォロー & チャンネル登録 お願いします!! ありがとうございました!! @nkjzm VRエンジニアなかじ
None