おもちゃラボ

Unityで遊びを作っていきます

Unityで使えるTips100選

f:id:nn_hokuson:20210913093029j:plain:w550
これまで書いてきた記事の中から、Unityを使うときにちょっと役に立ちそうなTIPSを100個用意しました!お時間のあるときにでも、ちょこちょこ眺めてみてください〜^^

入門編

【Unity】オブジェクトを破棄するタイミングで効果音を鳴らしたい - おもちゃラボ
【Unity】C#のデリゲートとコールバック超入門 - おもちゃラボ
【Unity】Visual Studio Codeを使う(2021年度対応) - おもちゃラボ
【Unity】これだけは覚えておきたいRectTransformの基本 - おもちゃラボ
【Unity】これは便利!カメラの位置をシーンビューの視点と一致させる方法 - おもちゃラボ

【Unity】Listの内容をDebug.Logで表示する - おもちゃラボ
【Unity】XキーとZキーのショートカット使ってますか? - おもちゃラボ
敵にやられたときに画面を赤く光らせる - おもちゃラボ
C#のヒアドキュメントで変数を展開する - おもちゃラボ
【Unity】NavMeshで経路に沿って動かす - おもちゃラボ

Spriteを画面いっぱいに広げるスクリプト - おもちゃラボ
【Unity】ファイルの読み込みと書き込み方法3選 - おもちゃラボ
【Unity】画面四隅のワールド座標を取得する - おもちゃラボ
【Unity】シーンが遷移したことを検知する - おもちゃラボ
【Unity】メニューからモデルを配置する - おもちゃラボ

【Unity】ボタンのタッチダウン時にメソッドを呼び出す - おもちゃラボ
Unityで背景スクロールする3つの方法 - おもちゃラボ
Unityでマリオっぽいゲームを作るのに必要な5つのこと - おもちゃラボ
【Unity】パーティクルに複数の種類のテクスチャを使う - おもちゃラボ
【Unity】Webカメラの画像を加工して表示する - おもちゃラボ
【Unity】ボタンを押したときに画面クリックは無視する - おもちゃラボ

【Unity】スクリプトでRGBとHSVを相互に変換する方法 - おもちゃラボ
【Unity】Animatorでステートが遷移するタイミングを検知する - おもちゃラボ
【Unity】プログレスバーを作るときにハマりがちな3つの誤り - おもちゃラボ
クリックしたオブジェクトをアニメーションさせる - おもちゃラボ
【Unity】ゲーム実行中にインスペクタで変更した値を停止後に反映させる方法 - おもちゃラボ

ワールド空間に文字を表示する - おもちゃラボ
【Unity】3D Textの前後関係を正しく表示する - おもちゃラボ
【Unity】樹木を作る - おもちゃラボ
Animatorの使い方とアニメーションカーブ入門 - おもちゃラボ
【Unity】ビルボードで常にカメラの方に向く木を作る - おもちゃラボ

【Unity】3D Textの前後関係を正しく表示する

Unityの3D Textは、uGUIと違い空間上に配置できるテキストになります。ただ、この3D Text、他のオブジェクトの裏面に回っても最前面に表示されてしまいます。

f:id:nn_hokuson:20210909210615g:plain
そこで、3D Textの前後関係を正しく表示する方法を紹介したいと思います。

流れは次の通りです。

シェーダでデプスをみて描画する

3D Textが別オブジェクトの裏面に回った時に前後関係を正しく表示するため、ちゃんと
デプスチェックをするシェーダを作成します。プロジェクトウィンドウで右クリック→Create→Standard Surface Shaderを選択して、Font3D.shaderという名前で保存して下さい。

次にFont3Dシェーダに次のプログラムを入力して下さい。

Shader "Custom/Font3D"
{
   	Properties {
		_MainTex ("Font Texture", 2D) = "white" {}
		_Color ("Text Color", Color) = (1,1,1,1)
	}
 
	SubShader {
		Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
		Lighting Off Cull Off ZWrite On Fog { Mode Off }
		Blend SrcAlpha OneMinusSrcAlpha
		Pass {
			Color [_Color]
			SetTexture [_MainTex] {
				combine primary, texture * primary
			}
		}
	}
}

このプログラムではZWrite Onとすることで、カメラからみたときの3D Textのデプスを考慮して描画を行います。これにより前後関係の正しい描画ができるようになります。

また、Cull offとして3D Textを裏面から見たときにも描画されるようにしてます。ここは状況に応じてオンオフして下さい。

マテリアルを作成する

次に、いま作ったFont3Dシェーダを選択した状態で右クリックして、Create→Materialを選択します。これによりFont3Dシェーダがセットされたマテリアルが作成されます。

f:id:nn_hokuson:20210909204749p:plain:w220

作成したマテリアルにフォントテクスチャをセットします。使用したいフォントの「▶」をクリックして展開し、その中にあるFont Textureを作成したマテリアルのFont Textureの欄にドラッグ&ドロップしてください。

f:id:nn_hokuson:20210909212502p:plain:w500

3D Textにマテリアルをアタッチ

最後に、作成したマテリアルを3D Textのオブジェクトにドラッグ&ドロップしてアタッチします。

f:id:nn_hokuson:20210909212730p:plain:w450

フォントの色を変えたい場合はマテリアルのカラーから変更できます。カメラを動かしてみて3D Textの前後関係が正しく表示されるか試してみてください!
f:id:nn_hokuson:20210909211022g:plain

nn-hokuson.hatenablog.com
こちらも合わせてどうぞ

はてなブログのソースコードの見た目(スマホ)を調節する

はてなブログに載せたソースコードをスマホで見ると、行間が広すぎて見にくかったのでCSSで調整する方法を調べました。

元の状態がこちら。
う〜ん、見栄え悪い!

f:id:nn_hokuson:20210902201737p:plain:w400
 
いっぽう、CSSを使って見栄えを調節したソースコードがこちら!
かなり見やすくなったんじゃないでしょうか?

f:id:nn_hokuson:20210906193911p:plain:w400

やったこととしては

  • 行間を狭くした
  • 背景に色を付けた
  • 行の折り返しをやめた

の3つです。

スマホでのソースコードの調節方法

PC用のCSS設定は「デザイン」→「カスタマイズ」→「デザインCSS」で変更できますが、デザインCSSを変更しただけではスマホでの見栄えは変更できませんでした。

スマホでの見た目の変更は「デザイン」→「スマートフォン」→「記事」→「記事上」で行います。

f:id:nn_hokuson:20210902201505p:plain:w300

「記事上」のウインドウをクリックするとCSSを入力するウインドウが表示されるので、そこに次のCSSを入力してください。

<style type="text/css">
    .entry-content pre { 
        font-size: 20px;
        line-height: 16px;
        background: #f9f2f2;
        word-wrap: normal;
    }
    pre{
         white-space: pre;
    }
</style>

line-heightで行間、backgroundで背景色を設定しています。また、word-wrapとwhite-space: preでソースコードの折返しを禁止しています。

CSSが入力できたら「変更を保存する」ボタンで変更を保存して完了です。