原カバンは鞄のお店ではありません。

Unityを使ったゲーム制作のあれこれを綴っていきます。

【ゲーム制作Tips】トーンを考慮してゲーム画面を配色する

ティアキンやっている人にしか分からない

Lキーを押してマップを開いてる人類はいないと思う皆さんこんにちは。ついでにカメラもamiiboも使うことはないのでLキーメニューから外してもらうと助かります。ウルトラハンド使おうとしてカメラで撮影しちゃう事が多々あります。

 

W.T.

前回の記事でもお伝えしましたが一人称視点の3D脱出ゲーム「W.T.」のストアページを開設しています。

store.steampowered.com

四則演算や数式を解くというより、数学的なセンスを使って謎を解くことをコンセプトにしたゲームなので、適当にガチャガチャしても(多少時間が掛かるけど)解けるようになっており、誰でも楽しんで頂けると思います。
アーリーアクセス版を今月中にリリース予定ですので、ウィッシュリストへの登録をお願いします

 

トーン

今年初回の記事で色の三属性(色相、明度、彩度)について取り上げて、その中では同じ色でも明度、彩度を変えることで印象が大きく変わる、という事を紹介させてもらいました。

www.karvan1230.com

色の三属性を考慮することはゲーム画面をデザインする上で重要な要素ですが、デザイン畑ではない人間からすると自分のイメージに合わせて明度、彩度をどのように変えれば良いのか分かりません。
そういったときに指標として使えるのが「トーン(色調)」という概念です。

トーンとは「明度」と「彩度」を融合した概念で、これを用いることで色を「色相」と「トーン」の二属性で表し、体系化されたカラーシステムを作ることができます。
代表的な物にはPCCSというカラーシステムがあり、「明度」と「彩度」を軸にした二次元平面をいくつかの領域に分割し、各領域毎に色相環を配置して色票図を作ることで初心者にもわかりやすい配色体系となっています。

この図は上が高明度、下が低明度、右が高彩度、左が低彩度となっていて幾つかの領域に分割されています。各領域にはそれぞれ色調(=トーン)を表す名前が割り当てられていて、その中の色相環は12分割されて色を表示しています

このPCCSを使った配色法は良く知られており、多くの種類が存在しますが、今回はその中でも代表的な手法をつかってゲーム画面の配色を考えてみたいと思います。

 

PCCSを使った配色

ゲームの中でも最も「配色」の効力が発揮されるのはタイトル画面、メニュー画面だと思います。
2Dゲーム、3Dゲームに関わらず画面の大部分をImageやUIで占め、且つ大きな変化が起こらないので、画面の配色の印象がそのままダイレクトに伝わります。
なので、今回は以下のような仮のタイトル画面を使って様々な配色法で色を当てはめていきたいと思います。
ちなみに下の画面はメインカラー、サブカラー、アクセントカラーの三色で構成されています。

 

■ドミナント・カラー配色

12分割された色相環の中から一つ色を選び、同じ色相を異なるトーンから選ぶ手法です。
例えば「色相環の6番目の色」と決めたら、それぞれのトーン中から「色相環の6番目の色」をピックアップして配色します。

同じ色相でまとめて、明度、彩度で変化を付ける為、色が持つ雰囲気を表現しやすい手法です。

 

■ドミナント・トーン配色

トーンを一つ選び、その中の色相環から色を選ぶ手法です。同じトーンでまとめて、カラー(色相)で変化を付けます。

トーンの持つイメージを強く印象付ける配色です。色相が異なりますが明度、彩度が同じであるため、派手になりすぎず個性も出せる手法です。

 

■トーナル配色

ドミナント・トーン配色から派生した手法で、ダルトーンとその周辺のトーン(ソフト・ライトグレイッシュ・グレイッシュ)の中からトーンを選び、色相は自由に選択します。

中明度、低彩度の中間色同士で構成するため、渋く落ち着いたイメージを与えやすい配色です。

 

■カマイユ配色

ドミナント・カラー配色とドミナント・トーン配色の合わせ技のような配色法で、トーンも色相も隣接したものを選びます。
PCCSで色相差が1以内で、トーンも同じか隣のトーンを選択します。

ほぼ同じ色相、色調で統一され、優しい味わいのある配色になります。

 

最後に

配色技法は調べてみると沢山ありますが、トーンを使った配色は私のような初心者でも手の出しやすい配色技法だと思います。
配色技法をうまく活用できれば、意図した印象を与えることができ、ゲームの絵作りに悩む量を減らす事ができます。

 

まぁ、配色に関しては技法を勉強せずとも配色パターン集などが数多く出版されているので、そちらを参考にしても良いですが。

【半額セール対象アセット】シャープな絵作りポストプロセシングBeautify3

スケジュール

ゲーム開発のスケジュールを改めて確認したら以外に余裕がない事が分かった皆さんこんにちは。7月末に東京ゲームダンジョン3に出展するのでそれより前にはアーリーアクセス版をリリースしないといけないし、その為にはイベントの追加やらバグの改修やら最適化やらの作業を完了しないといけない、それに加えて東京ゲームダンジョン3での配布物の発注や掲示物のデザインをしないといけないし、テーブルクロスや展示用のモニターや電源タップ等の購入も必要で、それをどうやって東京まで持っていくか手筈を整えて・・・とやる事沢山なんですが、その割にはハイラル平原でゾナウギアをアレコレ引っ付けて遊んでたりします。最近は料理鍋をサスペンション代わりに利用することにハマっています。

 

Steamストアページ開設

いろいろ予定は詰まっていますが、取り合えず自作ゲーム「W.T.」のストアページをSteamで開設することができました。

store.steampowered.com

少し前にこのブログで「ストアページの作成法」みたいな記事を偉そうに書きましたが、実際の開設がここまで遅れたのは非常に恥ずかしい限りす。

これというも偏にSteamからのリジェクトがしつこかったに尽きるのですが。

「"この製品について"セクションで、顧客が購入に含まれると期待できる機能やコンテンツが十分に説明されていない。」と何度も同じ指摘内容でリジェクトされ、そのたびに文面を書き直して提出しました。
が、それでもリジェクトされ、あまりにしつこいので「このゲームは一人称視点で操作するアドベンチャーゲームです。プレイヤーをキーで操作してパズルを解いていくゲームです。それ以上の機能はありません。他の同じようなゲームのストアページと比べて書いている内容に大差はないと思いますが、一体何が不足しているのか具体的に説明してください」と逆切れ気味に返信をしたらアッサリと承認されました。何という事でしょう。

とりあえず上のリンクからウィッシュリストに登録してもらえると作者のやる気につながるのでよろしくお願いいたします

 

スプリングセール

現在、Unityのアセットストアにてスプリングセールが実施中です。(期間 : 2023年6月2日23時59分まで)

assetstore.unity.com人気のアセットが半額で購入できる上に、いくつかのアセットでは先着順で最大70%オフにもなるフラッシュディールも開催されています。

高額アセットも半額なっているものがあるので、この機会に幾つか購入したのですが、その中で一番今後も利用する機会があるであろうアセットが今回紹介する「Beautify3」だと思います。

 

Beautify3

3と銘打ってるように、以前から売られているアセット「Beautify」の最新バージョンとなります。

このアセットは色々なブログ等で「簡単にゲームの見栄えを綺麗にする」と紹介される事が多いアセットで、カメラにコンポーネントをアタッチするだけで手軽に綺麗な画面を作ることが来ます。

具体的には下の図を見てもらうと分かりますが、(画面右がBeautifyON、左がOFF)

「見栄えを綺麗にする」=「より鮮明でクリアな画をつくる」という意味で捉えてもらうと良いかもしれません。オブジェクトの境界部分やテクスチャの陰影等の部分が強調されて細部が見えやすくなり画面全体の鮮明度が上がったように見えると思います。

この処理は主に「Sharpen」という項目による効果ですが、このほかにも「Bloom」や「Depth of Field」といった一般的なポストプロセスの項目もあり、結構拡張性があります。

Bloomを追加

 

Depth of Fieldを追加

 

アンチエイリアス

ポストプロセスのエフェクトアセットは他にもたくさんあるのですが、この「Beautify」の最大の特徴はアンチエイリアス(Anti-aliasing)と相性が非常に良いという事でしょう。
アンチエイリアスとはオブジェクトの境界線などで表示されるギザギザ(ジャギー)を目立たなくする処理のことで、画面の見栄えを良くするための一般的な手法で、Unity標準のPostProcessingStack2(PPSV)にも搭載されています。(Beautify自体には搭載されていません)

アンチエイリアスではジャギーの原因となる境界付近の色の変化をその周囲をぼかす(=滲ませる)事で軽減し、ギザギザの表示を減らしています。
だが反面、オブジェクトの細部もぼかされてしまうため、のべつ幕無しにアンチエイリアスを掛けてしまうと、逆に見栄えが悪くなる結果となって仕舞います。
UnityではPPSVのアンチエイリアス対象のレイヤーに「Default」や「Everything」を指定すると警告を表示したりします。

しかしこの「Beautify」を使用するとアンチエイリアスによるボケた箇所も「Sharpen」の効果で補完してくれるので、ジャギーが軽減された状態で鮮明化した画を作ることができます。

 

また、この「Sharpen」の効果を強くする(=Clampの値を上げる)とオブジェクトのエッジがより強調されるため、一見アウトラインが描かれたようになります。

アウトラインを使いたい場合は、個別にアウトラインエフェクトを使うよりはこちらの方が見栄えが良いと思います。
(BeautifyにもOutlineの項目があるが、あまり使い勝手がよくない)

 

その他の効果について

「Beautify」では今回紹介した「Sharpen」や「Bloom」「Depth of Field」以外にも使えそうなエフェクトがあるのですが、それは以下の記事で詳しく書かれているのでそちらを参考にして下さい。

raspberly.hateblo.jp

【無料アセット紹介】モデルサイズに合わせてテクスチャを自動で敷き詰めてくれる MasterCube

クラフト

ティアキンがRPGではなくクラフトゲームと化してる皆さんこんにちは。もはやゼルダ姫を探すとかどうでも良くなってきました。ギアを集めてアレコレ作るのが楽しいです。あと、キースの目玉を矢につけると誘導弾になるのでキース狩りばかりやってる。

 

IndieLiveExpo 2023

先週末(5/20)にYoutubeにてIndieLiveExpo 2023が放送され、私の自作ゲーム「W.T.」も15秒という短い時間ですが紹介して頂けました。
300件近いタイトルの中でいつ紹介されるのか分からなかったので、放送開始からずっとPCに張り付いていたのですが、中盤頃の集中力が途切れたタイミングで登場したので危うく見逃すところでした。

www.youtube.com

放送後にこれといったリアクションは無いのですが、何より無事に紹介されて良かったと思います。心残りは放送タイミングでSteamのストアページを開けなかった、という事ですが、これについは後日取り上げたいと思います。

 

MasterCube

結構古めのアセットでストアページも地味なんですが、以外に有用なアセットだと思います。(しかも無料)

assetstore.unity.com

Cube形状のモデルに対しテクスチャのUVを云々する事に特化したアセットみたいです。機能は大きく3つあり

  1. モデルのサイズに合わせてテクスチャを自動で敷き詰める
  2. モデルのUVを各面毎に調整する
  3. メッシュを結合して単一のメッシュにする

となっています。
このうち3に関してはモデルの形状はCubeに限らず色んな形状のメッシュでも使用することができます。

 

テクスチャの自動調整

Unityではモデルの各方向(X/Y/Z)に対してサイズを変更することができますが、テクスチャに関してはUV調整されないのでモデルの形状に引っ張られて、テクスチャを引き延ばした形で設定されます。
この為、同じモデルでもX/Y/Z方向のサイズが異なったメッシュに対して、テクスチャの見た目を合わせようとすると個別にUVを調整したMaterialを用意する必要がありました。
一方このアセットを使用すると、引き伸ばしたメッシュを元にUVを自動で調整してくれるのでMaterialを増やす必要はありません。

使い方は簡単で、Cube上のモデルにMasterCubeのコンポーネントを追加し、Reflesh Base UVを押すだけです。
後はSceneビュー内でモデルのサイズを変更すると自動的に調整されます。
逆にGameビューを表示してInspectorからモデルのTransformの値を変更した場合は反映されないので注意してください。

 

各面毎にUV調整

上の自動調整はモデルの各面全てに適用されますが、各面毎にUVの調整を行うこともできます。

MasterCubeコンポーネントには「Face Transform」という項目があります。

そこではFront~Bottomまで6面のUVとOffset、Rotationの設定が行えます。よって、この項目を使用して各面のUVを調整出来ます。

分かり切った事かもしれませんが、このような調整が行えるのはモデルがCube形状であることが前提です。斜面や曲面があるようなモデルは上手く適用されません。

 

メッシュの結合

最適化の手段等で使われる事のが多いメッシュ結合。それ専用の有料アセットもありますが、このアセットでも実現することができます。
使い方は簡単です。

  1. 空のGameObjectを作成
  2. 結合したオブジェクトを空のオブジェクト以下に配置
  3. Hierarchy上で空のオブジェクトを右クリック > Combine Meshsを選択

例えば、以下のような3つのCubeを結合する場合、空のオブジェクト(CombineRock)の配下にCubeを配置します。

空オブジェクト(CombineRock)をHierarchyで選択して右クリック→メニューから[Combine Meshs]を選択します。

すると空オブジェクト(CombineRock)配下のメッシュが結合されて一つのオブジェクトになります。

結合前のオブジェクトのMaterialがバラバラの場合でも、Materials配列の中に設定されるので問題ありません。ただし結合前のメッシュ情報はどこにも残らないずCtl+ZでのUndoも効かないので注意が必要です。

 

まとめ

UVの調整機能に関しては適用されるモデルがCube形状である事が条件なので使う範囲は狭いかもしれません。
また、メッシュ結合に関してはテクスチャを一枚に統合したりする機能はないので、あくまで簡易的な最適化手段として使う方が良いと思います。使いどころが限られるアセットですが、まぁ、何より無料のアセットなので試しに導入しても悪くないかな、思います。

 

【アセット紹介】天気、環境系の一通りのパーティクルが揃う「Environment/Weather/Nature VFX pack」

ティアキン

土日を潰してようやく始まりの空島から抜け出せた皆さんこんにちは。チュートリアルステージにしてはボリュームが大きくないですか?雪山の祠から最初の場所に戻れずに積みそうになりました。

 

東京ゲームダンジョン3

7月30日(日)に東京の都立産業貿易センター浜松町館にてインディーゲームの展示会「東京ゲームダンジョン3」が行われます。大小様々なインディーサークル、クリエイターが出展するこの展示会に、我が「W.T.」も思い切って出展する事にしました

tokyogamedungeon.com

初めてのイベント参加なので今から準備が間に合うか不安なのですが、約200サークルが出展予定のかなり規模の大きいイベントなので埋没しないように頑張りたいと思います。
ポスターや配布物のデザインなどはこれから考えます。展示会でお見せする試遊版はおそらくゲーム中盤のステージを切り取ったものになると思います。

 

Environment/Weather/Nature VFX pack

Unityを触りだして幾年か経つのですが、その間、色んなエフェクトで使用するパーティクルパックを購入していて、結局どれがどんなパーティクルだったのか覚えておらず、逐一デモシーンを起動して確認する状態となっています。

特に雨や雪、風などの天気、環境系のパーティクルは、大きなパーティクルパックの一部に含まれているため、例えば雨のパーティクルを探そうとすると一苦労だったりします。
その為、最近、天気、環境系の一通りのパーティクルが揃うアセットを購入しました。

 

このアセットは全39種類に及ぶ天気、自然、環境系のパーティクルが纏められているアセットで、これ一つでゲーム内の色んな場面で必要となるパーティクルを揃えられると思います。

■雨

 

■雪

 

■風と葉

 

■竜巻とスピード

 

■砂嵐

 

■射光と周囲光

 

■バブル

 

■蝶

 

■残り火(焚火等の周囲で舞う粉塵)

 

■鳥

 

■落石

 

どれも見栄えが良いので使い勝手は良いと思います。
残念ながらアセットストアでやっているスプリングセールの対象にはなっていませんが、価格に見合う分の価値はあると思います。

【ゲーム制作】Steamでストアページ開設のために必要な画像

休みボケ

久しぶりに会社に出社したら自分のPCのログインパスワードを忘れていて焦った皆さんこんにちは。休日モードになると本業の事は一切頭に残らないタイプなのでGWのような長期休暇明けは非常に危ういです。

 

ストアページ開設(レビュー中)

今年のGW期間中はunity1weekもなかったし特にやりたいゲームもなかったのでガッツリ自作ゲームの開発できるなぁ、と思っていたのですが、Steamのストアページ開設に意外に手間取り、殆どこの開設作業だけでGWを消化してしまいました。(5/9現在はSteamによるレビュー中)

 

Steamではゲームが完成していなくてもストアページだけは開設する事ができるのですが、ふりーむ!や他の投稿サイト比べて3倍ぐらいやることが多いです。
Steam でゲームアプリのストアページを開設するまでのタスクをまとめると以下のようになります。

  1. Steamworksに登録する
  2. 開発者として本人情報や税務情報を登録する
  3. ゲームの登録料として$100を支払う
  4. 本人確認用の情報(免許の写真等)を英語の翻訳文と共にsteamへ送る
  5. ゲームアプリのプロジェクトを作成
  6. ストアページの作成・審査を行う

Steamworksでの登録作業はSteamworksのHPにて各工程毎に詳細な説明がされているので(日本語で)、それを読みながらでも進めることはできますが、私は以下のリンクの記事を参考にして作業を進めました。
こちらページではストアページ開設以降のゲームのリリース作業についても詳細に記述されているので本当に助かると思います。

indiegamesjapan.com

 

上記手順の1~3を完了するとSteamからメールで「本人確認書類(免許証やパスポート等)の画像を送ってほしい」という旨のメールが届きます。
これを素直に受けって免許証の写真だけを送ると、2~3日後に「内容を英訳してください」と返信が届き、再度、免許証の写真に英訳文を添えて送り返す必要があり二度手間です。最初から英訳文を添えて送りましょう
「免許証 翻訳」などのキーワードでgoogleで調べると公的証明書の翻訳サービスのHPが引っ掛かり、結構高額(2000円以上)な料金が取られるので、以下の動画を参考に自力で翻訳した方が良いです。

 

www.youtube.com

本人確認書類を送り、Steamから承認されると晴れてストアページの作成作業に入れます。

 

ストアページ作成に必要な画像

上記の1~5までの作業を完了すると、アプリ管理のページに入れるようになります。ストアページを作成することができます。
ストアページの開設にはゲームの基本情報(作品名、ジャンル等)の入力のほかにストア用の画像の登録作業があります、が、この画像の種類がとにかく多く、かつそれぞれの規定サイズを厳守する必要がある為、これらを用意するだけで1,2日ぐらい掛かります。
以下に各画像について私が用意した画像と共に、steamストアのどこに使われる画像なのかを記載します。

 

■ヘッダーカプセル:460*215(px) 必須

ストアページの「あなたへのおすすめ」セクションで使用される画像。広告用のアートワークなのでゲーム名も含むような画像を使います。

 

■小型カプセル:213*87(px) 必須

検索結果画面のリスト内に表示される画像。小さいので、よりロゴがはっきりと見えるデザインにしています。

 

■メインカプセル:616*353(px) 必須

Steamストアページ上部の注目&おすすめ欄に表示される画像。用途はヘッダーカプセルに似てますがこちらの方がサイズが大きいのでグラフィック中心のアートワークとします。

 

■垂直カプセル:374*448(px) 必須

ストアページの「アップデートとスペシャル」セクションなどで使用されます。今回はメインカプセル画像を切取り加工して作成しました。

 

■ページ背景:1438*810(px) 任意

ストアページの背景で使用される画像なのでページ上のコンテンツと競合しない画像が必要となります。提出は任意ですが、提出しない場合は最後のスクリーンショットが自動で適用されます。今回は画像生成AIにお世話になりました。

 

■ライブラリカプセル:600*900(px) 必須

ライブラリページのコレクションに表示されます。広告用ではないためゲームタイトルの認識優先で画像を作成しました。

 

■ライブラリヒーロー画像:3840*1240(px) 必須

今回作成した中でもっとも最大サイズの画像です。ライブラリ詳細ページの上部に表示される画像です。後で紹介するライブラリロゴとレイヤーを分けて重ねて表示されるに仕組みなっているためロゴ画像が配置される位置を意識する必要があります。あまりに大きすぎるため今回はスカイボックス用画像の自動生成AIにベースを作成してもらい加工しました。

 

■ライブラリロゴ:1280*720(px) 必須

ヒーロー画像に重ねて表示されるため透過画像である必要があります。アップロード後、プレビューツールを使用して、ロゴの位置を選択できます。

 

■クライアントアイコン:32*32(px) 必須

アプリケーション起動のためのショートカットに使用されます。こちらはICOファイルが必要です。

 

■クライアント画像:16*16(px) 任意

ユーザーがアイコンをオンにしている場合に(詳細モードで開いている時) Steam クライアントに表示されます。こちらはTGAファイルが必要です。任意なので提出しない場合はクライアントアイコンから自動生成させます。

 

■コミュニティアイコン:184*184(px) 必須

ライブラリのリストビューやチャットの「お気に入り」に使用されます。こちらはJPGファイルとなっています。

 

以上です。

これに加えてスクリーンショット(最低5枚)と予告動画の提出も求められますが、予告動画は任意なので余裕のあるときに作成しましょう。
各画像はアップロード時に画像サイズから画像種類が自動認定されるため規定サイズは厳守しましょう。1pxでも間違うとスクリーンショット扱いになります。

 

画像の用意に関しては、ゲームを開発する時点で用意しておくと後が楽だと思います。お絵描きが好きな方は別ですが。


あー、疲れた。

【Unity】Unity公式のSplineツールが便利

連休

気分はすっかりゴールデンウイークな浮かれ気分の皆さんこんにちは。今年は久しぶりに行動制限のないG.W.となりそうなので旅行やレジャー、スポーツ観戦など色々と予定を立てている方も多いと思います。私は普段通り外出予定は殆どなく大半はお家で過ごす事になりそうですが、今年は自作ゲーム「W.T.」のSteam登録作業をする予定なのでダラダラとしている時間は無いと思います。

 

Splineツール

一部Unity利用者界隈で話題に上がっていましたが、Unity2022からスプライン曲線を簡単に作成できるツールが利用可能となっています。
スプライン曲線とは複数の制御点を設定して、それら全ての制御点を通る滑らかな曲線を描く手法ですが、これを自力で計算しようとすると結構面倒くさく、これまではアセットを購入して曲線を作成していました。

【アセット紹介】Dreamteck Splines でスプライン曲線に沿った移動をさせる【Unity】 - Raspberlyのブログ

が、Unity2022からはSplineツールを導入することで簡単にスプライン曲線を作成することができるようになりました。

 

導入法

メニューのWindow > Package ManagerからPackage Managerを開いて一覧からSplinesを選択、右下のInstallボタンをクリックします。

インストールが完了するとメニューのGameObjectからSplineが選択できるようになるので、そこから Draw Splines Toolを選択します。

すると、Toolギズモにパス編集が追加され、スプラインのポイントを左クリックで配置できるようになります。

Sceneビュー内の適当な箇所を左クリックしていくと自動的に配置した点を全て通るような曲線が描画されます。

描画されたSplineはHierarchy上に「Spline」という名のGameObjectとして作成されます。

 

編集

作成されたSplineはSceneビューで制御点を移動させる事ができます。

 

また、制御点毎に曲線の種類をベジェ曲線、Catmull-Rom曲線、直線から選ぶことができます。(デフォルトはCatmull-Rom曲線)

 

Splineに沿ってオブジェクトを移動させる

作成したSpline曲線に沿ってオブジェクトを移動させることができます。例えば以下のようなペンギンのキャラクターを動かしたい場合

ペンギンのオブジェクトにSpline Animateコンポーネントを追加します。
Spline AnimateのSplineに作成したSplineオブジェクトを指定して、Durationの項目に移動時間を設定します。

Foward Axisの項目にオブジェクトの正面方向と同じ方向を指定しておきます。
これにより移動中のオブジェクトはスプラインの接戦の向きが必ず正面方向になるように自動で回転しながら移動することができます。

Play On Awakeの項目をチェックしておくとゲームプレイ開始と同時に移動を開始しますが、任意のタイミング開始したい場合はこの項目のチェックを外し、スクリプトから任意のタイミングでSplineAnimateクラスのPlayメソッドをコールします。(事前にUnityEngine.Splinesをusing指定する必要あり)
またSplineAnimateにはPauseメソッドも用意されているので、一時停止→再開も難なく行うことができます。

 

最後に

今回はSceneビュー上でDrawツールを使ってSplineの生成を行いましたが、スクリプトからSplineに制御点を追加することでSplineを生成することもできます。
Splineをスクリプトから制御する手法については以下のサイトが参考になります。

nekojara.city

【WEBサービス】自動でSkybox用の画像を生成してくれるSkybox Lab

育児休暇

会社の同僚が育児休暇と取ると聞き、その同僚に子供が生まれていたことすらも知らなかった皆さんこんにちは。いつの間にか内々でお金が集められて出産祝いも贈られていたそうです。あ~怖い怖い。最初にこの話を聞いた時は遅れてきたエイプリルフールかと思いましたよ。大丈夫です、全然動揺してません。あ~怖い怖い(震え声)

 

INDIE Live Expo 2023

2023年5月20日、21日に配信される「INDIE Live Expo 2023」において、現在、itch.io等で体験版を配布している「W.T.」を紹介して頂ける事になりました。
今回は300本近いゲームを紹介するそうなので、番組のどこで我が「W.T.」が紹介されるのかは不明ですが、このような大きな番組で少しでも取り上げて頂けるというのは大変有難いことだと思います。

indie.live-expo.games

15秒ほどのプロモーション動画を流して頂けると思います。長時間番組なのでウッカリ見逃さないようにしないと。

youtu.be

AI画像生成サービス

midjourneyの登場以降、AIによる画像生成サービスがあちこちで開始されるようになりました。
幾つかは未だ試用段階で精度が高くないものもありますが、その分無料で使用することができるので、小規模インディーゲームの開発者には有難いサービスだと思います。
フォトリアルな背景画からアニメ調のキャラクターイラストの作成まで様々なサービスがありますが、今年に入ってからBlockade LabsにてテキストからSkybox用の画像を生成出来るサービス「Skybox Lab」のページが公開されています。

skybox.blockadelabs.com

このサービスは今のところ無料で使用することができ、アカウント登録などの手続きが必要ありません
その為、上記のリンクに飛ぶといきなり

上のような画像が表示され、そのままダウンロードしてUnityで使用することができます。描いてほしい画像を指定する場合は、画面下のテキストボックスにキーワードを入力するなどして指定します。

また、画風も指定することができ、テキストボックス横のリストをクリックすると

メニューが表示されるので描いてほしい画風をここで指定します。

試しに「Anime Art Style」に変更すると

こんな感じに絵柄が変わり、「Pen & Ink」に変えると

こんな感じの絵を作ってくれます。

 

Untiyで使用する手順

描いてもらった画像をUnity側でSkyboxとして使用するには、まず画像をどこか適当なフォルダにダウンロードして、そのファイルをUnityEditor上にDrag&DropしてUnityのプロジェクトに取り込みます

今回は下のような画像をSkybox Labに描いてもらいました。

 

次にSkyboxを使用する為のMaterialを作成して

シェーダにSkybox/Panoramicを指定し、Spherical(HDR)に先程ダウンロードして取り込んだ画像を指定すると

こんな感じでSkyBoxとして使用することができます。

 

使ってみた感想

SkyBoxは空や雲、海など動きのない遠景を描画する機能ですが、この「Skybox Lab」では近影や本来必要のない人や建物まで描画した形で出力されます。
パノラマ絵としてはそれで十分ですが、ゲーム内で使用する場合はこうした近影の人物や建物は邪魔になると思います。

上の画像だと目の前の木とかベンチがちょっと邪魔・・・

こうした邪魔な物を除こうとするとキーワードを試行錯誤する必要があり、思ったような画像を作成するにはそれなりに時間が掛かりました
まぁ、このサービスは始まったばかりなのでこれからAIの精度が高まれば、思うような画像を簡単に作れるようになるかもしれません。

 

◇プライバシーポリシー

●個人情報の利用目的

当ブログでは、メールでのお問い合わせ、メールマガジンへの登録などの際に、名前(ハンドルネーム)、メールアドレス等の個人情報をご登録いただく場合がございます。

これらの個人情報は質問に対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。

●個人情報の第三者への開示

当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。

・本人のご了解がある場合
・法令等への協力のため、開示が必要となる場合

個人情報の開示、訂正、追加、削除、利用停止
ご本人からの個人データの開示、訂正、追加、削除、利用停止のご希望の場合には、ご本人であることを確認させていただいた上、速やかに対応させていただきます。

アクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。

このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。

●免責事項

当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。

当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。

当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

●プライバシーポリシーの変更について

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。