[AIR] JoSi FXGtoLayout

JoSi FXGtoLayout

v0.3.0, Adobe AIR 3 runtime

這個又是一個 "就是" 系列懶人小工具，主要是針對 Adobe fxg 格式做分析轉成 Mobile 開發用的視圖程式碼，加速畫面配置使用。

為什麼會製作這個工具，原因主要是本人在使用的 Corona SDK 與 Titanium SDK 都沒有好用的視覺化編輯工具。一般設計師產出 layout 檔會使用 PhotoShop 來製作，在不多花錢的原則下，畫面對齊的基準就是其輸出的 fxg 資料做對應，如果要一筆一筆將資料鍵入，做久也是會膩的，所以花了點時間將這個工具做出來...



不過目前版本僅支援 Corona SDK 格式輸出。

目前版本 0.3.0 feature:

1. 拖曳並放置 fxg 檔案後，轉換的文字會直接貼到剪貼簿。
2. 產生之物件名稱以 d:userLabel 為主(即 PhotoShop 圖層名稱），所以請注意命名。
3. 僅支援 Corona SDK 格式輸出。
4. 僅支援 fxg <<BitmapImage /> 標籤，PhotoShop and Flash 輸出皆可使用，差別是 Flash 會採用 newImage。
5. 先這樣囉！

輸出之程式碼範例：（輸出 by Photoshop) 

----------------------------------------------------------------------
-- JoSiFXGtoLayout
-- Author:Erin Lin
-- erinylin.blogspot.com
-- Copyright (c) 2013 Erin Lin( Yu-Shan Lin )
-- File Name:file:///---/menu.fxg
----------------------------------------------------------------------
local function moveTo(target, x, y)
target:setReferencePoint(display.TopLeftReferencePoint);
target.x=x; target.y=y
end

local _imgPath='menu.assets/images/'

local bg_ = display.newImageRect( _imgPath..'bg1_0.png', 640, 960 )
moveTo( bg_, 0, 0 )
group:insert( bg_ )

local bg_ = display.newImageRect( _imgPath..'bg2_1.png', 640, 960 )
moveTo( bg_, 0, 0 )
group:insert( bg_ )

local logo = display.newImageRect( _imgPath..'logo_2.png', 586, 925 )
moveTo( logo, 17, 0 )
group:insert( logo )

local btn_stage = display.newImageRect( _imgPath..'btn_stage_4.png', 184, 184 )
moveTo( btn_stage, 199, 578 )
group:insert( btn_stage )

local btn_option = display.newImageRect( _imgPath..'btn_option_6.png', 134, 134 )
moveTo( btn_option, 372, 720 )
group:insert( btn_option )

local btn_ta = display.newImageRect( _imgPath..'btn_ta_8.png', 161, 160 )
moveTo( btn_ta, 26, 682 )
group:insert( btn_ta )

local btn_score = display.newImageRect( _imgPath..'btn_score_10.png', 162, 162 )
moveTo( btn_score, 491, 612 )
group:insert( btn_score )

將產生的程式碼直接 ctrl-p or command-p 到 Corona SDK 的 storyboard template 之 scene:createScene function 內即可，當然前提是 fxg 輸出時的 assets 檔案夾記得 copy 到工作環境下。

[ DOWNLOAD NOW ]