OMOROC.PLAY

アプリ開発とキャラデザインをするブログ

リアルワールドRPGを作ってみよう！ キャラのアニメーション

Unity リアルワールドゲーム

今日の東京は雪景色、桜開花後の雪は3年ぶりらしいです。

凍える寒さの中、中野通りの桜蕾を見に行ってきたアフロです( ・∇・)


さて今回は、前回導入したキャラぷちゴンを上下左右に動かしてみたいと思います。


➡️動いている様子はこんな感じ↓


ある程度のアニメーションであればUnityの機能を使えば簡単に実装できます。
では、順をおって説明します。

  • Animatorの準備

　１. アニメーターコントローラーを作成
　　　Projectビュー > Create > AnimatorController
　　　名前は「PuchigonSprite」

　　　f:id:tinyafuro:20180321214046p:plain

　　　※Animationsフォルダを作成して整理すると管理しやすくなります


　２. HierarchyビューのPlayerオブジェクトにAnimatorコンポーネントを追加

　　　f:id:tinyafuro:20180321214329p:plain

　　　追加したAnimatorコンポーネントのControllerへ先程作成したアニメーターコントローラーをアタッチさせる

  • スプライトアニメーションの作成

　１. Window > Animationウインドウを開く
　
　２. Createボタンを押してアニメーションクリップ新規作成　※名前は「PuchigonSprite@front」

　３. スプライトアニメーションのキーフレームとなるspriteをドラック&ドロップ

　　イメージはこんな感じ↓
　　f:id:tinyafuro:20180321215228p:plain

　４. 他にも横や後ろ姿のアニメーションも追加
　　　アニメーションウィンドウの左上のクリップトグルから [ Create New Clip]
　　　名前は同様に
　　　・PuchigonSprite@back
　　　・PuchigonSprite@left
　　　・PuchigonSprite@right

　　　結果的にProjectビューはこうなる
　　　f:id:tinyafuro:20180321214046p:plain


  • メカニムの設定

　１. 作成したアニメーションクリップ間のステート遷移を設定
　　　Playerオブジェクトを選択した状態でAnimatorウィンドウを開く

　２. ステート遷移の判断基準となるパラメータを定義する
　　　Animatorウィンドウ > Parameters > ➕ボタンからBoolを選択 > 名前をfrontとする
　　　同様のパラメータを以下３つ作成する
　　　・back
　　　・left
　　　・right

　３. PuchigonSprite@frontステートを右クリックして [ Make Transition ] を選択

　　　f:id:tinyafuro:20180321220659p:plain

　　
　　そうすると矢印（トランジション）が追従するようになるので、そのままPuchigonSprite@backステートへ繋ぐ
　　作成されたトランジションをクリックしてInspectorビューから➕ボタンでConditionを追加し、backパラメータを指定する
　　その際、[ Has Exit Time ] のチェックは外しておく。

　　同じ様な動作を繰り返すことで４つのステートがそれぞれ他３つのステートと繋がります

　　こんな感じになっていればOK
　　f:id:tinyafuro:20180321221718p:plain

  • アニメーション切り替え処理をコーディング

　１. animator.SetBool(パラメータ名, true) だけでアニメーション遷移できちゃいます！
　　コーディングはすごくシンプルで簡単( ´ ▽ ` )


/// プレイヤーの座標、移動管理
public class PlayerController : MonoBehaviour {


//プレイヤーのアニメーションコントローラー
private Animator animator;


//プレイヤーのステート
public enum PlayerState{
front,
left,
right,
back
}

private PlayerState state;


void Awake(){
animator = gameObject.GetComponent();
}


//プレイヤーの向きを変更
public void DirectionSet(PlayerState st){

switch(st){
case PlayerState.front:
state = PlayerState.front;
break;
case PlayerState.back:
state = PlayerState.back;
break;
case PlayerState.right:
state = PlayerState.right;
break;
case PlayerState.left:
state = PlayerState.left;
break;
}

//プレイヤーの向きを変更
animator.SetBool("front", state == PlayerState.front);
animator.SetBool("left", state == PlayerState.left);
animator.SetBool("right", state == PlayerState.right);
animator.SetBool("back", state == PlayerState.back);
}
}



なかなかのボリュームになってしまいましたが、
一度やって慣れてしまうと大したことはないですｗ


プログラムコードを別ウインドウで表示するアレってはてなブログじゃできないのかなぁ（汗）
インデント入らなくて読みずらいわぁ、、、



　　

リアルワールドRPGを作ってみよう！ キャラ導入

そろそろ桜の開花も間近ですね！
花見と花粉は紙一重なアフロです。

最近、週末にブログを書くことを習慣付ようと頑張っておりますｗ

さて、前回のリアルワールドRPGを作ってみようの進捗です。

ゲームの開発段階ってUIはとりあえず適当なもので置き換えて、とにかくコーディングに力を入れるのですが、
やっぱり目見にえるものがないと開発者のモチベーションも続かないってもので、
メインキャラだけは早い段階で置き換えてみようと思いました。

Twitterフレンドの @mat_s_u さんのぷちゴンが可愛かったので交渉してお借りすることが出来ました！

@mat_s_u さんありがとうございます〜(^^)/





昔懐かしドット絵でいい感じです！
目をパチくりさせて可愛らしいですね( ´ ▽ ` )

さてさて、これから横バージョンと後ろ向きバージョンをアニメーション追加して
マップ内を縦横無尽に移動できるようにさせてあげないとです( ・∇・)ｂ

リアルワールドRPGを作ってみよう！

花粉、花粉、明日も花粉、、、

どうもアフロです。

ブログ書くモチベーションになったので書いてみようと思います。

前回作ったアプリ【ナッビーボール】で燃え尽きてしまい、半年ほど灰になってましたｗ

春の陽気と共にやる気スイッチも入れてみようかと。

ということで、今流行りの位置ゲーにチャレンジしてみようと思います。

ポケモンGOみたいなゲームが作れるようになるという聖書をゲットし２回ぐらい読み返すこと３ヶ月、、、

f:id:tinyafuro:20180311212305j:plain

聖書の通りに作ったポケモンGOもどきがこちら↓

ってことで、一通りのお作法はマスターしたことにして、 早速オリジナルゲームの作成スタートです！

まだほとんど進捗なしなので、やったことは以下の２つだけです。

・GoogleMapAPIを使い位置情報の取得とマップ表示

・GoogleMapsGeocodingで緯度経度の位置情報からエリア名を取得

そのテストプレイがこちら↓

細かいコーディングの部分などは余裕あれば記事にしていきたいと思います。 GoogleMapsGeocodingの部分も意外とハマりポイントあったので、どこかで備忘録として残しておきたいかな。

次は、時間帯でマップが昼バージョン、夜バージョンと変わるようにしたいなぁ。

では、今日はこの辺で。

【新作スマホゲーム】ナッビーボール　リリースしました！

スマホ用ゲームアプリ

「ナッビーボール」をリリースしました！

サブタイトルは、〜ゆるキャラとボールの物語〜

 

ゆるキャラだけど、結構シビアなゲームです！

 

よかったら遊んでみてください！

 

Android版： 

iOS版：

 

f:id:tinyafuro:20170925220042j:plain