プロトタイピングツール「Noodl」でキャラクターの頭をなでて照れさせる（簡易版）

Noodlを使うと簡単なインタラクションを爆速で作ることが可能です。

今回は、
**１．好きなキャラクターの画像を用意して
２．画面タッチした場所に手を表示させ
３．手の位置に応じてキャラクターが頬を赤くする**

というインタラクションを作る手順を紹介します。
使うテクニックとしては**「画像取り込み」「タッチポジションの取り込み」「条件判定」「状態変化」**があります。

#キャンバスサイズの変更
画面上Noodlマークの左の**[・・・]**から**Project settings**を選択し、**Width**と**Height**を表示したいサイズにして**Fill Mode**を設定します。
今回は**Width x Heigt = 1920 x 1080、Fill Mode = Aspect Fit**としました。
![Inked01_aspect_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/80ccc85f-de23-a52e-ecbd-7f1bd8bf1622.jpeg)

#キャラクター画像の挿入
Noodlは**JPG**や**PNG**に対応しています。使いたい画像をNoodlの画面にDrop & Dragすることでプロジェクトに取り込むことができます。**Image**ノードを使うことで、このあらかじめ取り込んだ画像を呼び出すことができます。
＊Drag & DropしたときにNoodlからの**リアクションはありませんが、きちんと取り込まれてる**ので安心してください。
![DD.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/2d317668-d07e-5d0d-33d6-6da5150aab59.jpeg)

**Image**ノードを作成して**Image Path**から取り込んだ画像を選びます。**Size Mode**を**Explicit**にすると、キャンバスサイズと画像サイズが合っていない場合でもうまく拡縮されて表示されます。
![Imagenode.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/ef570d47-82e2-2c48-d03a-9d7297a82184.jpeg)


#タッチポジションの検出と反映
画面をタッチした位置を反映させる対象として今回は「手」の画像を取り込みます。
**Image**ノードで画像を挿入し、サイズを適当に合わせます。

- **Touch Position**ノードを作成する
- **Touch Position**ノードから**Image**ノードにNoodlを引っ張る
- **Position X**同士、**Position Y**同士を接続する
これで、プレビュー画面をタッチするとその位置に画像が移動するようになりました。

＊画像の左上の角がTouch Positionになります。中心にしたい場合は**Image**ノードの親ノードに**Group**ノードを挟むことで調整してください。
![TP.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/69b0a016-6885-10f3-33c0-67d973ff288b.jpeg)

#ステート（状態）の設定
手のポジションが頭のとき頬を赤く染めたいと思います。

手のポジションが特定の範囲かどうかを判定し、頬の赤を透明にしたり不透明にしたりします。

###頬の赤の作成
- **Rectangle**ノードを使うと簡単に作ることができます。**Corner Radius, Blur Length**を調整することで**“枠がぼやけた楕円”**を作ることができます。
- **Position**と**Rotation**で位置を調整できます。
- **Blend Mode**によって背景との色の混ざり方を変えることができます。
![hoppeta.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/6a32c610-8d83-ad1a-d5bd-10ca2678e93e.jpeg)

###ステート（状態）の作成
**States**ノードによって手のポジションが頭に**"ある場合"と"ない場合"という2つの状態を定義します。**状態の違いによって変えたい**Value**を定義します。

今回は**"ツン"**と**"デレ"**という2つの状態に対して**"Opacity（透明度）"**を設定します。
Opacity（不透明度）をツンのとき0、デレのとき1にします。

**States**から**Rectangle**にNoodlを繋ぎ、**Opacity同士**を繋ぎます。これで、ツンのときはRectangleが透明になり、デレのときは不透明になります。**Start at**のツンとデレを変えることで確認ができます。
![states.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/a15b66e0-fab9-698a-716e-173b6be9a967.jpeg)

###ポジション（条件）判定とステート（状態）変化
**Position X**と**Position Y**の**Noodlをマウスオーバーすると吹き出しで中のデータを見ることができます。**この吹き出しをクリックすると吹き出しが消えずに画面に残り、データを監視することができます。

手を判定したい範囲において吹き出しのPositionの値を確認して条件を決めます。
今回は下記の範囲で設定します。

` < X < 1600`
`-90 < Y < 100`
![Position.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/7887f66e-7d76-257e-3e6f-87035f923a46.jpeg)

**Expression**ノードに条件判定の式を作成します。

`1300 < X && X < 1600 && -90 < Y && Y < 100`

`＊1300 < X < 1600`のように不等式を一度に記載することはできないので細切れにします。

上記の不等式がすべて**True**のとき**Result**は**True**、一つでも**False**があると**Result**は**False**になります。
さらに**Expression**ノードで下記のような式を使ってTrue判定器とFalse判定機を作成します。

**True判定器　`Result == true`**

**False判定器　`Result == false`**

それぞれの判定器のResultをStatesノードのtoツンとtoデレに繋げば完成です。

**＜手が範囲外でFalseのとき＞**
![false.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/a15142fb-bcaa-ebc3-c173-826c4930d1e7.jpeg)

**＜手が範囲内でTrueのとき＞**
![true.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/611da5c5-aa2f-b91f-073b-4e1195a83cc6.jpeg)

#まとめ
Noodlで可愛いがつくれました。