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

2015 年 1 月 29 日

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」にその幅と高さを指定する。