Unity+YUIMgrで電卓を作る④ PC版とスマートフォン版の同時レイアウト

「PC版とスマートフォン版を同時に作る」
今では結構普通の事になってしまった感があります。

インターフェースやゲームが全く違う場合は別プロジェクトとして作る事も考えられますが
せっかくUnityがSwitchPlatformひとつで対応できるのですから
この電卓もPC版とスマートフォン版を同時に対応してみましょう。

ここまで作っていた物をPC版(16:10の画面で作成)とするなら
スマートフォン版は縦持ちという事で10:16の画面比率を計画してみます。

まず、試しに
File⇒BuildSettingsからAndroidへSwitchPlatformしてみます。
そしてGameビューのAspectを800×1280に変更し再生してみます。

YUICalc_img003
※わかり易くするためカメラをシーンに置きました

このように画面の上下に余白を作り、画面の中心にこれまで作成した電卓が表示されます。
これは、YUIMgrが現在利用できるスクリーンサイズから16:10の比率で取得できる最大領域を計算し
その部分を仮想解像度として利用するようになっているからです。

さて、ここからこのレイアウトに従って、画面の配置を変更していくのですが
とりあえず一つのスクリプトを使いまわしたいので、「Scripting Define Symbols」の設定をします。

まず、一度、Platformを「PC,Max,Linux…」に戻し
BuildSettings⇒PlayerSettingからOtherSettingsを開き
「Scripting Define Symbols」の項目に「PC」と入力しておきます。

YUICalc_img004

次に、再度Platformを「Android」に設定し
「Scripting Define Symbols」の項目に「SP」と入力しておきます。

YUICalc_img005

これでスクリプトベースで両対応する準備が整いました。

最初にYUIMgr初期化時に設定した仮想解像度や画面比率を修正します。
この時、先ほど定義したSymbolsを利用します。

// Use this for initialization
	void Start () {

		YUIMgr.Init();
#if PC
		YUIMgr.SCREEN.SetAreaByAspect( 16, 10 );
		YUIMgr.SCREEN.SetImageSize( 1280, 800 );
#elif SP
		YUIMgr.SCREEN.SetAreaByAspect( 10, 16 );
		YUIMgr.SCREEN.SetImageSize( 800, 1280 );
#endif // PC

この「#if PC」とか「#elif SP」とかはプリプロセッサで
PCの定義が有効なら上がコンパイルされ、SPの定義が有効なら下がコンパイルされます。
これを利用して両プラットフォームの対応を進めていきます。
この状態で再生すると画面は以下のように。

YUICalc_img006

大分ぐちゃぐちゃですね。
これを整形していくとして方針は非常に非常にざっくりと
数値表示ウィンドウ:縦2倍にして、横幅あわせ。
数値入力ウィンドウ:横一杯利用で割とそのまま
演算入力ウィンドウ:横並びにして、数値の下へ
イコールボタン:縦2倍にする
これで無理やり合わせていきます。

/// 数値表示ウィンドウ.
public class YCWndDisplay : YUI_WND {
	/// (省略)
	/// サイズ取得.
	public static int CalcWidth() {
#if PC
		return 1240;
#elif SP
		return 760;
#endif // SP
	}
	public static int CalcHeight() {
#if PC
		return 200;
#elif SP
		return 400;
#endif // SP
	}
	/// (省略)
}

↑まず数値表示ウィンドウ。
元々用意していたサイズ取得関数をプロセスによって変更します。

/// 数値ボタンウィンドウ.
public class YCWndNumber : YUI_WND {

	///(省略)
	/// サイズ取得.
	public static int CalcWidth() {
#if PC
		return 920;
#elif SP
		return 760;
#endif
	}
	///(省略)
}

↑数値入力ウィンドウもサイズ取得関数を変更します。

続いて演算入力ウィンドウ、こちらは少し煩雑になります。

/// 演算ボタンウィンドウ.
public class YCWndOperation : YUI_WND {
	///(省略)
	/// サイズ取得.
	public static int CalcWidth() {
#if PC
		return 300;
#elif SP
		return 760;
#endif 
	}
	public static int CalcHeight() {
#if PC
		return 420;
#elif SP
		return 200;
#endif 
	}
	///(省略)
	/// 初期化処理.
	protected override void LateInit() {

		///(省略)

#if PC
		int nBtnWidth	= CalcBtnWidth( 1 );
		int nBtnHeight	= CalcBtnHeight( strLabel.Length );
#elif SP
		int nBtnWidth	= CalcBtnWidth( strLabel.Length );
		int nBtnHeight	= CalcBtnHeight( 1 );
#endif 

		/// 画像のロード.
		YUIAsync rAsync = YUIMgrAsync.LoadRscAsync<Sprite>( "btn057_07" );

		for ( int i = 0; i < strLabel.Length; ++i ) {
		
			int nBtnID	= YUIMgr.GetNewID();
#if PC
			int nX		= 20;
			int nY		= 20 + i * ( nBtnHeight + 20 );
#elif SP
			int nX		= 20 + i * ( nBtnWidth + 20 );
			int nY		= 20;
#endif
			///(省略)
		}
	}
	///(省略)
}

↑ウィンドウのサイズ定義と、ボタンの配置方向(位置)を変更します。
さらに生成時の位置の修正も必要です。
下記のように修正し、ボタンのサイズも変更しておきます。

/// 親ウィンドウ.
public class YCMainView : YUI_WND {
	///(省略)
	// 初期化処理.
	protected override void LateInit() {

		///(省略)
		// 演算ウィンドウ.
#if PC
		int nXOperation	= -20;
		int nYOperation	= nYNumber;
		YUI.E_ANCHOR eAnchor = YUI.E_ANCHOR.TOP_RIGHT;
		YUI.E_PIVOT ePivot = YUI.E_PIVOT.TOP_RIGHT;	
#elif SP
		int nXOperation	= 20;
		int nYOperation	= nYNumber + YCWndNumber.CalcHeight() + 20;
		YUI.E_ANCHOR eAnchor = YUI.E_ANCHOR.TOP_LEFT;
		YUI.E_PIVOT ePivot = YUI.E_PIVOT.TOP_LEFT;	
#endif 
		YUI_INFO_WND rInfoOperation = new YUI_INFO_WND( ID_WND_OPERATION, this );
		rInfoOperation.SetAnchorPivot( eAnchor, ePivot );
		rInfoOperation.SetRect( nXOperation, nYOperation, YCWndOperation.CalcSize() );
		rInfoOperation.BACK_BLOCK.SetSprite( rAsyncBack, YUI.E_FILL_TYPE.TILED );
		YUIMgr.Create<YCWndOperation>( rInfoOperation );

		// イコールボタン.
		/// 画像のロード.
		YUIAsync rAsync = YUIMgrAsync.LoadRscAsync<Sprite>( "btn057_07" );
		YUI_INFO_TEXT_BTN rInfoEqual = new YUI_INFO_TEXT_BTN( ID_BTN_EQUAL, this );
		rInfoEqual.SetAnchorPivot( YUI.E_ANCHOR.BOTTOM_LEFT, YUI.E_PIVOT.BOTTOM_LEFT );
#if PC
		rInfoEqual.SetRect( 20, -20, CalcWidth() - 40, 100 );
#elif SP
		rInfoEqual.SetRect( 20, -20, CalcWidth() - 40, 160 );
#endif 
		rInfoEqual.SetText( "=" );
		rInfoEqual.FONT_BLOCK.SetAnchorPivot( YUI.E_ANCHOR.CENTER, YUI.E_PIVOT.CENTER );
		rInfoEqual.BACK_BLOCK.SetSprite( rAsync, YUI.E_FILL_TYPE.SLICED ); /// 画像設定.
		YUIMgr.Create<YUI_TEXT_BTN>( rInfoEqual );

		///(省略)
	}

	///(省略)
}

以上の処理を追加した後、それぞれのプラットフォームにSwitchPlatformし
再生すると下図のようになります。

YUICalc_img007

SP版のこのレイアウトがインタフェースとして適切か…という問題はややあるのですが
これでPC・SP版それぞれのレイアウト対応を行う事が出来ました。

そもそもウィンドウに対応するクラスを変えてしまう等が有効な場合もあると思います。
そのあたりはケースバイケースでしょうか。

次回は「ボタンを押した位置にエフェクトを表示する」です。

★★★ 「YUIMgr」アセットストアにて販売中です! ★★★
https://www.assetstore.unity3d.com/jp/#!/content/36886

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメントを残す




Menu

HOME

TOP