NW4C LayoutEditor

NintendoWare for CTR
NW4C LayoutEditor
Version 1.10.0
2010-12-13

"Confidential"

This document contains confidential and proprietary information of Nintendo and is also protected under the copyright laws of the United States and foreign countries. No part of this document may be released, distributed, transmitted or reproduced in any form or by any electronic or mechanical means, including information storage and retrieval systems, without permission in writing from Nintendo.

[注意！]　このドキュメントの内容は、秘密情報であるため、厳重な取扱い、管理を行なってください。

Copyright ©2009-2010 Nintendo/HAL Laboratory, Inc. All Rights Reserved.

Microsoft Internet Explorer 6.0以降推奨


更新履歴

（[*]）は該当するページへのリンクです。

Version 1.10.0　2010-12-13 (Release 1.3.0)

機能追加／変更点

  • (LayoutEditor) HIO チャンネルを変更しました。

    • 正式Viewer との通信のため、使用する HIO チャンネルを 0 から 4 に変更しました。

  • (簡易ビューア) アニメーション切り替え時の動作を変更しました。

    • 表示するアニメーションを切り替えた時の動作を以下のように変更しました。
      -次のアニメーションに移動するときは以前のアニメーションを最終フレームに設定します。
      -前のアニメーションに移動するときは以前のアニメーションを先頭フレームに設定します。
      -ただし、以前のアニメーションがループのときは常に先頭フレームに設定します。

    また、グループを切り替えたときにはフレームを変化しないようにしました。
    （以前は 0 フレームに設定されていました。）

  • (簡易ビューア) 情報表示を強化しました。

    • 選択しているグループに含まれるペインがアニメーションしないときには、名前をグレイ表示するようになりました。

    グループがアニメーション区間タグに関連グループとして登録されているときには、名前の横に＊を表示するようになりました。

  • (簡易ビューア) アニメーション共有に対応しました。

    • アニメーション共有に対応しました。

  • (簡易ビューア) HIO チャンネルを変更しました。

    • 正式Viewer と互換にするため、使用する HIO チャンネルを 0 から 4 に変更しました。

不具合修正点

  • (LayoutEditor) 時間スケール調整ダイアログの入力値に関する不具合を修正しました。

    • 時間スケール調整ダイアログにおいて、操作区間の始点、スケール方法の始点の値が100までしか設定できませんでしたが、これを修正しました。

Version 1.9.0　2010-11-04 (Release 1.2.0)

機能追加／変更点

  • (LayoutEditor) バイナリファイル出力に機能を追加しました。 [*]

    • バイナリファイル出力ダイアログに、キーに対する制御を設定する機能を追加しました。

  • (LayoutEditor) レイアウトにプレビュー時の転送先設定機能を追加しました。 [*]

    • プレビュー時のデータ転送先の設定を、レイアウトファイルに保存できるようにしました。

  • (バイナリコンバータ) オプションを追加しました。

    • バイナリコンバータに --omit-nokey-all オプションを追加しました。
    アニメーションデータのサイズを抑えるのに効果があります。
    アニメーション区間タグで指定されたフレーム区間内にキーが無い場合は、アニメーションデータを出力しません。

    このオプションは -g オプションを指定している際に有効です。

  • (簡易ビューア) 機能を追加しました。

    • 簡易ビューアに以下の機能を追加しました。
      - アニメーションの再生・停止、巻き戻し
      - フレームの選択
      - フレームレート(60, 30, 20fps)の選択
      - デプステストの選択
      - 設定の保存
       ( 設定は %NW4C_ROOT%\tools\LayoutViewer\setting.ini に保存されます。)

    また、以下の変更を行いました。
      - アニメーションの並びをレイアウトエディタの区間タグ編集の順番と同じにしました
      - レイアウトエディタ上で隠されたペインの状態が反映できるようになりました
       (ツール環境設定：プレビューの設定によります）

不具合修正点

  • (PCビューア) アニメーションを持たないグループの選択に関する不具合を修正しました。

    • アニメーションを持たないグループを選択すると、ハングアップする不具合を修正しました。

Version 1.8.0　2010-10-04 (Release 1.1.0)

機能追加／変更点

  • (LayoutEditor) バイナリファイル出力に機能を追加しました。 [*]

    • バイナリファイル出力ダイアログに、キーに対する制御を設定する機能を追加しました。

  • (LayoutEditor) テクスチャウィンドウの表示を改善しました。

    • テクスチャウィンドウのサムネイル表示を改善しました。

  • (LayoutEditor) 頂点カラー編集に 2 点同時編集機能を追加しました。 [*]

    • 頂点カラーの編集に、2 つの頂点のカラーを同時に編集できる機能を追加しました。

  • (LayoutEditor) 親子階層ウィンドウでノードを同時に開閉する機能を追加しました。

    • シフトキーを併用してノードを開閉すると、それ以下のノードを同時に開閉させることができる機能を追加しました。

  • (LayoutEditor) HostIO、レイアウトの転送機能を追加しました。 [*]

    • 実機用の簡易レイアウトビューアへ、HostIO を用いてレイアウト転送する機能を追加しました。

    簡易レイアウトビューアを起動するには %NW4C_ROOT%\tools\LayoutEditor\LayoutViewer.bat を実行します。

不具合修正点

  • (LayoutEditor) バイナリファイル出力ウィンドウ内の表記を変更しました。

  • (LayoutEditor) 別フォルダの同名フォントに変更できない不具合を修正しました。

    • TextBoxペインのフォントを、別フォルダの同じ名前のフォントに変更できない不具合を修正しました。

  • (LayoutEditor) 小さいペインの移動に関する不具合を修正しました。

    • 小さいペインをドラックして移動させようとしても、サイズの変更になってしまう不具合を修正しました。

  • (LayoutEditor) テクスチャの貼られていないペインの表示に関する不具合を修正しました。

    • レイアウトウィンドウで、テクスチャの貼られていないペインがテクスチャの貼られているペインの影響を受けて、正しく表示されないことがある不具合を修正しました。

  • (LayoutEditor) 編集しても変更されたことにならない不具合を修正しました。

    • レイアウト環境設定の画面サイズ、プロパティウィンドウのテクスチャパターンを編集しても、変更されたことにならない不具合を修正しました。

  • (LayoutEditor) プロパティウィンドウの領域の画像表示に関する不具合を修正しました。

    • Windows 7 環境において、プロパティウィンドウで編集するウィンドウペインの領域を表示する画像が、正しく表示されないことがある不具合を修正しました。

  • (LayoutEditor) 色見本ウィンドウの表示に関する不具合を修正しました。

    • Windows 7 環境において、色見本ウィンドウの表示を切り替えると、詳細表示と画像表示が重なった表示になる不具合を修正しました。

  • (LayoutEditor) レイアウトウィンドウのズームイン、ズームアウトに関する不具合を修正しました。

    • レイアウトウィンドウで、ショートカットキーを使ってのズームイン、ズームアウトができない不具合を修正しました。

  • (LayoutEditor) ペインのサイズ、回転角度の変更に関する不具合を修正しました。

    • ペインのサイズや、回転角度をマウスでのドラッグによって変更すると、Z 位置が 0 以外の時に変更されてしまう不具合を修正しました。

  • (LayoutEditor) テクスチャウィンドウの表示に関する不具合を修正しました。

    • テクスチャウィンドウにおいて、縦スクロールバーが表示されるような状況だと、一番下に表示されるテクスチャの名前が見えない不具合を修正しました。

  • (LayoutEditor) ペインの貼り付けでペイン名が変更されてしまう不具合を修正しました。

    • ペインをコピーして貼り付けると、重複するペイン名が無くてもペイン名が変更されてしまう不具合を修正しました。

  • (LayoutEditor) プロパティウィンドウでの編集に関する不具合を修正しました。

    • ペインを複数選択してからプロパティウィンドウを開くと、同時編集にならない不具合を修正しました。

Version 1.7.1　2010-08-25 (Release 1.0.1)

不具合修正点

  • (LayoutEditor) ウィンドウのレイアウトを変更しました。

    • アニメーション区間タグ編集ウィンドウ、テクスチャウィンドウ、プロパティウィンドウのレイアウトを一部、変更しました。

Version 1.7.0　2010-07-29 (Release 1.0.0)

不具合修正点

  • (LayoutEditor) マテリアルのコンスタント4、5のアニメーションが読み込まれない不具合を修正しました。

Version 1.6.0　2010-06-28 (Release 0.8.0)

不具合修正点

  • (LayoutEditor) アニメーションのデータに不正な id が設定される不具合を修正しました。

    • 0 ～ 2 の範囲であるはずの id に 3 ～ 9 の値が設定されることがありましたが、これを修正しました。

  • (LayoutEditor) レイアウトを閉じる時に保存確認がされないことがある不具合を修正しました。

    • 以下が編集が行われても保存の対象とならなかった不具合を修正しました。
      - カーブエディタの区間以前、区間以後の編集
      - アニメーション区間タグのインポート
      - レイアウトを追加で開く

  • (LayoutEditor) レイアウトファイルを指定しての起動が失敗する不具合を修正しました。

    • レイアウトファイルを引数に指定して LayoutEditor を起動しようとすると失敗する不具合を修正しました。

  • (LayoutEditor) アーカイブフォントの読み込みが失敗する不具合を修正しました。

    • アーカイブフォントファイル( bcfna ファイル) の読み込みが失敗していた不具合を修正しました。

  • (LayoutEditor) RGBA4 フォーマットのテクスチャが正しく表示されない不具合を修正しました。

    • RGBA4 フォーマットのテクスチャの色が、LayoutEditor 上で正しく表示できていない不具合を修正しました。

  • (PCビューア) バッチファイルを修正しました。

    • レイアウトエディタで %NW4C_ROOT% とは異なるドライブのレイアウトを読み込んだ後に、初めてビューアを起動するとビューアの初期化に失敗する不具合を修正しました。

Version 1.5.0　2010-05-14 (Release 0.7.0)

機能追加／変更点

  • (LayoutEditor) ウインドウペインに左上フレームのマテリアル設定共通化 UI を追加しました。 [*]

    • ウインドウペインにおいて、フレームに使用する画像枚数が 4 または 8 枚の時、左上フレームのマテリアル設定を共通化する機能を追加しました。

  • (LayoutEditor) テクスチャ座標の指定にピクセル指定を追加しました。 [*]

    • テクスチャ座標の指定に従来の小数値に加え、ピクセル値を指定できる UI を追加しました。

  • (LayoutEditor) テクスチャ座標の指定できる小数部の桁を変更しました。

    • テクスチャの UV 座標指定の小数部が 2 桁でしたが、これを 5 桁に変更しました。

  • (LayoutEditor) テクスチャのリピート、ミラーの制限を追加しました。

    • 2 のべき乗でないテクスチャ、もしくは 8 ドット未満、ETC1 では 16 ドット未満のサイズでは、リピートおよびミラーを設定できないようにしました。

  • (LayoutEditor) 親子階層ウインドウにグループ編集機能を追加しました。 [*]

    • 親子階層ウインドウのコンテキストメニューに、「グループを作成」および「グループを編集」を追加しました。

  • (LayoutEditor) フォントのバイナリフォーマット変更に対応しました。

    • フォントのバイナリフォーマットが変更されましたので、それに対応しました。
    また、古いバージョンのフォント読み込んだ時に、フォントが古いことがわかるようなエラーを表示するようにしました。

  • (アーカイバ) フォーマットを変更しました。

    • アーカイブファイルのフォーマットを変更しました。
    以前のバージョンのアーカイブファイルとは互換性がありません。

不具合修正点

  • (LayoutEditor) キャプチャした画像が正しく保存されない不具合を修正しました。

    • ツールメニューの「キャプチャ」からキャプチャした画像が、正しいビットマップで保存されない不具合を修正しました。

  • (LayoutEditor) コンバイナの自動設定が正しくない不具合を修正しました。

    • テクスチャが 2 枚、または 3 枚貼られた状態で自動設定を行うと、コンスタントの値が正しく設定されない不具合を修正しました。

  • (LayoutEditor) プロパティウインドウの表示不具合を修正しました。

    • プロパティウインドウの縦サイズが極端に小さくなってしまうことがある不具合を修正しました。

Version 1.4.0　2010-03-19 (Release 0.6.0)

  • (LayoutEditor) LayoutEditor アプリケーション本体の変更はありません。

Version 1.4.0　2010-02-19

  • (LayoutEditor) 同時編集機能に透明度を追加しました。 [*]

    • プロパティウインドウのペインの同時編集（マルチ編集）できる項目に透明度を追加しました。

  • (LayoutEditor) "子階層に透明度の影響を伝える" スイッチのデフォルト値の設定機能を追加しました。 [*]

    • nullペインの "子階層に透明度の影響を伝える" スイッチのデフォルト値を設定できる機能をツール環境設定に追加しました。

  • (LayoutEditor) テクスチャ追加の不要なページを削除しました。

    • テクスチャの追加ダイアログに表示された、タイプを選択する不要なページを削除しました。

  • (LayoutEditor) ウインドウペインの領域選択動作を変更しました。

    • ウインドウペインの領域選択は、一度ウインドウペインを選択する必要がありましたが、これを不要となるように動作を変更しました。

  • (ビューア) アニメーションのフレームレート変更に対応しました。 [*]

    • レイアウトビューアでアニメーションのフレームレートを変更できるようになりました。

  • (ビューア) アニメーションのグループ毎再生に対応しました。 [*]

    • レイアウトビューアでアニメーションをグループ毎に再生できるようになりました。

  • (ライブラリ) 初期化関数を変更しました。

    • ライブラリの初期化を行う関数を変更しました。
    以前のリリースでは初期化には以下の関数を使用しました。

      - nw::lyt::LytInit()
      - nw::lyt::Layout::SetAllocator()

    今回のリリースでは、これらの関数をまとめて nw::lyt::Initialize() としました。

      void nw::lyt::Initialize(nw::os::IAllocator* pAllocator, nw::os::IAllocator* pDeviceMemoryAllocator);
      ・引数 pAllocator には通常のメモリ用のアロケータを指定します。
        (nw::lyt::Layout::SetAllocator() に指定していたアロケータです。)
      ・引数 pDeviceMemoryAllocator にはデバイスメモリ用のアロケータを指定します。
  • (ライブラリ) API を変更しました。
    • グローバル関数
        変更： Initialize (旧 LytInit)
        引数にメモリアロケータを指定します。
    • Layout クラス
        追加: SetDeviceMemoryAllocator()
        追加: AllocDeviceMemory()
        追加: FreeDeviceMemory()
    • TextBox クラス
        変更: AllocStringBuffer() -- 引数 isDoubleBuffer を追加。
  • (LayoutEditor) テクスチャのサムネイル、パスの表示に関する不具合を修正しました。

    • テクスチャウインドウでテクスチャを最新に更新しても、サムネイル、パスの表示が更新されない問題がありましたが、これを修正しました。

  • (LayoutEditor) 選択ペインの切り替えに関する不具合を修正しました。

    • 選択ペインの切り替えで、例外エラーが発生することがある問題がありましたが、これを修正しました。

  • (LayoutEditor) グループ名の変更に関する不具合を修正しました。

    • グループ名を変更すると、末尾に数字が付加されてしまう問題がありましたが、これを修正しました。

  • (LayoutEditor) ウインドウペインのテクスチャ表示に関する不具合を修正しました。

    • ウインドウペインのテクスチャを反転、回転させると、レイアウトウインドウで正しく表示されない問題がありましたが、これを修正しました。

  • (ライブラリ) ペインの位置計算を修正しました。

    • ペインの位置が整数にならない場合に、テクスチャの補間により画像がぼやける場合があります。
    特にペインの位置が中央の場合、ペインのサイズに奇数を指定するとぼやけます。
    このため、位置計算に以下の修正を行いました。

    • Picture, Window, TextBox
      - ペインの配置が中央の場合には、ペインのローカルの左上位置を求める際にペインのサイズを２の倍数に切り上げて計算します。
      - 幅、高さそれぞれについて行います。
    • TextBox
      - 文字列の位置が中央の場合には、文字列の左上位置を求める際にペインのサイズと文字列のサイズを２の倍数に切り上げて計算します。
      - 幅、高さそれぞれにおいて行います。
  • (ライブラリ) カリングモード設定を修正しました。

    • ライブラリ内で glDisable(GL_CULL_FACE) を行わないようにしました。
    カリングモードの設定は、必要に応じてアプリケーション側で行ってください。

Version 1.3.1　2010-01-26

  • (LayoutEditor) 長いペイン名を含むレイアウトの読み込みに関する不具合を修正しました。

    • 14 文字以上の長いペイン名が含まれているレイアウトが、正しく読み込まれない問題がありましたが、これを修正しました。

  • (LayoutEditor) レイアウトの追加読み込みに関する不具合を修正しました。

    • レイアウトの追加読み込みで、レイアウト環境設定が上書きされる問題がありましたが、これを修正しました。

  • (ライブラリ) リファレンスマニュアルを整備しました。

    • リファレンスマニュアルを加筆、修正し整備しました。

  • (ライブラリ) アクセス制限を修正しました。

    • 以下の関数のアクセス制限を private から public に修正しました。
      - TextBox::GetMaterial
      - TextBox::GetMaterialNum
      - TextBox::SetMaterial

Version 1.3.0　2010-01-15

  • (LayoutEditor) ペインの同時編集（マルチ編集）機能を追加しました。 [*]

    • プロパティウインドウで、選択した複数ペインのプロパティを同時編集することができる機能を追加しました。

  • (LayoutEditor) 左上マテリアル情報のコピー機能を追加しました。 [*]

    • ウィンドウペインのプロパティに、左上マテリアル情報のコピーにコンテンツも対象に含んだ機能を追加しました。

    また、"詳細なマテリアル設定を行う"スイッチの情報もコピーするようにしました。

  • (LayoutEditor) カラー補間設定のコピー＆ペースト機能を追加しました。 [*]

    • プロパティウインドウのノードから行うコピー＆ペーストで、カラー補間設定もできるようにしました。

  • (LayoutEditor) TEV自動計算機能を追加しました。 [*]

    • テクスチャコンバイナの自動計算の対象になっているときには、自動計算の ON/OFF が切り替えられます。

  • (LayoutEditor) プロパティウインドウでの編集対象ペインの強調表示機能を追加しました。

    • プロパティウインドウがアクティブな時に編集対象としているペインを白枠で表示する機能を追加しました。

  • (LayoutEditor) Windows のユーザー切り替えに関する不具合を修正しました。

    • Windows のユーザー切り替えを行うと、LayoutEditor で例外エラーが発生する問題がありましたが、これを修正しました。

  • (LayoutEditor) フラグメントオペレーション、テクスチャコンバイナのコピーに関する不具合を修正しました。

    • プロパティウインドウのノードから行うコピーで、フラグメントオペレーション、テクスチャコンバイナをコピーしようとすると例外エラーが発生する問題がありましたが、これを修正しました。

  • (LayoutEditor) アニメーション再生中のプロジェクトを閉じる操作に関する不具合を修正しました。

    • アニメーションを再生している状態で、プロジェクトを閉じても再生されたままになり、正しくプロジェクトが閉じることができず例外エラーが発生する問題がありましたが、これを修正しました。

  • (LayoutEditor) LayoutEditor の最小化に関する不具合を修正しました。

    • LayoutEditor を最小化しても、プロパティウインドウが連動して最小化しない問題がありましたが、これを修正しました。

  • (LayoutEditor) テクスチャウインドウ表示に関する不具合を修正しました。

    • テクスチャウインドウのパディングサイズの表示が、正しくないことがある問題がありましたが、これを修正しました。

Version 1.2.0　2009-12-07

  • (LayoutEditor) 新しい A4フォーマットのフォントに対応しました。

  • (LayoutEditor) L4、A4フォーマットのテクスチャに対応しました。
  • (LayoutEditor) ピクチャペインの作成時にテクスチャ名を継承するようにしました。

    • 新規に作成されたピクチャペインの名前は、使用したテクスチャから付けれます。

  • (LayoutEditor) 保存時のアニメーションフレームを0にするように変更しました。

    • プロジェクトの保存は、アニメーションのフレームを0に設定してから行うように変更しました。

  • (LayoutEditor) レイアウトウィンドウのキャプチャ機能を追加しました。

  • (LayoutEditor) カーブエディタに不要なデータが表示されていた不具合を修正しました。

  • (LayoutEditor) 空のグループが読み込めない不具合を修正しました。

    • 空のグループを作成して保存はできますが、読み込みはできなかった不具合を修正しました。

  • (LayoutEditor) L8、A8フォーマットのテクスチャの表示が正しくない不具合を修正しました。

  • (LayoutEditor) ETC1_A4フォーマットの変更に対応しました。

  • (LayoutEditor) ダイアログに残っていた Revolution の表記を修正しました。

  • (コンバータ) アニメーションカーブ出力の不具合を修正しました。

    • キーのフレーム位置がアニメーション区間タグの終了フレーム、あるいはカーブエディタのアニメーション再生終了フレーム上にあり、キーのスロープタイプがステップの場合に、キーがバイナリリソースに出力されない不具合を修正しました。

  • (コンバータ・ライブラリ) DMPGL の最終仕様に対応しました。

    • - L4, A4フォーマットのテクスチャに対応しました。
    - ６段までのテクスチャコンバイナに対応しました。
    - コンバイナのソースオペランドの新規の選択肢に対応しました。
    - コンバイナバッファに対応しました。
    - バイナリリソースのバージョンは 2.1.0.0 になります。

  • (ライブラリ) APIを変更しました。

    • - nw::lyt::TextureOwner クラスの廃止。
    TextureOwner クラスを ResourceAccessor クラスに統合しました。

    - nw::lyt::TextureContainer, nw::lyt::FontContainer クラスの追加。
    ResourceAccessor の具象クラスの実装に使うクラスを追加しました。

  • (サンプル) 実機 (TEG2) に対応しました。

    • 全サンプルが実機で動作するようになりました。

Version 1.1.0　2009-11-13

  • フォントのバイナリデータの 128バイトアライメント化に対応しました。

  • 幅と高さが 2のべき乗でないテクスチャに対応しました。

  • 読み込みに失敗したフォントを使っているテキストペインのフォントを設定しようとすると、例外が発生する不具合を修正しました。

Version 1.0.0　2009-10-30

  • 初版リリース


はじめに

このマニュアルは、NW4C LayoutEditor（以下 LayoutEditor）の使用方法について解説しています。
LayoutEditor を利用する際には、このマニュアルを活用してください。

マニュアルの表記規則

このマニュアルで記述されている表記規則について説明します。

メニューの表記

メニューとメニュー項目は、[メニュー名]→[メニュー項目名] と表記します。
例として、「ファイル」メニューの「開く」項目を示す場合は、[ファイル]→[開く] となります。

キーバインディングの表記

複数のキーを同時に使うキーバインディングは、＋マークで表記します。
例として、Ctrl キーを押しながら S キーを押す場合は、Ctrl+S となります。

NintendoWare インストールフォルダ

NintendoWare がインストールされたフォルダを $(NintendoWare_Root)と表記します。

LayoutEditor インストールフォルダ

LayoutEditor がインストールされたフォルダを $(LayoutEditor_Root)と表記します。

サンプルデータ

説明文中で使用しているサンプルデータは、$(LayoutEditor_Root)/sample 以下に格納されています。

現在、このマニュアルで参照しているサンプルデータは、リリースパッケージ内には一部のみしか含まれていません。

動作環境

.NET Framework

LayoutEditor を起動するには、Microsoft 社の .NET Framework ver3.5 SP1 が必要です。
ver3.5 SP1 以外の .NET Framework を使用した場合の動作の保証はできませんのでご注意ください。

DirextXエンドユーザランタイム

LayoutEditor はレイアウトウインドウの描画に DirectX を利用します。
DirectX がインストールされていない環境でも、動作は可能ですが、テクスチャマッピングや 頂点カラー等のパラメータがレイアウトウインドウ上で正しく確認できません。
そのため、DirextXエンドユーザランタイムをインストールしていただくことを推奨します。
LayoutEditor は Microsoft DirectX 9.0c(June 2007)で動作確認をしています。
そのため、DirectX 9.0c(June 2007)よりも新しいバージョンの DirectX をインストールしていただくことを推奨します。

DirectX のエンドユーザーランタイムは、以下のサイトからダウンロードしてインストールしてください。

DirectX エンドユーザーランタイムのダウンロード先
言語 | URL
日本語サイト | http://www.microsoft.com/japan/msdn/directx/downloads.aspx
英語サイト | http://msdn.microsoft.com/directx/sdk/default.aspx

フォントコンバータ

テキストボックスペイン（文字列）レイアウト機能を利用する場合は、フォントコンバータをインストールしていただく必要があります。


概要

LayoutEditor は、NintendoWare for CTR（以下 NintendoWare）でゲームのタイトル画面や、メニュー画面のような、2D レイアウトの編集を行うための Windows アプリケーションです。
この章では、LayoutEditor の概要、主な機能について説明します。

LayoutEditor について

LayoutEditor は、画像イメージファイルを読みこんで、2D レイアウト画面を作成、編集することができます。
また、作成した、レイアウトデータに対して様々なアニメーション効果を適用することができます。
作成したデータは、実機上で動作するビューアでのプレビューをすることができます。

LayoutEditor の位置づけ

NintendoWare 中での、LayoutEditor の位置付け、他のツールとの関連、データの流れについて以下に図示します。
データの流れ

LayoutEditor の機能

主な機能と特徴

LayoutEditor の主な機能と特徴を以下に示します。

画像ファイルの読み込み、配置
画像ファイル（NW4C用付加情報付き TGAフォーマット）を読み込んで、ゲーム画面の配置（レイアウト）データを作成することが可能です。
NW4C フォントファイルを利用した、文字情報の配置
NW4C フォントファイルを読み込んで、文字情報の配置を行うことが可能です。
高度なマテリアル表現の編集
配置した、画像に対して、CTR 固有の機能を利用した、高度なマテリアル表現を編集することが可能です。
アニメーション編集
作成した、配置データに様々なアニメーション効果を設定、編集することが可能です。
(SRT アニメーション、ビジビリティアニメーション、テクスチャ SRT アニメーション、テクスチャパターンアニメーション、マテリアルカラーアニメーション）
ゲーム画面配置に特化した属性の編集
ワイド画面配置への対応機能。ユーザ情報。境界領域編集など、ゲーム画面配置に特化した属性を設定、編集することが可能です。
プレビュー
LayoutEditorの内容をレイアウトビューアに転送し、配置やアニメーションをゲーム実機のエミュレーション表示によって確認することができます。
バイナリファイル出力
バイナリコンバータを駆動して、実機ランタイムが処理するバイナリファイルを出力することが可能です。

LayoutEditor で行えないこと

LayoutEditor では、以下に示すようなことはできません。

画像ファイル(付加情報付きTGA ファイルなど)の新規作成
画像ファイルを新規に作成することはできません。
別途、画像編集ソフトなどで作成する必要があります。


ペイン

ペインは画面に配置する、画像や文字などを表す矩形領域を表し、レイアウトデータを構成する基本単位となります。
LayoutEditor では、ヌル、ピクチャ、テキストボックス、ウィンドウ、境界 の 5 種類のペインを扱います。

ヌルペイン

他のペインをまとめたり、関連付けする場合に利用されるペインです。
基本的に、ヌルペイン自体が描画されることはありません。

使用例を以下に箇条書きにします。
・他のペインの親ペインとする。
・ゲームオブジェクトの表示位置指定に利用する。

ピクチャペイン

ピクチャペインは、画像を画面に配置するために使用されるペインです。
画像の表示パラメータについて詳細な調整を行うことが可能です。

テキストボックスペイン

テキストボックスペインは、文字列の配置に使用するペインです。
テキストボックスペインは、フォントとして、NintendoWare バイナリフォントファイルを使用します。
テキストボックスペインは、文字列に対して、カラー変更、サイズ変更、字間変更などのパラメータ調整を行うことが可能です。

ウィンドウペイン

ウィンドウペインは、テクスチャを複数枚組み合わせて、ウィンドウ(窓枠)オブジェクトを作成するペインです。
フレームと呼ばれる枠の部分と、コンテンツと呼ばれる枠の内側の部分に、画像を設定してウィンドウを作成することが可能です。

境界ペイン

境界領域を配置するのに使用するペインです。

サイズとスケール

ペインの大きさとして指定する数値に、サイズとスケールがあります。
サイズは、ペインそのものの大きさを表します。
スケールは親子階層構造のスケール値を表します。
したがって、親子階層設定時には、スケール値変更は、子供ペインに影響を与えます。
サイズ変更の場合は影響を与えません。
また、ウィンドウペインの場合には、スケール値変更はウィンドウペイン全体（フレームおよびコンテンツ領域）のサイズを変更（拡大縮小）しますが、
サイズ変更の場合はコンテンツ領域のサイズのみが変更され、フレームサイズなどは変化しません（拡大縮小されない）。
状況に応じて使い分けてください。


注意事項

全般

  • ペインの描画順
  • 表示・非表示設定と出力データ
  • IntelliPointとの相性問題について
  • 現在の時間と保存レイアウトの関係
  • 区間外キーフレームの固定処理


ペインの描画順序

レイアウトに配置された、ペインの描画順は、以下に示すような規則に従って描画されます。

  • 親ペインから子供ペインへと順に描画を行います。つまり子供ペインが上に描画されます。
  • 複数の子供ペインが存在する場合、子供ペインに割り振られた番号順に描画を行います。
    子供ペインの番号は、親子階層ウインドウで確認、変更が行えます。
    (親子階層ウインドウでの、ツリー項目は子供ペインの番号順に並んでいます。)
  • 上記の描画順とは別に、ペインの Z 値を設定すると、表示優先度を変更することができます。
    現在は、この Z 値による表示優先度設定は、ツール上の表示結果に反映されませんが、ビューアに転送することで確認ができます。
    ゲームプロジェクトで Z 値による表示優先度設定を有効にするには、ゲームプログラム側で Z 比較を有効にして描画を行うようにしてください。


表示・非表示設定と出力データ

ペインは、表示・非表示属性を設定できます。

処理の効率化と、ゲームプログラマの利便性を考慮して、実機プログラム（レイアウトライブラリ）は、 表示・非表示フラグをOFFに設定したペインの子供階層以下に対して、様々な処理を省略します。

たとえば、境界領域ペインに対する衝突判定処理も行われません。
この挙動によって、ゲームプログラマは非表示にしたペインの判定を簡単に省くことができます。

表示・非表示とよく似た機能で、”ペインを隠す”という機能があります。
これは、デザイナがツール上での編集の都合で一時的にペインを隠したい場合に利用するものです。
そのため、バイナリデータには設定が反映されません(つまり実際のゲームには反映されません)。


IntelliPointとの相性問題について

IntelliPoint（マイクロソフト社製マウス向けユーティリティソフト） がインストールされた環境で、DirectXモードでツールを 利用する際に、レイアウトウインドウの再描画によって、メニューや、 ウインドウが不正に上書きされてしまう不具合が確認されています。

この問題を回避するには、以下の方法が有効であることが確認されています。

  1. IntelliPointをver5.5よりも前にダウングレードする
  2. IntelliPointをWindows2000互換モードで動作させる

1.について、過去のバージョンのIntelliLPointはマイクロソフト社サイトでダウンロードが可能です。（インスタントビューア機能実装前のバージョンをインストールします）
2.について、実行ファイルiPoint.exeを右クリック->プロパティ->互換性タブから設定できます。


現在の時間と保存レイアウトの関係

LayoutEditorでは、現在の時間というパラメータが存在します。
現在の時間は、カーブエディタウインドウの、タイムスライダー等で設定されます。

アニメーションを利用したレイアウトを作成している場合、レイアウトは、 現在の時間に基づいて計算された、アニメーションの結果が反映された状態になっています。

ここで、レイアウトをファイルに保存した場合に、保存されるレイアウトは、 現在の時間におけるレイアウトである点に注意してください。

特に、レイアウトに対してアニメーションを再生せずに、そのまま利用することがある場合は、 表示結果が大きく異なってしまうため、注意が必要です。

アニメーション区間タグ等を利用して、長さ1フレームの規定状態を表すアニメーションを作成し、 必ず再生するようにするなどの制作方法もご検討下さい。


区間外キーフレームの固定処理

先頭(もっとも小さい時間値を持つ)キーフレームの時間値よりも、前のフレーム領域、 または、最終(もっとも大きい時間値を持つ)キーフレームの時間値よりも、後のフレーム領域のことを、 キーフレーム区間外領域と呼びます。

LayoutEditor は、キーフレーム区間外領域のカーブを自動的に計算する機能を持っています。

固定処理方法と出力データの違い

区間外キーフレームの固定処理は、LayoutEditorで行う方法と、バイナリコンバータで行う方法があります。
(バイナリコンバータで行う方法を選択した場合は、コンバータの引数に--bake-infinity オプションが指定されます。）
LayoutEditorのバイナリ出力機能では、この2つの方法を選択できます。

処理するデータの、”アニメーション区間タグ終端フレーム”と ”(キー自動生成の)ループ終端フレーム”が 一致する場合に、2つの処理方法で、終端フレームの出力値が異なって出力されます。

■タグ終端フレームの値
ツールが処理　　：ループ先頭フレームの値
コンバータが処理：ループ終端フレームの値

特にタグがワンタイムに設定されている場合、再生が終端値で停止しますので、 結果が大きく異なる可能性があります。
(ただし、終端フレーム再生後、すぐに次のアニメーション の再生が開始される場合は、どちらの出力でも問題になることは少ないはずです。)

LayoutEditorのバイナリ出力機能では、キーフレームの固定処理をどちらの方式で 行うか選択できます。
規定の動作では、コンバータによって固定処理を行います。
過去のバージョンのLayoutEditorとの互換動作をさせたい場合は、LayoutEditorで 固定処理をするように選択してください。


チュートリアル

基本的な操作

  • ツール環境をセットアップする
  • レイアウトを作成する
  • ピクチャペインを使用する
  • テキストボックスペインを使用する
  • ウィンドウペインを使用する
  • 親子関連付け、グループ機能を利用する
  • コピー＆貼り付け機能を利用する

基本的な操作(アニメーション編)

  • ペインアニメーションを作成する
  • テクスチャパターンアニメーションを作成する
  • キーフレーム区間外繰り返し機能を利用する

応用的な操作

  • アニメーション区間タグ機能を利用する
  • ワイド画面に対応したデータを作成する
  • テキストボックスペインの文字数を指定する機能を使用する
  • アニメーション共有機能を利用する

サンプルデモ

  • ゲームのタイトル画面をイメージしたデモ


チュートリアル

基本的な操作

  • ツール環境をセットアップする
  • レイアウトを作成する
  • ピクチャペインを使用する
  • テキストボックスペインを使用する
  • ウィンドウペインを使用する
  • 親子関連付け、グループ機能を利用する
  • コピー＆貼り付け機能を利用する


カラー

ツール環境をセットアップする

チュートリアルを開始する前に、開発環境のセットアップが正しく完了しているか確認をします。

PCエミュレーションプレビュー

LayoutEditor は編集中のデータをPC上のレイアウトビューアに転送して、プレビューする機能をもっています。
LayoutEditor は、ツール上でパラメータ操作の影響が確認のできないパラメータも多く存在します。そのため、レイアウトビューアの表示結果を確認しながらデータを編集していく必要があります。

プレビュー環境をセットアップする

プレビュー環境のセットアップ、レイアウトビューアの起動方法については、レイアウトビューアの章をご覧ください。


レイアウトを作成する

最初のステップとして、新規にレイアウトを作成し、ペインを配置、ビューアによるプレビュー、 データの保存といった、基本的な作業の流れについて説明をします。

レイアウトの新規作成

レイアウトエディタを起動し、[メニュー]→[ファイル]→[新規作成]→[レイアウト]として、レイアウトファイルを新規作成します。
画面に”Untitled.”というタイトルのウィンドウが開きます。このウィンドウをレイアウトウィンドウと呼びます。
レイアウトエディタでは、レイアウトウィンドウに画像イメージを配置することで、ゲーム画面のレイアウトを作成していきます。

レイアウトウィンドウの画面説明

レイアウトウィンドウの画面説明
レイアウトウィンドウを見ると、画面に黒色で四角が書かれていることに気がつきます。
この四角をレイアウト画面領域(A)と呼びます。レイアウト画面領域は、実機に表示される画面と対応しています。レイアウト画面領域はピクセル単位で設定可能です。
画面中央に書かれている赤い線は、レイアウト画面領域の座標系原点(B)です。レイアウト座標系は XY 軸 2 次元＋Z 軸 1 次元の 3 次元座標です。
画面右＝ X 軸正方向、上= Y 軸正方向、奥= Z 軸正方向となっています。

表示領域(ビュー)の移動

表示領域の移動
レイアウトウィンドウで、スペースキーを押すと、マウスカーソルが手のひらマークに変更(A)されます。
このとき、エディタはビュー変更モードになっています。
ビュー変更モード時にマウスをドラッグ(B)することで、ウィンドウの表示領域を変更することができます。

表示領域(ビュー)のスケール変更

表示領域(ビュー)のスケール変更
レイアウトウィンドウの右下に、100.0% と書かれたコンボボックスとスライダ、+、- ボタンが確認できます(A)。
これらを操作することで、ズームイン、ズームアウトを行うことができます。

ヌルペインの新規作成

[右クリックメニュー]→[ペイン作成]→[ヌルペイン]と選択します。

ヌルペインの作成
レイアウトウィンドウに、緑色の四角が現れました。これがヌルペインです(A)。
ペインは、画面上のひとつひとつの絵をあらわすレイアウトデータの最小構成要素です。
エディタは、ペインを配置してレイアウトを作成します。

ペインにはヌルペイン以外にも 4 種類のペインが存在します。 ヌルペインは補助的な役割を果たす、実際のゲーム画面には表示されないペインです。
今回は、基本操作の説明をわかりやすくするため、単純なヌルペインを使用して説明していきます。

ペインの選択
マウスでペインをクリックすると、ペインの色が赤くなります。これを選択状態のペインと呼びます。
エディタでは、様々な編集操作を選択状態のペインに対して行います。

プロパティの編集

ペインを選択して、[右クリックメニュー]→[プロパティ]とします。
画面にプロパティウィンドウが表示されます。
プロパティウィンドウでは、ペインのパラメータを編集することが可能です。

それでは、ペイン位置、形状グループからサイズの項目をクリックし、サイズを変更してみましょう。
レイアウトウィンドウ上で、選択ペインの大きさが変更されたことが確認できるはずです。

パラメータ操作のやり直し

ここで、レイアウトウィンドウをアクティブウィンドウにし、[メニュー]→[編集]→[取り消し]を選びます。
先ほどの操作が取り消されます。[やり直し]を選ぶと、取り消した操作がやり直されます。
LayoutEditor では部分的にアンドゥ・リドゥに対応しています。
開発の都合から、対応していない操作も沢山残っています。ご迷惑をおかけいたしますが、作業の際には十分ご注意ください。

エミュレーションによるプレビュー

LayoutEditor は、編集中のデータをレイアウトビューアに転送してPC上で最終的な表示結果を確認することが可能です。
これをエミュレーションプレビュー機能と呼びます。
プレビューを行うには、開発 PC に正しくビューア動作環境が整備されている必要があります。ビューア動作環境設定に関しては、ビューア関連ドキュメントを参照ください。

プレビュー方法は、[メニュー]→[ツール]→[ビューアに転送]を選びます。
転送中の表示があった後、数秒後にペインがレイアウト画面領域に対応して、PC上のビューア画面に表示されます。

プレビュー表示

ファイル保存

[メニュー]→[ファイル]→[保存]→[すべて]を選ぶと、作成したレイアウトデータを保存します。

ファイル名の入力
初回の保存時には、保存するファイル名を入力するダイアログが表示されます。
任意のファイル名を指定してファイルを保存してください。
レイアウトファイルの拡張子は clyt です。

保存したファイルの読み込み

ここで、一旦レイアウトウィンドウを閉じて、先ほど保存したレイアウトデータを読み込んでみます。
[メニュー]→[ファイル]→[開く]→[すべて]とすると、読み込むファイル名を選択するダイアログが表示されます。
先ほど保存したファイルを選択します。
レイアウトウィンドウが開き、先ほど保存したレイアウトが読み込まれていることが確認できます。

実機バイナリファイルの出力

LayoutEditor で作成したレイアウトデータは、最終的にバイナリファイルに変換して実機プログラムから利用します。
(詳しくは概要 を参照ください。) バイナリファイルへの変換はバイナリコンバータを使用します。
ツールのバイナリ出力機能を利用すると、コンバータを手軽に制御して、バイナリファイルを出力することが可能です。
[メニュー]→[ファイル]→[バイナリ出力]と選ぶと、バイナリ出力ダイアログが表示されます。
出力先などを指定して、出力ボタンを押すとバイナリファイルが出力されます。

その他

本ページで紹介してきた、[右クリックメニュー]→[...]の操作は、[メニュー]→[ペイン]→[...]とすることも可能です。


ピクチャペインを利用する

画像を画面に配置するために使用される、ピクチャペインに関して説明をおこないます。ピクチャペインの詳しい説明はこちら。

テクスチャウィンドウで画像ファイルを読み込む

ピクチャペインを配置するには、まずピクチャペインが使用する画像をテクスチャとして登録する必要があります。
テクスチャの登録はテクスチャウィンドウで行います。
まず、レイアウトを新規作成します。
次に、[メニュー]→[表示]→[サブウィンドウ]→[テクスチャ]を選びテクスチャウィンドウを表示状態にします。

テクスチャウィンドウ
テクスチャウィンドウの読み込みボタン(A)を押します。画像ファイルを選択する、読み込みダイアログが表示されます。
画像ファイルのフォーマットは NW4C TGA ファイルを使用します。ここでは、エディタに同梱されたサンプル画像ファイルを選択します。
（サンプル画像については、こちらをご覧ください。）
テクスチャウィンドウ左側のリストビューに、読み込んだ画像(B)が表示されます。

読み込み後

画像のファイルフォーマットに関する制限事項

画像ファイルのフォーマットは NW4C TGAファイルを使用します。
通常のTGA ファイルは、利用できません。
アルファ情報を利用する画像は 32 ビットフォーマット、アルファ情報を利用しない画像には 24 ビットフォーマットで TGA ファイルを作成してください。
NW4C TGAファイル を利用する場合には、NW4C TGAファイル作成時にフォーマットが決定されます。
LayoutEditor上でのフォーマット変更は行えない点に注意してください。

テクスチャを指定してピクチャペインを作成する

テクスチャウィンドウのリストビューの画像をクリックするとテクスチャ画像が選択状態(A)になります。

テクスチャを選択
テクスチャ画像を選択するとペイン作成ボタン(B)が有効になるので、ボタンを押してペインを生成します。レイアウトウィンドウに テクスチャを表示したピクチャペインが作成されたことが確認できます。

ピクチャペインを作成

ピクチャペインのプロパティを変更する

ピクチャペインを選択して、プロパティウィンドウを表示します。
プロパティウィンドウ左側のツリーから、ピクチャペイン情報(A)を選択します。
右側のページ(B)がピクチャペイン情報編集ページに切り替わります。

ピクチャペインのプロパティ

頂点カラーを変更する

ピクチャペインはペイン 4 隅の頂点の色を変更できます。
頂点カラーグループから四角内の各頂点文字ボタンをクリックします。
カラーピッカーが表示され対応する頂点の色を設定することができます。

確認のために、ビューアに転送します。
頂点カラーの変更
ビューア上で、4 隅の色が変更されていることが確認できます。

テクスチャ座標を変更する

ペインはテクスチャを貼ったポリゴンで表現されます。
テクスチャグループでは、テクスチャを貼るときに使用するテクスチャ座標を変更することが可能です。
効果の確認のために、ビューアに転送します。
頂点座標の変更
ビューア上で、テクスチャ座標が変更されていることが確認できます。

使用するテクスチャを変更する

左側のツリーから、テクスチャの項目を選択します。
テクスチャページでは、テクスチャに関するいろいろな設定が可能です。

画面中央の画像の変更ボタンをクリックします。
画像選択ダイアログが表示され、ピクチャペインの表示画像を変更することが可能です。
テクスチャページでは、複数枚のテクスチャを重ねたピクチャペインを作成したり、 貼り方を細かく制御したりすることが可能です。
テクスチャの変更


テキストボックスペインを利用する

文字列を画面に配置する場合に使用する、テキストボックスペインの説明をおこないます。
テキストボックスペインは、NintendoWare バイナリフォントファイルを使用して文字列の配置が可能です。 テキストボックスペインの詳しい説明はこちら。

テキストボックスペインを作成する

レイアウトファイルを新規作成し、、[右クリックメニュー]→[ペインの作成]→[テキストボックスペイン]を選択します。
テキストボックス作成ダイアログが表示されます。

テキストボックスペインの作成
ここで、あらかじめ作成しておいた、NintendoWare バイナリフォントファイルを指定します。
NintendoWare バイナリフォントの作成方法については、関連ドキュメントを参照してください($(NintendoWare_Root)/fontcvtr/docs/)。
指定した情報が正しければ、OK ボタンが有効になっているはずです。
OK ボタンを押してペインを作成します。
正しく、文字列がレイアウト領域に表示されているはずです。

作成されたテキストボックスペイン
文字が表示されない、または、表示されていない文字があるという場合は、フォントファイルに含まれていない文字を使用していないか確認してみてください。
アルファベット文字しか含まないフォントデータで漢字を指定している場合などが当てはまります。

テキストボックスペインのプロパティを調整する

プロパティウィンドウを開き、左側項目ツリーからテキストボックスペイン情報項目を選択します。

テキストボックスのプロパティ

使用フォントファイルの変更、レイアウト登録フォントの追加と削除

フォント情報グループ内の、フォントファイル名コンボボックスで、テキストボックスペインの使用するフォントを変更できます。
コンボボックスにはレイアウトに登録されているフォントが表示されています。レイアウトに新たにフォントを登録するには、コンボボックス横のボタンを押してファイルを指定します。
使用されなくなったフォントは自動的に登録削除されません。[メニュー]→[ツール]→[未使用フォントを削除]を実行して未使用のフォントを削除してください。
特にプログラマに提出する最終データを出力する際には、本処理を忘れずに行うようにしてください。

未使用フォントの削除

制御文字列の利用

テキストボックスの文字列中で '^' 文字は制御文字列として利用することが可能です。
レイアウトコンバータは、'^' 文字以降の 2 文字を 16 進数の数字(0x00 ～ 0x1F)として解釈し、制御コードに置き換える変換処理を行います。
制御コードを実機プログラム中で解釈することで、テキストボックスペインの挙動をユーザ拡張することが可能となります。
これによって、たとえば、文字列の途中で文字色や、文字サイズを変更したり、画像イメージを表示したりするような処理を行うことが可能です。

現状は、あくまでも、ユーザ拡張を行って利用していただくことが前提となります。
ビューアや、ライブラリが標準でサポートしている制御コードはございませんので注意してください。
なお、不正な指定があった場合には、'^' 文字が消去され、続く 2 文字が通常の文字として表示されます。
また、コンバータにオプションを指定することで、変換処理を無効にすることも可能です。


ウィンドウペインを利用する

ここでは、ウィンドウペインの説明を行います。
ウィンドウペインは、テクスチャを複数枚組み合わせて、ウィンドウ(窓枠)オブジェクトを作成するための機能です。
フレームと呼ばれる枠の部分と、コンテンツと呼ばれる枠の内側の部分に、画像を設定してウィンドウを作成することが可能です。

ウィンドウペインを作成する

レイアウトファイルを新規作成し、[右クリックメニュー]→[ペインの作成]→[ウィンドウペイン]を選択します。
レイアウト領域に緑枠に白色のペインが表示されます。

ウィンドウペインの作成
この状態のウィンドウペインは、画像が設定されていない状態です。
正しくウィンドウとして表示するためにはテクスチャを設定する必要があります。

テクスチャの設定

テクスチャの設定を行うには、まずテクスチャウィンドウを使用して画像をテクスチャとして登録しておく必要があります(テクスチャの登録についてはこちら)。

テクスチャの登録が完了したら、ペインのプロパティウィンドウを開き、左ツリー項目から、ウィンドウペイン情報項目を選択します。
右側に、ウィンドウペインプロパティ編集ページが表示されます。
ページ中の編集する画像・マテリアルのグループで、画像を設定する対象部分を指定します。

ウィンドウペインのプロパティ

ここで、コンボボックスから、「フレーム：４隅：左上(LT)」を選択します。
これで、画像の設定対象がウィンドウフレームの 4 隅に変更されたことになります。
コンボボックスの隣の画像で、赤く表示されている部分が、四角の中心から、四角の 4 隅に変更(A)されたことが確認できるはずです。

フレームの選択
ここで、左ツリー項目から、テクスチャ項目を選択し、テクスチャ設定ページを表示します。
追加/削除グループの登録ボタンをクリックして、先ほど登録したテクスチャを、新規に追加します。

テクスチャを選択
先ほどウィンドウペイン情報で設定した、画像の設定対象に対してテクスチャの設定が行われます。
ウィンドウの別の部分の画像を設定する場合には、ウィンドウペイン情報ページに移動して、設定対象を変更後、同じ操作を繰り返します。

ウインドウ完成例
設定が完了すると以下のような、ウインドウが表示されます。

設定対象の変更方法

設定対象は、前述のコンボボックスで対象を選択する方法のほかに、レイアウトウインドウで選択中のウインドウペインの各部位をクリックすることでも変更することができます。


親子階層、グループ機能を利用する

ここでは、親子階層、グループ機能の説明をおこないます。
親子階層構造を使うことによって、関連のある複数のペインをまとめて操作したり、関連して操作することが可能となります。

グループ機能も、親子階層と同様に関連のある複数のペインをまとめる概念です。
以下のような、親子階層では表現しにくい集団を表現するときに使用します。

・複数の階層をまたぐようなペインの集団をまとめる場合
・ペインが同時に複数の集団に所属しているような場合

レイアウトウィンドウで親子階層を作成する

例として、レイアウトファイルを新規作成し、ヌルペインを2つ作成します。

ヌルペインを２つ作成
[右クリックメニュー]→[親子設定]を選びます。
マウスカーソルが変化して、親子設定モードになっていることが確認できます。

親子設定モード
親子設定は親ペインから、子供ペインへと直線を結ぶような操作で設定を行います。
まず、親ペイン上でドラッグを開始します。親ペインが正しく選択された場合は、マウスカーソルにむかって直線が描画されます。
この直線を子供ペインに結ぶようにマウスカーソルを子供ペインまで移動します。
マウスカーソル下のペインが子供ペインとしてふさわしい場合は、2 つのペインが赤くハイライト表示されます。

子ペインを選択
ふさわしいペイン上でマウスボタンを離すと、親子階層が正しく設定されます。

親子としてふさわしくない条件を以下に箇条書きにしておきます。
・指定ペインが自分である。
・指定ペインが自分の親である（”親の親”のような場合も同様です）。

親ペインの位置をマウスで変更してみましょう。子供の位置も親に追従して変化するはずです。
変化しない場合は、[メニュー]→[ペイン]→[親の平行移動操作を子に影響させる]が有効か確認してみてください。

親の平行移動操作を子に影響させる

[メニュー]→[ペイン]→[親の平行移動操作を子に影響させる]で、親の平行移動操作を子に影響させるかどうかを切り替えることができます。
また、Ctrl キーを押すことで、操作モードを一時的に反転させることができます。
現在の操作モードは、レイアウトウィンドウのステータスバー右端のアイコンで確認することができます。

親の平行移動操作を子に影響させる

レイアウトウィンドウで親子階層を解除する

親子設定の解除の手順は、設定の時とほぼ同様です。
[右クリックメニュー]→[親子解除]を選びます。
解除したい親子階層の親ペインと、子ペインを直線で結ぶようにマウス操作を行います。

親子設定の解除

親子階層ウィンドウを利用する

[メニュー]→[表示]→[サブウィンドウ]→[親子階層]をえらび、親子階層ウィンドウを表示します。 親子階層ウィンドウでは、レイアウト中の親子階層関係を一覧することが可能です。
親子階層ウィンドウ

親子階層ウィンドウで親子階層を作成、解除する

まず、子供となるペインに対応するツリー項目をドラッグします。
子ペインをドラッグ
ドラッグしたツリー要素を、親となるペインに対応するツリー項目にドロップします。
子ペインをドロップ
2 つのペインが親子階層を設定するための条件を満たしていれば、親子階層が設定されます。

親子階層を変更
解除するには、他の親に対して関連付けを行うか、RootPane に対して、親子設定を行ってください。

親子階層に沿ったパラメータの変更

ウインドウ左端の目アイコンと、鍵のアイコンをクリックすることで、指定されたペイン以下の階層をロック状態にするなど、ペイン親子階層に沿ったパラメータの変更を行うことができます。

この階層以下をロックを実行

ノードの複数選択

CtrlキーやShiftキーを押しながらノードを選択することで、複数ノードを同時に選択することが可能です。
多数のペインに対して選択や、操作を行いたいときに利用します。

グループを作成する

グループを作成するには、レイアウトウィンドウで複数のペインを選択します。
この状態で、[右クリックメニュー]→[グループを作成]を選びます。
選択されたペインが、グループとして登録されます。
レイアウト中のグループを確認するには、グループウィンドウを使用します。
グループウィンドウは、[メニュー]→[表示]→[サブウィンドウ]→[グループ]とすることで表示・非表示を切り替えることができます。

グループウィンドウ

グループを削除する

グループを削除するには、グループウィンドウを使用します。
削除したいグループに対応するツリー項目を選択し、[機能]→[削除]を実行します。

グループを編集する

グループを編集するには、ペイングループ編集ウィンドウを使用します。
グループ編集をしたいペインを選択して右クリックメニューから、[グループを編集]とします。
また、グループのメンバーを変更する場合は、ペインを選択後[右クリックメニュー]→[グループを編集]で表示される、 ペイングループ編集ダイアログを利用します。


コピー、貼り付け機能を利用する

コピー＆貼り付け機能を利用する

ここでは、コピーと貼り付け機能の説明を行います。

ペインを複製する

一般的な、コピー、貼り付けと同様に、以下の操作でコピー貼り付け操作を行うことが可能です。

[メニュー]→[編集]→[コピー]
[メニュー]→[編集]→[貼り付け]

新規に、コピーしたペインと同一のパラメータを持つペインが複製されたことが確認できます。

ペインの複製
ここで、アニメーションに関連する情報は、コピーされない点に注意してください。
アニメーション情報をコピーするには、後述のコピー貼り付け制御ウィンドウを利用します。
階層構造については、コピーされます。グループ情報に関しては、コピーされません。

ペイン情報貼り付け制御ウィンドウを利用する

以下のような操作を行う場合に、ペイン情報貼り付け制御ウィンドウが利用できます 。

・既存のペインに対して、ペイン情報の一部分だけを貼り付けて上書きしたい。
・複数のペインに対して、一斉に貼り付け処理を行いたい。
・アニメーションデータを貼り付けたい。

ペイン情報貼り付け制御ウィンドウの表示切り替えは、
[メニュー]→[表示]→[サブウィンドウ]→[ペイン情報貼り付け制御]で行うことが可能です。

ペイン情報の一部分だけを貼り付けて上書きする

まず、コピー元ペインを選択してコピーを実行します。このとき、コピー元のペインは、単数ペインである必要があります。
次に、貼り付け先のペインを選択します。ペイン情報貼り付け制御ウィンドウの表示が変更され、有効な項目が変化することが確認できます。
貼り付け元と、貼り付け先が、同じ情報項目を持っている場合は、有効な項目として判定されます。
有効な項目のうち、コピーしたい項目にチェックをします。
ウィンドウ下部の「選択ペインに貼り付け」をクリックします。
選択ペインに対して、指定の情報が貼り付けられていることが確認できます。

回転のみを貼り付け

ベクトル成分貼り付け制御

この機能を使用すると、貼り付ける情報のなかで、ベクトル情報に相当する情報について、貼り付ける成分を制御することができます。
たとえば、サイズパラメータの X 成分だけを貼り付けることによって、ペインの幅だけを貼り付けるような操作を行うことが可能になります。

サイズのX成分のみを貼り付け
この設定は、ベクトル情報形式のパラメータ全体に対する設定になります。(つまり、位置とサイズで共有される設定となります。)
色成分貼り付け制御も同様の制御を色（RGBA）形式のパラメータについて行うことが可能です。

アニメーション情報の貼り付け

通常のパラメータと同様に、アニメーションを貼り付けることが可能です。
貼り付け先のキー情報を置き換えるを有効にした場合、貼り付け操作前に、現在のキーフレームを消去します。
そのため、貼り付け先の情報が、貼り付け元の情報によって、完全に置き換えられます。


チュートリアル

基本的な操作(アニメーション編)

  • ペインアニメーションを作成する
  • テクスチャパターンアニメーションを作成する
  • キーフレーム区間外繰り返し機能を利用する


ペインアニメーションを作成する

ここでは、レイアウトに配置したペインにアニメーション効果をつける方法を説明します。

アニメーションの基本的な流れ

レイアウトエディタではキーフレームアニメーションという手法でアニメーションを作成します。
大まかな手順として、まずアニメーションしていないレイアウトを作成し、そのレイアウトに対してキーフレームを設定することでアニメーションするレイアウトを作成します。

カーブエディタウィンドウ

アニメーションを作成するレイアウトを開きます。
$(LayoutEditor_Root)/sample/layout_anim/tutorial/pane_anm.clyt を開いてください。
（最終的なレイアウトは、$(LayoutEditor_Root)/sample/layout_anim/tutorial/pane_anm_fin.clyt に格納されています。）

[メニュー]→[表示]→[サブウィンドウ]→[カーブエディタ]
アニメーションの編集には、カーブエディタウィンドウを使用します。
[メニュー]→[表示]→[サブウィンドウ]→[カーブエディタ]を選択して、カーブエディタを表示状態にします(A)。

ペインを選択
ここで、先ほど開いたレイアウトウィンドウから、ハートのペインをクリックして選択します。
カーブエディタの左側ツリーに項目が表示され、選択ペインがアニメーション編集対象として設定されたことが確認できます(A)。

アトリビュートツリー

アトリビュートツリー
カーブエディタの左側ツリーをアトリビュートツリーと呼びます(A)。
アトリビュートツリーには、レイアウトウィンドウで選択されたペインが持っている、アニメーションする要素が表示されます。
（アニメーションする要素のことをアトリビュート、アニメーションアトリビュートと呼びます。）
アトリビュートは子アトリビュートを持つことができます。子アトリビュートをもったアトリビュートは左端に＋マークが表示されており、クリックすることで子アトリビュートを展開して表示します。
アトリビュートをクリックすると、アトリビュートの文字が太字になり選択状態になります。
また、自分もしくは、自分の子アトリビュートがキーフレーム情報を持っている場合は文字が赤色で表示されます。
アニメーションを作成する場合には、このツリーの中から自分の編集したいアトリビュートを選択してアニメーションデータを編集します。

グラフ表示領域
カーブエディタのグラフ表示領域(A)には、前述のアトリビュートツリーで、選択されているアトリビュートの情報が表示されます。
グラフ表示領域の横軸は、時間、縦軸は各アトリビュートの値を表しています。

キーフレームの編集

ここでは、キー編集の準備として、グラフ表示領域の表示範囲の変更方法を説明します。

表示領域の移動、スケール変更

表示領域移動前
スペースキーを押しながら、グラフビューを左ドラッグすると、表示領域を移動します。
表示領域移動後
スペースキーを押しながら、グラフビューを右ドラッグすると、表示領域のスケールを増減します。
表示領域のスケール変更
横方向のドラッグの場合は、時間軸、縦方向のドラッグの場合には、値軸のスケールが変化します。 なお、Shift キーを押しながら操作をすることで、変化する軸を固定することが可能です。

また、F キーで、選択部分が全体表示され、A キーで表示対象が全体表示されます。
設定したキー情報を見失ってしまったときに利用してください。

ペインの位置をアニメーションさせる

それでは、ペインの位置をアニメーションさせてみましょう。[PaneNode]→[pane]→[pos]→[fX]と、ツリー項目を展開、クリックし、fX アトリビュートを選択します。

キーを作成
ここで、[メニュー]→[キー作成]もしくは、S キーを押します。
グラフビューに黒い点としてキーフレームが作成され(A)、キー情報ビューに赤い四角が描画されたこと(B)が確認できます。
表示されない場合は、表示領域がずれている可能性があります。A キーを押して、全体表示を行ってください。

時間コントロールビューをクリック
次に時間コントロールビュー(A)をクリックします。青い四角が移動して、現在の時間が変化したことが確認できます 。
このとき、同時にカーブエディタウィンドウ下部の時間コントロールパネルの現在の時間も更新されています(B)。

２つめのキーを作成
現在の時間を変更した後、ふたたび[メニュー]→[キー作成]でキーを作成します。
キーフレームとキーフレームの間が濃い赤い線で結ばれたことが確認できます(A)。これをアニメーションカーブ、もしくは単にカーブと呼びます。
現時点では、カーブはただの直線です。これを編集してみます。
グラフビューでマウスを左ドラッグすると、矩形選択が可能です。右側のキーフレームを選択してみてください。

２つめのキーをドラッグ
選択されたキーの上に、赤い横線と、点が表示されたことが確認されます(A)。ここで右ドラッグします。
選択されたキーが移動し、それにともなってキーの間のカーブが変形します(B)。

アニメーションを再生
時間コントロールパネルの再生ボタンをクリックします(A)。アニメーション再生が開始されカーブに沿ってパラメータが変化することが確認できます。
今回は、ペインの X 座標がカーブに沿って変化しています。
アニメーションの再生を停止するには、時間コントロールパネルの停止ボタンをクリックします(B)。 このように、カーブの形を編集することでアニメーションを作成していきます。

メモ：Ctrl キーを押しながらキーフレーム変更を行うと、時間軸固定、値軸固定でパラメータ調整が行えます。
Ctrl キーを押しながら、最初にドラッグした方向で、移動軸が固定されます。

スロープの編集

キーフレームに対するスロープ種類の設定

キー選択状態で、メニューのボタンを選択することによって、キーフレームに対して、スロープの種類を設定することが可能です。 現在は、スプライン（スムーズな補完）、線形（直線的な補完）、フラット（スロープの傾きがゼロに固定される補完）、ステップ （段階的なスロープ形状をもつ補完）を指定できます（各図）。
スロープの種類が指定されているキーフレームのスロープ値は自動的に設定されます。
スプライン

線形

フラット

ステップ

キーフレームのスロープの個別編集

前述のスロープ種類設定とは別に、ユーザが任意のスロープ値をキーフレームに対して設定することも可能です。

キーを選択
キーを選択します。
キーの上に両端に点の書かれた赤い線が表示されます。これがスロープをあらわしています(A)。

スロープを選択
制御点を矩形選択します。スロープが黄緑色に変化しました。これば、スロープが選択された状態です(A)。
ここで、右ドラッグをするとスロープを変化させることができます。スロープが変更されると、キーの間のカーブの形が変化します。

スロープを編集１

スロープを編集２

スロープを編集３
スロープを編集することで、より多彩なアニメーションカーブを編集することが可能です。
スロープを編集したキーフレームは、固定されたスロープを持つキーフレームとして設定されます。
以降のキーフレーム調整時には、スロープ値が自動的に計算されない点に注意してください。

プレビュー

作成したアニメーションをレイアウトビューアで確認する方法は、通常のレイアウトの場合とまったくおなじです。
[メニュー]→[ツール]→[ビューアに転送]としてください。ビューア環境が正しく設定されている必要がある点も同様です。よく確認してください。

時間コントロールパネルの中央よりの数値は、アニメーション再生フレーム区間を表しています。
ここで指定された範囲ツールはアニメーションの再生ループをします。
また、ビューアに転送される時間区間もアニメーション再生フレーム区間となります。

ファイル出力

作成したアニメーションを保存する場合は、レイアウトを保存する場合と同様に、[メニュー]→[ファイル]→[保存]→[すべて]とします。
レイアウト情報と同時に、アニメーション情報が保存されます。
アニメーション情報のファイル拡張子は、clanです。
アニメーションの種類ごとに個別にファイル出力することも可能ですが、通常の場合は必要とならないでしょう。

読み込む場合も同様に、[メニュー]→[ファイル]→[開く]→[すべて]とするとレイアウトと同時にアニメーションが読み込まれます(このとき読み込まれるアニメーションは、レイアウトと同一ファイル名のアニメーションとなります)。

[メニュー]→[ファイル]→[開く]->[ファイル種類を指定して開く]→[レイアウト]
[メニュー]→[ファイル]→[追加で開く]->[ファイル種類を指定して開く]→[アニメーション]
以上のような操作で、アニメーションとレイアウトを別々に読み込むことも可能です。
ひとつのレイアウトに対して、複数のアニメーションを別のファイル名で作成するような使用方法も可能です。
ただし、後述するアニメーション区間タグ機能を使用するとそのような運用をするケースは少なくできるはずです。

バイナリ出力

[メニュー]→[ファイル]→[バイナリ出力]からバイナリファイルを出力可能です。 出力されるキーは、時間コントロールパネルのアニメーション再生範囲区間内のキーとなります。
アニメーションの種類ごとの出力制御、など細かな制御が可能です。詳細はこちら。


テクスチャパターンアニメーションを作成する

ここでは、ピクチャペインにテクスチャパターンアニメーション効果を設定する方法を説明します。

テクスチャパターンアニメーション作成の基本的な流れ

テクスチャパターンアニメーションアニメーションの実態は、ピクチャペインの参照するテクスチャ番号の切り替えアニメーションです。
まず、ペインのテクスチャ設定に、テクスチャパターンリストを登録します。
次に、そのパターンリストのどのテクスチャを表示テクスチャに使用するかをアニメーションキーで設定していきます。
テクスチャを指定する方法は、パターンリスト中の通し番号を使用します。
つまり、テクスチャパターンアニメーションの実態は、テクスチャ番号アニメーションとなります。 以上が、基本的なテクスチャパターンアニメーション作成の手順です。
サンプルレイアウト、$(LayoutEditor_Root)/sample/layout_anim/tutorial/texture_pattern_anm.clyt を開いてください。
(最終的なレイアウトは、$(LayoutEditor_Root)/sample/layout_anim/tutorial/texture_pattern_anm_fin.clyt に格納されています。)

なお、後述する連番テクスチャから、テクスチャパターンアニメーションペインを自動生成する機能を利用すると、テクスチャパターンアニメーションが簡単に作成できます。
複雑なデータを作成する場合や、沢山のパターンアニメーションを作成する場合などは、連番テクスチャを使ったパターンアニメーション作成方法を検討下さい。

テクスチャパターンリストの登録

テクスチャパターンアニメタブを選択
テクスチャパターンリストを登録するには、ペインのプロパティウィンドウからテクスチャ項目ページを選択します(A)。
テクスチャ項目ページ下部から、テクスチャパターンアニメタブを選択します(B)。

テクスチャパターンリストに追加
テクスチャパターンアニメタブの左側には、レイアウトに登録されているテクスチャ一覧が表示されています。
右側が、これから作成するテクスチャパターンリストです(A)。 テクスチャパターンリストにテクスチャを登録するには、左のリストから、テクスチャを選択し、中央にある追加ボタンをクリックしてください(B)。 選択したテクスチャがテクスチャパターンリストに登録されます(C)。 登録したテクスチャの削除、順番の入れ替え操作も行うことが可能です。
前述のように、パターンアニメを作成時には、テクスチャパターンリストの番号行に表示された数値を使用して、切り替えるテクスチャを指定します。

パターンアニメーションキーフレームの作成

テクスチャパターンリストの登録が完了したら、パターンアニメーションのキーフレームを作成します。 対象となるペインを選択して、カーブエディタウィンドウを表示してください。
テクスチャパターンアニメ項目を選択
編集対象アトリビュートから、[PaneNode]→[Picture]→[Material]→[MaterialTexMap[N]]→[Texture[N]]→[TexPatternAnm[N]]として、 テクスチャパターンアニメ項目を選択してください(A)。 N はテクスチャ番号をあらわす任意の数字です（例 N = 0 ）。 [PaneNode]→[Picture]→の部分は、マテリアル情報を持つ、他の種類ペインの場合（例：Window ペイン）には、変化します。
ステップ形式のアニメーションカーブ
編集対象を設定したら、任意のキーフレームを作成します。
テクスチャパターンアニメのカーブ形状は、補完が存在しないステップ形式です(A)。また、キーの値は整数値となります。

ここで、先ほどのテクスチャパターンリストに存在しない番号を指定しないように注意してください。
不正な番号を持つキーは無視されます。

作成が完了したら、アニメーションを再生してみます。
作成したカーブに沿って、テクスチャが切り替わっていることが確認できます。

テクスチャパターンアニメーションの保存と読み込み

テクスチャパターンアニメーションの保存は、[メニュー]→[ファイル]→[保存]→[すべて]とします。
レイアウト情報を保存する clyt ファイルと、 アニメーション情報を保存する clan ファイルが出力されます。

ここで、テクスチャパターンリストがレイアウトファイルではなく、アニメーションファイルに保存される点にご注意ください。

この仕様の確認のために、レイアウトファイルを読み込んでみます。

[メニュー]→[ファイル]→[開く]→[ファイル種類を指定して開く]→[レイアウト]として、先ほど保存したデータのレイアウトファイルを読み込みます。
テクスチャパターンアニメを設定したペインのテクスチャプロパティを参照すると、先ほど設定したテクスチャパターンリストが無くなっています。
これは、テクスチャパターンリストがアニメーションファイルに保存されているためです。
次に、[メニュー]→[ファイル]→[追加で開く]→[ファイル種類を指定して開く]→[アニメーション]を選択して、アニメーションファイルを読みこみます。
テクスチャパターンリストが読み込まれていることが確認できます。

連番テクスチャの読み込み機能を利用した、テクスチャパターンアニメの作成

連番テクスチャの読み込み機能を利用すると、指定したフォルダ内に存在する、特定の命名規則にしたがって番号付けされたファイル群(連番テクスチャと呼びます）をまとめて読み込んで、それらのテクスチャによるパターンアニメを行うペインを自動生成することができます。
連番テクスチャの読み込み機能は、[メニュー]→[ツール]→[連番テクスチャの読み込み]とします。

設定ダイアログでは、連番テクスチャの入力先をフォルダで指定します。
ダイアログ内のファイルから、連番テクスチャを判定して読み込みを行います。
連番テクスチャは TextureName.XXX.tga(XXXは任意の番号) のような形式で指定してください。

各種パラメータを設定し、読み込みを実行するとテクスチャパターンアニメをするピクチャペインがレイアウトに生成されます。


カラー

キーフレーム区間外繰り返し機能を利用する

ここでは、キーフレーム区間外繰り返し機能を利用して、効率よくアニメーションデータを作成する方法を説明します。

キーフレーム区間外領域

キーフレーム区間外領域
先頭(もっとも小さい時間値を持つ)キーフレームの時間値よりも、前のフレーム領域、
または、最終(もっとも大きい時間値を持つ)キーフレームの時間値よりも、後のフレーム領域のことを、キーフレーム区間外領域と呼びます(A)。
通常、キーフレーム区間外領域では、カーブが定義されていません。
LayoutEditor は、キーフレーム区間外領域のカーブを自動的に計算する機能を持っています。

区間外繰り返しを利用したデータの作成

まず、サンプルレイアウトを読み込みます。[メニュー]→[ファイル]→[開く]→[すべて]から、$(LayoutEditor_Root)/sample/layout_anim/tutorial/infinitycycle.clyt を読み込みます。
(最終的なレイアウトは、$(LayoutEditor_Root)/sample/layout_anim/tutorial/infinitycycle_fin.clyt に格納されています。)

サンプルファイルを開く
ペイン SRT アニメーションが設定されたペインが配置されたレイアウトが確認できます。
ペインのアニメーションは 1000 フレーム周期のゆったりとした動きです。
このアニメーションに、ペインのサイズを 30 フレーム周期で変化させるようなアニメーションを追加する場合を考えます。

30フレームのサイズアニメーションを作成
まず、30 フレームのサイズアニメーションを作成します。
次に、[カーブ]メニューにあるツールボタンから、[キーフレーム区間以後の設定]→[繰り返し]を選びます。
このとき、透明度のアニメーションアトリビュートが選択されていることを確認してください(A)。 [キーフレーム区間以後の設定]コマンドは、選択カーブに対して適用されます。

区間外で繰り返し
最終フレーム以後のフレームに、作成したカーブと同じ形を繰り返すように、半透明のカーブが描画されたはずです。
表示が変化しない場合は、[表示]→[キーフレーム区間外を描画する]がチェックされているか確認してください。

実際に、アニメーションを再生してみましょう。自動的に計算されたカーブに沿ってアニメーションしていることが確認できます。

区間外繰り返しを利用したデータのプレビュー

区間外繰り返しを利用したデータも通常の場合と変わりなくプレビューが可能です。
[メニュー]→[ツール]→[ビューアに転送]とするとレイアウトビューアに作成したアニメーションが表示されます。

ツールはレイアウトビューアにデータを転送する際に、区間外繰り返し部分のキーフレームを自動生成する処理を行っています。
この処理のことを、区間外カーブのキーフレームへの焼付けと呼びます。
焼付け処理の ON / OFF は[メニュー]→[編集]→[ツール環境設定]から制御することが可能です。

なお、焼付け処理のために出力された clan ファイルなどを LayoutEditor に読み込んで、
再度編集するような操作はサポートされておりません。

区間外繰り返しを利用したデータのバイナリ出力

区間外繰り返しを利用したデータも通常の場合と変わりなくバイナリ出力が可能です。
[メニュー]→[ファイル]→[バイナリ出力]とするとバイナリファイルが出力されます。
バイナリ出力の際に、キーフレームへの焼付けを行うかどうかを制御することもできます。

焼付けを行う(区間外繰り返し部分のキーフレームを自動生成する)場合、処理については、LayoutEditor で行う方式とバイナリコンバータで行う方式を選択できます。
そのときの注意点など詳しくは「区間外キーフレームの固定処理」をご覧ください。


チュートリアル

応用的な操作

  • アニメーション区間タグ機能を利用する
  • ワイド画面に対応したデータを作成する
  • テキストボックスペインの文字数を指定する機能を使用する
  • アニメーション共有機能を利用する


アニメーション区間タグ機能を利用する

ここでは、アニメーション区間タグ機能の利用方法を説明します。
LayoutEditor では、アニメーションに使用される、時間フレーム区間に、タグ情報を設定することが可能です。これをアニメーション区間タグと呼びます。

アニメーション区間タグの利点

アニメーション区間タグは、タグ名、フレーム区間（開始フレーム、終了フレーム）、バイナリ出力に関する設定などからなります。
バイナリコンバータは、タグ情報を解釈して、タグごとに別のバイナリファイルとしてファイルを出力することが可能です。
そのため、ゲームプログラムの都合から、複数のバイナリに分割して出力する必要があるようなアニメーションを、ひとつのアニメーションファイルにまとめて管理することができます。

アニメーション区間タグ編集ウィンドウ

アニメーション区間タグ編集ウィンドウ
アニメーション区間タグ編集ウィンドウでは、アニメーション区間タグの登録、削除、編集を行うことが可能です。
アニメーション区間タグ編集ウィンドウの表示切り替えは、
[メニュー]→[表示]→[サブウィンドウ]→[アニメーション区間タグ編集]で行うことが可能です。

タグを登録するには、追加ボタンをクリックし、タグ追加ダイアログを表示します。

タグ追加ダイアログ
ここで、新規に追加するタグ情報を入力してください。
入力内容に問題が無ければ、OK ボタンが有効になっているはずなので、OK ボタンをクリックします。

タグ内容の変更
タグ一覧リストに新規にタグが追加されていることが確認できます(A)。
登録したタグの内容を変更するには、タグリストから変更したいタグ項目を選択します(A)。
選択したタグの情報が、表示されるので変更します(B)。
対象グループ指定ボタン(C)を押すと、対象グループ指定ダイアログが表示され、タグがあらわすアニメーションの対象となるペインをグループで指定することが可能です(後述)。
バイナリ出力グループ(D)では、バイナリ出力に関する詳細設定を行うことが可能です。

関連グループ

タグ区間に関連するグループを設定することによって、タグ区間があらわすアニメーションの対象ペインを限定することができます。
この機能によって、画面の特定部分だけが変化するようなアニメーションを作成することができます。
また、この機能を反映したアニメーション再生をビューアで確認することができます。


ワイド画面に対応したデータを作成する

ここでは、ワイド画面表示に対応したデータの作成方法を説明します。
レイアウトライブラリには、通常画面比率用に作成されたレイアウトデータを、ワイド画面に調整して表示する機能があります。
(具体的には、ワイド画面に表示することによって引き伸ばされる分を、あらかじめ縮小することによって、最終的にゲーム画面に表示される絵が変化しないようにする機能です。)
この調整機能を利用することで、新規にワイド画面用のレイアウトデータを作成することなくワイド画面表示に対応することが可能になります。

調整機能の概念
LayoutEditor には、ペインに対して、調整機能の対象とするかどうかを設定する機能があります。

ワイド画面のための調整機能

位置調整処理の対象とするをチェック
調整処理の対象に設定するには、プロパティウィンドウのペイン基本情報ページから位置調整処理の対象とするをチェック(A)します。
次に、設定したデータをビューアに転送します。

ノーマルとワイドの切り替え


テキストボックスペインの文字数を指定する機能を使用する

ここでは、テキストボックスペインの文字数を指定する機能の利用方法を説明します。
LayoutEditor では、出力したテキストボックスペインに対して、ランタイムライブラリで実行時に確保する文字列バッファの長さを文字数単位で指定することができます。

文字数を指定する機能の利用例

文字数を指定する機能は、プログラムによって、実行時に文字列を変更する必要がある場合に利用されます。
具体的には、プレイヤーの名前や、メッセージウィンドウ内の文字列などです。

文字数を指定方法

文字数を指定するには、テキストボックスペインのテキストボックスペイン情報ページから、 文字列の長さを強制的に指定するをチェック(A)します。

文字列の長さを強制的に指定するをチェック


アニメーション共有機能を利用する

ここでは、アニメーション共有機能の利用方法を説明します。

アニメーション共有とは

ゲームのメニュー画面などのレイアウト作成する場合を考えると、多くのアイテムで同じアニメーション動作を行うような場合が少なくありません。
たとえば以下のような場合があります。

  • メニューボタンにカーソルが衝突した時に再生されるアニメーション
  • メニューボタンで決定操作が行われた時に再生されるアニメーション

アニメーション共有機能は、このようなデータを効率的に作成するために存在します。
アニメーション共有機能を利用することで、同じアニメーションをたくさん複製したり、プログラマとの間で取り決めをして特別な処理を行うことなくアニメーション共有を実現できます。
また、その結果は、レイアウトビューアで確認することが可能です。

アニメーション共有情報を作る

アニメーション共有を設定するためには、アニメーション共有情報ウインドウで、共有情報を作成します。

アニメーション共有情報ウインドウの表示

[メニュー]→[表示]→[サブウインドウ]→[アニメーション共有情報]と選択し、ウインドウを表示します。

共有情報の作成

アニメーション共有情報は以下の情報からなります。

  • 共有元の情報(ペインで指定します。)
  • 共有対象の情報(グループで指定します。)

新規ボタン(A)をクリックし、登録ダイアログを表示し、共有元ペイン、共有対象グループを設定します(E)(F)。

レイアウトウインドウでペインが選択されている場合は、自動的に、選択ペインが共有元ペインに設定されます。
ここで、以下の点に注意するようにしてください。

  • 共有元ペインにアニメーションを持たないペインを指定しない(禁止されていませんが、意味の無い指定です)。
  • 対象グループに、共有元ペインを含める。

設定が正しく行われれば、登録ボタン(G)が有効になるのでボタンを押して登録を実行します。
登録した共有情報は、リストボックスに登録されます(D)。

共有情報の確認

作成した、共有情報を確認するするには、リストビューから共有情報を選択して、共有対象をハイライト表示ボタン(C)を押します。
レイアウトウインドウ上で、共有対象グループ以外のペインが隠された状態になり、共有元ペインが選択された状態になります。
もう一度ボタンを押すと、隠された状態が元に戻ります。

共有対象グループの作成

ツールには、共有対象を指定するグループの作成を支援する機能があります。
共有グループの作成ボタン(B)をクリックし、ダイアログを表示します。

共有情報を作成したときと同様に、共有元ペインを指定します(H)。
次に、共有対象ペインの検索基点を1以上の階層数で示します(I)。ツールは、共有元ペインからここで示された階層数だけ、 親階層をたどりそのペインを検索処理の基点ペインとします。
ツールは、検索基点ペインから、共有元ペインと同じ階層数にあるすべての子供(子孫)ペインを収集し対象グループのメンバとします。
検索ボタン(J)を押して、検索を実行します。 検索されたメンバペインは、下部のリストボックスに列挙されます(K)。
対象以外を隠すチェックボックス(L)を利用すると、レイアウトウインドウでメンバペインのみを表示して確認ができます。
作成ボタン(M)を押して、グループを作成します。

アニメーション共有情報をプレビューする

アニメーション共有情報はツール上の動作に反映されません。動作を確認するには、レイアウトビューアで表示する必要があります。
通常のようにビューアに転送をします。
アニメーション共有情報が反映された、レイアウトデータが表示されます。


サンプルデモ

デモ

  • ゲームのタイトル画面をイメージしたデモ


ゲームのタイトル画面をイメージしたデモ

ゲームタイトルをイメージしたデモです。
レイアウトデータは、$(LayoutEditor_Root)/sample/demo/game_demo/sample_demo.clyt にあります。

画面イメージ

フォントデータについて

実行前には、フォントデータをバッチファイルを起動して生成する必要があります。
フォントデータの生成のためには、レイアウトファイルと同一フォルダにあるバッチファイル（make_sample_font.bat）を起動します。
(バッチファイルが正しく動作するためには、NintendoWare が 正しくインストールされ、フォントコンバータパッケージがインストールされている必要があります。)
フォント生成が成功すれば、バッチファイルと同一フォルダに sample_font.bcfnt というファイルが生成されます。


ユーザーインターフェース

  • メインウィンドウ
  • レイアウトウィンドウ
  • サブウィンドウ
  • プロパティ
  • ダイアログ
  • ショートカットキー


メインウィンドウ

LayoutEditor の作業スペースとなるメインウィンドウです。

  1. メニュー

    LayoutEditor 全体に対するコマンドメニューです。

  2. 作業スペース

    レイアウトウィンドウやサブウィンドウが表示される LayoutEditor の作業スペースです。


メインウィンドウのメニュー

  • [ファイル]
  • [編集]
  • [ペイン]
  • [選択]
  • [表示]
  • [ツール]
  • [ヘルプ]


ファイルメニュー

おもにファイルの入出力に関するメニューです。

  1. 新規のレイアウトを作成します。

    新規に作成可能なファイルはレイアウトのみです。

  2. 既存のレイアウトファイルを開きます。

    選択可能なファイルの種類はレイアウトのみです。

  3. 既存のレイアウトファイルを現在のレイアウトに追加して開きます。

    選択可能なファイルの種類はレイアウトと各種アニメーションです。

  4. ファイルの種類を指定してレイアウトファイルを保存します。

    選択可能なファイルの種類はレイアウトと各種アニメーションです。

  5. レイアウトファイルに別名をつけて保存します。

  6. レイアウトを閉じます。

  7. バイナリ出力ダイアログを開きます。

  8. レイアウト環境設定ダイアログを開きます。

  9. 最近使用したファイルを開きます。

  10. すべてのレイアウトを閉じてアプリケーションを終了します。


編集メニュー

ペインのコピーや貼り付けなど、編集に関するメニューです。

  1. 編集による内容の変更を元に戻し、編集前の状態に戻します。

    ファイルの入出力を伴う操作（ファイルを開く/閉じる）を行うと編集の履歴は削除されます。

    それ以前の状態に戻すことはできなくなりますので注意してください。

  2. 元に戻した内容に対して編集をやり直し、編集後の状態にします。

  3. 選択しているペインを切り取ります。

    ペインの貼り付けではアニメーション関連情報の貼り付けが行われません。

    そのため、切り取ったペインの貼り付けを行うとアニメーション情報が消えてしまいますので注意してください。

  4. 選択しているペインをコピーします。

  5. 切り取りまたはコピーしたペインを貼り付けます。

    メニューによる貼り付けではグループ設定やアニメーション関連情報の貼り付けは行われません。アニメーションをコピーするときはペイン情報貼り付け制御ウィンドウを利用してください。

  6. 選択しているペインを消去します。
  7. コピー貼り付け時に、アニメーションもコピー対象に含めるかを切り替えます。
  8. ツール環境設定ダイアログを表示します。


ペインメニュー

ペインの作成やプロパティに関するメニューです。

  1. 新規にペインを作成します。

    ピクチャペインはメニューから作成することができません。テクスチャ管理ウィンドウから作成してください。

  2. マウスの動作モードをペインの親子関係を設定するモードに変更します。ステータスバーの表示が「MakeHierarchy」に変化します。

    親ペインを左クリックで選択し、左ボタンを押したまま子ペインにマウスカーソルを合わせてボタンを離すことで親子関係を設定することができます。

  3. マウスの動作モードをペインの親子関係を解除するモードに変更します。ステータスバーの表示が「BreakHierarchy」に変化します。

    親ペインを左クリックで選択し、左ボタンを押したまま子ペインにマウスカーソルを合わせてボタンを離すことで親子関係を解除することができます。

  4. 親子関係にあるペインの移動を連動させます。

  5. マウスでのペインの大きさをサイズで調整するようにします。

    マウス左ドラッグでのペインの大きさ編集時に【ペインのスケールで調整】するか、【ペインのサイズで調整】するかを選択します。

  6. 選択しているペインでグループを作成します。

  7. 選択しているペインのグループ情報を編集します。
    ペイングループ編集ダイアログを表示します。
    （レイアウトに、1つ以上のグループが存在する場合に、指定が可能です。）

  8. 選択しているペインをロック状態にします。

  9. すべてのペインのロック状態を解除します。

  10. ロック状態のペインを隠します。

  11. 境界ペインをロック状態にします。

  12. 選択しているペインを隠します。

  13. 隠しているペインをすべて表示します。

  14. 隠しているペインをロック状態にします。

  15. プロパティウィンドウを表示します。


選択メニュー

ペインの選択に関するメニューです。

  1. すべてのペインを選択状態にします。

  2. ペインの選択状態を解除します。

  3. ペインの選択・非選択状態を反転します。

  4. 描画順位で1つ前面のペインを選択状態にします。

  5. 描画順位で1つ背面のペインを選択状態にします。


表示メニュー

サブウィンドウやレイアウトウィンドウの表示に関するメニューです。

  1. サブウィンドウを開きます。

  2. すべてのサブウィンドウを隠します。

  3. サブウィンドウのサイズ変更や移動時に、ウインドウ境界線に対してスナップ処理をします。

  4. レイアウトウィンドウのペインをアウトライン表示にします。

  5. レイアウトウィンドウのペインの境界線を描画します。

  6. レイアウトウィンドウの表示倍率を上げます。

  7. レイアウトウィンドウの表示倍率を下げます。

  8. レイアウトウィンドウのサイズを大きくします。

  9. レイアウトウィンドウのサイズを小さくします。

  10. 表示倍率を100％に戻し、レイアウト全体が表示されるようにレイアウトウィンドウの大きさを変更します。

  11. 選択したペインがウィンドウ全体に表示されるように表示倍率を変更します。

  12. レイアウトウィンドウにグリッドを表示します。

  13. ペインの移動時にペインをグリッドに吸着させます。


ツールメニュー

  1. レイアウトに使用していないフォントリソースを削除します。

  2. 連番テクスチャを読み込み、テクスチャパターンアニメペインを作成します。
    連番テクスチャの読み込みダイアログが表示されます。

  3. レイアウト内で利用されている、テクスチャやフォントなどを指定フォルダにまとめてコピーし、 レイアウト内の参照パスをすべて、コピー先に変更します。
    テクスチャ・フォントの集約ダイアログが表示されます。

  4. レイアウトビューアでプレビューします。
    ツール環境設定で転送先に指定されたビューア画面（上、下）にレイアウトデータを転送します。
    （ビューア自体の転送先指定は「ビューアターゲット」で指定します。）

  5. レイアウトビューアでプレビューします。
    ビューアの上画面に転送します。

  6. ビューアでプレビューします。
    ビューアの下画面に転送します。

  7. ビューアの起動先を指定します。

    PC 上で起動するレイアウトビューアを使用するか、開発実機上の簡易レイアウトビューアを使用するかチェックマークで指定します。

  8. レイアウトウィンドウのスクリーンキャプチャを行います。
    ビットマップファイル (.bmp) として、プロジェクトフォルダに保存します。


ヘルプメニュー

  1. LayoutEditor のヘルプを表示します。

  2. レイアウトビューアのヘルプを表示します。

  3. バージョン情報を表示します。


レイアウトウィンドウ

レイアウトの編集を行う作業スペースです。

  1. レイアウトの作業スペースです。ペインを配置してレイアウトを作成します。

  2. ピクチャペインやウィンドウペインなどのペインです。

    赤い枠で囲まれているペインが選択されているペインです。ロック状態のペインは青い枠で囲まれます。

  3. フレーム領域

    レイアウトが画面に表示されるときの領域です。

    ツール環境設定で安全フレームを描画するように設定されている場合は設定された色で安全フレームガイドを描画しています。

  4. マウスカーソルの現在位置を座標で表示しています。

  5. 選択しているペインの情報を表示しています。

    左から、ペインの名前、表示位置、ペイン移動時の座標偏差を表示しています。

  6. 現在のマウス動作モードを表示しています。

    Idling
    なにもしていない（アイドリング）状態です。
    Selecting
    マウスのドラッグで範囲を指定している状態です。
    Tweaking
    ペインをドラッグしている状態です。
    ViewTrans
    スペースキーを押してレイアウトウィンドウの表示領域を移動させている状態です。
    MakeHierarchy
    ペインの親子関係を設定している状態です。
    BrakeHierarchy
    ペインの親子関係を解除している状態です。

  7. 親ペインの平行移動を子ペインに影響させるかどうかをアイコンで表示しています。
    この設定は、[ペイン]→[親の平行移動操作を子に影響させる]で切り替えることができます。
    また、Ctrl キーを押すことで設定を一時的に反転することができます。

    親ペインの平行移動を子ペインに影響させます。

    親ペインの平行移動を子ペインに影響させません。

  8. 現在の表示倍率を表示しています。コンボボックスから表示倍率を選択することができます。

  9. 表示倍率をスライダで変更することができます。

  10. ズームイン、ズームアウトのボタンです。

    表示倍率を変更することができます。

  11. レイアウトの原点位置を示しています。

    座標は右上方向に正の値をとります。


サブウィンドウ

  • カーブエディタ
  • テクスチャ管理
  • グループ管理
  • 親子階層構造管理
  • ペイン情報貼り付け制御
  • アニメーション区間タグ編集
  • ペイン検索
  • 色見本
  • アニメーション共有


カーブエディタ

アニメーションカーブの編集を行うウィンドウです。

  1. メニュー

    カーブエディタに対するコマンドメニューです。

  2. グラフ表示領域

    アニメーションカーブの表示・編集を行います。

    マウスの左ボタンによる範囲指定で編集するスロープなどを選択します。スペースキー＋マウスの左ボタンドラッグでグラフ表示領域の移動を、スペースキー＋マウスの右ボタンドラッグでグラフ表示領域のスケーリング変更を行うことができます。

  3. アニメーションカーブ

    キーの編集によって変更の対象となる区間は白線で表示されます。

    キーやスロープの編集はアニメーションカーブの表示にリアルタイムに反映されます。

  4. 選択キーフレーム

    調整対象のキーフレームです。

    キーフレーム選択時はマウスの右ボタンドラッグでキーフレーム点を移動させることができます。Shift キーを押しながら、右ボタンドラッグでキーフレーム点を移動させると、キーフレーム時間（横方向）だけ、または、キーの値（縦方向）だけを変更することができます。

    キーフレームの両端にある点はスロープ調整ポイントです。キーフレーム選択時にスロープ調整ポイントを範囲選択し、マウスの右ボタンドラッグでスロープの傾きを調整することができます。

    キーフレーム選択中にTキーを押すと、スケール調整グリッドが表示されます。グリッドを操作することで、スケール調整が行えます。

  5. アトリビュートツリー

    ペインのアニメーション項目（アトリビュート）をツリーで表示しています。

    ノードを選択することで選択ノード以下のアトリビュートに設定されているアニメーションカーブをすべて表示します。

    ノードは以下のように、対応するアトリビュートの状態を表示します。

    • アニメーションが設定されているアトリビュートとそれを配下に持つノードを赤字で表示します。
    • 選択されている(=操作対象である)アトリビュートかどうかをアイコンによって表示します。
    • キーフレームが選択されているアトリビュートは、背景色を水色で表示します。

    キーフレームが選択されているノードを自動的に表示する機能を、[メニュー]→[選択]→[選択カーブを自動的に表示]から設定することができます。

    アイコン | 説明
    ノード（選択状態） | 操作対象とされているアトリビュートを配下に持つノード
    ノード（非選択状態） | 操作対象とされているアトリビュートを配下に持たないノード
    アトリビュート（選択状態） | 操作対象とされているアトリビュート
    アトリビュート（非選択状態） | 操作対象ではないアトリビュート

  6. アニメーションフレームバー

    アニメーションフレームの現在時間を視覚的に表示しています。

    青い矩形で表示されているのが現在のフレーム位置です。マウスのクリックおよびドラッグでフレーム位置を変更することができます。

  7. キーフレームバー

    キーフレームの位置がアニメーションフレームのどの時間に設定されているかを視覚的に表示しています。

    赤い矩形で表示されているのがキーフレームです。キーフレーム間の薄い青で表示されている区間はアニメーション区間です。

  8. アニメーションフレーム

    アニメーションフレームの現在時間を数値で表示しています。

    各ボタンでアニメーションフレームの現在時間を操作することができます。

    ボタン | 機能
    再生開始フレームへ戻る | 再生開始フレームへ戻る
    1フレーム戻る | 1フレーム戻る
    1キーフレーム戻る | 1キーフレーム戻る
    逆再生 | 逆再生
    停止 | 停止
    再生 | 再生
    1キーフレーム進む | 1キーフレーム進む
    1フレーム進む | 1フレーム進む
    再生終了フレームへ進む | 再生終了フレームへ進む

  9. アニメーションフレームの範囲設定

    アニメーションフレームの有効範囲などを設定します。

    外側の値の組が開始・終了フレーム、内側の値の組が再生開始・再生終了フレームです。特定のアニメーション区間のみを再生させたい場合は再生開始・再生終了フレームを変更してください。

  10. キーフレーム情報表示領域

    現在選択されているキーフレームの情報を表示しています。左から、キーフレーム時間、キーの値、左右のスロープとの同期です。

  11. 表示対象切り替えの制御

    レイアウトウインドウでのペイン選択に対応して、カーエディタの編集対象を切り替えるかどうかを設定します。
    自動更新を無効に設定した場合は、更新ボタンを利用して更新動作を行ってください。

  12. 選択キーフレームの矢印キーでの移動操作量の指定

    選択キーフレームを矢印キーで移動する際の、移動操作量を設定します。
    クリックすると設定ダイアログが表示されます。
    無効時には、ツールが表示スケールから適当な値を自動的に設定します。

カーブエディタの操作

アニメーションカーブの編集を行うときの操作方法をまとめました。

目的 操作方法
キーを作成する
  • Sキーを押すショートカット操作で行う。
  • 「キー作成」のアイコンをクリックする。
キーを選択する
  • グラフ表示領域でキーフレーム点を囲むようにマウスの左ボタンで範囲指定する。(Shiftキーを押しながら選択することで、追加選択が可能です。)
  • [選択]→[全てのキーを選択]のメニュー操作（Ctrl + A でショートカット）を行う。
  • 「前のキー」、「次のキー」ボタンをクリックする。
キーフレーム時間を変更する
  • キーフレーム情報表示領域のキーフレーム時間に値を入力する。
  • グラフ表示領域で選択したスロープをマウスの右ボタンでドラッグする。このとき、Shift キーを押しながらドラッグするとキーフレーム時間のみを変更することができます。
  • グラフ表示領域でキーを選択した状態でTキーを押す。スケール調整グリッドを操作すると時間を変更できます。
  • [編集]→[時間スケール調整]からスケール調整機能を利用する。
キーの値を変更する
  • キーフレーム情報表示領域でキーの値を入力する。
  • グラフ表示領域で選択したスロープをマウスの右ボタンでドラッグする。このとき、Shift キーを押しながらドラッグするとキーの値のみを変更することができます。
  • グラフ表示領域でキーを選択した状態でTキーを押す。スケール調整グリッドを操作すると値を変更できます。
  • [編集]→[時間スケール調整]からスケール調整機能を利用する。
キーの値を微調整する
  • キーフレーム選択状態で矢印キーを利用します。
スロープの傾きを変更する
  • 選択したスロープのスロープ調整ポイントを囲むようにマウスの左ボタンで範囲指定してスロープ調整ポイントを選択した後、スロープ調整ポイントをマウスの右ボタンでドラッグする。
  • [キー]→[スロープをスプラインに設定する]のメニュー操作（Ctrl + 1 でショートカット）を行う。
  • [キー]→[スロープを線形補間に設定する]のメニュー操作（Ctrl + 2 でショートカット）を行う。
  • [キー]→[スロープをゼロに設定する]のメニュー操作（Ctrl + 3 でショートカット）を行う。
  • [キー]→[スロープをステップに設定する]のメニュー操作（Ctrl + 4 でショートカット）を行う。
  • 各種「スロープ設定（スプライン、線形、ゼロ、ステップ）」のアイコンをクリックする。


カーブエディタのメニュー

  • [キー]
  • [編集]
  • [選択]
  • [表示]
  • [カーブ]


カーブエディタのキーメニュー

  1. 左右スロープを同期して変更するように設定します。

  2. 左右スロープの同期を解除します。

  3. キーのスロープ種類をスプラインに設定します。左右スロープが同期設定に変更されます。

  4. キーのスロープ種類を線形補間に設定します。左右スロープが非同期設定に変更されます。

  5. キーのスロープ種類をフラット（ゼロ）に設定します。左右スロープが同期設定に変更されます。

  6. キーのスロープ種類をステップに設定します。左右スロープが同期設定に変更されます。スロープ値がゼロに設定されます。

  7. キーフレームの値（時間、値）を表示します。数値入力をすることで、値を編集することもできます。

  8. 現在の選択キーの前のキーを選択します。

  9. 現在の選択キーの次のキーを選択します。

  10. キーを新規作成します。

  11. キーのスロープを設定します（スプライン、線形補間、フラット、ステップ）。


カーブエディタの編集メニュー

  1. 編集前の状態に内容を戻します。

  2. 元に戻した編集をやり直します。

  3. 選択しているキーを切り取ります。

  4. 選択しているキーをコピーします。

  5. 選択しているキーを貼り付けます。

  6. 選択しているキーを削除します。

  7. キーフレームコピー内容の貼り付け方法を切り替えます。
    相対値として貼り付けるがチェックされている場合、貼り付け先アトリビュートの現在の値からの相対値として、キーフレームを張り付けます。

  8. スケール調整を行います。
    スケール調整ダイアログが表示されます。


カーブエディタの選択メニュー

  1. すべてのキーを選択します。

  2. アトリビュートツリーで、選択カーブ（キーフレームが選択されているカーブ）に対応するノードを自動的に表示するかどうかを設定します。


カーブエディタの表示メニュー

  1. アニメーションカーブ全体が表示されるようにグラフ表示領域の位置とスケーリングを変更します。

  2. 選択したキー全体が表示されるようにグラフ表示領域の位置とスケーリングを変更します。

  3. グラフ表示領域の拡大倍率を大きくします。

  4. グラフ表示領域の拡大倍率を小さくします。

  5. キーの設定されていない区間にアニメーションが表示されるかどうかを変更します。

  6. 有効な項目のみ表示されるかどうかを変更します。
    実際には使用されていないパラメータに関連する項目が非表示になります（例：使用していないテクスチャに関連する項目など）。
    通常は有効に設定しておきます。

  7. 表示対象項目をレイアウトウインドウで選択されているペインに更新します。選択による自動更新が無効になっているときのみ利用できます。

  8. 項目フィルタ機能を設定します。
    項目フィルタ機能を利用することで、アトリビュートツリーに表示される項目をフィルタリングして、編集したい項目だけを選択的に表示することができます。

  9. 項目フィルタ機能の有効無効を切り替えます。

  10. 項目フィルタを新規作成します。

  11. 現在使用されている項目フィルタを編集します。

  12. すべての項目フィルタを削除します。


カーブエディタのカーブメニュー

  1. キーフレーム区間（キーの設定されている区間）以前のアニメーションカーブの表示についての設定を行います。

    1. 先頭のキーの値を使って表示します。
    2. キーフレーム区間の左側にアニメーションカーブを連結して表示します。

  2. キーフレーム区間（キーの設定されている区間）以後のアニメーションカーブの表示についての設定を行います。

    1. 最終のキーの値を使って表示します。
    2. キーフレーム区間の右側にアニメーションカーブを連結して表示します。


カーブエディタのショートカットキー

キー | メニュー | 動作
Ctrl + X | [編集]→[切り取り] | 選択しているキーを切り取ります。
Ctrl + C | [編集]→[コピー] | 選択しているキーをコピーします。
Ctrl + V | [編集]→[貼り付け] | 切り取りまたはコピーしたキーを貼り付けます。
Del, BackSpace | [編集]→[消去] | 選択しているキーを消去します。
Ctrl + Z | [編集]→[取り消し] | 編集前の状態に内容を戻します。
Ctrl + Shift + Z | [編集]→[やり直し] | 元に戻した編集をやり直します。
Ctrl + A | [選択]→[全てのキーを選択] | 全てのキーを選択状態にします。
A | [表示]→[カーブ全体を表示] | カーブ全体が表示されるようにグラフ表示領域のスケーリングを変更します。
F | [表示]→[選択部分全体を表示] | カーブの選択されている部分がグラフ領域全体に表示されるようにスケーリングを変更します。
Ctrl + + | [表示]→[ズームイン] | 拡大表示となるようにグラフ表示領域のスケーリングを変更します。
Ctrl + - | [表示]→[ズームアウト] | 縮小表示となるようにグラフ表示領域のスケーリングを変更します。
S | [キー]→[キー作成] | 現在のフレーム時間にキーを作成します。
Ctrl + 1 | [スロープ]→[スロープをスプラインに設定する] | 選択しているキを スプライン補間キー に設定します。
Ctrl + 2 | [スロープ]→[スロープを線形補間に設定する] | 選択しているキーを線形補間キーに設定します。
Ctrl + 3 | [スロープ]→[スロープをゼロに設定する] | 選択しているキーのスロープを 0 に設定します。
Ctrl + 4 | [スロープ]→[スロープをステップに設定する] | 選択しているキーを ステップキー に設定します。


テクスチャ管理ウィンドウ

レイアウトで使用するテクスチャを管理するウィンドウです。

  1. テクスチャイメージのファイルを読み込みます。

  2. 選択されているテクスチャを使用してピクチャペインを作成します。

  3. 最新の情報に表示を更新します。外部でテクスチャイメージを変更した場合にクリックしてください。

  4. テクスチャの画像ファイルパスを再設定します。
    フォルダ構成の変更など、テクスチャの位置が変更になる場合に利用してください。
    なお、この際指定するファイルは、同一ファイル名である必要があります。

  5. レイアウトに使用されていないテクスチャを選択状態にします。

  6. 選択されているテクスチャを削除します。

  7. テクスチャ情報の表示形式を選択します。

    画像表示形式

    テクスチャの情報を画像一覧で表示します。

    詳細表示形式

    テクスチャの情報をリストで表示します。

  8. テクスチャ情報の表示領域です。テクスチャの情報を画像表示形式または詳細表示形式で表示しています。

    画像表示形式

    1. 拡大・縮小されたイメージでテクスチャの一覧を表示します。
    2. テクスチャの名前です。
    詳細表示形式

    1. テクスチャの名前です。

    2. バイナリ変換後のテクスチャのフォーマットです。

      L4
      ルミナンス4bit
      L8
      ルミナンス8bit
      A4
      アルファ4bit
      A8
      アルファ8bit
      LA4
      ルミナンス4bit＋アルファ4bit
      LA8
      ルミナンス8bit＋アルファ8bit
      HILO8
      R8bit＋G8bit
      RGB565
      R5bit＋G6bit＋B5bit
      RGB8
      RGB 各8bit
      RGB5_A1
      RGB 各5bit＋アルファ1bit
      RGBA4
      RGBA 各4bit
      RGBA8
      RGBA 各8bit
      ETC1
      RGB圧縮
      ETC1_A4
      RGB圧縮＋アルファ4bit
    3. テクスチャの幅です。
    4. テクスチャの高さです。
    5. テクスチャを 2 のべき乗サイズに補完した状態の余白領域の割合です。
    6. テクスチャを 2 のべき乗サイズに補完した状態の余白領域のサイズです。
    7. テクスチャの保存されているファイルパスです。
    8. テクスチャイメージの表示領域です。選択されているテクスチャのイメージを表示しています。
    9. 全テクスチャの余白領域のサイズと全テクスチャサイズに対する余白領域のサイズをパーセンテージで表示します。


グループ管理ウィンドウ

レイアウトのグループを管理するウィンドウです。

  1. メニュー

    グループ管理ウィンドウに対するコマンドメニューです。

  2. グループをツリー表示しています。グループに所属するペインの種類や状態をアイコンで表示しています。

    グループのノードを選択することでグループに所属するペインを、ペインを選択することでそのペインをレイアウトウィンドウで選択状態にします。

    ペインをダブルクリックすることでプロパティウィンドウを表示します。

    右クリックでコマンドメニューをポップアップ表示します。

    アイコン | 説明
    通常 | ロック状態 | 隠し状態
    ルートグループ - - RootGroup
    グループ - - グループ
    ヌルペイン（通常） | ヌルペイン（ロック） | ヌルペイン（隠し） | ヌルペイン
    ピクチャペイン（通常） | ピクチャペイン（ロック） | ピクチャペイン（隠し） | ピクチャペイン
    テキストボックスペイン（通常） | テキストボックスペイン（ロック） | テキストボックスペイン（隠し） | テキストボックスペイン
    ウィンドウペイン（通常） | ウィンドウペイン（ロック） | ウィンドウペイン（隠し） | ウィンドウペイン
    境界ペイン（通常） | 境界ペイン（ロック） | 境界ペイン（隠し） | 境界ペイン

  3. パラメータ調整アイコン

    ペインのパラメータを調整するアイコンです。
    左側の目アイコンで、表示・非表示状態を設定します。
    右側の錠前アイコンでロック状態を設定します。

    目アイコンで設定する表示状態は、デザイナがツール上での編集の都合で一時的にペインを隠したい場合に利用するものです。
    そのため、バイナリデータには設定が反映されません(つまり実際のゲームには反映されません)。
    プレビュー時の挙動については、[メニュー]→[編集]→[ツール環境設定]から、”隠されたペインをnullペインとして表示する”チェックボックスで制御が可能です。
    錠前アイコンについても、同様にバイナリデータには反映されません。


グループ管理ウィンドウのメニュー

  • [機能]


グループ管理ウィンドウの機能メニュー

  1. 選択しているペインを切り取ります。

  2. 選択しているペインをコピーします。

  3. 選択しているペインに貼り付けを行います。

  4. 選択しているペインを削除します。

  5. 選択しているグループを編集するためのウィンドウを表示します。

    1. グループ名を入力します。

      他のグループと同じ名前を入力すると新規作成するときと同じ名前に変更されますので注意してください。

    2. コメントを入力します。

  6. 選択しているグループまたはペインをグループ管理から削除します。

  7. 選択しているグループに所属するペイン（ペインを選択している場合はそのペイン）をロック状態にします。

  8. 選択しているグループに所属するペイン（ペインを選択している場合はそのペイン）のロック状態を解除します。

  9. 選択しているグループに所属するペイン（ペインを選択している場合はそのペイン）を隠します。

  10. 選択しているグループに所属するペイン（ペインを選択している場合はそのペイン）で隠されていたペインを表示します。

  11. 選択ペインが自動的に表示されるかどうかを設定します。
    本項目が有効になっている場合、レイアウトウインドウなどで、ペインを選択した際、対応するノードが自動的に選択表示されます。


親子階層管理ウィンドウ

ペインの親子関係を管理するウィンドウです。

  1. メニュー

    親子階層管理ウィンドウに対するコマンドメニューです。

  2. ペインの親子関係をツリー表示しています。ペインの種類や状態をアイコンで表示しています。

    ノードを選択することでノード以下に所属するペインを選択状態にします。ペインをドラッグすることで親子関係を変更することができます。

    Shiftキーを押しながら選択操作を行うことで、複数の項目を範囲指定して選択することができます。
    Shiftキーを押しながら、選択開始項目と選択終了項目を指定すると、2つの項目間にある項目が一括で選択されます。

    また、Ctrlキーを押しながら選択操作を行うことで、追加選択をすることができます。

    ペインをダブルクリックすることでプロパティウィンドウを表示します。

    右クリックでコマンドメニューをポップアップ表示します。

    ペインをクリックして選択し、RootPane 以外のペインの名前を変更することができます。

    アイコンの左側にある +, - ボタンでノードを開閉するとき、シフトキーを併用すると、それ以下のノードを同時に開閉させることができます。

    アイコン | 説明
    通常 | ロック状態 | 隠し状態
    ヌルペイン（通常） | ヌルペイン（ロック） | ヌルペイン（隠し） | ヌルペイン
    ピクチャペイン（通常） | ピクチャペイン（ロック） | ピクチャペイン（隠し） | ピクチャペイン
    テキストボックスペイン（通常） | テキストボックスペイン（ロック） | テキストボックスペイン（隠し） | テキストボックスペイン
    ウィンドウペイン（通常） | ウィンドウペイン（ロック） | ウィンドウペイン（隠し） | ウィンドウペイン
    境界ペイン（通常） | 境界ペイン（ロック） | 境界ペイン（隠し） | 境界ペイン

  3. パラメータ調整アイコン

    ペインのパラメータを調整するアイコンです。
    左側の目アイコンで、表示・非表示状態を設定します。
    右側の錠前アイコンでロック状態を設定します。

    目アイコンで設定する表示状態は、デザイナがツール上での編集の都合で一時的にペインを隠したい場合に利用するものです。
    そのため、バイナリデータには設定が反映されません(つまり実際のゲームには反映されません)。
    プレビュー時の挙動については、[メニュー]→[編集]→[ツール環境設定]から、”隠されたペインをnullペインとして表示する”チェックボックスで制御が可能です。
    錠前アイコンについても、同様にバイナリデータには反映されません。


親子階層管理ウィンドウのメニュー

  • [機能]


親子階層管理ウィンドウの機能メニュー

  1. 選択しているペインを切り取ります。

  2. 選択しているペインをコピーします。

  3. 選択しているペインに貼り付けを行います。

  4. 選択しているペインを削除します。

  5. 選択しているペインのロックまたは解除を行います。

  6. 選択しているペインを表示または隠します。

  7. 選択しているペインとその子をすべて選択します。

  8. 選択しているペインとその子をロック状態にします。

  9. 選択しているペインとその子のロック状態を解除します。

  10. 選択しているペインとその子を隠します。

  11. 選択しているペインとその子で隠されていたペインを表示します。

  12. 選択しているペインでグループを作成します。
    親子階層ウィンドウでは変化がないのでグループウィンドウで確認してください。

  13. 選択しているペインのグループ情報を編集します。
    ペイングループ編集ダイアログを表示します。
    （レイアウトに 1 つ以上のグループが存在する場合に、指定が可能です。）

  14. 選択しているペインのプロパティを表示します。

  15. 選択ペインが自動的に表示されるかどうかを設定します。
    本項目が有効になっている場合、レイアウトウインドウなどで、ペインを選択した際、対応するノードが自動的に選択表示されます。


ペイン情報貼り付け制御ウィンドウ

コピーしたい情報を選択して貼り付けるためのウィンドウです。

メニューによるペインの貼り付けでは行うことのできないアニメーション情報を貼り付けたり、複数ペインの大きさや位置を同じ値にしたいときに使用します。

なお、貼り付け情報に関しては、以下の点に注意する必要があります。

  • 貼り付け元ペインは、単一ペインである必要があります。
    貼り付け元ペインをコピーする際には、単一ペインを選択してコピーを行ってください。
  • 対象パラメータは、貼り付け先ペインに対象パラメータが貼り付け可能な場合のみ、有効となります。
    貼り付け先が複数ペインの場合、全てのペインが対象パラメータを貼り付け可能である必要があります。

ペイン情報貼り付け制御ウィンドウ

  1. コピーするペインの基本情報を選択します。

    位置
    ペインの表示位置
    サイズ
    ペインのサイズ
    スケール
    ペインのスケール
    回転
    ペインの回転
    コメント
    ペインにつけられたコメント
    ユーザ情報
    ペインにつけられたユーザ情報
    透明度
    ペインの透明度
    その他フラグ
    表示・非表示などのフラグ

  2. コピーするピクチャペインの情報を選択します。ピクチャペインが対象です。

    頂点カラー
    四隅の頂点カラー設定
    テクスチャ座標
    使用するテクスチャ座標の数と座標設定

  3. コピーするテキストボックスペインの情報を選択します。テキストボックスペインが対象です。

    フォント
    文字の表示に使用するフォント
    文字列
    表示する文字列
    文字列の位置
    文字列の表示基準位置
    文字サイズ
    文字の表示サイズ
    文字間隔
    文字の表示間隔
    テキストカラー
    文字の表示色

  4. コピーするウィンドウペインの情報を選択します。ウィンドウペインが対象です。

    コンテンツ領域情報
    コンテンツ領域の設定
    フレーム領域情報
    フレーム領域の設定

  5. コピーするマテリアルの情報を選択します。マテリアルを持つペインが対象です。

    テクスチャ
    使用するテクスチャとその設定
    カラー補間
    白黒補間カラー設定
    詳細な情報
    マテリアルカラーなどのマテリアルの詳細な設定

  6. コピーするベクトル成分の情報を選択します。コピーする情報の内、ベクトル成分である情報（ペインの位置や回転など）が対象です。

    X 値
    ベクトルの X 軸成分
    Y 値
    ベクトルの Y 軸成分
    Z 値
    ベクトルの Z 軸成分

  7. コピーする色成分の情報を選択します。コピーする情報の内、色成分を持つ情報（ペインの透明度や頂点カラーなど）が対象です。

    R
    カラーの Red 成分
    G
    カラーの Green 成分
    B
    カラーの Blue 成分
    A
    カラーの Alpha 成分

  8. コピーするアニメーション形式を選択します。

    ペインSRT
    ペインの Scale, Rotate, Translate, Size を変化させるアニメーション
    ビジビリティ
    ペインの表示・非表示を変化させるアニメーション
    頂点カラー
    ペインの頂点カラーを変化させるアニメーション
    マテリアルカラー
    ペインのマテリアルカラーを変化させるアニメーション
    テクスチャパターン
    ペインに表示されるテクスチャを差し替えるアニメーション
    テクスチャSRT
    ペインに表示されるテクスチャの Scale, Rotate, Translate を変化させるアニメーション

  9. 貼り付け先のアニメーションフレームのキー情報を削除して、コピーするペインのアニメーションに完全に置き換えます。

  10. 指定された情報を選択したペインに貼り付けます。


アニメーション区間タグ編集ウィンドウ

アニメーション区間を示すタグを編集・管理するウィンドウです。

アニメーション区間タグ編集ウィンドウ

  1. アニメーション区間タグ編集ダイアログを表示します。

    1. 編集対象となるタグを指定します。
    2. フレーム長を一括指定する編集操作を指定します。フレーム長はゼロより大きい値を指定する必要があります。
    3. フレーム区間にオフセット値を加算する編集操作を指定します。

  2. アニメ区間タグ情報をファイルから読み込みます。

  3. アニメ区間タグ情報をファイルへ書き出します。

  4. タグの一覧をリストで表示しています。

    名前
    タグにつけられた名前
    開始
    開始フレーム
    終了
    終了フレーム
    コメント
    コメント
    対象グループ
    タグ区間アニメーションの対象となるペインをあらわすグループ

  5. タグを追加するためのウィンドウを表示します。

    1. タグの名前を入力します。既存のタグの名前を入力した場合は追加ボタンをクリックできません。
    2. コメントを入力します。
    3. 開始フレームを入力します。
    4. 終了フレームを入力します。

  6. 選択されているタグを削除します。

  7. 選択されているタグの順番を、リスト中で上下に移動します。

  8. 選択されているタグの名前です。名前を変更することができますが、既存の他のタグの名前を入力しても変更前のタグ名に戻ります。

  9. 選択されているタグにつけられているコメントです。

  10. 選択されているタグの開始フレームと、終了フレームです。

  11. カーブエディタのアニメーション再生範囲にタグの開始・終了フレームを設定します。

  12. タグ区間アニメーションの対象となるペインをあらわすグループを指定します。

    "対象グループ指定"ボタンを押すとグループ選択ダイアログが表示されます。

    再帰的に関連付けるチェックボックスは、アニメーションの対象にグループペインの子階層ペインを含めるかどうかを指定します。

  13. バイナリファイルの出力時の設定を行います。

    バイナリファイル出力時のアニメーションの再生モードを選択します。

    ワンタイム
    ワンタイム再生のアニメーションとして出力します。
    ループ
    ループ再生のアニメーションとして出力します。
    ウエイト
    長さ１フレームのループ再生アニメーションとして出力します。

    バイナリファイルに出力するアニメーション形式を選択します。

    ペインSRT
    頂点カラー
    ビジビリティ
    マテリアルカラー
    テクスチャパターン
    テクスチャSRT


ペイン検索ウインドウ

レイアウト中のペインを検索します。

  1. 検索対象文字列の種類を指定します。
    ペイン名、ユーザ情報、コメントから指定することができます。

  2. 検索ウインドウで利用可能な操作を実行します。

    次を検索
    次の候補を検索します。
    前を検索
    前の候補を検索します。
    置換
    現在の条件で、置換処理を実行します。
    選択に追加
    検索結果を選択ペインセットに追加します。
    すべて選択
    検索合致ペインを全て選択します。

  3. 検索文字列を入力します。正規表現オプションが指定されている場合は、正規表現を入力します。

  4. 置換結果文字列を入力します。置換オプションが指定されている必要があります。

  5. 検索オプションを指定します。

    正規表現
    検索文字列の指定に正規表現を使用します。
    自動選択
    検索一致ペインを選択します。
    置換
    検索文字列に対して、文字列置換処理を行います。

  6. 検索結果が表示されます。

    ペイン名
    検索マッチ文字列を持つペインの名前が表示されます。
    置換前
    置換処理を行う前の文字列が表示されます。一致部分が赤色で表示されます。
    置換後
    置換処理を行った後の文字列が表示されます。置換部分が赤色で表示されます。

  7. 次の候補を検索します。

  8. 現在の条件で、置換処理を実行します。


色見本ウインドウ

編集作業で使われる色を管理します。
色パラメータを編集する各種設定ボタン類の間でドラッグ・ドロップによる設定操作が行えます。
また、色情報リストをファイルにして、入出力することができます。この色情報ファイルを共通利用することで、プロジェクト内で統一した色設定を行うことができます。

  1. 色情報を新規作成します。情報入力のために、色情報ダイアログが表示されます。

    1. 色を設定します。ボタンをクリックすることでカラーピッカーダイアログを表示して、入力をすることができます。
    2. 色情報に関連するコメントを入力します。
    3. 入力を確定します。
    4. 入力をキャンセルします。

  2. 色情報リストで選択された色情報を編集します。情報入力のために、色情報ダイアログが表示されます。

  3. 色情報リストで選択された色情報を削除します。

  4. 色情報リストをファイルに書き出します。

  5. 色情報リストをファイルから読み込みます。

  6. 色情報リストの表示方法を変更します。

    詳細表示
    色と、コメントを表形式で表示します。
    画像表示
    色を小さなアイコンで表示します。アイコンにマウスをあわせるとコメントが表示されます。

  7. 色情報に記録されたコメントを表示、編集します。

  8. 色情報リスト。色情報の一覧を表示します。


アニメーション共有情報ウインドウ

アニメーション共有設定情報を編集します。

  1. アニメーション共有情報を新規作成します。

    1. アニメーションの共有元となるペインを指定します。
      アニメーションを持たないペインの指定は禁止されていませんが、意味が無い点に注意して下さい。
    2. レイアウトウインドウで選択されているペインを共有元ペインに設定します。
    3. アニメーションの共有対象をグループで指定します。
    4. 共有対象に記録するコメントを編集します。
    5. 編集作業を確定します。
    6. 編集作業をキャンセルします。

  2. 共有情報リストで選択された共有情報を編集します。

  3. 共有情報が共有対象を指定する際に利用するグループを作成します。

    1. アニメーションの共有元となるペインを指定します。
      アニメーションを持たないペインの指定は禁止されていませんが、意味が無い点に注意して下さい。
    2. レイアウトウインドウで選択されているペインを共有元ペインに設定します。
    3. 共有対象の検索基点とするペインの位置を階層数で指定します。
      ツールは、共有元ペインからここで示された階層数だけ、 親階層をたどりそのペインを検索処理の基点ペインとします。
      ツールは、検索基点ペインから、共有元ペインと同じ階層数にあるすべての子供(子孫)ペインを収集し対象グループのメンバとします。
    4. 共有対象の検索対象として共有元ペインと同じ種類のペインを採用するようにします。
    5. 検索処理を実行します。
    6. 対象グループの名前を設定します。
    7. 検索された対象グループのメンバーペインを一覧表示します。
    8. レイアウトウインドウで、検索された対象グループ以外のペインを隠します。
    9. 編集作業を確定し、グループを新規作成します。
    10. 編集作業をキャンセルします。

  4. 共有情報リストで選択された共有情報の対象以外のペインを隠します。

  5. 共有情報リストで選択された共有情報を削除します。

  6. 共有情報リスト。共有情報を一覧で表示します。


プロパティウィンドウ

プロパティ

編集対象のプロパティ項目は以下のようになっています。

項目名の後に「（詳細）」が記されているプロパティ項目は、マテリアルを持つ各ペインの詳細情報で「詳細なマテリアル設定を行う」チェックボックスがチェックされていなければ表示されません。

  • ペイン
    • ペイン基本情報
    • ピクチャペイン情報
    • テキストボックスペイン情報
    • ウィンドウペイン情報
  • マテリアル
    • テクスチャ
    • カラー補間設定
    • フラグメントオペレーション　（詳細）
    • テクスチャコンバイナ　（詳細）
      • カラーレジスタ　（詳細）
      • ステージ　（詳細）
  • ユーザ拡張情報

プロパティウィンドウ

ペインのプロパティを編集するためのウィンドウです。

  1. 表示対象のペインを固定します。

    固定した状態では他のペインを選択してもプロパティウィンドウの表示対象ペインは変更されません。

  2. 表示対象となっているペインの名前を表示しています。

  3. プロパティ項目をツリー表示しています。

    プロパティ項目を選択すると右側のプロパティ編集領域にプロパティの詳細が表示されます。

    プロパティ項目の構成はペインの種類によって異なります。

  4. プロパティの詳細が表示されるプロパティ編集領域です。

    プロパティの編集をここで行います。

  5. 選択されているプロパティ項目の詳細をコピーします。

  6. コピーしたプロパティ項目の詳細を貼り付けます。

    コピーしたプロパティ項目と同じプロパティ項目を設定していなければ貼り付けることができません。

  7. 同じペインのプロパティウィンドウを別ウィンドウで表示します。表示できるウィンドウの個数に制限はありません。

    この機能を利用して、以下のようなことが行えます。

    • 複数のペインのプロパティを同時に表示する。
    • 同じペインの異なるプロパティ項目を同時に表示する。

マルチ編集

ペインを複数選択することにより、プロパティウィンドウでプロパティの同時編集が可能です。

ペインの複数選択は、マウス左ドラッグによる領域指定か、Shiftキーを押しながらペインをクリック選択していくことにより行えます。

同時編集可能な項目は、テキストボックスの背景が赤く表示されます。

この状態で編集すると、選択したペインすべてに同一の値が反映されます。


ペインのプロパティ

ペインには、以下のプロパティ項目があります。

  • ペイン基本情報
  • ピクチャペイン情報
  • テキストボックスペイン情報
  • ウィンドウペイン情報

ペインの種類と表示される情報の関係は以下のようになっています。

 | ヌルペイン | ピクチャペイン | テキストボックスペイン | ウィンドウペイン | 境界ペイン
ペイン基本情報 | ○ | ○ | ○ | ○ | ○
ピクチャペイン情報 | × | ○ | × | × | ×
テキストボックスペイン情報 | × | × | ○ | × | ×
ウィンドウペイン情報 | × | × | × | ○ | ×


ペイン基本情報

ペインの基本情報の詳細な内容を編集します。

ペイン基本情報

  1. ペインの名前を入力します。

  2. コメントを入力します。

  3. ユーザ情報を入力します。

  4. ペインの表示位置を入力します。

  5. ペインのサイズを入力します。

  6. ペインの表示スケールを入力します。

  7. ペインの回転を入力します。

  8. ペインの透明度を入力します。

  9. 子にあたるペインの透明度にこのペインの透明度設定の影響を伝播させるかどうかを設定します。

  10. ペインの中心を設定します。

    ペインの中心はペインの表示位置の座標がペインのどの位置に設定されているかを示しています。水平方向、垂直方向ともに中央となっている場合は、ペインの中央がペインの表示位置の座標となるようにペインが表示されます。

    ペインの中心は、ペインの回転、スケールなどの処理の原点として使用されます。

  11. ペインの表示・非表示を設定します。

  12. ペインを位置調整処理の対象に指定するかどうかを設定します。

    ワイド画面用のレイアウトデータを作成する場合などに使用します


ピクチャペイン情報

ピクチャペイン情報の詳細な内容を編集します。

ピクチャペイン情報

  1. ペインの四隅（左上、右上、左下、右下）の頂点カラーを設定します。

    各頂点または各辺の文字部分を押すと、カラーピッカーが表示され、頂点カラーの各要素を設定することができます。

    辺を選択するとその両端の 2 頂点を同時に設定できます。
    また、中心の [ALL] を選択すると 4 頂点すべてを同時設定できます。

    色見本ウインドウに対して、ドラッグ・ドロップ操作をすることで、色情報を適用することができます。

  2. テクスチャ座標数を入力します。

    複数のテクスチャを使用する場合にテクスチャ座標の異なるテクスチャの枚数に応じて入力します。

  3. 座標を編集するテクスチャ座標を選択します。

    選択したテクスチャ座標の内容が下の座標入力コントロールに設定されます。

  4. 四隅（左上、右上、左下、右下）のテクスチャ座標を入力します。

    テクスチャ座標の下の３つのボタンで入力されているテクスチャ座標を操作することができます。

    水平反転
    現在のテクスチャ座標の値を水平反転（左右反転）させた値に変更します。
    垂直反転
    現在のテクスチャ座標の値を垂直反転（上下反転）させた値に変更します。
    90度時計回転
    現在のテクスチャ座標の値を時計回りに90度回転させた値に変更します。

  5. テクスチャ座標をピクセル値で入力します。

    上部の座標の小数値入力と同様に、ピクセル値で座標を入力できます。

    小数値とピクセル値は入力を行うと互いに連動します。

  6. マテリアルの詳細な設定を行うかどうかを設定します。

    マテリアルの詳細な設定を行う場合は TEV の自動計算を有効にするかどうかを確認するダイアログが表示されます。


テキストボックスペイン情報

テキストボックスペイン情報の詳細な内容を編集します。

テキストボックスペイン情報

  1. テキストの表示に使用するフォントデータを設定します。

    レイアウトに一度読み込んだことのあるフォントデータから選択することもできます。

  2. テキストの表示に使用するフォントデータのファイルをファイル選択ダイアログを開いて選択します。

  3. 表示するテキストを入力します。

  4. 現在の表示文字設定に合わせてペインサイズを調整します。

  5. 表示する文字のサイズを絶対値またはスケールで設定します。

    絶対値とスケールの値は連動して変化します。絶対値を変更した場合はスケールが、スケールを変更した場合は絶対値がそれぞれ変更されます。

  6. 表示される文字と文字の間隔を設定します。

    X が横の文字間隔、Y が縦の文字間隔です。0 を設定した場合は文字のサイズそのままです。マイナス値を設定した場合は次の文字の書き始めが前の文字と重なります。

  7. テキストを表示する基準となる位置を設定します。

    水平、垂直方向の項目で、文字列のペイン中での位置を指定します。

    行そろえは、複数行にわたる文字列での改行動作時に、各行が整列する位置を指定します。
    "指定しない"を選ぶと、水平方向項目の値が行そろえに利用されます。

  8. テキストの表示色（上端、下端）を設定します。

    上端と下端で違う色を設定した場合はテキストがグラデーション表示されます。

    ボタンの左側には RGB を、右側にはアルファ（0～255）を黒から白のグレースケールで示しています。

    ボタンを押すと、カラーピッカーが表示され、表示色の各要素を設定することができます。

    色見本ウインドウに対して、ドラッグ・ドロップ操作をすることで、色情報を適用することができます。

  9. テキストボックスに表示する文字列の最大長を強制的に設定します。

    指定する文字列長
    チェックボックスがチェックされている場合は、この値以上の長さの文字列を文字列の項目で入力しても表示される文字列の長さはこの値に制限されます。


ウィンドウペイン情報

ウィンドウペイン情報の詳細な内容を編集します。

ウィンドウペイン情報

  1. 編集の対象とする領域を選択します。

    コンテンツ領域とフレーム領域から選択しますが、フレーム領域は後述のフレームの設定によって選択できる領域の数が変化します。

    レイアウトウインドウで、選択ペインの編集部位をクリックすることでも、同様の操作が行えます。

  2. マテリアルの詳細な設定を行うかどうかを設定します。

    マテリアルの詳細な設定を行う場合は TEV の自動計算を有効にするかどうかを確認するダイアログが表示されます。

  3. フレーム領域を編集する際に有効となる設定です。

    フレームの描画に使用するテクスチャを反転もしくは回転させて表示させることができます。フレームの対角線上に位置する隅には同一のテクスチャを使用するが、表示の際にそれぞれのテクスチャを回転または反転させなければならない場合に設定します。

  4. フレームに使用するテクスチャの枚数を指定します。

    1 枚（四隅を同一に指定）
    フレームの四隅を同一のテクスチャで表示します。右上隅、左下隅、右下隅にはそれぞれ左上隅の左右反転、上下反転、180 度回転したテクスチャが表示されます。フレームの各辺は、上辺と下辺がテクスチャの右端 1 ライン、右辺と左辺がテクスチャの下端 1 ラインを使用して表示されます。
    4 枚（四隅を個々に指定）
    フレームの四隅にそれぞれ別のテクスチャを使用して表示します。フレームの各辺は、上辺が左上隅のテクスチャの右端1ライン、下辺が右下隅のテクスチャの左端1ライン、右辺が左上隅のテクスチャの下端1ライン、左辺が左下隅のテクスチャの上端1ラインを使用して表示されます。
    8 枚（四隅＋四辺を指定）
    フレームの四隅と四辺にそれぞれ別のテクスチャを使用して表示します。

  5. 共通マテリアル設定を行うかどうか設定します。

    フレームに使用する画像枚数が 4 または 8 枚の時、左上の画像のマテリアル設定をフレーム全体の共通マテリアルとして設定することができ、個々にマテリアル設定を行う必要がなくなります。

  6. フレーム左上隅部分のマテリアル設定を、他のフレーム部分のマテリアルにコピーします。

    「全フレーム、コンテント」を選択すると、フレームに加えコンテンツの情報も対象に含んでコピーします。

    また、どちらのコピーでも“詳細なマテリアル設定を行う”スイッチの情報もコピーされます。

  7. コンテンツ領域にテクスチャを表示する場合に使用する UV 座標の数を設定します。

  8. 編集する UV 座標を指定します。

    UV 座標の数によって選択肢の数が変化します。

    選択した UV 座標のテクスチャ座標を入力します。

    座標の小数値とピクセル値は互いに連動します。

    テクスチャ座標の下の 3 つのボタンで入力されているテクスチャ座標を操作することができます。

    水平反転
    現在のテクスチャ座標の値を水平反転（左右反転）させた値に変更します。
    垂直反転
    現在のテクスチャ座標の値を垂直反転（上下反転）させた値に変更します。
    90 度時計回転
    現在のテクスチャ座標の値を時計回りに 90 度回転させた値に変更します。

  9. コンテンツ領域の四隅の頂点カラーを設定します。

    各頂点の文字部分を押すと、カラーピッカーが表示され、頂点カラーの各要素を設定することができます。

    色見本ウインドウに対して、ドラッグ・ドロップ操作をすることで、色情報を適用することができます。

  10. コンテンツ領域として割り当てられた大きさに対して、どの程度領域を拡大させるかを設定します。

    プラスの値を設定した場合は広く、マイナスの値を設定した場合は狭くなります。

    上・下・左・右
    各方向にどれだけ領域を拡大するのかを設定します。
    上下を同期
    上と下に設定する値の変化を連動させます。
    左右を同期
    左と右に設定する値の変化を連動させます。


マテリアルのプロパティ

マテリアルには、以下のプロパティ項目があります。

項目名の後に「（詳細）」が記されているプロパティ項目は、マテリアルを持つ各ペインの詳細情報で「詳細なマテリアル設定を行う」チェックボックスがチェックされていなければ表示されません。

なお、詳細なマテリアル設定はレイアウトウィンドウ上での描画には反映されない点にご注意下さい。

  • テクスチャ
  • カラー補間設定
  • フラグメントオペレーション　（詳細）
  • テクスチャコンバイナ　（詳細）
    • バッファ、コンスタント　（詳細）
    • ステージ　（詳細）

プロパティ項目のツリー表示

詳細なマテリアルの編集を行うときは初期状態のツリー表示にプロパティ項目が追加されて表示されます。

初期状態のツリー表示

詳細編集時のツリー表示


テクスチャのプロパティ

ペインに表示するテクスチャに関する詳細な内容を編集します。

大きく分けて、テクスチャを管理する上部分と設定を行う下部分に分かれています。

テクスチャの管理と設定の共通部分

  1. マテリアルで使用するテクスチャを設定します。

    テクスチャの設定はテクスチャコンバイナ(TEV) の自動計算の対象になります。テクスチャコンバイナの自動計算の対象になっているときには右上に下のようなマークが表示されます。

    また、プロパティページの左下には使用するテクスチャの枚数と テクスチャコンバイナ(TEV)のステージ数が表示され、テクスチャコンバイナの自動計算の ON / OFF を切り替えるボタンが配置されています。

    テクスチャコンバイナの自動計算が OFF のとき

    テクスチャコンバイナの自動計算が ON のとき

  2. 選択されているテクスチャを左に移動してテクスチャの位置を入れ替えます。

  3. 選択されているテクスチャを右に移動してテクスチャの位置を入れ替えます。

  4. 選択されているテクスチャの次の番号にテクスチャを追加します。

    ボタンを押した際に表示されるダイアログについては、テクスチャ追加ダイアログで解説しています。

  5. 選択されているテクスチャを削除します。

  6. 使用しているテクスチャの一覧を表示します。

  7. テクスチャのサムネイルイメージを表示します。

  8. テクスチャ名を表示します。

  9. テクスチャのフォーマットやサイズを表示します。

  10. テクスチャの画像を変更します。

    ボタンを押した際に表示されるダイアログについては、テクスチャ追加ダイアログと同様ですのでそちらを参照してください。

  11. 選択されているテクスチャに関する設定を行います。

    設定を行う内容のタブを選択します。

    イメージ設定

    テクスチャのイメージに関する設定を行います。

    詳細については、イメージ設定ページで解説しています。

    マッピング設定

    テクスチャのマッピングに関する設定を行います。

    詳細については、マッピング設定ページで解説しています。

    テクスチャパターンアニメ

    テクスチャパターンアニメに関する設定を行います。

    詳細については、テクスチャパターンアニメ設定ページで解説しています。

イメージ設定

テクスチャの繰り返し方、フィルタリングの設定を行います。

  1. U方向（V方向）の繰り返し方を設定します。

    クランプ

    イメージの境界でクランプします。

    リピート

    単純にリピートします。

    テクスチャの幅（高さ）が２のべき乗の場合のみ設定可能です。

    ミラー

    ミラーしながらリピートします。

    テクスチャの幅（高さ）が２のべき乗の場合のみ設定可能です。

  2. テクセルが拡大または縮小されて表示される時に行われるフィルタを設定します。

    Near

    ポイントサンプリング。

    Linear

    バイリニアフィルタ。

マッピング設定

テクスチャのマッピングとテクスチャ行列によるテクスチャの Scale、Rotate、Translate に関する設定を行います。

  1. UVマッピング時に使用する頂点のUV座標の番号を選択します。

  2. テクセルが拡大または縮小されて表示される時に行われるフィルタを設定します。

    ScaleU, ScaleV

    Scale 値を設定します。

    統一して変更

    Scale 値の U 方向と V 方向を連動させて変更するかどうかを設定します。

    Rotate

    Rotate 値を設定します。

    TranslateU, TranslateV

    Translate 値を設定します。

    リセット

    設定を規定値にリセットします。

テクスチャパターンアニメ設定

テクスチャパターンアニメに関する設定を行います。

  1. 登録されているテクスチャの一覧が表示されています。

    名前

    テクスチャの名前です。

    幅

    テクスチャの幅です。

    高さ

    テクスチャの高さです。

    形式

    テクスチャのフォーマットです。

  2. テクスチャパターンアニメーションに登録されているテクスチャの一覧が表示されています。

    番号

    テクスチャの登録番号です。

    名前

    テクスチャの名前です。

  3. 登録テクスチャ一覧で選択されているテクスチャをテクスチャパターンリストに追加します。

  4. テクスチャパターンリストで選択されているテクスチャを削除します。

  5. テクスチャパターンリストで選択されているテクスチャを上に移動させます。

  6. テクスチャパターンリストで選択されているテクスチャを下に移動させます。

  7. テクスチャパターンリストをクリアします。

テクスチャ追加ダイアログ

テクスチャ管理に登録されているテクスチャから、追加するテクスチャの選択を行います。

  1. 読み込まれているテクスチャの中から使用するテクスチャを選択します。

  2. 選択されているテクスチャのフォーマットとサイズを表示します。


カラー補間設定のプロパティ

カラー補間設定に関する詳細な内容を編集します。

それぞれの色は、ボタンをクリックして、カラーピッカーによる設定をすることができます。

色見本ウインドウに対して、ドラッグ・ドロップ操作をすることで、色情報を適用することができます。

プロパティウィンドウのツリー表示部分で、「カラー補間設定」ノードを右クリックして現れるコンテキストメニューから、コピーおよび貼り付けが行えます。

  1. 2 色補間の黒カラーを設定します。

  2. 2 色補間の白カラーを設定します。


フラグメントオペレーションのプロパティ

フラグメントオペレーションに関する詳細な内容を編集します。

  1. アルファコンペアの比較処理の条件を設定します。

    常にパスしない
    常にパスしません。
    アルファ < 値
    ピクセルアルファ < 参照値の時パスします。
    アルファ <= 値
    ピクセルアルファ <= 参照値の時パスします。
    アルファ == 値
    ピクセルアルファ == 参照値の時パスします。
    アルファ != 値
    ピクセルアルファ != 参照値の時パスします。
    アルファ >= 値
    ピクセルアルファ >= 参照値の時パスします。
    アルファ > 値
    ピクセルアルファ > 参照値の時パスします。
    常にパスする
    常にパスします。

  2. ブレンドモードを設定します。

    なし
    ブレンド処理が行われず、ピクセルの値がそのまま eFB に描き込まれます。
    ブレンド計算
    ブレンド計算式に基づいてブレンドされます。
    設定の詳細については、ブレンド計算モードで解説しています。
    論理演算
    ピクセルの値とフレームバッファの値を論理演算して描き込まれます。
    設定の詳細については、論理演算モードで解説しています。

ブレンド計算モード

  1. ピクセルカラーにかける係数を設定します。

    0
    定数値 0。
    1
    定数値 1。
    eFB カラー
    フレームバッファカラー。
    1-eFB カラー
    1-フレームバッファカラー。
    Pixel アルファ
    ピクセルアルファ。
    1-Pixel アルファ
    1-ピクセルアルファ。
    eFB アルファ
    フレームバッファアルファ。
    1-eFB アルファ
    1-フレームバッファアルファ。

  2. ピクセルカラーとフレームバッファカラーの演算を設定します。

    ＋
    GL_ADD。
    －
    GL_SUBTRACT。
    反転－
    GL_REVERSE_SUBTRACT。

  3. フレームバッファカラーにかける係数を設定します。

    0
    定数値 0。
    1
    定数値 1。
    Pixel カラー
    ピクセルカラー。
    1-Pixel カラー
    1-ピクセルカラー。
    Pixel アルファ
    ピクセルアルファ。
    1-Pixel アルファ
    1-ピクセルアルファ。
    eFB アルファ
    フレームバッファアルファ。
    1-eFB アルファ
    1-フレームバッファアルファ。

論理演算モード

  1. 論理演算の演算方法を設定します。

    0
    演算結果=0。
    1
    演算結果=1。
    Pixel カラー
    演算結果=ピクセルカラー。
    ~Pixel カラー
    演算結果=~ピクセルカラー。
    eFB カラー
    演算結果=フレームバッファカラー。
    ~eFB カラー
    演算結果=~フレームバッファカラー。
    Pixel カラー & eFB カラー
    演算結果=ピクセルカラー & フレームバッファカラー。
    ~(Pixel カラー & eFB カラー)
    演算結果=~(ピクセルカラー & フレームバッファカラー)。
    Pixel カラー | eFB カラー
    演算結果=ピクセルカラー | フレームバッファカラー。
    ~(Pixel カラー | eFB カラー)
    演算結果=~(ピクセルカラー | フレームバッファカラー)。
    Pixel カラー ^ eFB カラー
    演算結果=ピクセルカラー ^ フレームバッファカラー。
    ~(Pixel カラー ^ eFB カラー)
    演算結果=~(ピクセルカラー ^ フレームバッファカラー)。
    Pixel カラー & ~eFB カラー
    演算結果=ピクセルカラー & ~フレームバッファカラー。
    ~Pixel カラー & eFB カラー
    演算結果=~ピクセルカラー & フレームバッファカラー。
    Pixel カラー | ~eFB カラー
    演算結果=ピクセルカラー | ~フレームバッファカラー。
    ~Pixel カラー | eFB カラー
    演算結果=~ピクセルカラー | フレームバッファカラー。


テクスチャコンバイナのプロパティ

テクスチャコンバイナのプロパティページ自体には設定する項目はありませんが、配下には以下のプロパティ項目があります。

  • バッファ、コンスタント
  • ステージ


テクスチャコンバイナ - バッファ、コンスタントのプロパティ

テクスチャコンバイナのバッファ、コンスタントに関する詳細な内容を編集します。

TEV - バッファ、コンスタントのプロパティ

  1. バッファ を設定します。

    ボタンの左側には RGB を、右側にはアルファ（0 ～ 255）を黒から白のグレースケールで示しています。

    ボタンを押すと、カラーピッカーが表示され、各要素を設定することができます。

    色見本ウインドウに対して、ドラッグ・ドロップ操作をすることで、色情報を適用することができます。

  2. コンスタント を設定します。

    設定方法はバッファと同じです。

    コンスタントは0～5 の6つあります。


テクスチャコンバイナ - ステージのプロパティ

テクスチャコンバイナのステージ設定に関する詳細な内容を編集します。

テクスチャコンバイナ - ステージの管理と設定

編集するテクスチャコンバイナステージの選択やステージの設定を行います。

テクスチャコンバイナ - ステージ管理・設定

  1. 使用するステージ数を設定します。

    使用できる数は1～6 の 6ステージです。

  2. 設定するステージを選択します。

  3. バッファの入力元として、前段の出力を使用するか設定します。

    ステージの結果をバッファにコピーするかどうかを選択します。

    ステージ 2 ～ 5 のみで選択できます。ステージ 1, 6 はコピー操作ができません。

  4. コンバインモードを設定します。

    選択可能な項目
    ソース0 の色で置き換え
    ソース0 × ソース1
    ソース0 ＋ ソース1
    ソース0 ＋ ソース1 － 0.5
    [ソース0 × ソース2] ＋ [ソース1 × (1 － ソース2)]
    ソース0 － ソース1
    (ソース0 ＋ ソース1) × ソース2
    (ソース0 × ソース1) ＋ ソース2

  5. ソースとするものを設定します。

    選択可能な項目
    テクスチャ0
    テクスチャ1
    テクスチャ2
    テクスチャ3
    コンスタント
    ポリゴンカラー
    前段の出力
    前段のバッファ

  6. カラーステージのオペランドを設定します。

    選択可能な項目
    RGB
    1 - RGB
    アルファ
    1 - アルファ
    RRR
    1 - RRR
    GGG
    1 - GGG
    BBB
    1 - BBB

  7. スケールを設定します。

    設定できる値は、1.0, 2.0, 4.0 の 3つです。

  8. 演算式を表示し確認します。

    コンバインモードで選択された内容に基づいて式が表示され、ソース、オペランド、スケールで選択された内容が式に反映されます。

  9. コンスタントを設定します。

    ソースで “コンスタント” が選択されているときに、どのコンスタントを参照するかを選択します。

    コンスタント 0～5 が選択できます。

  10. アルファステージのオペランドを設定します。

    選択可能な項目
    アルファ
    1 - アルファ
    R
    1 - R
    G
    1 - G
    B
    1 - B


ユーザ拡張情報

ユーザ拡張情報を編集します。

ユーザ拡張情報

  1. 整数値ユーザ情報をユーザ情報リストで16進表記するかどうかを設定します。

  2. ユーザ情報リストで選択されユーザ情報のリスト中での順番を変更します。

  3. ユーザ拡張情報を登録します。クリックすると登録ダイアログが表示されます。

    1. 拡張情報の名前を入力します。
    2. 拡張情報のデータ型を設定します。
    3. 拡張情報を入力します。配列形式で入力する場合、各行に1つ値を入力します。
    4. 入力を確定し、拡張情報を登録します。
    5. 入力をキャンセルします。

  4. ユーザ情報リストで選択されユーザ情報を削除します。

  5. ユーザ情報リストで選択されユーザ情報を編集します。編集用のダイアログが表示されます。

  6. ユーザ情報リスト。ユーザ拡張情報を一覧表示します。


ダイアログ

  • バイナリ出力
  • レイアウト環境設定
  • 環境設定
  • カラーピッカー
  • ペイングループ編集


バイナリ出力ダイアログ

レイアウトバイナリファイルの出力を行います。

  1. レイアウトバイナリファイルの出力先のディレクトリを指定します。

  2. レイアウトバイナリファイルのファイル名を指定します。

  3. 出力先のディレクトリにレイアウトの名前のディレクトリを作成するかどうかを選択します。

  4. アニメーションカーブでキーの作成されていない領域の値を固定値で出力するかどうかを選択します。

    本オプションを指定すると、LayoutEditorは自動生成されたカーブを、実機ライブラリが処理できるキーフレーム形式に変換して出力します。

    キーフレーム区間外領域カーブ自動生成機能の結果を、実機データに反映させる場合、かならず、本オプションを指定する必要があります。
     固定処理については、ツールで行う方式と、コンバータで行う方式を選択できます(詳細はこちら)。

  5. テキストボックスペインの持つ文字列情報から、エスケープ文字列を判別し、特定の制御コードに変換するかどうかを選択します。

  6. アニメーション区間につけられたタグ情報を利用してアニメーションを分割して出力するかどうかを選択します。

  7. タグ情報を利用する場合、キーに対する出力制御を指定します。

    [フレーム区間内で値が変化しない場合にキーを出力しない（最初のアニメーション区間タグを除く）]
    バイナリコンバータオプションの --omit-samekey に相当します。
    [フレーム区間内で値が変化しない場合にキーを出力しない]
    バイナリコンバータオプションの --omit-samekey-all に相当します。
    [フレーム区間内にキーが無い場合は、アニメーションデータを出力しない]
    バイナリコンバータオプションの --omit-nokey-all に相当します。

  8. タグ情報を利用しない場合は出力するファイルの種類を選択することができます。

  9. レイアウトバイナリファイルの出力を開始します。


レイアウト環境設定ダイアログ

レイアウトウィンドウの環境設定を行います。

  1. レイアウトウィンドウの背景についての設定を行います。

    画面内カラー
    レイアウトウィンドウの背景色を指定します。背景色はカラーピッカーダイアログで指定することができます。
    画像を表示

    レイアウトウィンドウの背景に画像を表示します。通常の TGA ファイルのみ表示することができます。

    ゲーム画面のスクリーンショットやデザイン画を TGA ファイルに変換し、背景に表示することで実際のゲーム画面をイメージしてレイアウトを作成することができます。

  2. グリッド線の描画についての設定を行います。

    描画する
    グリッド線を描画するかどうかを指定します。
    画面内カラー
    グリッド線の色を指定します。線色はカラーピッカーダイアログで指定することができます。
    グリッドサイズ
    グリッドのサイズを指定します。
    分割数
    グリッドの分割数を指定します。

  3. レイアウトのサイズについての設定を行います。

    幅、高さ
    レイアウトの画面表示領域の幅と高さを指定します。

  4. プレビュー時のデータの転送先画面を指定します。

    未定義
    ツール環境設定ダイアログでの転送先設定に基づいて転送されます。
    上画面，下画面
    ツール環境設定ダイアログでの転送先設定に関係なく、レイアウトデータ毎に設定した画面に転送されます。


ツール環境設定ダイアログ

ツールの環境設定を行います。

  1. 安全フレームについての設定を行います。

    描画する
    安全フレーム外の領域を示す安全フレームガイドを描画するかどうかを指定します。
    フレームカラー
    安全フレームガイドの描画色を指定します。色はカラーピッカーダイアログで指定することができます。
    上辺、左辺、右辺、下辺
    安全フレームガイドの４辺の幅を指定します。

  2. プレビューの動作についての設定を行います。

    キー領域外のカーブを固定してプレビューする
    アニメーションカーブでキーの作成されていない区間を固定値で表示するかどうかを指定します。
    隠されたペインを null ペインとして表示する
    隠されているペインをビューアでのプレビューに表示されないようにするかどうかを指定します。
    チェックされている場合、隠されたペインがビューア上でヌルペインとして扱われ、枠線だけが表示されます。
    テキストボックスのエスケープ文字を制御コードに変換する
    テキストボックスペインの持つ文字列情報から、エスケープ文字列を判別し、特定の制御コードに変換するかどうかを選択します。
    転送先
    “ビューアに転送”の実行時、プレビューするデータを上画面に転送するか下画面に転送するかを選択します。

  3. 描画モードを設定します。

  4. ペインの透明度の影響を設定します。

    ペインのプロパティにある“子階層に透明度の影響を伝える”のデフォルト値の設定を行います。


カラーピッカーダイアログ

カラーを編集するためのダイアログです。

  1. 現在のカラーを表示します。
  2. 現在のカラーをカラーパレットの選択領域に保存します。
    アルファ成分は保存されません。
  3. 左クリックでカラーパレットのカラーを現在のカラーに設定します。
    右クリックでカラーパレットの選択領域を変更します。
  4. カラーの色調（Hue）を変更します。
  5. カラーの彩度（Saturation）と明度（Value）を変更します。
  6. カラーの各成分（RGB）とアルファ成分（A）を変更します。


ペイングループ編集ダイアログ

ペインのグループ設定を編集します。

  1. グループ設定を行う対象となるペインを指定します。リストには選択ペインが表示されます。

  2. 対象ペインのグループ情報を指定します。
    チェックされたグループに登録され、チェックがはずされたグループから登録削除されます。


ショートカットキー

キー | メニュー | 動作
Ctrl + N | [ファイル]→[新規作成]→[レイアウト] | レイアウトを新たに作成します。
Ctrl + O | [ファイル]→[開く]→[すべて] | ファイルを開きます。
Ctrl + S | [ファイル]→[保存]→[すべて] | 全てのファイルを上書き保存します。
Ctrl + Shift + S | [ファイル]→[別名で保存]→[すべて] | 全てのファイルを保存します。
Alt + F4, Ctrl + Q | [ファイル]→[閉じる], [ファイル]→[終了] | アプリケーションを終了します。
Ctrl + Z | [編集]→[取り消し] | 編集前の状態に内容を戻します。
Ctrl + Shift + Z | [編集]→[やり直し] | 元に戻した編集をやり直します。
Ctrl + X | [編集]→[切り取り] | 選択しているペインを切り取ります。
Ctrl + C | [編集]→[コピー] | 選択しているペインをコピーします。
Ctrl + V | [編集]→[貼り付け] | 切り取りまたはコピーしたペインを貼り付けます。
Del, BackSpace | [編集]→[消去] | 選択しているペインを消去します。
Shift + F2 | [ペイン]→[親の平行移動操作を子に影響させる] | 親ペインの移動と子ペインの移動を連動させます。
Ctrl + Shift + G | [ペイン]→[グループを作成] | 選択したペインでグループを作成します。
Ctrl + G | [ペイン]→[グループを編集] | 選択したペインのグループ設定を編集します。
Ctrl + 2 | [ペイン]→[選択ペインをロックする] | 選択したペインをロック状態にします。
Alt + Ctrl + 2 | [ペイン]→[ロックをすべて解除] | 全てのペインのロック状態を解除します。
Ctrl + 3 | [ペイン]→[選択ペインを隠す] | 選択したペインを隠します。
Alt + Ctrl + 3 | [ペイン]→[隠したペインをすべて表示] | 隠していたペインをすべて表示します。
Ctrl + P | [ペイン]→[プロパティ] | プロパティウィンドウを開きます。
Ctrl + A | [選択]→[すべてを選択] | 全てのペインを選択状態にします。
Ctrl + Shift + A | [選択]→[選択を解除] | ペインの選択状態を解除します。
Ctrl + Shift + ] | [選択]→[一つ前面を選択] | ペインの一つ前面のペインを選択します。
Ctrl + Shift + [ | [選択]→[一つ背面を選択] | ペインの一つ背面のペインを選択します。
F7 | [表示]→[サブウィンドウ]→[カーブエディタ] | カーブエディタを表示します。
F8 | [表示]→[サブウィンドウ]→[テクスチャ] | テクスチャ管理ウィンドウを表示します。
F9 | [表示]→[サブウィンドウ]→[グループ] | グループ管理ウィンドウを表示します。
F10 | [表示]→[サブウィンドウ]→[親子階層] | 親子階層管理ウィンドウを表示します。
F11 | [表示]→[サブウィンドウ]→[ペイン情報貼り付け制御] | ペイン情報貼り付け制御ウィンドウを表示します。
F12 | [表示]→[サブウィンドウ]→[アニメーション区間タグ編集] | アニメーション区間タグ編集ウィンドウを表示します。
Ctrl + F | [表示]→[サブウィンドウ]→[ペイン検索] | ペイン検索ウィンドウを表示します。
Ctrl + Shift + P | [表示]→[サブウィンドウ]→[すべてのプロパティウインドウ] | すべてのプロパティウインドウを表示します。
F6 | [表示]→[サブウィンドウを隠す] | 全てのツールウィンドウの表示・非表示を切り替えます。
Ctrl + Y | [表示]→[アウトライン表示] | ペインのアウトライン表示。
Ctrl + Shift + H | [表示]→[ペイン境界線を表示] | ペインの境界線を表示します。
Ctrl + + | [表示]→[ズームイン] | 表示倍率をアップします。
Ctrl + - | [表示]→[ズームアウト] | 表示倍率をダウンします。
Ctrl + Shift + + | [表示]→[ウィンドウ拡大] | レイアウトウィンドウを拡大します。
Ctrl + Shift + - | [表示]→[ウィンドウ縮小] | レイアウトウィンドウを縮小します。
A | [表示]→[全体表示] | 表示倍率を 100 ％に戻し、レイアウト全体が表示されるようにレイアウトウィンドウの大きさを変更します。
F | [表示]→[選択部分を全体表示] | 選択したペインがウィンドウ全体に表示されるように表示倍率を変更します。
Ctrl + H | [表示]→[グリッドを表示] | グリッドを表示します。
Ctrl + Shift + : | [表示]→[グリッドに吸着] | ペインをグリッドに吸着させます。
F5 | [ツール]→[ビューアに転送] | ビューアでプレビューします。
F1 | [ヘルプ]→[ヘルプ] | ヘルプを表示します。


レイアウトビューア

レイアウトビューアは、LayoutEditorで作成したレイアウトデータを、PC上でエミュレーションを行いプレビュー表示し、レイアウトの内容を確認したりアニメーションを再生できます。

レイアウトビューアを単にビューアと呼ぶこともあります。

起動方法

環境変数 NW4C_ROOT が設定されている必要があります。通常は NintendoWare\CTRディレクトリを指定します。

レイアウトビューア(lytviewer.exe) は、(NW4C_ROOT)\tools\LayoutEditor\Viewer\Win32 にインストールされます。

LayoutEditor を起動し、[メニュー]→[ツール]→[ビューアに転送] を行うと、自動的にレイアウトビューアのウィンドウが開き、データ転送されます。

操作方法

PCでのキー操作により、以下の操作がビューア上で行えます。

キー操作 | 説明
A | アニメーションの再生を開始/停止します。
B | アニメーションのフレームを0 にリセットします。
R | 情報表示の表示/非表示を切り替えます。
E | 操作対象の画面（上下）を切り替えます。
T | 設定ウィンドウを表示します。
カーソルキー UP, DOWN | 操作項目を切り替えます。
カーソルキー LEFT, RIGHT | 値を変更します。

レイアウトの表示

レイアウトビューア画面では、以下の情報が表示されます。

情報表示エリア

操作対象となっている項目は赤い選択状態となっています。
カーソルキーの上下で操作対象項目を変更してください。

  1. アニメーションフレーム

    現在操作中のアニメーションのフレーム情報を表示します。

    左が現在のフレーム、右が総フレーム数を意味します。

    アニメーションが付けられていない場合は表示されません。

    カーソルキーの左右で現在のフレームを変更できます。
    左キーでレイアウトのアニメーションを1フレームだけコマ戻しします。右キーでレイアウトのアニメーションを1フレームだけコマ送りします。

  2. アニメーション情報

    操作対象となっているアニメーションについての情報を表示します。

    アニメーション全体を表示/再生している場合は、「ANIM:ALL」と表示されます。
    アニメーション区間タグが設定されている場合は、アニメーション区間タグで設定されたフレーム範囲の表示/再生を行うことができます。
    このときは、「ANIM:アニメーション区間タグ名」と表示されます。

    下に、現在の表示しているアニメーションの通し番号とアニメーションの総数が表示されます。

    カーソルキーの右を押すたびに、
    「アニメーション全体」->「アニメーション区間タグ 1つ目」->「アニメーション区間タグ 2つ目」-> ...
    と切り替わります。カーソルキーの左はこの逆順で切り替わります。

  3. アニメーション対象モードの切り替え

    グループが設定されている場合、アニメーションをペインごとに再生するか、グループごとに再生するか選択します。

    カーソルキーの左右で、モードを切り替えることができます。
    ここでの選択状態により、下の 「D. アニメーション対象の切り替え」の内容が切り替わります。
    「TARGET: PANE」の場合、ペインごとの切り替えになります。
    「TARGET: GROUP」の場合、グループごとの切り替えになります。

  4. アニメーション対象の切り替え

    アニメーションの操作対象となるペインまたはグループを選択します。

    カーソルキーの左右で、ペインまたはグループを切り替えることができます。

    ◇「TARGET: PANE」の時
    「PANE:ALL」の場合は、アニメーションが付いている全てのペインが対象になります。
    「PANE:ペイン名」の場合は、表示されている名前のペインが対象になります。

    ◇「TARGET: GROUP」の時
    「GROUP:ALL」の場合は、アニメーションが付いている全てのグループが対象になります。
    「GROUP:グループ名」の場合は、表示されている名前のグループが対象になります。

  5. ヌルペイン、境界ペインの表示

    ヌルペイン、境界ペインは描画の内容を持たないため本来は表示されませんが、ビューア上では視認できるように輪郭線にて表示させることが出来ます。
    「NULL:OFF」の場合は、ヌルペイン、境界ペインを表示しません。
    「NULL:DISP」の場合は、ヌルペイン、境界ペインを緑色の輪郭線で表示します。

  6. カメラ

    現在のカメラモードを表示します。

    カーソルキー左右で、カメラモードを切り替えることができます。
    「CAM :ORTHO」の場合は、通常の2D表示を行います。
    「CAM :PERS」の場合は、3D風の表示を行います。ペインのZ値が小さいほど小さく表示されるようになります。

    設定ウィンドウからカメラの「Near」, 「Far」, 「Fovy」の設定が行えます。

  7. レイアウトサイズ

    表示しているレイアウトの幅と高さ(ピクセル単位)を表示します。

    レイアウトの幅と高さはLayoutEditorの「ファイル」->「レイアウト環境設定」で行います。

設定ウィンドウ

PCの Tキーを押すことにより、設定ウィンドウが開きます。

カメラやフレームレートの設定をすることができます。

  • Ortho Camera
    「CAM :ORTHO」の Near, Far の値を設定します。
  • Perspective Camera
    「CAM :PERS」の Near, Far, Fovy の値を設定します。
  • FrameRate
    フレームレートを 20フレーム、30フレーム、60フレームに設定します。
    実際のフレームレートは、画面右上に表示されます。


NW4C LayoutEditor 用語集

NintendoWare for CTR

LayoutEditor 用語集

LayoutEditor で用いる主な用語の意味や設定方法などをアルファベット順に記載しています。

CTR のグラフィックス機能の詳細については、CTR のマニュアルを参照してください。

索引

  • Bounding Pane（境界ペイン）
  • bcfnt
  • bclan
  • bclyt
  • Coordinate System（座標空間）
  • Interpolate Color（補間カラー）
  • Layout Binary Converter（レイアウトバイナリコンバータ）
  • LayoutEditor（レイアウトエディタ）
  • LayoutLib（レイアウトライブラリ）
  • Material Color Animation（マテリアルカラーアニメーション）
  • Multiple Texture（マルチテクスチャ）
  • Null Pane（ヌルペイン）
  • Pane SRT Animation（ペイン SRT アニメーション）
  • Photoshop Plug-in（Photoshopプラグイン）
  • Picture Pane（ピクチャペイン）
  • clan
  • clyt
  • Safety Frame（安全フレーム）
  • Textbox Pane（テキストボックスペイン）
  • Texture Format（テクスチャフォーマット）
  • Texture Pattern Animation（テクスチャパターンアニメーション）
  • Texture SRT Animation（テクスチャ SRT アニメーション）
  • TGA file with Additional Information（付加情報付きTGAファイル）
  • NW4C TGA
  • Vertex Color Animation（頂点カラーアニメーション）
  • Viewer（ビューア）
  • Visibility Animation（ビジビリティアニメーション）
  • Window Pane（ウィンドウペイン）

Bounding Pane（境界ペイン）

ヒットチェックを行うためのペインです。位置や形状などの情報を持っていますが、実際には表示されません。

カーソルが指定のエリアに存在するかどうかを判定する場合などに使用します。

bcfnt

バイナリデータに変換されたフォントデータのファイルです。

テキストボックスペインの表示フォントに使用します。

ファイルの拡張子は bcfnt(Binary Ctr FoNT の略）です。

フォントコンバータ（NW4C_FontConverter.exe または NW4C_FontConverterConsole.exe）を使用してファイルを生成します。

詳しくはフォントコンバータのマニュアルを参照してください。

bclan

アニメーションカーブをバイナリデータに変換したファイルです。

アニメーションの種類にかかわらず、ファイルの拡張子は bclan(Binary Ctr Layout ANimation の略）です。

レイアウトエディタ（LayoutEditor.exe）またはレイアウトコンバータ（NW4C_LayoutConverter.exe）を使用してファイルを生成します。

bclyt

レイアウトデータをバイナリデータに変換したファイルです。

ファイルの拡張子は bclyt(Binary Ctr LaYouT の略）です。

レイアウトエディタ（LayoutEditor.exe）またはレイアウトコンバータ（NW4C_LayoutConverter.exe）を使用してファイルを生成します。

Coordinate System（座標空間）

X軸の正が右方向、Y軸の正が上方向、Z軸の正が画面奥に向く座標系でデータを管理します。

Interpolate Color（補間カラー）

基本的には RGB 成分を持たず、インテンシティのみの画像に色をつけるために、色強度の最小時と最大時の色を指定します。

LayoutEditor では白と黒についての補間カラーを設定し、インテンシティのみの画像に限らず、黒カラー補間の青成分を設定して画像全体に青みを帯びさせたり、白カラー補間を灰色に設定して画像を暗くしたりといった表現をする時などに使用します。

Layout Binary Converter（レイアウトバイナリコンバータ）

レイアウトファイルをバイナリファイルに変換するためのコンバータです。

実行ファイル名は、NW4C_LayoutConverter.exe です。NW4C_LayoutConverter もしくは lytcvtr と表記する場合もあります。

詳しくはレイアウトバイナリコンバータのマニュアルを参照してください。

LayoutEditor（レイアウトエディタ）

レイアウトを編集したり、ビューアと通信してレイアウトやアニメーションを表示するための GUI アプリケーションです。

LayoutLib（レイアウトライブラリ）

CTR 上で画像やウィンドウ、テキストボックスなどのレイアウトを簡単かつ効率良く行うために作られたライブラリです。

レイアウトファイルから変換されたレイアウトバイナリファイルを使ってレイアウトの表示やアニメーションの再生を行います。

ビューアはレイアウトライブラリを使ってレイアウトの表示をしていますので、ビューアで表示されている表現や動きをそのままゲーム中で再現することができます。

Material Color Animation（マテリアルカラーアニメーション）

マテリアルカラーを変化させるアニメーションです。

白黒補間カラーのアニメーションもこのアニメーションに含まれます。

Multiple Texture（マルチテクスチャ）

ポリゴンに2枚以上のテクスチャを貼り付けた状態を指します。多重テクスチャとも呼びます。

CTR では、同時に最大3枚までテクスチャを貼り付けることができます。テクスチャ毎に異なる UV 値を設定した場合は、マルチ UV テクスチャと呼びます。

マルチテクスチャは LayoutEditor を使って設定します。

Null Pane（ヌルペイン）

全てのペインの基本となるペインです。位置や形状などの情報を持っていますが、実際には表示されません。

複数のペインに親として親子関係を設定し、まとめて移動させたり、表示・非表示を制御させたりする場合に使用します。

Pane SRT Animation（ペイン SRT アニメーション）

ペインの SRT（Scale, Rotate, Translate）行列とサイズを変化させるアニメーションです。

Scale はスケール、Rotate は回転、Translate は表示位置にそれぞれ対応しています。

Photoshop Plug-in（Photoshopプラグイン）

NintendoWare が提供する Photoshop 用のプラグインを指します。

Picture Pane（ピクチャペイン）

画像（テクスチャ）を表示するためのペインです。

clan

レイアウトエディタがアニメーションカーブを保存するファイルです。

アニメーションの種類にかかわらず、ファイルの拡張子は clan(Ctr Layout ANimation の略）です。

clyt

レイアウトエディタがレイアウトデータを保存するファイルです。

ファイルの拡張子は clyt(Ctr LaYouT の略）です。

Safety Frame（安全フレーム）

実際に画面を映したときにほぼ全てのテレビで表示される領域です。一般的に画面の80%くらいの領域とされています。

ゲームにとって重要な情報は、安全フレーム範囲内に表示する必要があります。

安全フレームの詳細な情報については、別途安全フレームのガイドラインドキュメントを参照してください。

LayoutEditor ではツール環境設定ダイアログで安全フレーム外の領域をガイド表示するかどうかを設定することができます。

Textbox Pane（テキストボックスペイン）

テキスト表示のためのペインです。

Texture Format（テクスチャフォーマット）

CTR で扱える以下の14種類のテクスチャフォーマットを使うことができます。

L4 | ルミナンス4bit
L8 | ルミナンス8bit
A4 | アルファ4bit
A8 | アルファ8bit
LA4 | ルミナンス4bit＋アルファ4bit
LA8 | ルミナンス8bit＋アルファ8bit
HILO8 | R8bit＋G8bit
RGB565 | R5bit＋G6bit＋B5bit
RGB8 | RGB 各8bit
RGB5_A1 | RGB 各5bit＋アルファ1bit
RGBA4 | RGBA 各4bit
RGBA8 | RGBA 各8bit
ETC1 | RGB圧縮
ETC1_A4 | RGB圧縮＋アルファ4bit

テクスチャフォーマットは Photoshop プラグインを使って付加情報付き TGA ファイルを保存する際に指定します。

Texture SRT Animation（テクスチャ SRT アニメーション）

ペインに表示されているテクスチャの SRT（Scale, Rotate, Translate）行列を変化させるアニメーションです。

SRT 行列を変化させることでテクスチャをスクロールさせたり、回転させたりすることができます。

Texture Pattern Animation（テクスチャパターンアニメーション）

ペインに表示されているテクスチャを差し替えるアニメーションです。

TGA file with Additional Information（付加情報付きTGAファイル）

NintendoWare 専用の付加情報をつけた TGA ファイルです。

付加情報がついていますが、通常の TGA ファイルを同様に扱うことができます。

Photoshop プラグインを使って作成/編集します。

NW4C TGA

付加情報付きTGAファイルの別の呼称です

Vertex Color Animation（頂点カラーアニメーション）

ペインの四隅の頂点カラーを変化させるアニメーションです。

Viewer（ビューア）

PC上でレイアウトやアニメーションを表示するプログラムです。

LayoutEditor と通信することで、LayoutEditor 上で変更した内容をリアルタイムに確認することができます。

Visibility Animation（ビジビリティアニメーション）

ペインの表示・非表示を切り替えるアニメーションです。

Window Pane（ウィンドウペイン）

ウィンドウ表示のためのペインです。


商標表記

Microsoft、Windows、DirectX は米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。

Photoshop は Adobe Systems Incorporated (アドビ システムズ社)の登録商標または商標です。

その他、記載されている会社名、製品名等は、各社の登録商標または商標です。