2021-02-02 更新事項 メモリの軽減と簡易低画質モード実装

やっとメモリ関係の更新に入りました!

  • 通常モードでも約25%、メモリを軽減することができました。メモリ使用率がかなり下がりました。例えば駅前広場で2.1GBメモリが使用されていた場合、500MBくらいへって、1.5GB程度になります。
  • 低画質モードは、環境設定から「低画質モード」にチェックをいれて、ブラウザを閉じて再読み込みすると適用されます。この場合画質が荒くなりますが、メモリの使用率は更にさがり、昨日までの状態にくらべ、約45%のメモリ軽減になります。例えば昨日まで2.0GBだったとしたら、今日は950-1050くらいまでに落ちています。かなりの快挙です!

低画質モードの設定方法は、画面右上の設定画面から環境設定をひらいて、低画質モードにチェックをいれ設定を保存、そのあとブラウザを一度閉じて、再度読み込み直してみてください。

f:id:gridrooms:20210202175144p:plain

f:id:gridrooms:20210202175213p:plain

 

f:id:gridrooms:20210202171554p:plain

↑が元の状態

↓が今回の更新で、低画質モードを選んだ状態

f:id:gridrooms:20210202172302p:plain

f:id:gridrooms:20210202171558p:plain

軽量化についてはまだ継続中です、これ以上メモリを下げることができるかどうかは定かではありませんが、可能性を調べます。

 

以下の画像が低画質モードとの比較です。

f:id:gridrooms:20210202174608p:plain

アップロードする画像のサイズについて(随時追記予定)

f:id:gridrooms:20210130171110p:plainPhoto by Andrea Piacquadio from Pexels

グリッドルームズオンラインにアップロードする画像についてのルールを書きます。

前提として:
解像度(画像の大きさ)は小さい方がいいです。
ファイル容量も小さい方がいいです。
美しさも正義だけど・・・
小さいは正義です!

最初に、3行でまとめると

  1. 通常のアイテムや家具、パーツの大きさは320px x 320pxを基準にする。
  2. 大きさは4の倍数にする(64px, 128px, 320pxなど)
  3. イコン画像は128pxを基準とする

となります。320pxというのは基準ですから、もちろんものによっては大きい画像でも良いでしょう。以下に詳しい説明とルールを書きます。

  • ファイル形式はPNGのみOK(透過PNGの場合は出力に24bitを選びましょう。)
  • ファイルの容量は最大で250KBまで。
    • ファイル容量と画像のサイズは別物ですが、容量も小さければ小さいほどダウンロードする負荷が下がりますのでゲームが軽くなります。
    • しかし、小さくすればするほどディテールが下がりますので、ぼやけの原因になります。作りながらバランスを探すのが良いです。
    • ファイルの圧縮は大事です。圧縮すると画質を買えずにファイル容量が下がります。
    • 圧縮におすすめのアプリは、フォトショップであれば「Web用に書き出し」オプションを使うことですが、フォトショップがない方は、以下の記事の工程4を見てください。

 

  • 画像のサイズについて(解像度のこと、320pxとか)

    • ファイル容量とは別です、画像の大きさのことを言います。
    • 画面上で見える大きさにもよりますが、ズームインしたときのボヤケとの戦いでもありますし、ものによってケースバイケースにサイズを決める必要があります。
    • アバターアイテムや家具などの1キャラ分以下のサイズなら、一つの基準として320px * 320xを目安にすると良いでしょう。
    • 例えば、キャラのてに持たせる野球のボールを作る場合、ズームインしても大きなサイズにはなりませんし、画面で占める割合はとても小さいです。なのでこの場合は、ボヤケやディテールとの関係もありますが、64pxとか128pxでも十分でしょう。
    • 4の倍数のピクセル数にする。4の倍数のサイズにしておくと、低画質モードが実装される際に、画像が歪んだり変化することを防げます。(4の倍数が良いのです!)例えば、4px, 8px, 16px, 24px, 32px, 64px, 128px, 256px, 320px, 512px, 1024pxなどです。4の倍数に画像のサイズをしておくと、後々歪みが出ません。
    • 基準値を320pxとしておすすめしていますが、目や髪の毛など、ズームインしてよく見たいアイテムのとき、ズームインしたときにボヤケてほしくない、などのときは512pxにしたり、800pxや1024pxなど、拡大して調節します。大きくするとその分負荷が上がり、ゲームが落ちやすくなったり、重くなったりするのでご注意ください。個人的には目や髪の毛は、ディテール次第ですが、1024pxでも良いかなとは思います。重要だしズームインしたいし・・・。
    • 逆に、鼻、口、眉毛、などの小さなものでディテールのもとから少ないものなどは64pxや128pxなど、へたすると鼻なんかだと32pxなんかでも十分かもしれません。その分負荷が減りますのでゲームが軽くなります。^^
    • 眉毛など、ながぼそいものを作るときは、1辺が512pxでも、もう1辺が256pxなどであれば、実際に正方形にして考えると512px x 512pxの半分ということになるので、実際にはメモリは半分しか取りません。なので、1辺が長いときは、1辺を短くすることで、ディテールを保ちながら大きさを小さくできます。
    • 例としては、眉毛なら800x240くらいで、十分なディテールを出せると思います。目なら1024x512くらいでしょうか。
    • もちろん、これらはケースバイケースですし、どのような形の目や眉毛を作るかにもよりますので、色々試してみてください。
    • アイテムをアップロードするときに使うアイコン画像は、持ち物やショップに並べるときの参考画像ですので、小さくて大丈夫です。基準値を128px x 128pxにすることをおすすめします。
  • 画像の解像度とメモリの関係について
    • 仮に画像の解像度が2000px * 2000pxだったとしましょう、そうすると1pxごとのメモリ使用は、赤、青、緑、透過値と4種類のデータを使わないといけないので4バイトになります。2000x2000個のピクセルがあるので、画像1枚につき、4,000,000 ピクセル * 4バイトとなり、1枚で16MBのメモリを使用することになります。
    • もし、これが服のパーツで、一人10枚身につけていたら、一人部屋に入るたびに160MBものメモリーが増えることになります。10人はいったらそれだけで1.6GBですね^w^;
    • なので、画像はできるだけ小さくするようにしましょう、もちろんディテールとの相談の上で、ですよ!
  • その他思いついたら追記していきます。

 

それでは皆さん、上記のことに注意をしながらも、あくまで目安程度にかんがえてください。

そこまでギチギチに縛られる必要もないので、適度に快適で楽しいグリッドライフを楽しみましょう!\(^o^)/

2021-01-22 更新事項

主にバグ修正の更新です

治ったバグ

  1. 自室がカフェのときに動けなくなるバグ
  2. キャラクターのマップ内の移動のバグ
  3. 再接続時にキャラが増殖するバグ
  4. 再接続時にキャラが元いた区画で復活
  5. あるき続けるバグ

区画の一覧をクリックすると該当する区画へテレポートするようにしました。

f:id:gridrooms:20210122202249p:plain

 

 

 

以上!

 

画像アップロード時の作業手順まとめ

(2021-01-30 追記)
画像の一辺の最大値を1024pxに制限したいとおもいます。
今後の基準としては、通常のアバターアイテムに使うサイズの画像は、画面上で占める大きさ次第ですが、服とかだと320x320程度髪の毛やディテールがほしいところは512px大きくても最大で1024pxまでという制限をつけたいと思います。
メモリの最適化の一貫としてご了承ください。m(_ _)m

アイテム制作や家具製作をするときは、まず一度320pxで出力してみて、ちょっとぼやけるなー、もう少しディテールほしいなぁとなったら512、700、1024のように段階的にあげて調節するようにしてください。詳細については以下の記事を参照ください。

blog.gridrooms.online

よろしくおねがいします。

 

 

おはようございます!

家具や服をアップロードするときのフローをメモしておきます。

f:id:gridrooms:20201225102146p:plain

 

工程1. 好きなアプリで絵を作る

使える絵を作るアプリは3種類あります。

  1. 3Dで作成して角度をつけて撮影する
  2. お絵かき系アプリで絵を描く
  3. ベクターグラフィックできれいな曲線や形を作る

3Dで制作する場合はWindows10についてくるペイント3DやBlenderなどがあります。

個人的にはペイント3Dが簡単でおもしろいです。

使い方は以下のリンクを参照下さい。

blog.gridrooms.online

お絵かき系アプリには、例としてクリスタやメディバンペイントなどがあります。

どちらも無料アプリで非常に高性能で自由な絵を描くことができます。

medibangpaint.com

ベクター系グラフィックとは、アドビのイラストレーターに代表される、計算によって導き出される完璧な曲線や、シェイプを元としたハッキリとした絵を作るソフトです。

代表的なソフトとしてはイラストレーター(月額4000円)やコーレルドロー(一括5万くらい)、そして無料のGravit Designerなどがあります。

Gravit Designerでも十分な機能があって、アメーバピグのような線のハッキリとした絵を作ることができるので、一度試してみてはいかがでしょうか?

officehojo.com

 

工程2. できた絵を、背景を透明にしてPNGファイルで出力する

  • この手順は、使っているアプリ次第なので、それぞれのアプリの使い方を調べて下さい。

 

工程3. フォトショップGIMPなどの画像編集ソフトで処理をする。

  1. トリミング(透明な部分で必要ない部分を消す)画像>内容で切り抜きなど
  2. フリンジ削除処理(以下の記事を参照ください)
  3. リサイズ(320pxや512pxなどのサイズに変更)
  4. 出力(PNGでエクスポート、GIMP透明ピクセルの色の値を保存、無圧縮で)
  5. フォトショップの場合はこのまま「書き出し>Web用」でサイズとファイルサイズを確認しながら出力すればそれで終わり!
  6. フォトショップのフリンジ処理は、レイヤー>マッティング>フリンジ削除です)

 

工程4. PNG画像圧縮ソフトでLossless(ロスレス)圧縮を行う(この工程はスキップOK)

  • ロスレス圧縮を行うことで、画像の画質を失うことなくファイル容量を小さくすることができます。
  • グリッドルームにアップロードできるファイルサイズ容量は250kbが限界なのでそれ以下になるように絵の大きさを320px や 512pxなどに小さくしましょう。
  • その上で圧縮をおこなってみて250以上なら、また画像のサイズを変更する必要があります。
  • ウィンドウズの場合はこちらのソフト「pinga」をお使い下さい。
  • マックの場合はこちらの「ImageOptim」をお使いください。

 

 工程5. グリッドルームズオンラインに画像をアップロードする

  • アップロードの注意事項
    • 画像ファイルの名前は長いものにしない(chair04_320.pngなどわかりやすく短いものにする。)余り長いとアップロードできないことがあります。
    • 形式はpngで、透過タイプ(png8ではなくpng24)
    • サイズは250kbが限界だが、小さければ小さいほど負荷は低い
    • 基準のサイズは320pxや512pxなど、でもそこはある程度自由
  • 服・アイテムのアップロード、及び顔パーツのアップロードはこちら
  • 家具のアップロードはこちら

以上です。少々手間に思えますが、この手順をきちんと踏むことで、きれいな絵をグリッドに持ってくることができます。

あとは慣れです!慣れ!

 

 

わはは!

UnityのInputfieldのエラーメモ

Unityを使っていると時々調べてもわからないエラーに遭遇します。

今回もそれで苦労して、1、2時間無駄にしたのでメモ代わりに書いておきます。

 

InputFieldを使っていたり他のオブジェクトを選択しているときに、同じ物を、例えばinteractable = falseを使いたいとします。

でも、エラーが出てしまいます。

"Attempting to select while already selectring an object.”

意味は、すでに他のアイテムを選択してるのに選択しようとしてるよ!

って感じみたいですが、何だこれ?って思って探してもなかなか見つかりませんでしたが、原因がなんとなくわかりました。

これは、同じフレーム内で複数のオブジェクトを選択しようとしていると起こるエラー?っぽいです。

なので、次のフレームまで待つか、待機時間を0.1秒でも入れてあげれば解決します。

 

どこにも書いてなくて、英語の掲示板のコメントの1個にその可能性が指摘してあってやってみたら解決したので、ここにメモとして残して起きます。w

 

更新事項 2020-12-21

  • ゲームテーブルの付属の椅子などをクリックした際に、テーブルを選択して移動できるように変更
  • 部屋に配置後の家具のサイズ微調節の挙動を修正
  • 床アイテムの実装
  • 家具アイテム情報ウィンドウで直接家具の表示レイヤーを変更可能に(壁などに有効)

年末まであと10日頑張るぞ!