読者です 読者をやめる 読者になる 読者になる

ひつまぶし blog

無職。全てにおいてレベル1 。なのに今はニューヨークひとりぼっち。おなかすいた・・。

【Unity】Playmaker 公式チュートリアル動画を日本語で読み解く09 - Touch Info②

前回の続き(24:00~37:59)

5. Tap to Move - How to "move to tap", in the style of an RPG/RTS - タップしたところにCubeがアニメーション付きで動いていく
6. Conditional Move or Drag - Uses tap count to determine whether to move or drag an object based on the movement of a finger. - 指でなぞった方向にCubeが方向を変えてその場でくるくると回る

7. Draw Dots - Draw 2D objects in a line following the finger motion.

 

5. Tap to Move - How to "move to tap", in the style of an RPG/RTSタップしたところにCubeがアニメーション付きで動いていく

前の記事の4と途中まで作り方はほぼ同じ。

Hierarchyを作る

・Cubeを置く。

・Planeを置く。
InspectorのLayerでAdd Layerでplatformと作り、選択しておく。

・Empty Objectからgo_TapManagerを作る。

f:id:hitsumabushiko:20160120061510j:plain

 

go_TapManagerを作る

idleを作る

f:id:hitsumabushiko:20160120061729j:plain

Eventsでtouch_startを作っておく。

Variablesのintでfinger_1を作っておく。

 

Touch Infoを作る

f:id:hitsumabushiko:20160120062033j:plain

Global VariablesのVector3でhit_pointを作っておく。

 

Screen Pick
(スクショに入り切らなかったため下記に貼り付け)

f:id:hitsumabushiko:20160120062123j:plain

Global VariablesのBoolでraycast_did_hitを、Vector3でtouched_locationを作っておく。

Layer Maskを1にしてplatformを選択する。

 

Hit Checkを作る

f:id:hitsumabushiko:20160120062622j:plain

Eventsでadd_cubeとtouch_endを作っておく。

add_cubeになっているのは、4と同じEvent名を使いまわしているため。move_cubeなどの方が名称としては相応しいかも。

 

 Move Cubeを作る

f:id:hitsumabushiko:20160120062702j:plain

Vector3 Add XYZ

ここまでが4まで全く一緒。CubeをPlaneに埋め込まさせないためのY軸の0.5。

 

iTween Move To
(スクショに入り切らなかったので下記に貼り付け。長いので2枚のスクショになっている。)

Cubeの動き、アニメーション部分。

f:id:hitsumabushiko:20160120063058j:plain

f:id:hitsumabushiko:20160120063140j:plain

Easy TypeでEase in Out Quadが選択されているが、これが自然でオススメ、とのこと。

Stop On Exitがチェックされているのは、Cubeが動いている際に次のタップがされた時にすぐに次の動きにうつるため。

 

Touch Event

f:id:hitsumabushiko:20160120063406j:plain

Cubeがまだ動いている際にタップされた時、そのタップに反応するために設置。

 

Runする

スタート時は真ん中にCube。

f:id:hitsumabushiko:20160120063800j:plain

 

タップすると

f:id:hitsumabushiko:20160120063939j:plain

 

その方向にぬめぬめとCubeが移動。

f:id:hitsumabushiko:20160120063953j:plain

 

Cubeがその方向に向かっている時に他をタップすると、

f:id:hitsumabushiko:20160120064127j:plain

 

方向を変えてこちらにやってくる。

f:id:hitsumabushiko:20160120064132j:plain

 

6 - Conditional Move or Drag - Uses tap count to determine whether to move or drag an object based on the movement of a finger.(指でなぞった方向にCubeが方向を変えてその場でくるくると回る)

Hierarchyを作る

・Cubeを置く。

・Empty Objectからgo_TapManagerを作る。

f:id:hitsumabushiko:20160120064652j:plain

 

go_TapManagerを作る

idleを作る

f:id:hitsumabushiko:20160120070702j:plain

Eventsでtouch_startを作っておく。

 

Wait for Moveを作る

f:id:hitsumabushiko:20160120070841j:plain

Eventsでtouch_endとtrack_fingerを作っておく。

Variablesのintでfinger_1を作っておく。

 

Tap Checkを作る

f:id:hitsumabushiko:20160120071326j:plain

Get Touch Info

ここでしていることは一つ、何本の指でタッチしているか検知すること。

Global Variablesのintでtap_countを作っておく。

 

Int Compare

指が1本以下だとRotateし、2本以上だとMoveするように設定する。

Eventsでrotateとmoveを作っておく。

 

Moveを作る

f:id:hitsumabushiko:20160120072807j:plain

Get Touch Info

Global Variablesのfloatでtouched_xとtouched_y、touched_x_deltaとtouched_y_deltaを作っておく。

通常のStoreは指がどこをタッチしたかを検知するところで、Deltaは指が最後にアップデートした時にどこをタッチしていたか検知するもの。

そのため、Every Frameにもチェックを入れること。

 

その他のアクション

(スクショに入り切らなかったので下記に貼り付け。

f:id:hitsumabushiko:20160120072935j:plain

f:id:hitsumabushiko:20160120073022j:plain

f:id:hitsumabushiko:20160120073115j:plain

Eventsでtouch_stationaryを作っておく。 

Rotateを作る

Moveとほぼ同じ。Translateの代わりに、Rotateを使う。f:id:hitsumabushiko:20160120073302j:plain

 

その他のアクション

(スクショに入り切らなかったので下記に貼り付け。

f:id:hitsumabushiko:20160120073332j:plain

f:id:hitsumabushiko:20160120073505j:plain

XAngleにtouched_y_deltaが、YAngleにtouched_x_deltaが入っているので注意。

f:id:hitsumabushiko:20160121041938j:plain

f:id:hitsumabushiko:20160120073115j:plain

 

Runする

スタート時は正面を向いたCube。

f:id:hitsumabushiko:20160120073631j:plain

 

指を動かす方向にCubeもくるっと動く。

f:id:hitsumabushiko:20160120073708j:plain

 

ぐりぐり指でなぞっても、Cubeも繊細に感知してくるくる回ります。

f:id:hitsumabushiko:20160120073714j:plain

 

7 - Draw Dots - Draw 2D objects in a line following the finger motion.()

Hierarchyを作る

・Plate_Dotを置く。(SphereのZ軸0でも代用可)
Plate DotがPrefabになっているため、Hierarchyにない。

・Empty Objectからgo_tapManagerを作る。

f:id:hitsumabushiko:20160121050146j:plain

 

go_tapManagerを作る

idleを作る

f:id:hitsumabushiko:20160120070702j:plain

Eventsでtouch_startを作っておく。
Variablesのintでfinger_1を作っておく。

 

Dot Check 1を作る

f:id:hitsumabushiko:20160121042613j:plain

前回の記事の3で紹介したものと同じ、20個の以下のドットしか画面に出現しないように設定。

Global Variablesのintでdot_countを作っておく。

Eventsでtoo_many_dotsとadd_dotを作っておく。

 

First Dotを作る

f:id:hitsumabushiko:20160121043355j:plain

Global Variablesのfloatでtouched_xとtouched_yを、intでtap_countを、Vector3でtouched_locationを作っておく。

 

その他のアクション

(スクショに入り切らなかったので下記に貼り付け。

f:id:hitsumabushiko:20160121043547j:plain

 

Wait for Moveを作る

f:id:hitsumabushiko:20160121044100j:plain

Eventsでtouch_endとadd_dotを作っておく。

 

Trackを作る

f:id:hitsumabushiko:20160121045125j:plain

Global VariablesのFloatでtouched_x_deltaとtouched_y_deltaを作っておく。

 

その他のアクション

(スクショに入り切らなかったので下記に貼り付け。

f:id:hitsumabushiko:20160121045140j:plain

f:id:hitsumabushiko:20160121065659j:plain

7以上指が動いたら、次にドットを作るという指示。

 

f:id:hitsumabushiko:20160121045144j:plain

Eventsでtouch_stationaryを作っておく。 

Dot Check 2を作る

f:id:hitsumabushiko:20160121044547j:plain

ドットを作るたびにドットの数を確認する必要があるため設置。

Place Dotを作る

f:id:hitsumabushiko:20160121050008j:plain

 

その他のアクション

(スクショに入り切らなかったので下記に貼り付け。

f:id:hitsumabushiko:20160121050013j:plain

 

Plate_Dotを作る

動画に紹介はないのだが、前回記事の3のドットを利用とあるため、同じ内容を転載。

表示されているドットを一定時間で消すための処理となる。

Cook Offを作る

f:id:hitsumabushiko:20160119075535j:plain

Eventsでclean_upを作っておく。

Cleanupを作る

f:id:hitsumabushiko:20160119075752j:plain

 

Runする

スタート時は何もない。

f:id:hitsumabushiko:20160121050842j:plain

 

指でなぞるとドットが出現。

f:id:hitsumabushiko:20160121050646j:plain

 

時間が経つと消えていく。

f:id:hitsumabushiko:20160121050650j:plain

 

もちろんなぞらなくても、タップでドットは出現。

f:id:hitsumabushiko:20160121050655j:plain

 

素早くスワイプスればその分ドットの間隔も開く。

f:id:hitsumabushiko:20160121050659j:plain

 

これでTouch Infoについては以上。

 

次の記事

前の記事