Summary
概要

ニューモーフィズムなボタンやスライダなどをOpenSiv3D上で再現するライブラリです。
OpenSiv3D v0.4.3以降で動作します。

Features
機能
NeumorphismUIでは以下のGUIオブジェクトが利用可能です。
  • ボタン
    • 角丸長方形ボタン
    • 丸形ボタン
  • スイッチ
    • 角丸長方形スイッチ
    • 丸形スイッチ
  • スライドスイッチ
  • スライダー
How to use
利用方法
ヘッダのインクルード 
#include "NeumorphismUI.hpp"
ボタン/スイッチ
ボタンは押したらON（true）に、もう一度押すとOFF（false）になります。
スイッチは押した瞬間にtrueを返します。
角丸長方形スイッチ

角丸長方形のスイッチです。
押したらONに、もう一度押すとOFFになります。 

void NeumorphismUI::RectSwitch(
  Vec2 argPosition,
  Vec2 argSize,
  bool& argVar,
  String argStr, Font& argFont,
  Color argBackgroundColor = DEFAULT_BACKGROUND_COLOR, Color argDarkColor = DEFAULT_SHADOW_COLOR, Color argLightColor = DEFAULT_LIGHT_COLOR,
  Color argFontColor = Palette::Gray, Color argPushedFontColor = Palette::Gray,
  int argRadius = 10, int argBlurSize = 16, int argShadowSize = 2,
  Vec2 argUpperShadowPosOffset = {-4, -4}, Vec2 argLowerShadowPosOffset = {4, 4}
)
指定必須な引数は第1引数（argPosition）から第5引数（argFont）までです。
第6引数以降は指定することも可能ですが、未指定でも動作します。

引数名型概要初期値
argPositionVec2(Point)描画する座標（左上）int型変数2つでも指定可能
argSizeVec2(Point)サイズ {横, 縦} int型変数2つでも指定可能
argVarbool&戻り値を格納するBool型変数（参照渡し）
argStrStringスイッチに表示する文字列
argFontFont&文字列の表示に用いるフォント
argBackgroundColorColor背景色およびボタンの色Color(224, 229, 236)
argDarkColorColor影の色Color(163, 177, 198)
argLightColorColor光があたった部分の色Color(255, 255, 255)
argFontColorColorフォントの色（常時）Palette::Gray
argPushedFontColorColorフォントの色（スイッチ押下時）Palette::Gray
argRadiusint角を丸める大きさ10
argBlurSizeint影のブラーの大きさ16
argShadowSizeint影の大きさ2
argUpperShadowPosOffsetVec2左上の光があたった部分/影の部分の相対描画位置{-4, -4}
argLowerShadowPosOffsetVec2右下の光があたった部分/影の部分の相対描画位置{4, 4}
第5引数に指定した変数（bool型）に値が返されます。
ONのときtrue、OFFのときfalseです。
角丸長方形ボタン

角丸長方形のボタンです。
押した瞬間にtrueを返します。 

bool NeumorphismUI::RectButton(
  Vec2 argPosition,
  Vec2 argSize,
  String argStr, Font& argFont,
  Color argBackgroundColor = DEFAULT_BACKGROUND_COLOR, Color argDarkColor = DEFAULT_SHADOW_COLOR, 	Color argLightColor = DEFAULT_LIGHT_COLOR,
  Color argFontColor = Palette::Gray, Color argPushedFontColor = Palette::Gray,
  int argRadius = 10, int argBlurSize = 16, int argShadowSize = 2,
  Vec2 argUpperShadowPosOffset = {-4, -4}, Vec2 argLowerShadowPosOffset = {4, 4}
)
指定必須な引数は第1引数（argPosition）から第4引数（argFont）までです。
第5引数以降は指定することも可能ですが、未指定でも動作します。
引数名型概要初期値
argPositionVec2(Point)描画する座標（左上）int型変数2つでも指定可能
argSizeVec2(Point)サイズ {横, 縦} int型変数2つでも指定可能
argStrStringスイッチに表示する文字列
argFontFont&文字列の表示に用いるフォント
argBackgroundColorColor背景色およびボタンの色Color(224, 229, 236)
argDarkColorColor影の色Color(163, 177, 198)
argLightColorColor光があたった部分の色Color(255, 255, 255)
argFontColorColorフォントの色（常時）Palette::Gray
argPushedFontColorColorフォントの色（スイッチ押下時）Palette::Gray
argRadiusint角を丸める大きさ10
argBlurSizeint影のブラーの大きさ16
argShadowSizeint影の大きさ2
argUpperShadowPosOffsetVec2左上の光があたった部分/影の部分の相対描画位置{-4, -4}
argLowerShadowPosOffsetVec2右下の光があたった部分/影の部分の相対描画位置{4, 4}
ボタンが押下されたときに戻り値がtrueになります。
丸型スイッチ

丸形のスイッチです。
押したらONに、もう一度押すとOFFになります。 

void NeumorphismUI::CircleSwitch(
  Vec2 argPosition,
  int argSize,
  bool& argVar,
  String argStr, Font& argFont,
  Color argBackgroundColor = DEFAULT_BACKGROUND_COLOR, Color argDarkColor = DEFAULT_SHADOW_COLOR, Color argLightColor = DEFAULT_LIGHT_COLOR,
  Color argFontColor = Palette::Gray, Color argPushedFontColor = Palette::Gray,
  int argBlurSize = 16, int argShadowSize = 2,
  Vec2 argUpperShadowPosOffset = {-4, -4}, Vec2 argLowerShadowPosOffset = {4, 4}
)
指定必須な引数は第1引数（argPosition）から第5引数（argFont）までです。
第6引数以降は指定することも可能ですが、未指定でも動作します。
円形の場合は角丸長方形と違い、座標は中心座標、サイズは円の半径となりますので注意してください。
引数名型概要初期値
argPositionVec2(Point)描画する座標 （円の中心座標） int型変数2つでも指定可能
argSizeintサイズ （半径）
argVarbool&戻り値を格納するBool型変数（参照渡し）
argStrStringスイッチに表示する文字列
argFontFont&文字列の表示に用いるフォント
argBackgroundColorColor背景色およびボタンの色Color(224, 229, 236)
argDarkColorColor影の色Color(163, 177, 198)
argLightColorColor光があたった部分の色Color(255, 255, 255)
argFontColorColorフォントの色（常時）Palette::Gray
argPushedFontColorColorフォントの色（スイッチ押下時）Palette::Gray
argBlurSizeint影のブラーの大きさ16
argShadowSizeint影の大きさ2
argUpperShadowPosOffsetVec2左上の光があたった部分/影の部分の相対描画位置{-4, -4}
argLowerShadowPosOffsetVec2右下の光があたった部分/影の部分の相対描画位置{4, 4}
第5引数に指定した変数（bool型）に値が返されます。
ONのときtrue、OFFのときfalseです。
丸型ボタン

丸形のボタンです。
押した瞬間にtrueを返します。 

bool NeumorphismUI::CircleButton(
  Vec2 argPosition,
  int argSize,
  String argStr, Font& argFont,
  Color argBackgroundColor = DEFAULT_BACKGROUND_COLOR, Color argDarkColor = DEFAULT_SHADOW_COLOR, Color argLightColor = DEFAULT_LIGHT_COLOR,
  Color argFontColor = Palette::Gray, Color argPushedFontColor = Palette::Gray,
  int argBlurSize = 16, int argShadowSize = 2,
  Vec2 argUpperShadowPosOffset = {-4, -4}, Vec2 argLowerShadowPosOffset = {4, 4}
)
指定必須な引数は第1引数（argPosition）から第5引数（argFont）までです。
第6引数以降は指定することも可能ですが、未指定でも動作します。
円形の場合は角丸長方形と違い、座標は中心座標、サイズは円の半径となりますので注意してください。
引数名型概要初期値
argPositionVec2(Point)描画する座標 （円の中心座標） int型変数2つでも指定可能
argSizeintサイズ （半径）
argStrStringスイッチに表示する文字列
argFontFont&文字列の表示に用いるフォント
argBackgroundColorColor背景色およびボタンの色Color(224, 229, 236)
argDarkColorColor影の色Color(163, 177, 198)
argLightColorColor光があたった部分の色Color(255, 255, 255)
argFontColorColorフォントの色（常時）Palette::Gray
argPushedFontColorColorフォントの色（スイッチ押下時）Palette::Gray
argBlurSizeint影のブラーの大きさ16
argShadowSizeint影の大きさ2
argUpperShadowPosOffsetVec2左上の光があたった部分/影の部分の相対描画位置{-4, -4}
argLowerShadowPosOffsetVec2右下の光があたった部分/影の部分の相対描画位置{4, 4}
ボタンが押下されたときに戻り値がtrueになります。
スライドスイッチ

スライド式のスイッチです。
角丸長方形や丸型のボタン/スイッチとは異なりオブジェクトとなっていますので、
使用の際には予め宣言が必要です。 

SlideSwitch(bool argVar, Vec2 argPosition, Vec2 argSize)

引数名型概要
argVarbool 初期値（ONかOFFか）
argPositionVec2(Point)描画する座標 int型変数2つでも指定可能
argSizeVec2(Size)サイズ int型変数2つでも指定可能

使用例：
#include <Siv3D.hpp>
#include "NeumorphismUI.hpp"

void Main() {
    Scene::SetBackground(DEFAULT_BACKGROUND_COLOR);
    
    Font font24(24);
    
    bool var = true;		// 初期値
    NeumorphismUI::SlideSwitch slideSwitch(var, Vec2{Scene::Width()/2-60, Scene::Height()/2-15}, Vec2{50, 30});
    
    while (System::Update()) {
      if (slideSwitch.draw()) {
        font24(U"ON").draw(Scene::Width()/2+10, Scene::Height()/2-15, Palette::Black);
      }
      else {
        font24(U"OFF").draw(Scene::Width()/2+10, Scene::Height()/2-15, Palette::Black);
      }
    }
}
draw関数で描画を行います。draw関数は現在のスイッチの値をbool型で返します。
スライダー

0.0〜1.0の実数値を返します。
こちらも角丸長方形や丸型のボタン/スイッチとは異なりオブジェクトとなっていますので、
使用の際には予め宣言が必要です。 

Slider(double argVar, Vec2 argPosition, Vec2 argSize)

引数名型概要
argVardouble初期値（0.0〜1.0）
argPositionVec2(Point)描画する座標 int型変数2つでも指定可能
argSizeVec2(Size)サイズ int型変数2つでも指定可能

使用例：
#include <Siv3D.hpp>
#include "NeumorphismUI.hpp"

void Main() {
  Scene::SetBackground(DEFAULT_BACKGROUND_COLOR);
  
  Font font24(24);
  double var = 0.5;	// 初期値
  NeumorphismUI::Slider slider(var, Vec2{Scene::Width()/2-210, Scene::Height()/2-15}, Vec2{200, 30});
  
  while (System::Update()) {
    var = slider.draw();
    font24(U"{:.2f}"_fmt(var)).draw(Scene::Width()/2+100, Scene::Height()/2-15, Palette::Black);
  }
}
draw関数で描画を行います。draw関数は現在のスライダーの値をdouble型で0.0〜1.0の範囲で返します。
Sample
サンプル
#include <Siv3D.hpp>
#include "NeumorphismUI.hpp"

void Main() {
  Scene::SetBackground(DEFAULT_BACKGROUND_COLOR);
  
  double sliderVar = 0.5;		// スライダーの初期値
  bool slideSwitchVar = true;	// スライドスイッチの初期値
  int count = 0;
  
  Font font24(24);
  
  // スライダーの宣言
  NeumorphismUI::Slider slider(sliderVar, Vec2{400, 100}, 200, 30);
  // スライドスイッチの宣言
  NeumorphismUI::SlideSwitch slideSwitch(slideSwitchVar, 400, 300, 50, 30);
  
  bool rectSwitchPushed = true;		// 角丸長方形スイッチの初期値（ON）
  bool circleSwitchPushed = false;	// 丸型スイッチの初期値（OFF）
  
  while (System::Update()) {
    // 角丸長方形スイッチ
    NeumorphismUI::RectSwitch(Point(100, 100), Size(100, 100), rectSwitchPushed, U"Push", font24);
    if (rectSwitchPushed) {
      font24(U"ON").draw(250, 130, Palette::Black);
    }
    else {
      font24(U"OFF").draw(250, 130, Palette::Black);
    }
    
    // 丸型スイッチ
    NeumorphismUI::CircleSwitch(Point(150, 320), 50, circleSwitchPushed, U"Push", font24);
    if (circleSwitchPushed) {
      font24(U"ON").draw(250, 300, Palette::Black);
    }
    else {
      font24(U"OFF").draw(250, 300, Palette::Black);
    }
    
    // スライダー
    sliderVar = slider.draw();
    font24(U"{:.2f}"_fmt(sliderVar)).draw(550, 150, Palette::Black);
    
    // スライドスイッチ
    if (slideSwitch.draw()) {
      font24(U"ON").draw(550, 300, Palette::Black);
    }
    else {
      font24(U"OFF").draw(550, 300, Palette::Black);
    }
    
    // 角丸長方形ボタン -> カウンターとして動作
    if (NeumorphismUI::RectButton(Point(100, 450), Size(200, 50), U"Push", font24)) {
      count ++;
    }
    font24(count).draw(350, 460, Palette::Black);
  }
}
License
ライセンスについて
このソフトウェアにはMITライセンスが適用されています。
ライセンス条文はこちら
個人利用
可能
プログラムの改変
可能
著作権とライセンス全文の表示を行うこと。
できれば事前にご連絡いただけると嬉しいです。
再配布
可能
商用利用
可能
ライセンスの改変
不可能
ライセンスの改変を行うことはできません。
保証について
動作保証や権利上の保証はいたしません。
免責事項
作者はソフトウェアに対していかなる責任も負いません。
Download
ダウンロード
OpenSiv3D v0.6.0以降でご利用の場合はver.0.1.1をお使いください。

ver.0.1.1（最新版） 2021/11/20 OpenSiv3D v0.6.0以降に対応 ダウンロード
ver.0.1.0 2020/06/28 OpenSiv3D v0.4.3で動作 ダウンロード