選択アイテム

基本的に選択アイテムの登録領域は矩形です（αチャンネルで抜くことは出来ます） 二つ以上の選択アイテムの領域が重なっている場合、直感的に正しいと思われる動作をします。 １．同一のレイヤー上で重なってる場合 　　選択アイテムの表示が壊れます。選択アイテムの透明部分が重なっている場合は 　　壊れませんが、重なった領域は、後から登録したデータを返します。 表示用レイヤーと、アイテムの両方にアルファチャンネルが含まれる場合は、 表示時アルファチャンネルも転送(上書き)します。 そのため、同一のレイヤー上で重なる場合は注意が必要です。 両方にアルファチャンネルがある場合以外は、アルファの転送は行われません。 通常アルファチャンネルはレイヤー側にのみ用意して、選択アイテム側には設定しません。 ２．別のレイヤー上にある状態で、見た目が重なっている場合 　　上のレイヤーにある選択アイテムが優先されます。 　　上のレイヤーにある選択アイテムに、透明色の領域（半透明ではない。不透明度０の 　　領域）があって、下の選択アイテムが見えている場合は、下のレイヤーを選択できます。 ３．選択アイテムを登録しているレイヤーＡに、別のレイヤーＢが半透明で被さっている 　　場合、Ｂに入力透過属性がついていればＡ上の選択アイテムを選択できますが、 　　ついていなければ選択できません。レイヤー作成のデフォルトでは、入力透過属性は 　　ついていません。 msvcr80

上記の「重なりについて」にも深く関係しますが、選択アイテムはレイヤーに 対して関連づける関係上、αチャンネル（以下マスクと呼ぶ）のあるなしが どのように転送されるのかに注意しなければなりません。 レイヤーと選択アイテムの両方にマスクがあり、それを利用する場合、利用者は、 １．レイヤーのマスクに選択アイテムのマスクを適用して最終的な画像を得たい ２．レイヤーに、選択アイテムのマスクを適用しながら描画したい のいずれのつもりでいるのかシステムからはわかりません。 そのため、歴史的事情もふまえて、転送の方法が厳密に決められています。 選択アイテムＩと、それを関連づけるレイヤーＬの関係は、今、LcgをLの画像、 LmをLのマスク、Icgを選択アイテムの画像、Imを選択アイテムのマスクとすると 基本的に、「Imを利用してIcgをLcgに描画する」のではなく「それぞれを別々に 上書きする」と考えて下さい。 × Icg(Im適用) -> Scg Sm は変化無し。 ○ Icg -> Scg Im -> Sm もし前者だと、選択アイテムのマスク形状に変化があったとして、それを関連づけるレイヤーに コピーするときはそのマスクが適用されてうまくいきますが、最終的にシステムによってレイヤーが 合成されるとき、変化していないレイヤーのマスクが適用されるため、見た目がおかしくなります。 まとめると、選択アイテムをレイヤーに関連づける際のコピー方法は次のようになります。 1.両方にマスクがある場合 Icg -> Scg Im -> Sm 2.レイヤーにはマスクがあるが、アイテムにはない場合 Icg -> Scg Sm は操作されません 3.アイテムにはマスクがあるが、レイヤーにはない場合 Icg -> Scg Im は操作されません 4.両方にない場合 Icg -> Scg つまり、画像とマスクは別々に相手にコピーされると言うことです。 これをふまえると、レイヤーに関連づけられる選択アイテムの作成は次のようになります。 1.関連連付けるレイヤーＬにマスクがない場合 選択アイテムの形状に変化があってもなくても、Ｌに適用した状態で切り出し、マスクを作成しません。 2.関連連付けるレイヤーＬにマスクがある場合 2-1.選択アイテムの形状に変化がないとき（Ｌのマスクをそのまま適用すれば良いとき） Ｌに適用した状態で切り出し、マスクを作成しません。 2-2.選択アイテムの形状に変化があるとき 選択アイテムはＬに適用した状態で切り出します。 選択アイテムのマスクは、選択アイテムを背景に適用した状態のマスクを切り出します。 例外 -------- Lがフルカラーレイヤーの場合、フラグを操作することでIcgをImを適用しつつLcgに 表示することが出来るモードがあります。現在特殊な事例（マスク付きトリムとか）で 使われるだけなので、特に気にしなくても良いでしょう。

■種類 ----------------------------------------------------------------------- retouchで利用できる選択アイテムには次の種類があります。 [sketch]マークのついたものは、sketchの選択アイテムの設定コマンドにUIが 用意されているものです。こちらは利用ユーザーの要望にあわせて、徐々に 拡大されています。 ===================================================================== 領域 画像データはありません。単に選択可能な領域を意味します。 ------------------------------------------------------------------- 1.Area: 選択領域。画像効果はありません。 ===================================================================== パネル パネルとは押しても変化がないボタンの総称です。 retouchでは、押すと表示が一時的に変化するものをボタン、しないものをパネルと呼んでいます。 もっとも基本的な選択アイテムで、メニューの項目などはこれに当たります。 off cursor時/on cursor時/無効時 の３つの状態を持っています。 ------------------------------------------------------------------- 1.Panel パネル用データ画像の構造は、次の通り +---+---+---+ | 1 | 2 | 3 | +---+---+---+ 1.通常時(off mouse) 2.選択時(on mouse) 3.無効時 １枚のパネル用データ画像を登録する場合、Panel2と見た目はまったく 同じですが、内部的には、Panelは３枚の画像に分解され、Panel2は１枚の 画像のまま取り扱われます。 このことは、windows9xでの処理のさい、GDIリソースが３倍使われるという 問題をはらんでいます。 その反面、３枚の大きさの違う画像データを、それぞれの状態の画像として 登録することが出来るため、場合によっては便利です。 ------------------------------------------------------------------- 2.Panel2 [sketch] Panelとの違いは、1,2,3が同じサイズである必要がある点です。 パネル用データ画像の構造は、次の通り +---+---+---+ | 1 | 2 | 3 | +---+---+---+ 1.通常時(off mouse) 2.選択時(on mouse) 3.無効時 ------------------------------------------------------------------- 3.SharePanel １枚の画像データを、複数のパネルで共有するパネル。 選択アイテムは、作成画像データが与えられると、そのコピーをオブジェクト ごとに作成します（その上に何かが書かれる場合があるため） 従って、もの凄くたくさん(1000個とか)の選択アイテムを同時に作ると、 その分メモリを圧迫してしまいます。 当初はそれを防ぐために作られた選択アイテムですが、現在では、１枚の 画像上の任意の位置を登録できることから、様々な場面で使用されています。 パネル用データ画像の構造は、任意です。 ある画像データ内の任意の矩形を 1.通常時(off mouse) 2.選択時(on mouse) 3.無効時 として登録できます。 ------------------------------------------------------------------- 4.TogglePanel ２種類の状態を持った特殊なConditionPanelです。 ２つの状態は、押すたびに切り替わります。 作成用データ画像の構造は、次の通り 1A.通常時(off mouse・状態Ａ） 2A.選択時(on mouse・状態Ａ） 3A.無効時（状態Ａ） 1B.通常時(off mouse・状態Ｂ） 2B.選択時(on mouse・状態Ｂ） 3B.無効時（状態Ｂ） +--+--+--+--+--+--+ |1A|2A|3A|1B|2B|3B| +--+--+--+--+--+--+ と並んでいるＣＧファイルを利用する。 それぞれのパターンは、同じ大きさでなければならない。 ※パターン番号は、左から 0, 1, 2, 3, 4, 5 となる。 ※パターン番号は、fitClickmap()等の引数で利用される。 ------------------------------------------------------------------- 5.ConditionPanel [sketch] 複数の状態を持ったパネルです。 押すたびに状態が順番に切り替わる自動モードと、変わらないマニュアルモードがあります。 例えば、Skip用のボタンは、スキップオフ時とオン時のふたつの状態を持っていて、 そのどちらの状態でもパネルをクリックすることが出来ます。 このような場合に利用する選択アイテムです。 状態の個数は正の整数の範囲で任意です。 作成用データ画像の構造は、次の通り 1A.通常時(off mouse・状態Ａ） 2A.選択時(on mouse・状態Ａ） 3A.無効時（状態Ａ） 1B.通常時(off mouse・状態Ｂ） 2B.選択時(on mouse・状態Ｂ） 3B.無効時（状態Ｂ） .... +--+--+--+--+--+--+ +--+--+--+ |1A|2A|3A|1B|2B|3B|....|1n|2n|3n| +--+--+--+--+--+--+ +--+--+--+ と並んでいるＣＧファイルを利用する。 それぞれのパターンは、同じ大きさでなければならない。 ※パターン番号は、左から 0, 1, 2, 3, .... となる。 ※パターン番号は、fitClickmap()等の引数で利用される。 ------------------------------------------------------------------- 6.Animation 各状態のアニメーションが定義できるパネルです。 作成用データ画像の構造は、次の通りで、１枚の画像を利用します。 各パターンの大きさは同一でなければなりません。 +--+--+--+--+--+--+ +--+--+--+ |A |B |C |D |E |F |....|Z |A1|B1|.... +--+--+--+--+--+--+ +--+--+--+ 実際の定義は、 1.通常時(off mouse)のシーケンス 2.選択時(on mouse)のシーケンス 3.無効時のシーケンス の３つのシーケンスを定義することで行います。 シーケンスの記法は、retouch標準書式を利用します。 ------------------------------------------------------------------- 7.LevelPanel [sketch] スライダーの代わりに利用するパネルで、複数のレベルを持っています。 昨今では余り用いられません（スライダーを使うため） +---------------------------------+ | LEVEL-0 画像 | +---------------------------------+ | LEVEL-1 画像 | +---------------------------------+ ‥‥ +---------------------------------+ | LEVEL-N 画像 | +---------------------------------+ 個々の LEVEL-X 画像は、panelと同様、次の形をしています。 +---+---+---+ | 1 | 2 | 3 | +---+---+---+ 1.通常時(off mouse) 2.選択時(on mouse) 3.無効時 例えば、0-8 までの値を取るスライダーを作る場合 □□□□□□□□用パネル ■□□□□□□□用パネル ■■□□□□□□用パネル ■■■□□□□□用パネル ■■■■□□□□用パネル ■■■■■□□□用パネル ■■■■■■□□用パネル ■■■■■■■□用パネル ■■■■■■■■用パネル としておくと、クリックした位置に応じてレベルが選択され適切なレベルメーターの 表示が行われることになります。 ===================================================================== ボタン 　パネルに、決定時の状態が追加されたボタン。 　つまり、押せば引っ込んで（とは限らないが）戻ってくるボタン。 ------------------------------------------------------------------- 1.Button Panel2と同様、各パターンは同じ大きさでなければなりません。 押された際のアクションに無駄な時間がかかるので、現在ではほとんど パネル系にとって変わられています。 作成用データ画像の構造は、次の通り +---+---+---+---+ | 1 | 2 | 3 | 4 | +---+---+---+---+ 1.通常時(off mouse) 2.選択時(on mouse) 3.押したとき(click L) 4.無効時 ------------------------------------------------------------------- 2.SelectButton 通常ボタンは押した後元に戻りますが、このボタンは押した後、選択された ことを表す状態になり、その状態では押すことが出来なくなります。 複数のボタンをグループ化して、排他で押すような場合に（所謂、ラジオ ボタンのような用途に）利用します。 なお、選択されている状態に invalidを利用しているため、純粋なinvalid 状態を作ることは出来ません。 作成用データ画像の構造は、次の通り +---+---+---+---+ | 1 | 2 | 3 | 4 | +---+---+---+---+ 1.通常時(off mouse) 2.選択時(on mouse) 3.押したとき(click L) 4.無効時（押された状態） ------------------------------------------------------------------- 3.ConditionButton ConditionPanelのButton版。 画像データの並びが、歴史的事情から少し違うので注意。 作成用データ画像の構造は、次の通り 1A.通常時(off mouse・状態Ａ） 2A.選択時(on mouse・状態Ａ） 3A.無効時（状態Ａ） 4A.押した時（状態Ａ） 1B.通常時(off mouse・状態Ｂ） 2B.選択時(on mouse・状態Ｂ） 3B.無効時（状態Ｂ） 4B.押した時（状態Ｂ） .... +--+--+--+--+--+--+--+--+ +--+--+--+--+ |1A|2A|3A|4A|1B|2B|3B|4B|....|1n|2n|3n|4n| +--+--+--+--+--+--+--+--+ +--+--+--+--+ それぞれのパターンは、同じ大きさでなければならない。 ===================================================================== チェックボックス 押すと状態が変わるコントロール。 歴史的にOnMouse時の画面効果がないため、それが必要な場合を含め、 最近では背景レイヤーに対するConditionPanelで代用されることが多い。 （チェックボックスが書かれた、ConditionPanelを作るわけです） ------------------------------------------------------------------- 1.CheckBox 文字列付きのチェックボックス。 押すたびに状態が入れ替わる、toggleModeと、一度押されると元に戻らない decideModeがある。decideModeは主にグループ化されたチェックボックスに 利用される。 現在では、文字列を画像で用意して、チェックボックスには、Checkを 使う場合が多い。 作成用データ画像の構造は、次の通り +---+---+---+---+ | 1 | 2 | 3 | 4 | +---+---+---+---+ 1.uncheck 2.check 3.uncheck invalid 4.check invalid 指定される領域は、 文字列の長さ＋ＣＧ１個分の長さ ｘ ＣＧまたは文字列の高さの高いほう ＣＧおよび文字列の高さの低い方は、もう片方の高さに対してセンタリングされる 位置に置かれる。 ------------------------------------------------------------------- 2.Check [sketch] 文字列なしの単体チェックボックス。CheckBoxは文字列が付いている。 押すたびに状態が入れ替わる、toggleModeと、一度押されると元に戻らない decideModeがある。decideModeは主にグループ化されたチェックボックスに 利用される。 作成用データ画像の構造は、次の通り +---+---+---+---+ | 1 | 2 | 3 | 4 | +---+---+---+---+ 1.uncheck 2.check 3.uncheck invalid 4.check invalid ------------------------------------------------------------------- 3.EnterCheck カーソルが乗っただけで押されるチェックボックス。マスク対応。 decideModeしかない。 作成用データ画像の構造は、次の通り +---+---+---+---+ | 1 | 2 | 3 | 4 | +---+---+---+---+ 1.uncheck 2.check 3.uncheck invalid 4.check invalid ===================================================================== 文字列 ------------------------------------------------------------------- 1.String 指定された文字列を表示して、選択させるオブジェクトで、 ポイントされると、文字の色を変えて表示します。 現在では、ゲーム中にはあまり利用されません。 ツール等を作る際、簡単な入力のために利用されることがあります。 作成用データ画像はありません。 ===================================================================== スライダー min の位置から、maxの位置へ直線的にスライドするスライダー スライダー類には数値表示を同期させることが出来ます。 その際の数値の標準画像パターンは、"０１２３４５６７８９　"という 横繋がりの１１パターンを持った画像が利用されます。 ------------------------------------------------------------------- 1.HSlider 水平方向のスライダー。 w +---------------------------------+ nMin+--+ +--+nMax || |=========================| || h |+--+ +--+| +---------------------------------+ 各名称は、create()の引数と同じ nMin, nMax は、範囲全体の相対座標。trimの左上を指す。 trim のＣＧ配置は +----------+------ | | | normal | ...user define | | +----------+------ 個数は、create()のtrimNumで指定します drawTrim()をオーバーライドして使用します。 backgroundサーフェースの書式は +---------------------------------+ | | | normal background | | | +---------------------------------+ | | | invalid background | | | +---------------------------------+ 実際のメモリ上の配置は +---------------------------------+ | | | 合成された背景ＣＧ | | | +---------------------------------+ | | | normal background | | | +---------------------------------+ | | | invalid background | | | +---------------------------------+ 合成は、createBackgroundCache()が行います。 通常の処理は、合成された背景ＣＧを利用します。 ------------------------------------------------------------------- 利用方法は、大体次の通り。trim.mcgは、１個のトリムで50x74のサイズを 持っています。また、メモリの針は、Ｘ軸の真ん中にあるため、trimPoint は２５です。 // trim size 50x74 FCLSIHSlider slider; slider.create( 202+50, 74 // 選択アイテムの大きさ。今回の場合高さはトリムと同じ。 , 50, 0, 100 // とれる値の範囲は０〜１００で、初期位置は５０ , 0, 0 // 最小の際のトリム位置（選択アイテム相対）x, y , 202, 0 // 最大の際のトリム位置（選択アイテム相対）x, y , "trim.mcg" , 1 // trimNum , 25 // trimPoint , -1 // trim transparency color ); ... // 選択アイテムＩＤ９４番で、LAYER_SELECTに関連づける view.attach(LAYER_SELECT, 94, slider, 0, 18*12); ... // 背景の設定は、attach()した後にすること。 slider.createBackground("slider.mcg", -1); ... int nCode = 0; int nInputCode = 0; while(nInputCode != -1) { nInputCode = view.select(INFINITE, TRUE); if(view.layerCode(nInputCode) == LAYER_SELECT && (! view.isKeyCode(nInputCode))) { switch((nCode = view.clickmapCode(nInputCode))) { ... // 通常の選択アイテムは、クリックすると終了させるが nInputCode = -1; break; } } } ... view.detach(LAYER_SELECT, 94); // 終了したら関連づけを解除する。破棄はデストラクタがやってくれる。 view.disableQueue(); // スライダーとは関係ないけど、入力キューを殺しておこうね（笑 ... ------------------------------------------------------------------- 2.HSlider2 つまみの無効状態を持った、水平スライダー。 trim のＣＧ配置は +--------+--------+ | | | | normal |invalid | | | | +--------+--------+ create()のtrimNumには、２を指定して下さい。 ------------------------------------------------------------------- 3.HSlider3 [sketch] 次の特徴を持った水平スライダー ・トリムに無効状態がある ・最小値からトリムまでと、トリムから最大値までの範囲で異なる背景を利用する 作成用データ画像の構造は、次の通り trim のＣＧ配置は +--------+--------+ | | | | normal |invalid | | | | +--------+--------+ backgroundサーフェースの書式は +---------------------------------+ | | | min-now background | | | +---------------------------------+ | | | now-max background | | | +---------------------------------+ | | | min-now invalid background | | | +---------------------------------+ | | | now-max invalid background | | | +---------------------------------+ ------------------------------------------------------------------- 3.VSlider 垂直であることを除けばHSliderと同じ。 trim のＣＧ配置は +----------+------ | | | normal | ...user define | | +----------+------ 個数は、create()のtrimNumで指定します drawTrim()をオーバーライドして使用します。 backgroundサーフェースの書式は +-------------------------+--------------------------+ | | | | normal background | invalid background | | | | +-------------------------+--------------------------+ ------------------------------------------------------------------- 4.VSlider2 つまみの無効状態を持った、水平スライダー trim のＣＧ配置は +--------+--------+ | | | | normal |invalid | | | | +--------+--------+ ------------------------------------------------------------------- 5.VSlider3 ・トリムに無効状態がある ・最小値からトリムまでと、トリムから最大値までの範囲で異なる背景を利用する trim のＣＧ配置は +--------+--------+ | | | | normal |invalid | | | | +--------+--------+ backgroundサーフェースの書式は +---------------+---------------+---------------+---------------+ | | | | | | min-now | now-max | min-now | now-max | | | | invalid | invalid | +---------------+---------------+---------------+---------------+ ------------------------------------------------------------------- 6.VScrollBar いわゆる、windows95以降の垂直スクロールバー トリムの大きさが、値によって変更される。 実際のトリムは、下図の Ｔ ＋ Ｍ x 必要なだけ ＋ Ｂ で構成される。middleの個数は、全体の範囲と表示されている範囲で 決まるが、最小値は０なので、トリム高の最小値はＴ＋Ｂとなる。 trim のＣＧ配置は +---------------+----------------+ | normal upper | invalid upper | 高さＴは指定可能 +---------------+----------------+ | normal middle | invalid middle | １ブロックの高さＭは指定可能 +---------------+----------------+ | normal lower | invalid lower | 高さＢは指定可能 +---------------+----------------+ =====================================================================