画面を分割表示したい

画面の表示領域を 2 分割、4 分割、9 分割などに等分割したマルチ画面のような表示ができます。

可視アニメーションでコンテンツ表示器オブジェクトの表示/縮小を切り替えた後、表示されるコンテンツ表示器オブジェクトのサイズと位置をユニフォームグリッドが自動的に調整することで、一画面の全体表示と複数画面の分割表示を切り替えます。

画面を分割表示するために使用する機能の詳細は以下を参照してください。

ユニフォームグリッド

アニメーションとは

可視アニメーション設定時の動作

動作例

Content1 上のスイッチをタッチすると、Content1 以外のコンテンツが縮小されることで Content1 が全体表示になります。再度タッチすると、Content1 以外のコンテンツが再表示されることで分割表示に戻ります。

 

設定の流れ

1. 変数の追加
2. 画面の設定
3. コンテンツ画面の設定
4. 部品の設定
5. コンテンツの描画
6. スクリプトの設定

 

変数の追加

コンテンツ表示器オブジェクトの [可視] プロパティの値を格納する変数を追加します。

プロジェクトエクスプローラー: [変数] ➞ [すべての変数]

以下の変数を追加します。

[名前]	[データの種類]
Var1	[INT]
Var2	[INT]
Var3	[INT]
Var4	[INT]

画面の設定

プロジェクトエクスプローラー: [作画] ➞ [画面]

以下の画面を追加します。

画面のプロパティ:

[画面 ID]	[画面の種類]
2	[ユニフォームグリッド]

以下のプロパティを設定します。

Target01 のプロパティ:

タブ	サブタブ	プロパティ		値
[機能]	[基本]	[プリファレンス]	[初期画面 ID]	2

コンテンツ画面の設定

プロジェクトエクスプローラー : [作画] ➞ [コンテンツ]

以下のコンテンツを追加します。

[コンテンツ ID]	[画面の種類]
1	[ビューボックス]
2	[ビューボックス]
3	[ビューボックス]
4	[ビューボックス]

 

部品の設定

プロジェクトエクスプローラー: [作画] ➞ [画面] ➞ [Screen2]

画面の色などを設定するには、ドキュメントビューで描画領域上をクリックし、プロパティウィンドウで設定します。

UniformGrid のプロパティ:

タブ	プロパティ		値
[基本]	[塗り込み]	[値]	ID: (任意)
	[行]		(初期値)
	[列]		(初期値)

 

以下のオブジェクトを [ツールチェスト] から画面にドラッグアンドドロップします。

コンテンツ表示器オブジェクト (名前: ContentDisplay1) プロパティ :

タブ	サブタブ	プロパティ	値
[機能]	[基本]	[コンテンツ ID]	1
[図形]	[サイズ / 位置]	[可視]	[変数] [名前]: Var1

コンテンツ表示器オブジェクト (名前: ContentDisplay2) プロパティ :

タブ	サブタブ	プロパティ	値
[機能]	[基本]	[コンテンツ ID]	2
[図形]	[サイズ / 位置]	[可視]	[変数] [名前]: Var2

コンテンツ表示器オブジェクト (名前: ContentDisplay3) プロパティ :

タブ	サブタブ	プロパティ	値
[機能]	[基本]	[コンテンツ ID]	3
[図形]	[サイズ / 位置]	[可視]	[変数] [名前]: Var3

コンテンツ表示器オブジェクト (名前: ContentDisplay4) プロパティ :

タブ	サブタブ	プロパティ	値
[機能]	[基本]	[コンテンツ ID]	4
[図形]	[サイズ / 位置]	[可視]	[変数] [名前]: Var4

 

コンテンツの描画

各コンテンツに全体表示/分割表示を切り替えるスイッチを配置します。スイッチの動作はスクリプトで設定します。

プロジェクトエクスプローラー: [作画] ➞ [コンテンツ] ➞ [Content1]

以下のオブジェクトを [ツールチェスト] から Content1 にドラッグアンドドロップします。

スイッチオブジェクト (名前: Switch1) プロパティ :

デフォルト値

プロジェクトエクスプローラー: [作画] ➞ [コンテンツ] ➞ [Content2]

以下のオブジェクトを [ツールチェスト] から Content2 にドラッグアンドドロップします。

スイッチオブジェクト (名前: Switch1) プロパティ :

デフォルト値

プロジェクトエクスプローラー: [作画] ➞ [コンテンツ] ➞ [Content3]

以下のオブジェクトを [ツールチェスト] から Content3 にドラッグアンドドロップします。

スイッチオブジェクト (名前: Switch1) プロパティ :

デフォルト値

プロジェクトエクスプローラー: [作画] ➞ [コンテンツ] ➞ [Content4]

以下のオブジェクトを [ツールチェスト] から Content4 にドラッグアンドドロップします。

スイッチオブジェクト (名前: Switch1) プロパティ :

デフォルト値

スクリプトの設定

コンテンツ表示器オブジェクトの 1 つでスイッチがタッチされると、他のコンテンツ表示器オブジェクトの [可視] プロパティを 0 (表示) または 2 (縮小) に変更するスクリプトを設定します。

プロジェクトエクスプローラー: [作画] ➞ [コンテンツ] ➞ [Content1]

オブジェクトに以下のスクリプトを設定します。

[ツールチェスト] からスクリプトをスクリプト編集画面にドラッグアンドドロップします。

 

番号	ブロック
1	[トリガー] ➞ [タッチ] ➞ [タッチ]
2	[値] ➞ [画面オブジェクト]
3	[オペレーション] ➞ [値の変更] ➞ [値の変更]
4	[値] ➞ [変数]
5	[値] ➞ [定数]

 プロジェクトエクスプローラー: [作画] ➞ [コンテンツ] ➞ [Content2]

オブジェクトに以下のスクリプトを設定します。

[ツールチェスト] からスクリプトをスクリプト編集画面にドラッグアンドドロップします。

スイッチオブジェクト (名前: Switch1) スクリプト:

 

番号	ブロック
1	[トリガー] ➞ [タッチ] ➞ [タッチ]
2	[値] ➞ [画面オブジェクト]
3	[オペレーション] ➞ [値の変更] ➞ [値の変更]
4	[値] ➞ [変数]
5	[値] ➞ [定数]

 

プロジェクトエクスプローラー: [作画] ➞ [コンテンツ] ➞ [Content3]

オブジェクトに以下のスクリプトを設定します。

[ツールチェスト] からスクリプトをスクリプト編集画面にドラッグアンドドロップします。

スイッチオブジェクト (名前: Switch1) スクリプト:

番号	ブロック
1	[トリガー] ➞ [タッチ] ➞ [タッチ]
2	[値] ➞ [画面オブジェクト]
3	[オペレーション] ➞ [値の変更] ➞ [値の変更]
4	[値] ➞ [変数]
5	[値] ➞ [定数]

 

プロジェクトエクスプローラー: [作画] ➞ [コンテンツ] ➞ [Content4]

オブジェクトに以下のスクリプトを設定します。

[ツールチェスト] からスクリプトをスクリプト編集画面にドラッグアンドドロップします。

スイッチオブジェクト (名前: Switch1) スクリプト:

番号	ブロック
1	[トリガー] ➞ [タッチ] ➞ [タッチ]
2	[値] ➞ [画面オブジェクト]
3	[オペレーション] ➞ [値の変更] ➞ [値の変更]
4	[値] ➞ [変数]
5	[値] ➞ [定数]