【アプリ開発】二本指で開閉する洗濯バサミを作る 〜準備編〜【Unity】

こんにちは!
文系大学生のハゲ丸です(☝︎ ՞ਊ ՞)☝︎
 
 
 
 
 
 
文系・プログラミング初心者な私は今、Unityでのスマホ2Dゲーム開発を勉強しています。
 
そこで、スマホのタッチ操作によるゲームオブジェクトの移動と回転の制御を習得すべく、
 
「二本指で開閉する、洗濯バサミ」(使い道は謎)
 
を作ってみたので、超大雑把な作り方を書き残していこうと思います。
 
 
 
 
 
 
 
想定している読者は、 
  • 文系だけどスマホアプリ開発をしてみたい人
  • 僕と同じUnity超初心者
  • 洗濯バサミを二本指タッチで動かすゲームを作りたい人(おそらくいない)
です。
 
 
 
 
 
※Unityプログラミング超初心者であるゆえ、不適切なプログラムの書き方などをしている恐れがありますので、参考にする程度で見ていただきたいです。
 
 
 
 
 
ではさっそく作っていきます!
 
そのまえに、完成品はこちらです↓
 
 
 
 
これを作っていきます。(真顔)
 
 
①まず、↓のような画像素材を作ります
 

f:id:sympacifica:20170621232744p:plain

 
画像素材は、
  • 洗濯バサミの左パーツ
  • 洗濯バサミの右パーツ
  • バネの針金
の三つに分けて、それぞれ.pngで書き出します。
 
ちなみに、パーツのサイズは
 

f:id:sympacifica:20170622124849p:plain

f:id:sympacifica:20170622115352p:plain

f:id:sympacifica:20170622115357p:plain

 

サイズはこんな感じです↑。
わかりづらくてすみません(汗)。
 
 
②次は、早速Unityでの作業になります
 
今回は、このブログ用に新規2Dプロジェクトを作成しました。
 
2DObjectの「Sprite」を使うかuGUIの「Image」を使うか迷ったんですが、今回の洗濯バサミには物理演算処理を使わないので、uGUIの「Image」を使うことにしました。
 
(SpriteかImageかについては、こちらのUnityの質問板のSimonDarksideJさんの回答を参考にさせていただきました。)
 
また、全部のパーツをセットで扱いたいので、透明なPanelを一つ作ってその上にパーツを乗せる形にしました。
 
サイズと位置を調整し、洗濯バサミのパーツの回転軸(Pivot)も設定します。
(ここでパーツの回転軸をキリのいい位置にしたことが活きてきます。)

 

左パーツImageのPivot:(X, Y, Z)=(0.8, 0.6, 1)

右パーツImageのPivot:(X, Y, Z)=(0.2, 0.6, 1)

 

するとこうなります↓

 

f:id:sympacifica:20170622122108p:plain

 
試しにRotationのzの値をいじってみました↓

 

f:id:sympacifica:20170622122215p:plain

 
正しい位置で回ってくれてます!
ちゃんとそれっぽいですよね!笑
 
 
でも、これではまだ動かすことができませんし、輪っかが不自然になっちゃってます。
 
 
ここからはプログラムを書いて完成させていきます!
 
 
 
 
長くなるので、ここで一旦切ります。続きは完結編へ!