LoginSignup
2

More than 3 years have passed since last update.

Noodlで色の変わるOn/Offボタンを作る

Posted at

概要

 NoodlでOn/Offボタンを作ってみました。その備忘録を残します。
↓のようにボタンを押すと色とテキストが変わります。

 

全体のフローは次の通りです。
image.png

作ってみる

使用するノード

 次の4種類のノードを使用します。

Circle
 ボタンの外見に使用します。
Text
 ボタンに表示するテキストです。
States
 ボタンのOn/OFF状態を設定します。
Color Blend
 複数の色を用意し、"Blend Value"で与えられた値に応じて色を出力します。

ボタンを押すと状態遷移

 Circleノードを押すと、Statesが変わるようにしています。Circleノードの"Tap"とStatesノードの"Toggle"を接続します。これで状態が遷移するようになります。
image.png

Statesノードで扱う"States"と"Values"は次の通りです。
image.png

各状態のValueは次のように設定しました。
image.png

状態で色を変える

image.png

色のコントロールは"Color Blend"ノードで行います。
このノードは予め色を登録しておき、"Blend Value"で与えられた値によって、出力する色を変えます。
今回は次のように設定しました。
image.png

Blend Valueは各色の割合を設定するようです。
 0 → Color0
 1 → Color1

0.5を設定すると、Color0とColor1の中間色が出力されるようです。
Color Blendノードの"Result"をCircleノードの"Color"に接続します。

以上でボタンの色を変えることができました!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2