0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

pygameでマルチプレイ3

Last updated at Posted at 2025-02-05

詐病.gif
見にくい画面ですみません
左下にSteamでの名前が描写されています。
前回はnetwork同期のシステムを作成しました。
次は、UIシステムです。

UI

クライアント環境で基本的に動作するため作りは多少複雑にしても、
面倒なことは起きないでしょう。(ネットワーク関連が存在しないので)

今回はウィンドウのサイズに合わせて、UIが縮小したり位置を変えたりします。
これは今後に作るCameraのシステムにも共通する部分ですので、大事なところです。

Canvas

私がおすすめする仕組みとしてはキャンバススケーラーです。
最初にキャンバスのサイズを決定して、そこからウィンドウのサイズにスケーリングするものです。

例えばCanvas(1000, 1000)と作ったとします。
次にWindowが(2000, 2000)だとします、この場合UIの要素は2倍スケーリングすることになります。
window/canvasって感じです。
CanvasクラスにCanvasToScreenScaleFactorとScreenToCanvasScaleFactorというメソッドを作って、
すべてのスケーリング処理を統一します。
これだけであとはUIを作ることができます。

UI基底クラス

まずはUIの基底クラスを作成します。
多く使われるだろうTextとImageの基底クラスを作成します。

UIElementクラス

これは上記の二つの基底クラスです。
基本的にはRectTransformというクラスを持っています。

RectTransform

UnityにあるRectTransformというよりはただのTransformに近い動作をします。
親のglobalPosition + 自身のlocalPosition = 自身のglobalPosition
となっています。scaleとrotationは試していないので不完全です。
なので紹介しませんが、考え方としては、scaleは親*子供にしていて、rotationは自身のlocalPositionと親のglobalPositionの位置の方向ベクトルを作成し、回転行列で回転させた場合どれほど移動するかoffsetを計算するして、global_positionに足し合わせる感じです。

UIObjectクラス

これはUIElementとUIObject, UIComponentをリストで所持するクラスです。
基本的にButtonUIやListUIなどで使用されるもので以後のUIはすべてこれを継承します。
UIComponentは基本的にアニメーションとして使用します。(もちろんほかの機能を追加することもできます)
私が作ったのは二つだけでFadeInOutAnimationクラスとMoveAnimationです
これらはUIComponentクラスを継承したUIAnimationクラスを継承します。

システム的には前回に紹介した(かなりプログラムが現在は変わってますが)コルーチンクラスをUIAnimationが所持しており、それを使ってMoveやFadeを行います。

UIObjectは自分のクラスをリストで持っています、これは親子関係を表しており、
updateではTransformに自身のglobalTransformを渡す仕組みが描かれています。

おわり

UIのシステムはちょっと大変でした(三日かかりました)
アルバイト中にはプログラムがかけないのですごく焦ってました。
これはよくない影響です。

前にスリザリオを作るって言ってましたが、
まだまだ道は険しそうです
GameObjectも今後は親と子供のシステムが採用されると思います。
これでまたNetworkの同期が大変になります。

私が恐れているのは送信データが増えて、ネットワークが遅くなることです
現在は作りやすさを優先してますが、今後はネットワークの最適化も必要になると考えると、
先が思いやられます。

Cameraシステムはこれと全く同じ動作をするようにしようかと思っています
先にCameraの範囲を決定して、スケーラーを作成し、何かしらの描写コンポーネントでは、
最後にこのスケーラーの縮小をするようにすれば、様々なウィンドウサイズにも対応できると思います。

windowサイズは大体FullHDかWQHD, 4Kしかないと思いますが、念のためです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?