ThemePackの基本を解説します。

目次

Directory-Structure

/
├─ assets
│  ├─ designs
│  │  ├─ bases
│  │  │  ├─ main1.json
│  │  │  ├─ main2.json
│  │  │  ├─ main3.json
│  │  │  ├─ main4.json
│  │  │  ├─ main5.json
│  │  │  ├─ main6.json
│  │  │  ├─ main7.json
│  │  │  ├─ main8.json
│  │  │  ├─ fill_pallet1.json
│  │  │  ├─ fill_pallet2.json
│  │  │  ├─ fill_pallet3.json
│  │  │  ├─ fill_pallet4.json
│  │  │  ├─ stroke_pallet1.json
│  │  │  ├─ stroke_pallet2.json
│  │  │  ├─ stroke_pallet3.json
│  │  │  ├─ stroke_pallet4.json
│  │  │  ├─ settings1.json
│  │  │  ├─ settings2.json
│  │  │  ├─ settings3.json
│  │  │  ├─ settings4.json
│  │  │  ├─ export1.json
│  │  │  ├─ export2.json
│  │  │  ├─ export3.json
│  │  │  ├─ export4.json
│  │  │  ├─ save1.json
│  │  │  ├─ save2.json
│  │  │  ├─ save3.json
│  │  │  ├─ save4.json
│  │  │  ├─ load1.json
│  │  │  ├─ load2.json
│  │  │  ├─ load3.json
│  │  │  └─ load4.json
│  │  ├─ buttons
│  │  │  ├─ add_ellipse.json
│  │  │  ├─ add_rectangle.json
│  │  │  ├─ tgl_fill_pallet_mode.json
│  │  │  ├─ tgl_stroke_pallet_mode.json
│  │  │  ├─ tgl_settings_mode.json
│  │  │  ├─ tgl_export_mode.json
│  │  │  ├─ tgl_save_mode.json
│  │  │  ├─ tgl_load_mode.json
│  │  │  ├─ duplicate_layer.json
│  │  │  ├─ raise_layer.json
│  │  │  ├─ lower_layer.json
│  │  │  ├─ delete_shape.json
│  │  │  ├─ bring_to_front.json
│  │  │  ├─ send_to_back.json
│  │  │  ├─ move_up_1px.json
│  │  │  ├─ move_down_1px.json
│  │  │  ├─ move_right_1px.json
│  │  │  ├─ move_left_1px.json
│  │  │  ├─ rotate_left_90.json
│  │  │  ├─ rotate_right_90.json
│  │  │  ├─ double_width.json
│  │  │  ├─ double_height.json
│  │  │  ├─ double_ratio.json
│  │  │  ├─ half_width.json
│  │  │  ├─ half_height.json
│  │  │  ├─ half_ratio.json
│  │  │  ├─ zoom_in.json
│  │  │  ├─ zoom_out.json
│  │  │  ├─ reset_zoom.json
│  │  │  ├─ save_project.json
│  │  │  ├─ open_file.json
│  │  │  ├─ load_theme.json
│  │  │  ├─ convert_code.json
│  │  │  ├─ save_code_as_text_file.json
│  │  │  └─ save_code_to_clipboard.json
│  │  └─ others
│  │     ├─ canvas.json
│  │     ├─ fill_pickers.json
│  │     ├─ stroke_pickers.json
│  │     ├─ theme_path_dialog.json
│  │     ├─ export_preview.json
│  │     ├─ export_path_dialogson
│  │     ├─ save_path_dialog.json
│  │     └─ load_path_dialog.json
│  └─ images
└─ pack.meta

imagesディレクトリの下に、異なるネームスペース用の複数のディレクトリが存在することがあります。

pack.meta

pack.metaは、プログラムがフォルダがThemePackかどうかを調べるために利用されます。pack.metaは、以下のように記述します。

{
	"pack":{
		"pack_var": 0,
		"description": "template for ThemePack wiki"
	}
}

Designファイル

上記したディレクトリツリーのように、ThemePackはたくさんのjsonファイルで構成されています。それぞれのjsonファイルには、画面上の各要素を表すための情報が記載されており、Designファイルと呼ばれています。

以下は、最も簡素なDesignファイルの例です。

{
    "description": "Design templates for ThemePack wiki",
    "author": "boo_manKnow",
    
    "containerAnker": "topRight",
    "blockMode": "vertical",
    "blockAnker": "CORNER",
    "layer": 1,

    "elements": {
        "e1": {
            "type": "base",
            "layout": {
                "x_point": 0,
                "y_point": 0,
                "width_point": 4,
                "height_point": 4
            },
            "fillCol": "#FF0000"
        }
    }
}

例えば、上記のDesignファイルでは右上を軸にした赤色の正方形を、ツール内に描画することができます。それぞれの要素について説明します。

基準

containerAnker、blockMode、blockAnkerはウィンドウサイズに依存しないGUIを実装するため作成された仕組みの一つです。

参考：GUIを実装するために