Merge pull request #4 from piti6/mkim/readme

Update README.md

README-JP.md

@@ -0,0 +1,105 @@
+# UniSkin
+
+[![CodeFactor](https://www.codefactor.io/repository/github/piti6/uniskin/badge?s=f9067ada8527e600dfed06fa997c7011d0c95735)](https://www.codefactor.io/repository/github/piti6/uniskin)
+[![Unity](https://img.shields.io/badge/Unity-2019.4+-brightgreen)](https://unity3d.com/kr/unity/qa/lts-releases?version=2019.4)
+
+![Screenshot](https://user-images.githubusercontent.com/19143280/108381460-2bed0780-724b-11eb-9f0c-90ce8226edeb.png)
+
+自分だけのカスタムスキンを作りましょう :)
+
+#### 現在、UniSkinはプレビュー版です。
+#### プレビュー版は様々なバグを含んでいる可能性があり、安定した動作は保証しません。
+
+## 特徴
+
+- ウィンドウごとに完全なカスタマイズ可能
+  - 色背景
+  - 画像背景
+  - (半)透明背景
+  - フォントサイズ
+  - フォントカラー
+  - フォントスタイル
+
+- ウィンドウごとに追加で二枚の画像背景表示可能
+- 扱いやすい単一ファイルフォーマット(.skn)
+
+## インストール
+
+### 要求事項
+#### サポートするユニティバージョン
+- Unity 2019.4+
+- テスト済み
+  - Unity 2019.4.17f1
+  - Unity 2020.2.1f1
+  - Unity 2021.1.0b6
+- 対応予定
+  - Unity 2018.4+
+- 対応予定なし
+  - ~ Unity 2017
+
+### UPM (Unity Package Manager)を用いたインストール
+- 自動インストール
+  - Unity上部メニューの Window -> Package Managerを選択
+  - 左上の「+」ボタンを押し、「Add package from git URL」項目を選択
+  - 「https://github.com/piti6/UniSkin.git」を入力し、Addボタン選択
+- 手動インストール
+  - 次をmanifest.jsonのdependencies以下に記入
+`"space.mkim.uniskin": "https://github.com/piti6/UniSkin.git"`
+
+## Quickstart
+
+- Unity上部メニューの Window -> UniSkinを選択するとスキン編集ウィンドウが開きます。
+- 「Load from file」を選択するとスキンファイルを選択出来ます。
+- 「Sample.skn」ファイルを選択すると、サンプルのスキンが適用されます。
+
+## Getting started
+
+### スキンインスタンスの扱い
+- 基本的にはUniSkinは以下のようにユニティのレイアウトシステムの方針と同じ方針を取っています。
+  - UniSkinのスキンはパソコン全体を跨いで共有されます。全てのユニティバージョンとプロジェクトを跨いで一つです。
+  - 現在のスキンをファイルとして書き込むか、ファイルから読み込むことが可能です。
+
+### スキン編集ウィンドウ
+
+### Top page
+![image](https://user-images.githubusercontent.com/19143280/108517172-6d90b780-730a-11eb-9ac5-ebf33565a76b.png)
+
+1. スキンの命名を変えます。
+2. 現状の変更をスキンインスタンスに保存します。
+3. 現状のスキンインスタンスと変更をファイルとして保存します。
+4. ファイルからスキンを読み込み、現在のスキンインスタンスに上書きします。
+5. 現状の変更を破棄します。
+6. 現状のスキンインスタンスを破棄し、通常のユニティ状態に戻します。
+7. 編集したいEditorWindowを選択します。リストは現状表示されているEditorWindowを閲覧します。(特定のウィンドウを編集したいのであれば、そのウィンドウを開く必要があります)
+
+### Inspect view
+![image](https://user-images.githubusercontent.com/19143280/108518593-14c21e80-730c-11eb-8e78-b40079bd7608.png)
+
+*始まる前に*
+- 選択したウィンドウにかかった変更に応じて現状のinstructionリストが更新されます。
+- ということは、現状表示されているinstructionを全部編集したとしてもあり得る全部のスタイルを編集したわけではなく、現状表示されていないだけでまだ修正をかけていないスタイルがある可能性があります。(例えばインスペクターウィンドウは場合によって表示する情報の量が非常に多く、完璧に全てのスタイルを編集したい場合は多くの作業が必要となります。)
+
+1. カスタム画像背景
+  - 二枚まで、GUI.DrawTexture(ScaleMode.ScaleAndCrop);を用いて描画される背景を設定出来ます。
+  - 基本的に背景を表示する際にはこちらの設定を使うことをお勧めします。(後述するGuiStyleのbackgroundTextureはScaleMode.StretchToFillを使うからです。)
+  - 普段はEditorWindowに多くのものが表示されるため、設定したカスタム画像背景を隠すことがあります。カスタム画像背景を表示するためには、3番項目で説明する方法で背景を隠すエレメントを完全に透明にする必要があります。
+2. Instruction選択ウィンドウ
+  - 特定のInstructionを選択し、右に表示されるスタイルを編集します。
+  - 同ウィンドウ内の同一スタイルは一緒に編集されます。
+  - Instructionを選択すると、当ウィンドウで該当する項目がハイライトされ、編集しようとする項目がどれなのかが認識できます。
+3. スタイル編集
+  - 現状選択した項目のスタイルを編集します。
+  - FontSize: フォントサイズを編集します。
+  - FontStyle: フォントスタイルを編集します。(bold/italicなど)
+  - Normal/Hover/Active/Focused/OnNormal/OnHover/OnActive/OnFocused
+    - https://docs.unity3d.com/ScriptReference/GUIStyle.html の説明と同様に動作します。「On」 がつくものに関しては(OnNormal, OnHover等々)、OnとOffの状態があるものに対して適用されます。(Toggle/Checkboxなど)
+  - 上記スタイルを選択した場合
+    - Texture/Color
+      - Textureを選択した場合、Textureを選択したスタイルの背景として使うことが出来ます。ScaleMode.StretchToFillを用いて描画することにご注意ください。
+      - Colorを選択した場合、背景として色を設定することが出来ます。アルファ値も効きます。**アルファを0にすると透明になるので、カスタム画像背景を使いたい場合は邪魔になる項目を透明にすることが必要となります。**
+    - TextColor: テキストのカラーを変えます。アルファ値も効きます。
+
+### Contribution
+- Issue/PRはいつでも大歓迎です :)
+- サンプルスキンを作るのに困っているため、サンプルスキンの制作を手伝って頂けると非常に助かります。(著作権に引っかかるものはNGとさせて頂きます。)
+

README-KR.md

@@ -0,0 +1,105 @@
+# UniSkin
+
+[![CodeFactor](https://www.codefactor.io/repository/github/piti6/uniskin/badge?s=f9067ada8527e600dfed06fa997c7011d0c95735)](https://www.codefactor.io/repository/github/piti6/uniskin)
+[![Unity](https://img.shields.io/badge/Unity-2019.4+-brightgreen)](https://unity3d.com/kr/unity/qa/lts-releases?version=2019.4)
+
+![Screenshot](https://user-images.githubusercontent.com/19143280/108381460-2bed0780-724b-11eb-9f0c-90ce8226edeb.png)
+
+UniSkin과 함께 당신만의 유니티를 만들어보세요  :)
+
+#### UniSkin은 현재 프리뷰 버전입니다.
+#### 프리뷰 버전은 각종 버그를 포함하고 있을 수 있으며, 안정된 동작을 보증하지 않습니다.
+
+## 기능
+
+- EditorWindow마다 완전히 커스터마이즈 가능한 GuiStyle적용가능
+  - 단색 배경
+  - 텍스쳐 배경
+  - 반투명 배경
+  - 폰트 사이즈
+  - 폰트 컬러
+  - 폰트 스타일
+
+- EditorWindow마다 추가로 두장의 텍스쳐 배경을 제공합니다.
+- 스킨 파일은 단일 파일로써, 편리하게 다른 사용자와 스킨을 공유할 수 있습니다.
+
+## 설치
+
+### 요구사항
+#### 지원하는 유니티 버전
+- Unity 2019.4+
+- 테스트 완료
+  - Unity 2019.4.17f1
+  - Unity 2020.2.1f1
+  - Unity 2021.1.0b6
+- 추후 대응 예정
+  - Unity 2018.4+
+- 대응 예정 없음
+  - ~ Unity 2017
+
+### UPM을 이용한 설치 (Unity Package Manager)
+- 자동 설치
+  - 유니티 상부 메뉴에서, Window -> Package Manager를 선택 해 주세요.
+  - Package Manager의 왼쪽위에 위치한 +버튼을 눌러,「Add package from git URL」메뉴를 선택 해 주세요.
+  - 「https://github.com/piti6/UniSkin.git」을 입력하고 Add버튼을 눌러주세요.
+- 수동 설치
+  - manifest.json파일을 편집기로 열고, dependencies이하에
+`"space.mkim.uniskin": "https://github.com/piti6/UniSkin.git"` 를 기입해 주세요.
+
+## Quickstart
+
+- 유니티 상부 메뉴에서 Window -> UniSkin를 선택하면 스킨 편집 윈도우를 열 수 있습니다.
+- 「Load from file」을 선택 해 주세요.
+- 샘플로 제공되는「Sample.skn」파일을 선택하면 샘플 스킨이 적용됩니다.
+
+## 시작하기
+
+### 인스턴스 관리 정책
+- 기본적으로, UniSkin은 이하와 같이 유니티의 레이아웃 시스템의 정책을 따라갑니다.
+  - UniSkin은 컴퓨터 내에서 모든 유니티 버전과 프로젝트를 통틀어 하나의 스킨이 적용됩니다.
+  - 현재 스킨을 파일을 통해 보존하거나, 파일에서 스킨을 불러올 수 있습니다.
+
+### 스킨 편집 윈도우
+
+### 톱 페이지
+![image](https://user-images.githubusercontent.com/19143280/108517172-6d90b780-730a-11eb-9ac5-ebf33565a76b.png)
+
+1. 스킨이름을 변경합니다.
+2. 현재 편집한 변경사항을 스킨 인스턴스에 적용합니다.
+3. 현재 스킨 인스턴스와 변경사항을 파일로 보존합니다.
+4. 파일에서 스킨을 로드해서 현재 스킨인스턴스 위에 덮어씁니다.
+5. 현재 편집한 변경사항을 파기합니다.
+6. 현재 스킨 인스턴스를 파기하고, 기본 유니티 상태로 되돌아갑니다.
+7. 편집하고 싶은 에디터 윈도우를 선택합니다. 팝업 리스트는 현재 활성화 되어있는 모든 에디터 윈도우를 표시합니다. (만약에 특정 윈도우를 편집하고 싶으시다면, 그 윈도우를 메뉴에서 선택해서 표시해야 할 필요가 있습니다.)
+
+### 상세뷰
+![image](https://user-images.githubusercontent.com/19143280/108518593-14c21e80-730c-11eb-8e78-b40079bd7608.png)
+
+*시작전에*
+- 편집중인 윈도우의 UI가 갱신되면, 스킨 편집 윈도우의 상세뷰가 새로고침 됩니다.
+- 따라서, 현재 상세뷰에 표시되어 있는 항목을 모두 편집했다고 해서 해당 윈도우에 있는 모든 스타일을 편집한 것은 아니라는 점을 명심 해 주세요. 아직 해당 윈도우에 표시되지 않은 항목이 있다면, 해당 항목은 편집되지 않았을 가능성이 있습니다. (예를 들면, 유니티의 인스펙터는 정말 많은 종류의 정보를 담고 있기 때문에 만약 인스펙터의 모든 스타일을 편집하려 한다면 많은 노력이 필요하게 됩니다) 
+
+1. 커스텀 텍스쳐 배경
+  - GUI.DrawTexture(ScaleMode.ScaleAndCrop); 를 통해 그려지는 커스텀 텍스쳐 배경을 설정할 수 있습니다.
+  - 기본적으로는 이 기능을 사용하여 배경을 설정하게 될 텐데요, GuiStyle의 backgroundTexture는 uses ScaleMode.StretchToFill모드를 사용하기 때문입니다. (윈도우를 늘리거나 하면 찌그러져요)
+  - 보통 커스텀 텍스쳐 배경을 설정하시더라도 바로 보이지 않는데요, 왜냐하면 커스텀 텍스쳐 배경보다 위에 많은 종류의 UI가 그려지기 때문입니다. 커스텀 텍스쳐 배경을 보이게 하시려면, 앞에서 가리고 있는 항목들을 투명하게 해줄 필요가 있습니다.「3. 스타일 편집」을 참고해 주세요.
+2. 인스트럭션 선택 윈도우
+  - 현재 선택중인 윈도우의 특정 스타일을 선택합니다.
+  - 동일한 스타일을 사용중인 항목은 함께 편집됩니다.
+  - 인스트럭션을 선택할 경우, 해당하는 UI가 하이라이트 되어 자신이 어떤 항목을 편집하고 있는지 확인할 수 있습니다.
+3. 스타일 편집
+  - 선택한 스타일을 편집합니다.
+  - FontSize: 폰트 사이즈를 변경합니다. 선택한 스타일이 텍스트에 사용되지 않는다면, 당연한 얘기이지만 아무일도 일어나지 않습니다.
+  - FontStyle: 볼드, 이탤릭 같은 폰트의 속성을 변경합니다.
+  - Normal/Hover/Active/Focused/OnNormal/OnHover/OnActive/OnFocused
+    - https://docs.unity3d.com/ScriptReference/GUIStyle.html GUIStyle의 각 항목과 완전히 일치합니다. 「On」이 붙는 항목들 (OnNormal, OnHover..) 은 On/Off 상태가 있는, 토글이나 체크박스에서 사용됩니다.
+  - 위에 상태중 하나를 선택했을때
+    - Texture/Color
+      - Texture모드에서는, 선택한 스타일의 배경으로 텍스쳐를 사용할 수 있습니다. ScaleMode.StretchToFill을 사용해 그린다는 점에 주의하세요. (찌그러집니다)
+      - Color모드에서는, 단색 배경의 설정이 가능합니다. 알파값도 적용됩니다. **따라서, 커스텀 텍스쳐 배경의 방해가 되는 항목을 투명하게 함으로써 커스텀 텍스쳐 배경을 표시하게 할 수 있습니다.**
+    - TextColor: 글씨의 색을 바꿉니다. 알파값도 적용됩니다.
+
+### 기여하기
+- 이슈/PR은 언제나 환영합니다 :)
+- 저는 디자이너가 아니기 때문에, 샘플 스킨을 만드는데 애를 먹고있습니다. 만약 간단한 샘플을 제작해 주실 수 있는 분이 계신다면, 감사히 도움을 받고 싶습니다. (저작권에 문제가 되지 않는 한에서)
+

README.md

@@ -12,10 +12,31 @@ Make your custom editor skin with UniSkin :)
 
 ## Features
 
-wip
+- Apply fully customized GUISkin per EditorWindow GuiStyle
+  - Colored background
+  - Textured background
+  - Transparent background
+  - Font size
+  - Font color
+  - Font style
+
+- Additional two custom texture background per EditorWindow
+- Uses single file to preserve skin (.skn), so you can handle skin file easily
 
 ## Installation
 
+### Requirements
+#### Supported Unity version
+- Unity 2019.4+
+- Tested
+  - Unity 2019.4.17f1
+  - Unity 2020.2.1f1
+  - Unity 2021.1.0b6
+- On the roadmap
+  - Unity 2018.4+
+- Not supported
+  - ~ Unity 2017
+
 ### Install via UPM
 - Automatic
   - Open Package Manager Window at Unity menu Window -> Package Manager
@@ -33,4 +54,52 @@ wip
 
 ## Getting started
 
-wip
+### Instance policy
+- Basically, UniSkin follows Unity layout system policy, as follows:
+  - UniSkin shares one skin per computer, across overall Unity versions and projects.
+  - You can save current skin as file or you can load skin from file.
+
+### Skin Editor Window
+
+### Top page
+![image](https://user-images.githubusercontent.com/19143280/108517172-6d90b780-730a-11eb-9ac5-ebf33565a76b.png)
+
+1. Changes skin name.
+2. Save current changes to current skin instance.
+3. Save current skin instance and changes to file.
+4. Load skin from file and overwrites to current skin instance.
+5. Revert current edit changes.
+6. Remove current skin and restore default Unity skin.
+7. Select EditorWindow to inspect. Popup list shows current activated windows. (If you want to customize specific EditorWindow, you should open that window.)
+
+### Inspect view
+![image](https://user-images.githubusercontent.com/19143280/108518593-14c21e80-730c-11eb-8e78-b40079bd7608.png)
+
+*Before to start*
+- Changes in selected inspected window will referesh instructions list.
+- That is, edited all of instructions on current instructions list does not mean that every style was completely edited. there will be more that if you didn't check all possible elements on that EditorWindow (e.g Inspector window has plenty of GuiStyle, which is pain) 
+
+1. Custom background texture
+  - You can add custom background textures rendered by GUI.DrawTexture(ScaleMode.ScaleAndCrop);
+  - Basically you'd prefer to use these to show backgrounds, as GuiStyle backgroundTexture uses ScaleMode.StretchToFill.
+  - Usually there's plenty of non-transparent elements on EditorWindow that hides custom backgrounds. To show custom backgrounds, you should make them completely transparent status. check 「3. Edit style」section.
+2. Instruction select window
+  - Select specific style to edit current Inspected window style.
+  - Same style will be edited together.
+  - If you select instruction, elements that uses same GuiStyle on EditorWindow will be highlighted so that you can recognizes which one you are working on.
+3. Edit style
+  - Edit current selected elements style.
+  - FontSize: changes font size. note that if selected style does not used for text display, of course it does nothing at all.
+  - FontStyle: changes font style. (attribute, such as bold/italic)
+  - Normal/Hover/Active/Focused/OnNormal/OnHover/OnActive/OnFocused
+    - Checkout https://docs.unity3d.com/ScriptReference/GUIStyle.html, it acts exactly same as it is. 「On」 series (OnNormal, OnHover, etc..) usually used in controls that has On/Off statement, such as Toggle/Checkbox.
+  - Inside Foldout of one of above style
+    - Texture/Color
+      - On Texture mode, you can use Texture as selected style background. note that this renders texture as ScaleMode.StretchToFill.
+      - On Color mode, you can use Color as selected style background. Alpha value also affects to display, **so you can use full-transparent color to hide current style background. which needs to show custom background textures.**
+    - TextColor: changes text color. Alpha value also affects to display.
+
+### Contribution
+- Issues/Pull requests are always welcome :)
+- I'm having trouble to decorate sample skin as I'm not a designer, so I appreciate your help to make a custom sample skin. (Which does not violates copyright)
+