LoginSignup
0
1

More than 5 years have passed since last update.

ゲーム開発を受注しようぜ<その3> Unity2Dで 画面の中にキャラクターを置こうぜ

Last updated at Posted at 2017-06-05

ゲーム作りを実践しながら覚えたい場合は 次のサイトのチュートリアルがおススメ。

「【Unity1】ユニティちゃんを自動で移動!Sprite画像, velocity【ユニティちゃん縦スクロール1】」ひよこのたまご
http://hiyotama.hatenablog.com/entry/2014/11/27/225323

また、Unityの公式だろうか、シューティング・ゲームを作るチュートリアルもあるようだ。

「2Dシューティングゲーム」
https://github.com/unity3d-jp-tutorials/2d-shooting-game/wiki

この記事では、作業をずらっと流してみる。

スプライトを置く

20170605l1b.png

Hierarchyビューで右クリック。[2D Object] - [Sprite]。

20170605l2b.png

New Sprite が作られるので、クリックして Player と打鍵。名称変更する。

画面を見てもキャラクターがいないのは、背景の後ろに隠れているからだ。
レイヤーを作りたい。

表示順のレイヤーを作る

20170605l15b.png

レイヤー設定ビューへの進み方は いろいろあるが、
とりあえず Player スプライト選択状態で Inspector の Sorting Layer ドロップダウンリストをクリックし、[Add Sorting Layer...]をクリック。

20170605l16b.png

レイヤーの名前を追加していく。[+]ボタンで行を追加したり、行をクリックして[-]ボタンで削除することも可能。行頭の[=]のような記号はハンドル(=つかむところ)になっていてドラッグ&ドロップで順序を入れ替えることもできる。

20170605l17b.png

これで キャラクターが背景より手前に置かれた。
背景画像は今 Default レイヤーにあるので、全て適切に設定しよう。

C#スクリプト で ソーティング・レイヤーを 設定する方法

    // Tile1 ゲーム・オブジェクトを作る
    GameObject go = new GameObject("Tile1", typeof(SpriteRenderer));
    // 在るものから探す場合
    // GameObject go = GameObject.Find("Tile1");
    SpriteRenderer rend = go.GetComponent<SpriteRenderer>();
    rend.sortingLayerName = "Ground";

大元のレイヤー

味方が撃った弾は敵に当たって、味方には当たらない、といったことがあるだろう。

20170605l19b.png

この目立つところにあるレイヤーは、そういうのを分けたり、ライトに照らされるやつ、照らされないやつ、を分けるような使い方をするようだ。

20170605l18b.png

最初からいくつか設定されている。とりあえず今のところ Default だけ使っていればいいのではないか。

タイル画像をスライスする

20170605l3b.png

Projectビューで画像をクリック。Inspectorビューでこれから設定を行う。

拡大縮小時に ドット絵を ぼかしたくない場合は
[Advanced] - [Filter Mode] を Point(no filter) に変更。

1枚の画像をスライス(分割)して アニメを作りたい場合は Sprite Mode を Multiple に変更して [Sprite Editor] ボタンをクリック。

20170605l4b.png

スプライト・モードを Multiple にしたなど、変更した場合、画面が変わる際に 変更を適用するか尋ねられるので [Apply] をクリック。

20170605l5b.png

Sprite Editor が出てきたら 画面上の方の[Slice]ボタンをクリック。

Type を Grid By Cell Size にし、
Pixel Size の X、Y に ヨコ幅、タテ幅を設定。
[Slice]ボタンをクリックする。

[Apply]ボタンは、今押しても、後でダイアログボックスが出てきて押してもいい。
[×]ボタンでウィンドウを閉じる。

20170605l6b.png

Hierarchyビューの Player スプライトをクリックして選択状態にする。

アニメーションだけ設定してアニメーション・データを持っておく、といったことはできないので、このスプライトのアニメを設定する、という風に紐づく。

Playerスプライトを選択状態のまま [Window] - [Animation] をクリック。

20170605l7b.png

Animationウィンドウが出てくる。
最初は何もないので [Create]ボタンをクリック。

20170605l8b.png

アニメーション・データをどこに保存するか 尋ねられる。
Unityのプロジェクト・フォルダーの Assets/Resources の下に保存しておかないと、後で検索が使いにくいケースがある。

わたしは Assets/Resources/AnimationClips というフォルダーを作って 名前を Player.anim にして入れることにした。

20170605l9b.png

タイムライン(ドープシートという)が出てくるが これは無視して、
左上の方の [Player] という名前をクリックして [Create New Clip...] をクリックする。

20170605l10b.png

また .anim の保存を尋ねられる。
ダッシュ・モーションを作りたいので Player@Dash.anim みたいな名前にする。アットマークをここで使っていいのかよく分からない。

20170605l11b.png

[Samples] に 4 を入れて キーボードの[Enter]キーを押す。
隣のタイムラインも 4 で1サイクルになった。

20170605l12b.png

Projectビューで、スプライトをスライスした画像を [Ctrl]キーを押しながら4枚クリックする。
スライスした画像が出ていなければ、画像の右隣の三角印をクリックする。

4枚の画像を、タイムラインの1フレーム目にドラッグ&ドロップする。

20170605l20b.png

アニメーション・ウィンドウの三角ボタンを押すと、アニメーションを確認できる。

20170605a2.gif

地面にキャラクターを立たせるには

ひよこのたまご で紹介されている方法を真似てみる。
「【Unity8】ユニティちゃんを歩かせる!Animator Controller, rigidbody2D.velocity【横スクロールユニティちゃん2】」
http://hiyotama.hatenablog.com/entry/2015/06/13/090000

キャラクターに、当たるところ を設定する

Player スクリプトを選択状態にして、Inspectorビューの [Add Component]ボタンをクリック。

20170606a1b.png

[Physics 2D] - [Circle Collider 2D] をクリック。

20170606a2b.png

緑色の円が表示された。これがコライダー(当たり判定)だ。

20170606a3b.png

Inspectorビューの Circle Collider 2D コンポーネントの
Offset Y を -0.1 にすると、サークルが 10ピクセル下がる。(pixel per unit が100の場合)

Radius は半径の長さなので、ラジウスを小さくすることで 円が小さくなる。
円の底の方を、足元の接地面に合わせた。足がじたばたするときは半円を描くだろうから、理屈には合っているのだろう。崖のぎりぎりで、体を半分以上だしたときに中心からずれて落ちていくのも都合がいい。

20170606a4b.png

さらに [Add Component] ボタンをクリックして [Physics 2D] - [Box Collider 2D] をクリック。
ボックス・コライダー2Dを追加した。

サークル・コライダー2Dと合うように 上図のように 位置を調整しなおした。

キャラクターが重力に引かれるよう 重さ を付ける

20170606g1b.png

Player ゲーム・オブジェクトを選択状態にし、Inspectorビューから [Add Component] - [Physics 2D] - [Rigidbody 2D] と進む。

リジッドボディを付けると、物理演算の計算対象になって、重力に引かれて落ちていったり、跳ねたり、回転したりするようになる。

2Dゲームでは それはやりすぎなので、あとで回転しないとか 制限を付けていくことになる。

地面

あとは地面にも コライダーを付ければいい。

20170606a5b.png

このサンプル画像の地面は タイル・マップのデータを読込んで作っている。 地面の緑色のところに ボックス・コライダー2D を付けた。

関連記事:http://qiita.com/muzudho1/items/061944fdcc73008c822c

20170606a3.gif

何にぶつかっているのか分からないが へんなところに詰まっている。

このバグの理由:http://qiita.com/muzudho1/items/3ff571b64373a1de06b8

おわり。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1