Giter VIP home page Giter VIP logo

compositetoggle's Introduction

CompositeToggle & StyleSystem

Overview

CompositeToggle & StyleSystem are components that manage snapshots of properties.
They supports every properties including Image's Sprite, Graphic's Color, Text's text, GameObject's SetActive, etc...
Set values to properties you need, at same time, without other script.

Requirement

  • Unity5.3+
  • No other SDK

Usage

  1. Download CompositeToggle.unitypackage and install to your project.
  2. AddComponent CompositeToggle or Style to the GameObject.
  3. Enjoy!

How to contorol component's properties in Unity?

In Unity, how to control Images and Text components at the same time?
How to control the properties, such as sprite, text, color or fontSize?
It's common case in game development.

compositetoggle_switch

Do you use UnityEvent? Unfortunately, structures such as Color are not supported.
So, we need a script as following to control the properties.

The script controls 'state (On / Off)' and 'property (sprite etc.)'.
Therefore, as the state or properties increase, we need to add a script.
Considering work bottleneck and maintainability, it is not good.

[SerializeField] Sprite sptireOn;
[SerializeField] Sprite sptireOff;
[SerializeField] Color colorOn;
[SerializeField] Color colorOff;
[SerializeField] int fontSizeOn;
[SerializeField] int fontSizeOff;

void SwitchOn()
{
    GetComponent<Image>().sprite = sptireOn;
    GetComponent<Image>().color = colorOn;
    GetComponent<Text>().fontSize = fontSizeOn;
}

void SwitchOff()
{
    GetComponent<Image>().sprite = sptireOff;
    GetComponent<Image>().color = colorOff;
    GetComponent<Text>().fontSize = fontSizeOff;
}
...

CompositeToggle

CompositeToggle implemented to separate 'state' and 'property'.
The state is defined by a script, and the property is defined by a scene or a prefab.
The script should only turn the toggle on or off. Yes, it is very simple.

compositetoggle_property

[SerializeField] CompositeToggle toggle;

void SetToggleValue(bool isOn)
{
    toggle.booleanValue = isOn;
}

CompositeToggle manage snapshots of properties.
Set values to properties you need, at same time, without other script.

compositetoggle_selectproperty

StyleSystem

StyleSystem collectively manages the properties of Component and separates layout and design like CSS.
A style have some properties you need, and can be referred to by multiple GameObjects.
When the properties of the style are changed, they are immediately applied to the referencing GameObjects.

stylesystem_inspector

In addition, styles can apply at runtime :)

style_pp

Bake Properties To Improve Performance

CompositeToggle internally uses reflection.
Reflection is slow? -Yes, that's right.
You can avoid reflection by baking the property to the script.
Bake the properties from the Style or StyleAsset inspector.

image

Screenshot

  • Tabs and views
    compositetoggle_tabs

  • Indicator
    compositetoggle_indicator

Release Notes

ver.0.1.1:

  • Fixed: InspectorGUI issue.
  • Fixed: Demo scene.

ver.0.1.0:

  • Feature: Supports every properties of all components.
  • Feature: Set values to properties you need, at same time, without other script.
  • Feature: Bake properties to script to improve invocation performance.
  • Feature: (CompositeToggle) 4 kind of value type.
    • Boolean
    • Index
    • Count
    • Flag
  • Feature: (CompositeToggle) Synchronization mode
    • Parent-child relationships
    • Grouping
    • Sync-Other
  • Feature: (CompositeToggle) Some features for every toggles.
    • Comment
    • GameObject activation
    • UnityEvent
  • Feature: (CompositeToggle) Auto grouping construction based on hierarchy children.
  • Feature: (StyleSystem) Style inheritance.

compositetoggle's People

Watchers

James Cloos avatar  avatar

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.