Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Unity初心者が2 d sprite使ってゲームを作ってみた【後半戦】

19,476 views

Published on

Unity初心者が、Unity4.3から搭載された2D Sprite機能を使って、1本ゲームを作った時の作り方やTips、エラーの対処法などをまとめました!

こちらにもUnity情報を載せていますので、合わせてご覧ください!
http://i-tai.net/apps/unity/

今回の制作で使用したソースコードはこちら
http://i-tai.net/apps/ningen-tamaire/dev/

※前半戦はこちらです!!
http://www.slideshare.net/toshitakamuraishi/unity2-d-sprite-31701418

  • Dating for everyone is here: ❶❶❶ http://bit.ly/2ZDZFYj ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Unity初心者が2 d sprite使ってゲームを作ってみた【後半戦】

  1. 1. Unity初心者が2D Sprite使って カジュアルゲームを作ってみた! ☆後半戦☆
  2. 2. 自己紹介 名前:村石 敏享(むらいしとしたか) 職業:フロントエンドエンジニア(主にFlashを触ってます) 前半戦をみていない方は、先に そちらを見てください☆ http://i-tai.net/apps/ningen-tamaire/dev/
  3. 3. このプレゼンのターゲット ・Unityに興味をお持ちになっている方 ・カジュアルゲームを作りたいけど、 どこから手をつけていいかわからない方 ・Unity経験者(仲良くなりたいです☆) ・UNITY-CHANかわいいね
  4. 4. 前半戦で作ったもの やあ。 これ。 注:画面はハメコミ合成です
  5. 5. シーンを保存 File→Save Sceneで、「GameMain」として保存します。 そうすると、Assets Viewにシーンが 保存されてるのが分かります。
  6. 6. プロジェクトとシーン シーンもプロジェクトの構成要素の1つです。 Unity Project 1 C# Scene Image Music Prefab Script Game Object Camera
  7. 7. シーン間の移動 シーン間の移動も、複数のシーンを混在させることも プログラムなどにより可能です。 Scene_03 Scene_04 Scene_01 Scene_02 Scene_05
  8. 8. 今回のシーン構成 Title GameMain Story TitleとStoryも それぞれ作って 保存します。
  9. 9. こんなゲームにしたい つの○じろうさん を彷彿させる タイトル 無駄に長い ストーリー 「痛……」僕は、焼けるような痛みの中、目をさました。体がとても重い。「ここは?」あたりを見渡す。みた事のない場所だ。何よ り異質なのは、ここが道路のど真ん中という事だ。おかしい…。僕は昨日はちゃんとベッドに入って寝たはずだ。まさか夢遊病者 になってしまったのだろうか?「うう……」所々から、うめき声が聞こえる。どうやら、ここにいるのは僕だけではないらしい。声のす るほうの様子をみる。まだ倒れている人、よろめきながら起き上がる人。みんな、僕と同じような年齢と背格好だ。「大丈夫です か?」僕は近くの人の所に駆け寄って、話しかけた。その人は、弱々しくかぶりを振る。着ている学ランから、僕が毎日通ってい る、聖マリアンヌ学園の生徒だとわかった。よくよくあたりを見渡す、すると、みんな同じ学ランを着ているらしい事が見て取れた。 ……何故? 何故?考えれば、考えるほど異質なこの状況に、目眩を起こしそうになり、体を小さく抱え込む。「……っ!!」そ の時気づいた。僕も学ランを着ている事に。ちょっと待て、確か昨日はお風呂に入った後、パジャマに着替えたはずだ。急に、足 下から現実がくずれ落ちていくような感覚。今までに襲った事のない恐ろしい感情が駆け巡った。やばいぞ、冷静になれ! 一 度、声に出してみる。何回か、頭の中で念じた後、深く深呼吸する。時間の感覚もあやふやだ。起きてから何分、いや、何時間 経ったのだろうか?ジャジャジャーンジャジャジャーンジャジャジャジャジャン♪その時、突然音楽が鳴り響いた。運動会でよく聞 く、あのメロディーだ。遠くでパン…と、花火の音も聞こえる。何だ、何だとあたりがざわつく。まだ倒れてた人も、喧噪で目を覚ま したのか、次第に起き上がってきた。「次の回に参加する方は、こちらに集まってください!」スピーカーからアナウンスが響いた。 突然、ドン!と後ろから押される。せかされるように、僕も列に加わった。…というより、気づいたらその状態になっていたのだが。 周りを見やると、色々な人がいる。目を血走らせている人、何かぶつぶつ呟いている人。満身創痍で歩くのがやっとの人…。た だ、どの人であっても、同じ聖マリアンヌ学園の学ランを着ているという事だけは共通していた。「あ、あの…」分からない状況を、 少しでもなんとかしたいと思い、隣に並んでいる人に声をかけた。しかし、途端に鋭い目でにらまれ、圧倒されてしまう。「ようこそ、 諸君!!」野太い声が、拡声器から聞こえる。みると、一回り以上の年齢の男が立っていた。先生だろうか? しかし、学校では みた事がない。男は、なおもしゃべり続ける。「今から“玉入れ”の競技の説明に入る。初めてじゃない者も沢山いると思うが、よく 聞いてくれ」え…、玉入れ…?「この先にある、白いラインがスタートだ。そして、この先にあるゲートがゴールになるもう少ししたら スタート合図がある、それが鳴ったら全力で走れ、以上だ!」あたりがざわざわとする。当たり前だ。玉入れと聞いているのにもか かわらず、玉や籠の説明もない。これでは、まるで徒競走の説明である。比較的冷静な人もいるが、初めてではないのだろう か?「玉と籠はどこにあるんですか?」「チーム分けはどうするんですか?」口々に質問が飛ぶ。「静粛に!」先生らしき男が、場 を制した。「今の質問についてだが、一つずつ説明しようと思う。まず、この競技はチームではなく個人戦となる。そのうち協力し て戦えるようにしたいという事みたいだが…そして籠、それは、あれだ!」男が上空を差した、「それ」は、とても大きく、隣の高層 ビルより、さらに上空にそびえ立っていた。とてもじゃないが、オリンピック級の選手を連れてきても玉を投げ込めるような高さで はない。「ここに、どうやって玉を投げ込むんですか?」当たり前の質問が飛ぶ。その質問をうけて男が答える。「どうやら勘違い をしている者もいるようなので、ここではっきりさせておく。玉は、お前たちだ!お前たちは、そこの異界の窓に移っている、指を かいくぐり、投げられないようにゴールを目指せ」男の言葉と視線の先を見て、僕は戦慄を覚えた。「何だ…。あれは?」籠と対に なるように、縦長に広がった異界への窓には、ゲームのストーリーらしい説明文を読む、楽しそうな巨人とその説明文を操作をし ている太い指がみえた。それに…。え? 何?…何だって!? 玉は僕たちって言った?あたりが一瞬静まりかえり、大きくざわ つく。「なにあれ、怖い…」「はぁ、ナニ言ってんだ?」「ふざけるのも大概にしろよな!」「うちにかえりたいよ〜」口々に動揺と罵 詈雑言が飛び交いだした。あたり全部が、その空気に満たされようとしていた瞬間「この糞虫どもがっ…!!」男が放った一言は、 今まで違う異質な口調で、この場が時が止まったようにしん…と、静まり返った。シュプレヒコールをあげていた者は、口を開けた まま硬直している。男は、なおも続けた。「この世とは、不条理なものだ。いまさら、それを並べ立てることに何の意味がある?そ れを受け入れろ!この世の中は理不尽だらけだ。いいかっ…!君らはゆとり世代と言われて久しいが、この世の中を見渡してみ ろ! 優劣に基づいた競争社会じゃないか。受験戦争しかり、出世競争しかり、世の中には争いや戦いがあふれている。あらぬ 誤解で傷つけ、そして傷つくこともあるだろう。もしかしたら、この長い道のり、途中であきらめそうになってしまうかも知れない、 立ち止まってしまうかもしれない。しかし、その時こそ、思い出してほしい!勝利とは、決してあきらめなかった者が掴むものだ と!諸君らが、今まで流した汗と涙の量は、嘘をつかない。今こそ、この手で掴むときだ!私は何も難しい事は言っていない、た だ走れとだけ言ったんだ。走ればゴールにつく、だだそれだけだ!」!!!!そうだ…! 僕は間違っていた。思えば僕は今ま での人生、何も掴もうとしてなかった。走ればゴールにつく、そんな簡単な事を僕は今の今まで見失っていたのだ。話は初めて 聞いたので、今まで流した汗は、正直ない。だがしかし、ここでやらなければ、そして、勝たなければ意味がないのだ。「やる ぞ!」僕も、一言呟く。体が火照りだす。急に目頭が熱くなった。何度地面に叩き付けられようとも、絶対その度に立ち上がって ゴールに目指すんだ!「やるぞ…!! やるぞ!!!」僕は叫んだ。それに呼応するかのように地響きのような、うねりにも似た 叫び声がわき上がる。所々で嗚咽も聞こえる、僕も涙で前が見えなくなっていた。いったい何を言いたいのか分からない叫びとと もに。走り続けよう。その道がどんなに辛く、苦しくても。そして、勝ち取ろう、勝利を。栄光に向かって走れ。どこまでも。
  10. 10. こんなゲームにしたい 走ってくる人を、 たくさん籠に投げ入れましょう。
  11. 11. こんなゲームにしたい 指でスワイプしてぐりぐり 人を集めます。
  12. 12. こんなゲームにしたい 集めた人をフリックで 上に放り投げましょう。 籠に入ったら得点に なります。
  13. 13. キャラクター部分の制作 プログラムを含めた挙動を実際に作りこんでいきます。
  14. 14. 投げられる人の作成 それらしいpng画像を用意して、画面上に表示します。 それに、 ・Rigidbody 2D(物理演算用) ・Circle Collider 2D(衝突判定用) ・Audio Source(音声再生用) をAdd Componentします。 … … … … …それらをスクリプトで制御します。
  15. 15. 投げられる人の作成 C#スクリプト「PersonController.cs」をAddします。 考え方ですが、キャラにどのような挙動をするかのステー タスをを一つ用意し、プレイヤーの動作によってステータ スを変更させていきます。
  16. 16. 投げられる人の作成 ステータスはこんな感じで推移させます。 「”Walk”」…初期値、画面右に向かって移動するだけ。 「”Drag”」…指でスワイプされてる状態、指に合わせて一 緒に移動する。 「”Throw”」…指を離された状態、物理法則にのっとって 落ちたりぶつかったりする。
  17. 17. “Walk” 画面の左から右に向かって移動するだけです。 【主なステータス】 ↓Update時にすこしずつ右にずらす transform.position += new Vector3(walkSpeed * Time.deltaTime, 0, 0); ↓重力などの外部の力に左右されない rigidbody2D.isKinematic = true;
  18. 18. “Drag” 指に合わせて一緒に移動します。 【主なステータス】 ↓Update時に、指の位置とキャラの位置を同じに合わせる Vector3 currentScreenPoint = new Vector3(Input.mousePosition.x, Input.mousePosition.y, screenPoint.z); Vector3 currentPosition = Camera.main.ScreenToWorldPoint(currentScreenPoint); transform.position = currentPosition; ↓重力や衝突などを外部の力が加わるように rigidbody2D.isKinematic = false;
  19. 19. “Throw” 物理演算で動きを処理します。 【主なステータス】 ↓重力など外部の力に左右されるように変更 rigidbody2D.isKinematic = true; 後は、Unityさんに計算をおまかせ☆
  20. 20. その他処理 キャラが画面外に出たときに消します。 if (transform.position.x > 10) { Destroy(this.gameObject); } if (transform.position.y < -0.5) { Destroy(this.gameObject); }
  21. 21. やりたい事をプログラムにします 今回のプログラムは、ここに載せました。 ※突っ込み大歓迎です☆ http://i-tai.net/apps/ningen-tamaire/dev/
  22. 22. 閑話休題 Unityってコンポーネント指向なんだって~。 へぇ、それって食べれるの?
  23. 23. コンポーネント指向ってなんぞ? Unityでは、従来のクラスを拡張したコンポーネントベース での開発を推奨しています。Unityで使用する、どのコン ポーネントも基本的には「MonoBehaviour」クラスを継承し ています。…あくまで噂です。 RigidBody 2D MonoBehaviour Camera クラス Script(C#)
  24. 24. コンポーネント指向ってなんぞ? MonoBehaviourはよく使う、「rigidBody, Collider, audio, animation, camera」などの各コンポーネントの変数をすで に持っています(使用する場合は、該当コンポーネントを Addしている必要があります)。 RigidBody 2D Game Object Transform Camera ※お互いに知っている
  25. 25. まとめると… Transform MonoBehaviour クラス Rigidbody Script(C#) Audio Game Object
  26. 26. コンポーネントのプロパティ 当たり前ですが、コンポーネントのプロパティはプログラム で全て(?)いじれます。あと自分の作ったコンポーネント は、定義時にpublicにすると、外側から変更可能です。
  27. 27. コンポーネントのプロパティ GameObjectや audio Clipなどを 参照したいときは、 AssetsやHierarchy からドラッグで指定 できます。 ちなみに、キャラクターの叫び声のAudio Clipの設定もこれで行っています。
  28. 28. 音声の再生 投げたときに、ランダムで叫び声を あげさせるのはこんな感じです。 public AudioClip[] shoutSe; //音声を沢山用意 int i = Random.Range(0, shakeSe.Length); audio.PlayOneShot(shoutSe[shoutIndex]);
  29. 29. その他のロジックについて この話はあくまで、Unityのシーンに含まれるGameObject に紐づくコンポーネントの話ですので、画面に表示されな い部分(いわゆるロジック部分)については、普通にクラス ベースの開発を行えます。…あくまで噂ですが。 相互に Logic部分 やりとり View 部分
  30. 30. この話の流れついでに オブジェクト間の 通信方法について これやって> 通信 <いいよ
  31. 31. オブジェクト間の通信方法 大きく2つ方法があります。 ・GameObjectのコンポーネントを取得して メソッドにアクセスするパターン ・メッセージを送信するパターン
  32. 32. コンポーネントのメソッドにアクセス たとえば「parson」というGameObjectの、 RigidBody 2DのisKinematicのチェックを外したい場合。 GameObject parson = GameObject.Find(“parson"); parson.rigidbody2D.isKinematic = false;
  33. 33. コンポーネントのメソッドにアクセス 自分で作ったコンポーネントの取得は、 GetComponent<ParsonController>(); で、取得できます。もしGameObjectをまたぐ場合は、 GameObject.Find(“parson").GetComponent<ParsonController>(); のようにとることが可能です。
  34. 34. コンポーネントのメソッドにアクセス たとえば、「PersonController」の public void Dragging() に、アクセスしたい場合。 ParsonController parsonController = GameObject.Find(“parson").GetComponent<ParsonController>(); parsonController.Dragging();
  35. 35. メッセージを送信する たとえば、「PersonController」の public void Dragging() に、アクセスしたい場合。 …のSendMessageバージョン GameObject.Find(“parson"). SendMessage("Dragging"); ※コンポーネント間の呼び出しとパフォーマンス
  36. 36. ゲーム自身のロジックを 制作していきます いよいよ佳境ですよ☆
  37. 37. Assetsの整理 中身をわかりやすくするためにフォルダ分けします。 僕は、とりあえず2D Platformer(まめ)を参考にしました。 Project View Create→Folder Prefabsフォルダは後で使います。
  38. 38. Hierarchyの整理 空のGemeObjectを作り、ファイル名と同名 (今回は「GameMain」)にし、TransformのPositionが 全て0なのを確認します。 GameObject→Create Empty
  39. 39. Hierarchyの整理 Hierarchy ViewでGameObjectをドラッグして移動させ、 分かりやすく、こんな感じにします。
  40. 40. ゲームのメインロジックの追加 「GameMain」に、 C#スクリプト 「GameMain.cs」を Addします。 あと音楽もならしますので 「Audio Source」もAddします。
  41. 41. おおざっぱなフローの概要 ゲームの初期化 ・音楽の再生 ・GUI Textの 設定 ゲーム中 ・一定時間毎にキャラクターの クローンを作成 ・キャラクターのドラッグ判定 ・タイマーのカウントダウン ・ゲームの開始 ゲーム終了 ・GameOverの 表示 ・タイトルに戻る 処理 ・GUIのスコア追加と時間を変更 重要なのをいくつかピックアップして説明します。
  42. 42. あ! 今のままだと、キャラクターを複製ができないので、 キャラクターをPrefab(プレハブ)にして、 複製できるようにします。
  43. 43. キャラクターのPfefab化 Hierarchy Viewから、 ドラッグして Assets Viewに 持ってきます。 Prefab完成!
  44. 44. キャラクターの複製 「GameMain.cs」の変数定義で、 public GameObject peasonPrefab; という空のGameObjectを用意します。 すると、Inspector Viewの Game Mainにプロパティが出ますので、 ここに、作ったPrefabをドラッグします。 そうすると、プログラム上で、 定義したのと同じになります。
  45. 45. キャラクターの複製 後は、出すだけ! Instantiate(peasonPrefab); ちなみに、Updateに そのまま書き足したら、こう。 なので、一定間隔で 出るように調整をします。
  46. 46. キャラクターのドラッグ判定 ちなみにタップの判定については、複数の方法があります。 ・ MonoBehaviourのメソッドOnMouseを利用する。 ・RaycastHit2Dを使用する(今回はこちらで制作)。 ・ タッチ系の操作をサポートするAssetを使用する。
  47. 47. OnMouseメソッドとは? MonoBehaviourのメソッドとして用意されている、 Mouse関連の関数を使う方法です。 OnMouseOver, OnMouseDrag, OnMouseUpなども 同様に使用できます。 どうもモバイルだと判定が遅れてしまうようです。 ストラテジー系なら気にならないと思いますが。 OnMouseメソッドについては、 ここに詳細が記載されています。 Mouse入力 Event, OnMouse, Input
  48. 48. OnMouseメソッドを利用する まず、特定したいオブジェクトに、 Box Collider 2Dと Rigidbody 2DをAddする。 物理演算の影響を 受けたくない場合は 該当箇所をそれぞれチェック。
  49. 49. OnMouseメソッドを利用する Scriptにて、任意の場所に void OnMouseDown() { Debug.Log (“クリックされたよ!"); } と書きます。クリックすると… でます。
  50. 50. Raycastとは? 任意の位置から任意の方向に向けて架空の線を出し、そ の線分上にあるオブジェクトを取得することが出来ます。 RaycastHit2Dは、それの2Dヒットテスト用になります。 Raycast 届けこの想い> 画面 <ドキーン
  51. 51. RaycastHit2Dを使用する まず、特定したいオブジェクトに、 Box Collider 2DをAddする。 当たり判定のみの場合は 該当箇所をチェック。
  52. 52. RaycastHit2Dを使用する Scriptの void Update()内に、以下のスクリプトを書きます。 if (Input.GetMouseButtonDown (0)) { Vector2 tapPoint = Camera.main.ScreenToWorldPoint(Input.mousePosition); RaycastHit2D hitObject = Physics2D.Raycast(tapPoint,-Vector2.up); if (hitObject) { Debug.Log("クリックされたよ!"); } }
  53. 53. RaycastHit2Dを使用する 前のページのスクリプトでは、マウスダウン時に、マウスポ ジションの位置をカメラ目線で取得してRaycastを飛ばし て当たったらConsoleを出すという処理を記述しています。 Raycast
  54. 54. Asset Storeを利用する InputTouchesは、試しに触ってみましたが、 かなりよさそうです。 http://terasur.blog.fc2.com/blog-entry-168.html トリガー判定はもちろん、細かな携帯での挙動やフリック 時の移動距離や角度まで取得することが可能です。 それらを自前で用意することを考えると…。
  55. 55. タイマーのカウントダウン ざっくり書くと、こんだけです。 private float nowTime = 60f; void Update () { nowTime -= Time.deltaTime; }
  56. 56. やりたい事をプログラムにします 今回のプログラムは、ここに載せました。 ※突っ込み大歓迎です☆ http://i-tai.net/apps/ningen-tamaire/dev/
  57. 57. 色々あって 完☆成 ※画面は開発中です。
  58. 58. 今後の課題 ・キャラクターにMecanimを使用した パーツアニメーションを作る http://blog.cshool.jp/2013/12/5215.html ・ゲームバランスの修正 ・GUIをNGUIに変更
  59. 59. 付録 NGUIについて えぬぐいですよえぬぐい
  60. 60. NGUIとは? ・Unity標準のGUIツールよりかなり優れたGUIツール (というより、Unityの標準GUIがあまりにも貧弱です) ・結構、モバイル独自の挙動にも対応している。 (スワイプによるコンテンツのスクロールやドラッグなど) ・今後標準リリースされるuGUIはNGUIをベースにしている。 (ちなみに、NGUIの作者がuGUIの開発に関わっていた) ・Asset Storeにて95ドルで販売中 http://u3d.as/content/tasharen-entertainment/ngui-next-gen-ui/2vh
  61. 61. 参考前知識 NGUI 3.0.7 Tutorial (英語ですが、スクロールウインドウなど、映像だけでもどのように作るか大体わかると思います) http://www.youtube.com/watch?v=B66xhIvYF00
  62. 62. NGUIでスクロールしてみる 今回は画面全体に スクロールウインドウを作り、 その中にOTFテキストを 沢山入れて表示してみます。 ここ以降はNGUIをAsset Storeで 購入した前提で記述します。
  63. 63. 下準備しましょう☆ ・新規別シーンを用意します (今回は「Story」というシーンを制作) ・カメラの画面サイズをスマホ用に設定します (よければスライドの前半戦を見てください☆) ・使いたい文字のOTFフォントファイルをAssets Viewに
  64. 64. NGUIをインポートする Window → Asset Storeからインポートします。 メニューに「NGUI」が出てるのを確認してください。
  65. 65. Demoで何となくできることを把握 Assets Viewから、 NGUI →Examples → Scenes で色々デモがみれます。
  66. 66. NGUIのUI Rootを作ります NGUI → Create → 2D UIで UI Rootを作ります。NGUIオブジェクトは こちらに入れることになります。
  67. 67. UI Rootを画面サイズと合わせる UI Rootのプロパティの該当箇所の Scaling Style を 「FixedSize」、Manual Height をカメラのサイズに合わせる と、大きさの数字が合うのが確認できます。
  68. 68. Scroll View を addChild UI Rootを選択した状態 で、右クリック。 Create → Scroll View でaddChildする。
  69. 69. Scroll View を addChild Scroll View の該当箇所のサイズをカメラに合わせると、 UI Rootと大きさが合うのを確認してください。
  70. 70. Labelを addChild 次は、Scroll Viewを選択 した状態で、右クリック。 Create → Lavel でaddChildする。
  71. 71. Label を addChild LabelのFontをUnityにし、右のフレームに 読み込んだOTFフォントをドラッグしてください。 好きな文字を入れる
  72. 72. 出た。
  73. 73. スクロールできるように LabelのWidget部分の下記を、画面より大きく設定し、テ キストも大量に入れます。画面では640 x 5000の大きさに しています。
  74. 74. スクロールできるように さらにLabelを選択した状態で、右クリックし、 Attach → Box Collider を追加。さらに、 Attach → Drag Scroll View を追加します。 これでスクロールしますが、なぜか横にしか動きません。
  75. 75. スクロールできるように Scroll View の Movement を Vartical に変更してください。
  76. 76. 動いた。
  77. 77. 他オブジェクトとも表示 2D Spriteで作った背景と同時に 表示すると、うまく合成されているのが分かります。
  78. 78. 終わり? ここまでのご清聴、ありがとうございました☆
  79. 79. ありがとうございました☆ こちらにもUnity情報を載せています~ http://i-tai.net/apps/unity/ ばいばい。

×