Code Monkey home page Code Monkey logo

baum2's Introduction

baum2

Photoshop(psd) to Unity(uGUI) Library!

There are no plans to update this library with additional features in the future. I am currently developing AkyuiUnity(AdobeXD to Unity).

Buy Me A Coffee

  • Photoshop

  • Unity

Setup (Video)

Photoshop

  • Download Baum.js
  • Copy to Photoshop/Plugins directory Baum.js
    • Mac OS: Applications\Adobe Photoshop [Photoshop_version]\Presets\Scripts
    • Windows 32 bit: Program Files (x86)\Adobe\Adobe Photoshop [Photoshop_version]\Presets\Scripts
    • Windows 64 bit: Program Files\Adobe\Adobe Photoshop [Photoshop_version](64 Bit)\Presets\Scripts

Unity

  • Download & Import baum2.unitypackage
  • psd上で使用するFontは、BaumFontsファイルが置いてあるディレクトリに置いておいてください。
  • (Please import the font used on psd in the directory where "BaumFonts" file is located.)

How to use (Video)

Photoshop上での操作

  • psdを作ります。(psdの作り方参照)
  • File -> Scripts -> Baum2を選択し、中間ファイルの出力先を選択します。

Unity上での操作

  • 生成された中間ファイルをBaum2/Importディレクトリ以下に投げ込みます。
  • 自動的に「BaumPrefabs」を配置したディレクトリにprefabが出来上がります。
  • 後は、Sample/Sample.csを参考にスクリプトからBaumUI.Instantiateで実行時に生成してください。

psdの更新方法

  • 同じように中間ファイルを生成後、Baum2/Importディレクトリ以下に投げ込むと、prefabが上書き更新されます。
    • この時、prefabのGUIDは変更されないためScriptに対する参照を張り直す必要はありません。

psdの作り方

基本

基本的にPhotoshop上の1レイヤー = Unity上の1GameObjectになります。
UIの一部をアニメーションさせたい場合などは、Photoshop上のレイヤーを分けておいてください。

Text

  • Photoshop上の Textレイヤー は、Unity上でUnityEngine.UI.Textとして変換されます。
  • フォントやフォントサイズ、色などの情報も可能な限りUnity側も同じように設定されます。

Button

  • Photoshop上の 名前が"Button"で終わるグループ は、Unity上でUnityEngine.UI.Buttonとして変換されます。
  • このグループ内で、最も奥に描画されるイメージレイヤーがクリック可能な範囲(UI.Button.TargetGraphic)に設定されます。

Slider

  • Photoshop上の 名前が"Slider"で終わるグループ は、Unity上でUnityEngine.UI.Sliderとして変換されます。
  • このグループ内で、名前がFillになっているイメージレイヤーがスライドするイメージ(UI.Slider.FillRect)になります。

Scrollbar

  • Photoshop上の 名前が"Scrollbar"で終わるグループ は、Unity上でUnityEngine.UI.Scrollbarとして変換されます。
  • このグループ内で、名前がHandleになっているイメージレイヤーがスライドするハンドル(UI.Scrollbar.HandleRect)になります。

List

  • Photoshop上の 名前が"List"で終わるグループ は、Unity上でBaum2.Listとして変換されます。
  • このグループ内には、Itemグループと、Maskレイヤーが必須です。
    • Itemグループ内の要素がリストの1アイテムになります。
    • Maskレイヤーがそのリストにかかるマスクになります。
  • 詳しくはサンプルをご覧ください。

Pivot

  • Photoshop上のルート直下にあるグループにのみ使えます。
  • 名前の後ろに @Pivot=TopRight のようにPivotを指定できます。

コメントレイヤー

レイヤー名の先頭に#をつけることで、出力されないレイヤーを作ることが出来ます。

1334px以上を書き出す場合

  • Baum.jsのmaxLengthを適切な値に変更して使ってください。
  • デフォルトで1334に縮小している理由は、テクスチャのサイズを小さく抑えるためです。

Developed by

  • Unity: Unity2017, Unity2018, Unity2019
  • PhotoshopScript: Adobe Photoshop CC 2018, Adobe Photoshop CC 2019

baum2's People

Contributors

fum1h1ro avatar kyubuns avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

baum2's Issues

Layout Json File Not Converted Correctly

Hi. First i want to thank you for developing this awesome library 😃
there's a problem when plugin unity side try to read layout json file. the problem is that if one of the properties in json file is decimal number then the MiniJson (the code that plugin use to handle json) will return 0.
for example:
{"info":{"version":"0.6.1","canvas":{"image":{"w":614,"h":841},"size":{"w":614,"h":841},"base":{"x":307,"y":420.5}}},"root":{"type":"Root","name":"Spaceship","elements":[{"type":"Image","image":"spaceship-puzzle20layer","x":0,"y":92,"w":614,"h":748,"opacity":100,"name":"Spaceship Puzzle Layer"},{"type":"Image","image":"part-1","x":11,"y":0,"w":403,"h":402,"opacity":100,"name":"Part 1"},{"type":"Image","image":"part-2","x":261,"y":142,"w":342,"h":253,"opacity":100,"name":"Part 2"},{"type":"Image","image":"part-3","x":3,"y":373,"w":263,"h":223,"opacity":100,"name":"Part 3"},{"type":"Image","image":"part-4","x":142,"y":370,"w":469,"h":251,"opacity":100,"name":"Part 4"},{"type":"Image","image":"part-5","x":26,"y":609,"w":562,"h":229,"opacity":100,"name":"Part 5"}]}}

this is my layout json and there is a decimal number in json (420.5) the vector2 that plugin try to get from this json will be (307,0) instead of (307,420.5)

i changed json plugin to Newtonsoft and it worked well for me

9Slice化をしない指定

ImportにあるPNG画像はOnionRingによって、必ず
9スライス画像へと変換されますが
それをさせたくない場合に対応できるように拡張したいと思っています
その場合、どのような方法がよいでしょうか

案1)ファイル名にある文字列がはいっている場合に非9スライス
案2)非9スライス画像リストを読み込む

1334px以上のPSDを書き出すとレイアウトが崩れる

RetinaサイズのPSDでハマったので共有されてもらいます。

Baum.jsでPSDの解像度が1334pxで制限されているようです。
Baum.maxLengthをPSDサイズ以上にすると直りました。
Readmeを見落としていたらすみません。

それ以外は、まさに探していた機能です。素晴らしい!!

Not getting button work

Hi, I am trying a little complex UI here.
t1.zip
I have named layers quiet similar to your layer naming but in my case, I am not getting button script added on button layers.
Can you help?

Google Translate to Chines -
Hāi, wǒ zài zhèlǐ chángshì yīxiē fùzá de UI.
T1.Zip
wǒ yǐjīng jiāng tú céng mìngmíng wèi lèisì yú nín de tú céng mìngmíng, dàn zài wǒ de qíngkuàng xià, wǒ méiyǒu zài ànniǔ tú céng shàng tiānjiā ànniǔ jiǎoběn.
Nǐ néng bāng wǒ ma?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.