[Cocos2d-x] Cocos Studio: UI Editorにおける9-sliceの指定方法

2015 年 1 月 29 日 Categories: プログラミング | Tags:

9-sliceとは

9 scale、scale 9、slice 9などいろいろな呼び方がある。

特定の画像を縦横3 x 3に9分割し、縦・横・真ん中のそれぞれ8つの部分を引き延ばして表示する機能。

GUIのウィンドウなどによく使われる。

基本

以下は、Cocos Studio v1.x系の場合。2.x系では微妙に指定方法が変わっている。

Cocos Studioでは、真ん中部分の原点座標とそのサイズ(幅・高さ)を指定する。

ImageウィジェットだけでなくPanel(コンテナ)の背景画像でも指定可能。

方法

該当ウィジェットの「プロパティ」ウィンドウの「サイズ」ペインにある「3*3 Grids」のチェックボックスをオンにする。

(言語が日本語や中国語だと「九宮枠」と表示されているかもしれない)

表示されている「Origin X, Y」に真ん中部分の原点座標を、「Width, Height」にその幅と高さを指定する。