まえがき
皆さんこんにちは、gmatsuです。
もう11月ですねー。
今年はコロナウィルスの影響からか、例年よりも「もう年末間近なのか・・」という気持ちをとても強く感じます。
弊社は完全にテレワークな状況ですので、外出する機会が以前よりもかなり減ったので、そういう点でも時の流れが早く感じるのかもしれません。
時間の流れが早いといえば「PS5」ですよ。
もう来週には発売ですね。
正式な発売発表が9月だったとはいえ、気づいたらもう来週発売かよ状態です。
購入予定ではありますが、ヨドバシカメラの予約抽選に漏れた自分は一体いつ買えるのか・・。
気長に待ちたいと思います(笑)
グラデーションの作成
現在弊社ではUnityを利用してアプリ開発を行っているのですが、その際に便利だなと思ったりした事を今回から書いていこうと思っています。
今回紹介したいのは「グラデーション」に関してです。
ゲーム中ってグラデーションを使用したい時、結構ありますよね？
設定画面の背景などで見ることもありますが、プレイ画面の背景としても使用されていることも良くあると思います。
このようなグラデーションがとても簡単に実装できる方法を今回はご紹介していきます。
グラデーションの実装方法
では実際にどのような方法で表現できるのかですが、以下のような方法が考えられます。
方法1. グラデーションで塗りつぶした画像を用意する
画像編集ソフトを利用して、このような画像を用意すればキレイにグラデーションを簡単に用意できます。
ただ、どうしても背景に使用したり、色んな箇所に違った色合いのグラデーションを表示したい・・となると、その数分だけ画像を用意する必要があります。
背景などは結構サイズとしても大きいのでファイルサイズが・・という問題が出てきます。
方法2. アセットを導入する
このようなグラデーションを表現するアセットは検索すると山程でてきます。
方法3. シェーダーとマテリアルで表現
こんな方法もあるようです。
このようにいくつかの方法はありますが、今回紹介したいのはタイトルにも書いてある通り「鬼簡単」です。
「アセット導入するだけでも鬼簡単でしょ」と言われたら終了ですので、そこはそっ閉じでお願いします。
開発環境
macOS Mojave バージョン10.14.6
Unity バージョン2019.3.4f1
実装方法
では順を追って方法の紹介をしていきます。
手順1. 2ドットの画像を用意
グラデーションの元となる画像を用意します。
サイズは縦にグラデーションしたければ「幅1x高さ2」、横へなら「幅2x高さ1」のサイズで準備します。
ここでドットに入れた色が「グラデーションの始点、終点の色」になります。
手順2. カメラと画像の設定
今回はMainCameraのSizeを「960」、画像のPixelsPerUnitを「1」にしています。
手順3. 引き伸ばす
後は画像をHierarchyに設置して引き伸ばすだけ！
これだけで簡単にグラデーションが表現できてしまいます。
Unityが良い感じに画像を引き伸ばしてくれるので、自然なグラデーションに見せてくれます。
ちなみに3ドットの画像にするとこんな感じに見せることもできます。
アセットの導入などでもグラデーションの表現は行なえますが、この方法は「2ドットの画像用意して引き伸ばすだけ！」という感じです。
ただこの方法、どんなグラデーションでも表現できるわけではありません。
試しに斜めのグラデーションをやってみました。
こうなります(笑)
最後に
斜めのグラデーションや、グラデーションの位置をもっと細かく指定したい・・などの調整ができない方法になっています。
とにかくざっくりでいいからグラデーションが欲しい！って時であれば使える方法ではないかと思います。
詳細に色んな事がやりたいなら素直にアセットを入れた方が早いかもしれませんね。
近々、弊社にて開発中のアプリがリリース予定となっています。
リリース時にはプレイしていただければ幸いです！
それではまた。
告知
弊社からゲームアプリがリリースされました。
簡単操作で楽しめるジャンプアクションゲームなっています。
かわいいニワトリが沢山登場しますよ。
