VCIのUIを考えてみる（小さい物を操作する）

# はじめに
こちらの記事は[VCI Advent Calendar 2022](https://qiita.com/advent-calendar/2022/vci)の第５日目の記事です。

# UIはユーザーインタフェースです
どのプログラムを作成するときも同じですが、ユーザーインタフェース(UI)は大切です。
どんなにすごいVCIを作っても使い方が難しいと使ってもらえない、使い方を覚えるのが大変なので使わない、ってことは良くあります。
ゲームでも操作性が悪いとストーリーが楽しめないって経験をしたことが有る方も居るかもしれないですね。

UIが使いやすければ、すごくたくさん使ってもらえます。

# VCIのUIいろいろ（byにゃふ屋）
VCIは少し作ったことが有るので、自作VCIのいろいろのUIを説明します。

 - Useだけで動作するタイプ
　一般的なVCIで多い操作です、握ってUseで何かのアクションが有ります。
   - [雪だるま時計](https://seed.online/products/fc4b8fecceb3261bba2fdbdcd11f7f7a58bcc67e34f9137d61eeeab23ef26166)
 - Useするとメニューが出て、メニューのボタンをUseするタイプ
   - [ラジカセ](https://seed.online/products/b5016ec43860fbd49c8e3da50ecd7db1bfccd14f8bbc33407b73825f8ee97115)
   - [コメビュ](https://seed.online/products/f4ae536dbc8c9b28bdf9e649e266088dd755042add6cf17eb8364615ac835c3e)
 -  触っただけで反応するボタンタイプ
    - [さんたく](https://seed.online/user/items/3c01216c94884cea2721cda6fa0b6164fbc616ef0d48178ad53a22a1f970c0e6/edit)

全アイテムTSOの「[にゃふ屋](https://seed.online/users/106600)」と、「[にゃふ](https://seed.online/users/100667)」で公開していますので使ってみてください。
![2022120416084406.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/331b9339-dcb9-9257-e159-3448e2c89f97.jpeg)

# 紹介したアイテムはボタンが大きい
紹介したVCIは。Vキャス内でアバターの手を当てて操作するため、ある程度大きなボタンを想定して作っています。
大きくすることで誤操作は無くなり操作しやすくしているわけです。

# リバーシで遊びたいからUI考える
突然リバーシが遊びたくなりました。
すでにTSOにいくつかリバーシが公開されていましたので使おうと思ったのですが、折角なので自作しました。
問題になるのはUIです。

リアルなリバーシは一コマが数センチ程度の大きさですが、VRの場合は操作できるように大きな駒が必要になります。
![2022120416103212.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/8b54e5ed-1af0-0eb4-a621-fbb1329f92cd.jpeg)

大きな盤面は対戦中に全体を見るのが大変、駒を置くとき盤に入る必要がある、打つとき全体が見えないので打ち間違える、などなど発生しそうで対戦に集中できないと考えました。

「操作しにくいから負けたんだ」😱 byにゃふ

# 小さい盤面でも操作できるUIを考えましょう
盤を小さくすると駒も小さくなります。
手のコライダーを当てて操作するのはもう無理ゲーです。

触れないなら、細いものでつつけば良いじゃない？

ということで、黒と白の棒を作って打ちたい位置を指してペンをUseで駒を打てるUIにしました。
これで、盤を小さくしても打ち間違いが少ないUIが完成です。
![2022120416134568.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/1aa891da-b64c-bb3a-e4b4-3eb3352373de.jpeg)
Luaのコードは書きませんが、手でUseで動かすUIを作成できる方は割と簡単にできると思います。

# ペンで操作にしたら分かった問題点
ペンが行方不明になりました。
ペンが無いと打てません。

ということで、盤をUseするとペンが盤の上に戻るようにしました。
作ってみないとわからないですが、VCIのアイテムは結構どこかにおでかけするので、対策は入れておくようにしたいですね。

# 所有権難しいよ所有権(;_;)
盤、駒、白黒ペンのアイテムが有るわけですから、所有権をうまく処理しないと打てなくなります。
対戦中にいちいち所有権を考えながら打つなんて、負けた人の言い訳にされそうです。

今回はLua側で所有権周りの処理を、しっかり作りました。
対戦する方が所有権等を意識しなくても打てるレベルにはなったと思います。

<font color='red'>ペンを持てば誰でも打てる、途中で白黒ペンを持つ人が入れ替わっても打てるという普通の操作ができるようになっています。</font>

詳細な説明をするとアドカレ全部使っても説明できない気がするので、また機会がありましたら説明したいと思います。

# リバーシはTSOで公開中
今回のUIを搭載したVCIリバーシはTSOで公開しています。もちろん0vccです。
にゃふ屋製VCIリバーシ、ダウンロードはこちらから⇒[リバーシ](https://seed.online/products/55162c9c700b78e85acb4fb1d8c5e40d923adb3b90699236226a686aff945ddd)

夜のお座敷で遊んでいただいたところ、操作性は問題なさそうでした。
![2022120223492197.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/1b7d3e13-5d53-fc54-f77e-c5261b6db54a.jpeg)

お座敷の方たちは強い方も多いので、夜のお座敷に対戦に行ってみてください。

# 今後の予定
リバーシに追加機能を検討しています

- 棋譜の作成
- 初手からの手順再現機能などの検討モード追加
- 手数を戻す機能（待った）
- PC対戦機能（簡単なおまけみたいなもの）

さらに、今回作っていくつか課題が解決したので、連珠（五並べ）を作り始めました。
こちらはまた課題がいろいろありますが、なんとかなりそうなので公開をお楽しみに。
![2022112421450376.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545584/c416c6fa-ade7-8803-09fb-2bf103f8c082.jpeg)

# 最後に
ボードゲームみんな作って一緒に遊びましょう。
他のボードゲームも遊びたいです。

それでは、まったね～。:blush: