腐りかけエンジニアのブログ

学生時代ろくに勉強してこなかった人間が、プログラムに挑戦してみる。

生存報告

お久しぶりです。 なんやかんやありましたが、ちゃんと生きてます。

現在は会社を退職し、新しい会社でiOSエンジニアとして働いております。

C#もそこそこ好きだったんですが、Swift触ってみるとC#よりも楽しいという…。

今後について

仕事でUnityを使うことがなくなってしまったため、趣味で本当に少し触る程度しかこれからはやらないつもりです。

ですが、気が向いた時にまたアセットとか買って、書こうかなーって思ってます。

また、仕事でSwfitを使うことになったのもあるので、

Swiftの入門記事やらテクニックやらが、それなりに身についてきたら記事にでもしようかと思います。

Unityのあの画面がたまに恋しくなります…。

【Unity】ノベルゲームっぽいの作ってみる②【TypeFaceAnimator】

はじめに

お久しぶりです。最近は鈍っていて自作ゲームの進捗がよくありません...。
それはさておき、今回は有料Asset(安い)を使って「前回のノベルゲームっぽいものを作ってみた」を改良してみたいと思います。
このAssetを使うと、数倍楽にノベルゲームっぽいもの作ることができます!
gyazo.com


今回使うAssetはこちら。
TypeFace Animator

お値段がなんと 「$5」!!!
これを使うとこんなことができちゃいます。
gyazo.com

準備

始めるわけなのですが、前回の記事のをそのまま持ってきます。
doggy.hatenablog.com

unitypackageはこちら↓
github.com

Unity上

1. TypeFace AnimatorをImportしてきましょう!(これがなければ、始まらない)
2. Canvas -> NobelUI -> Frame -> Text の OutLine を、RemoveComponent する(*1)。
3. Canvas -> NobelUI -> Frame -> Text に TypeFaceAnimator をアタッチ
4. TypeFaceAnimatorのアニメーションの仕方をよしなに変える。(自分はこんな感じにしてみました)
f:id:doggy_dog:20160827140624p:plain:w250
gyazo.com


5. TextControllerオブジェクトにアタッチされているスクリプトRemove Component する。
6. 新たに「ScenarioTextController」というC#スクリプトを作り、アタッチ。

(*1) OutLineがついていると、TypeFaceAnimatorが正常に動作しない[原因解明中]

ScenarioTextController

せっかくなので、少し違った感じで書きますが、TextControllerと似ている部分があるので、コピペして使ってもよし!

gist.github.com

終わりに

TypeFaceAnimatorはこのほかにも色々な用途に使うことが可能です。
・プロローグ
・ダメージ等の数字
・スタッフロール
個人的には上記に使いたいですね。

宜しければ、購入してみてはいかがでしょうか?
私はこれを機に、Asset Store で買い物をする楽しさがわかってしまい、ハマりました...。
いい感じのAssetが見つかったら、また記事にしようかと思います。

(TypeFaceAnimatorは、テラシュールブログさんの記事に魅了されて購入しました。)
tsubakit1.hateblo.jp

【Unity】しゃちクリッカー①【ゲーム制作進捗】

お久しぶりです。前の記事から数ヶ月が経とうとしています...。
ヒソヒソとゲーム制作を進めていました。(結構、疎かにしていましたが...)

今回作っているゲームは社畜を題材にした、クリッカーゲームです!
よくある系のものを作ってみたいと思ったので、このジャンルにしてみました。

一応、ここまで出来てます。
クリックするとお金が増えるんですが、数字付けてないから見にくい...。gyazo.com

ノベルっぽいものも作ってみました。
f:id:doggy_dog:20160621232116p:plain:w200

ノベルっぽいものは基盤に、こちらの記事を使ってます。
doggy.hatenablog.com

制作している人数に関しましては、
プログラマー1人
・デザイナーさん1人

家に帰ってきて、寝る前の1時間ぐらい、ちょくちょくと進めております。
最近はJSばかり触っていたので、C#の書き方、忘れてますね...。

【Unity】コマンドパターンを使ってみる

なかなか設計について乏しいので、勉強したところを記事にしてみます!
最近LOLが始まり、また別で作っているゲームアプリがあるのでなかなか記事を書く時間がなく更新できませんでした・・・。

今回はコマンドパターンを使って、キャラクターを動かしてみたいと思います。
gyazo.com

コマンドパターンとは

あるオブジェクトに対して要求を送るということは、そのオブジェクトのメソッドを呼び出すことと同じです。 そして、メソッドにどのような引数を渡すか、ということによって要求の内容は表現されます。さまざまな要求を送ろうとすると、引数の数や種類を増やさなければなりませんが、 それには限界があります。そこで要求自体をオブジェクトにしてしまい、そのオブジェクトを引数に渡すようにします。それがCommandパターンです。

Commandパターンは、要求をCommandオブジェクトにして、それらを複数組み合わせて使えるようにするパターンです。

(引用して使わさせていただきました)

プレイヤークラスの実装

まずはキャラクターの基底クラスとプレイヤークラスを作っていきます。
CharaBaseを継承したプレイヤークラスにします。
また、今回はパターンの紹介なので、移動のみしか作っていません。
(この規模であれば、キャラクターの基底クラスはなくていいと思います・・・)

CharaBase

gist.github.com

プレイヤーの行動(コマンド)を表すクラスの実装

次にプレイヤーが起こす行動(コマンド)のクラスを実装していきます。
行動の基底クラスを作り、それを継承してそれぞれの行動を作っていきます。
引数にプレイヤーを入れることで、プレイヤーを簡単に変えることが可能です。
今回は移動のコマンドのみを作ってみます。

PlayerCommand

gist.github.com

MoveCommand

gist.github.com

プレイヤーの操作を受け取るクラスの実装

今度はプレイヤーの操作を受け取るクラスを作ります。
操作が実行されたら、プレイヤーのコマンドを返すようにします。
ここで先ほど作ったMoveCommandの参照をHierarchyで指定してあげられるようにします。
(今回は、矢印キーの右左を押されたらMoveCommandの参照を返り値で渡すようにしています)

PlayerInputHandler

gist.github.com

早速使ってみる

キャラクターを動かすために色々準備してあげましょう。

1.キャラクターを2体作り、プレイヤークラスをアタッチしましょう。
(見栄えを考慮してUnityのキャラクター達を使わさせて頂きました)
f:id:doggy_dog:20160315004535p:plain:w300f:id:doggy_dog:20160315004537p:plain:w315

2.次に、PlayerInputHandlerMoveCommandを空のオブジェクトとして作り、アタッチします。
また、PlayerInputHandlerのMoveCommandを指定してあげます。
f:id:doggy_dog:20160315005255p:plain:w330f:id:doggy_dog:20160315005256p:plain:w300

3.最後に操作するためのゲームシーンクラスを追加します。
UpdateのPlayerInputHandlerでプレイヤーの行動をフレーム毎に呼び、操作を受け取ります。
もし、操作していないのであれば、nullが返ってくるので動作は何もしません
移動を検知したのであれば、PlayerCommandを継承したMoveCommandが返り値としてくるので、移動がPlayerで実行されます。
gist.github.com

f:id:doggy_dog:20160315005541p:plain:w300

実行中にGameSceneにあるプレイヤーのインスペクターの参照をPlayer_2にしてあげることで操作できるプレイヤーを変えることができます。
gyazo.com

まとめ

これがコマンドパターンと呼べるかはわかりませんが、近いことはしていると思います。
プレイヤークラスに行動を直書きしていなく、綺麗にまとまっているのでいいかもしれません!

素材提供

コマンドパターンについて:22.Commandパターン | TECHSCORE(テックスコア)


f:id:doggy_dog:20160314002122p:plain

このコンテンツの一部には『ユニティちゃんライセンス』で許諾されたアセットが使用されています。
Portions of this work are licensed under Unity-Chan License

【Unity】iTweenとuGUIでノベルゲームっぽいものを作る

今回はUnityでこんなの作っていこうと思います。
gyazo.com

ゲームジャムやプロトタイプ等で使えるかと思います。
また、テラシュールブログさんの"uGUIでノベルゲームのようなものを作る"の記事を「iTweenで動かした場合」の様な記事になると思います。
(下準備に関しては全く一緒です...)
tsubakit1.hateblo.jp

下準備

文字を表示する部分を作っていきます。

1.右クリック -> UI -> PanelCanvasとPanelを生成。
2.作成したCanvasを指定、CanvasScalerのUIScaleModeScaleWidthOrHeightに変更f:id:doggy_dog:20160227154044p:plain:w300
3.また、その下にあるScreenMatchModeExpandに変更。
f:id:doggy_dog:20160227155015p:plain:w300
4.Panelの名前を好きな名前に変更(自分はNobelUIにしました。以下NobelUI)。NobelUIのImageは消しておきましょう。
f:id:doggy_dog:20160227164028p:plain:w250
5.NobelUIの子要素にImageを追加。名前をFrameにしましょう。Heightを150にし、アンカーで位置と大きさを変更します。好きな画像をFrameにしてみましょう。
f:id:doggy_dog:20160227160057p:plain:w250
6.Frameの子要素として、Textを追加。文字が見にくいのでTextにAddComponentでOutlineを付けてあげましょう。(OutLineの色や大きさは好み)
f:id:doggy_dog:20160227161829p:plain:w200
7.また、Textのアンカーを全体にし、文字の大きさも変更しつつ、Textの文字がちゃんと枠内に埋まる様に調整してあげましょう。(自分はTextの大きさを20にし、色を白にしました。)
f:id:doggy_dog:20160227162650p:plain:w250

見栄えを考慮して、フォントを変更し、背景やキャラクターを置いてみました。
(背景を使用したい場合は、NobelUIのImageに背景をセットし、Alpha値を1.0にしましょう)
背景と画像とフォントを設定するだけで、見栄えが良くなります。
f:id:doggy_dog:20160227172450p:plain

会話部分を作ってみる

枠の中の文字について触れていきます。
iTweenのダウンロードはこちらから。
TextControllerという名前のスクリプトC#で作りましょう。


ノベルゲームっぽい文字を制御するためのスクリプト

1.TextControllerを空のオブジェクトにアタッチ(空のオブジェクト名もTextController)
f:id:doggy_dog:20160227174305p:plain:w200
2.TextControllerの中身を設定。
・lineTextはFrameの子要素のTextを指定する。
・scenariosはSizeを好きな値にして、台詞を中に格納する。
f:id:doggy_dog:20160227180807p:plain:w300

そして、実行するとこんな感じになります。
gyazo.com

注意点

iTweenのeaseTypeを使う事は避けましょう
このままやってしまうと、文字の上限を通り越してしまい、ArgumentOutRangeExceptionが出てしまいます。

まとめ

改善点は色々とありますが、iTweenで作る事も可能です。
ここから拡張していくと、簡単なノベルゲームっぽいものが作れます。
このほかに欲しいものと言えば、

  • 名前表示
  • キャラクター複数表示・表情変更
  • BGMやSE再生
  • 喋っているキャラクター以外は暗くする

上記のようなものを盛り込んでいけばもっとそれっぽくなるかと思います。

また、unitypackageも置いておきます。
(画像などは入っていないので、自分でカスタマイズしてください)
github.com

【Unity】ゲームアプリによくあるメニュー的なものを作ってみる

  • 今回はこんなの作っていきます。

https://i.gyazo.com/45f725e3b6f7bb1a3ec0bb0a769c7da0.gif

作ってみる

ざっくりとしたメニューですが、それなりに使えます。
(背景は確認用として見難かったので後から入れました。実装には入っておりません)

アイコン素材の方はこちらを使っていきます。
アイコン素材

基盤となるMenuの背景を作成

1. UI -> Image でオブジェクトを作り、名前をMenuBarにし、アンカーを設定します。f:id:doggy_dog:20160221012643p:plain


2. MenuBarの色を見やすい色にし、ToggleGroupHorizontalLayoutGroupコンポーネントを追加します。
f:id:doggy_dog:20160221013326p:plain

MenuBarのTab項目を作成

1. Canvasの子要素にToggleを追加。名前はHomeとします。f:id:doggy_dog:20160221015806p:plain


2. HomeのToggleのGroupMenuBarに設定します。
f:id:doggy_dog:20160221023941p:plain


3. HomeのBackgroundCheckMarkのImageを家っぽいアイコンに変えましょう。また、LabelのテキストをHOMEにして、それぞれの位置を調整します。
(アセット素材のアイコンが小さいのでScaleを2にしました。)
f:id:doggy_dog:20160221020908p:plain


4. アイコンが選択された時がわかりにくいので、CheckMarkを選択した状態で上のタブのComponent -> UI -> EffectsからOutLineを付けます。
(色は好みで構いません。また、文字にもOutLineを付けると見やすくなると思います。)
f:id:doggy_dog:20160221022928p:plain


5. Homeをコピー&ペーストで増やします。それぞれいじって名前を変えましょう。
(私はShopとOptionにしました)
f:id:doggy_dog:20160221023006p:plain


6. 作ったメニュータブをMenuBarの子要素にします。今だと全てが選択されている状態になっているので、Home以外のメニュータブのToggle -> Is On のチェックを外しておきます。
f:id:doggy_dog:20160221023237p:plain

こんな感じになったかと思います。
https://i.gyazo.com/48a68a4044defd737172778cf52fdc60.gif

それぞれ対応した内容を作成

1. Canvasの子要素に空のオブジェクトを作成アンカーを画面全体にして、MenuBarとかぶらないようにBottomを調整します。名前はMenusとします。
f:id:doggy_dog:20160221025242p:plain


2. Menusの子要素にImageを作成し、アンカーを画面全体にします。画像の色を黒くして、透明度は半分ぐらいにしましょう。名前はOverlayにしました。
これを使って、ShopかOption選択時は黒い画像を敷いてタッチできないようにします。
f:id:doggy_dog:20160221025535p:plain


3. ShopとOptionがわかりにくいので、タイトルのヘッダー的なものを作ります。
Menusの子要素にImageを作成し、アンカーを設定します。そのImageの子要素にTextを追加して好きな文字を入れましょう。Imageの名前はShopContentにしました。
f:id:doggy_dog:20160221031315p:plain


4. ShopContentをコピー&ペーストしてOptionも作ります。
f:id:doggy_dog:20160221031725p:plain

メニュー内容とメニューバーの紐付け

1. MenuBarのShopのToggleコンポーネントにある、OnValueChangedを設定します。
(+)マークを押して、要素を追加します。追加したイベントにShopContentを設定し、No Functionの部分を押してGameObject -> SetActiveに設定します。
f:id:doggy_dog:20160221032033p:plain


2. 1と同様にOnValueChangedにイベントを追加し、ShopとOptionには黒い画面を敷くように設定します。
f:id:doggy_dog:20160221032939p:plain


3. 1と2の内容をOptionにも設定をします。また、HomeにはOverlayを非表示にするイベントを設定しておきます。
(Optionとは違い、GameObject -> SetActive(bool)の方です)
f:id:doggy_dog:20160221033220p:plain


4. 最初はHomeが選択されているので、OverlayとShopContentとOptionContentはOffにしておきます。
f:id:doggy_dog:20160221033417p:plain

これで完成になります。
Shopの内容を追加していく場合は、ShopContentの子要素として追加する形になります。

まとめ

これを使うと、思ったより簡単にメニューが実装できそうです。
簡単なゲームのメニューとして使うのであればバッチリだと思います。
(見直す部分はそれなりにありますが・・・)

よければ使ってみてください。

【Unity】iTweenの使い方 / アニメーションメソッド【入門】

iTweenの使い方のアニメーションメソッド編になります。
前回の話の続きで、今回はiTweenのアニメーションメソッドの内容です。
doggy.hatenablog.com

アニメーションメソッド

前回で使えていないものが結構あったりします。
ですが、基本的に応用的な使い方でいけちゃいます。

iTween.Move◯◯

TransformクラスのpositionまたはlocalPositionを制御してオブジェクトを移動させるメソッドです。
MoveTo以外にも色々あり、用途によって使い分けることになります。

  • MoveTo : 現在の位置から指定した位置へ移動させる
  • MoveFrom : 指定した位置から現在の位置へ移動させる
  • MoveBy : 現在の位置から指定したオフセット分を加算した位置へ移動させる
  • MoveAdd : 他の移動アニメーションにさらに移動を追加する

iTween.Rotate◯◯

TransformクラスのeulerAnglesまたはlocalEulerAnglesを制御して、オブジェクトを回転させるメソッドです。
こちらもRorateTo以外にも色々あります。また、単位は度( °)になります。

  • RotateTo : 現在の角度から指定した角度へ回転させる
  • RotateFrom : 指定した角度から現在の角度へ回転させる
  • RotateBy : 現在の角度から指定したオフセット分を加算した角度へ回転させる
  • RotateAdd : 他の回転アニメーションにさらに回転を追加する

iTween.Scale◯◯

TransformクラスのlocalScaleを制御して、オブジェクトを拡大させるメソッドです。
こちらも上記2つと同じく、4つあります。

  • ScaleTo : 現在の大きさから指定した大きさへ拡大させる
  • ScaleFrom : 指定した大きさから現在の大きさへ拡大させる
  • ScaleBy : 現在の大きさから指定したオフセット分を加算した大きさへ拡大させる
  • ScaleAdd : 他のスケールアニメーションにさらに拡大を追加する

iTween.◯◯Update

Updateの様な繰り返し呼ばれる場所で使用するメソッドです。

  • MoveUpdate : 指定したポジションに移動させる(カーソルや敵への追尾などに使ったりできます)
void Update()
{
    var targetPos = Input.mousePosition;
    var worldMousePos = Camera.main.ScreenToWorldPoint(targetPos); 
    worldMousePos.z = 10f;

    iTween.MoveUpdate(this.gameObject, iTween.Hash(
     	    "position", worldMousePos, 
	    "time", 2.0f)
    );
}

https://i.gyazo.com/6d87d8bd80b3d0ae3e95d9554f9ab4d8.gif

  • ScaleUpdate : 指定した大きさに変える。
void Update()
{
    var targetPos = Input.mousePosition;
    var worldMousePos = Camera.main.ScreenToWorldPoint(targetPos); 
    worldMousePos.z = 10f;

    iTween.ScaleUpdate(this.gameObject, iTween.Hash(
	"x", worldPosMouse.x, 
	"y", worldPosMouse.y,
	"time", 2.0f)
    );
}

https://i.gyazo.com/7733f34434f8f44553d9f338522702dd.gif

  • RotateUpdate : 指定した角度に回転させる。
void Update()
{
    var targetPos = Input.mousePosition;
    var worldPosMouse = Camera.main.ScreenToWorldPoint(targetPos);

    iTween.RotateUpdate(this.gameObject, iTween.Hash(
	"rotation", worldPosMouse * 20, 
	"time", 2.0f)
    );
}

https://i.gyazo.com/1f21018f4e6722b99776df104545da19.gif

iTween.Punch◯◯

一定の力を与えた後、ゆらゆらと揺れながらオブジェクトを元に戻すメソッドです。
(バネの様な弾力のあるアニメーションに使えたりします)

  • PunchPosition : 揺れながら元の位置へ戻る。
iTween.PunchPosition(this.gameObject, iTween.Hash(
	"y", 4,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 3.0f)
);

https://i.gyazo.com/663e7354121479b08f2e1895e884a67d.gif

  • PunchRotation : 揺れながら元の回転に戻る。

iTween.PunchRotation(this.gameObject, iTween.Hash(
	"z", 150,
	"delay", 1,
	"time", 3.0f)
);

https://i.gyazo.com/ac2fed759f216535d6daed430a7f4017.gif

  • PunchScale : 揺れながら元の大きさに戻る。(ポヨポヨ感がいい感じ!)
iTween.PunchScale(this.gameObject, iTween.Hash(
	"x", 3,
	"y", 3,
	"delay", 1,
	"time", 3.0f)
);

https://i.gyazo.com/cec456c8fad5947beae9a2c25339c489.gif

iTween.Shake◯◯

ランダムの値を加算して揺らすことができるメソッドです。
(ブルブル震える様なアニメーションに使うことができます)
例えば、ダメージを受けた時にUIを揺らす、カメラを揺らす等...。

  • ShakePosition : 震えた移動をさせる。
iTween.ShakePosition(this.gameObject, iTween.Hash(
	"y", 2,
	"x", 2,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 1.0f)
);

https://i.gyazo.com/9a9977934af963a1550623f6f7c6b7ce.gif

  • ShakeRotation : 震えた回転をさせる。
iTween.ShakeRotation(this.gameObject, iTween.Hash(
	"z", 150,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 1.0f)
);

https://i.gyazo.com/675038a5f1b54ba3dcc3deab9a4ff48f.gif

  • ShakeScale : 震えた拡大と縮小をさせる。
iTween.ShakeScale(this.gameObject, iTween.Hash(
	"y", 2,
	"x", 2,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 1.0f)
);

https://i.gyazo.com/c0143ff2c1a32bc70de80eae559f21bf.gif

iTween.ValueTo

こちらのメソッドは少し特殊な使い方ができます。
ValueToメソッド単体では何も変化させませんが、指定した開始値と終了値の間を時間経過によって変化させます。
なので、独自の処理を実行することもできます。
例で、色を変えるサンプルを作ってみました。

// 色を変えたい UI image を選択
[SerializeField] Image image;

void Start()
{
	iTween.ValueTo(this.gameObject, iTween.Hash(
		"from", Color.red,
		"to", Color.blue,
		"delay", 1, // delayは確認用に少し遅らせているだけです。
		"time", 2.0f, 
		"onupdatetarget", this.gameObject, 
		"onupdate", "OnUpdateColor")
	);
}

void OnUpdateColor(Color color)
{
	image.color = color;
}

https://i.gyazo.com/9bb0e6fa4b4e7509846be7bcb30d767f.gif

まとめ

アニメーションメソッドを一通り、紹介致しました。
とても便利なものが多いので、覚えておくととても役に立ちます!
iTweenの理解をもっと深めて、使えるものは使っていきたいですね。

現在、「Unity UI デザインの教科書」という本を読んでいるので、次回はUI関連の記事が書けたらと思います。

uGUIではじめるUnity UIデザインの教科書-Unity5対応

uGUIではじめるUnity UIデザインの教科書-Unity5対応