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

48
Unity初心者が2D Sprite使って カジュアルゲームを作ってみた!

Upload: toshitaka-muraishi

Post on 28-May-2015

23.724 views

Category:

Technology


3 download

DESCRIPTION

Unity初心者が、Unity4.3から搭載された2D Sprite機能を使って、1本ゲームを作った時の作り方やTips、エラーの対処法などをまとめました! こちらにもUnity情報を載せていますので、合わせてご覧ください! http://i-tai.net/apps/unity/ ※後半戦はこちらです!! http://www.slideshare.net/toshitakamuraishi/unity2-d-sprite-32060225

TRANSCRIPT

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

Unity初心者が2D Sprite使って カジュアルゲームを作ってみた!

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

自己紹介

名前:村石 敏享(むらいしとしたか) 職業:フロントエンドエンジニア(主にFlashを触ってます) Blog:http://i-tai.net (あいたいねっとだよイタいじゃないよ)

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

・Unityに興味をお持ちになっている方 ・カジュアルゲームを作りたいけど、 どこから手をつけていいかわからない方 ・Unity経験者(仲良くなりたいです☆)

あなたと僕と一緒に勉強していきましょう☆

このプレゼンのターゲット

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

Unity4.3から2DSprite機能を 搭載したから

触ったきっかけ

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

・基本アプリ無料、しかもアプリも書き出せる(だから試し放題) ・Unity4.3から2Dに対応 ※僕の中ではここが一番重要 ・AssetStore(ゲームに使える素材販売所)の充実っぷり ・対応プラットフォームの多さ(Webゲーム、iOS、Androidに加え、 PSやDSのゲームも同一ファイルから書き出せちゃう万能っぷり!) ・企業がベースにあるメリット(AssetStore、下位互換の確保、サポートなど) ・ゲーム画面にモノを置いていく開発方法がデザイナー上がりの僕としてはステキ ・Flashよりゲーム実行速度が早い(現状、Flashではモバイル24fpsでも描画は苦しい)

Unityのメリット

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

人間玉入れ ※現在開発中です。 (2014/02/27現在) 詳細はこちらのページで ご確認ください。 人間玉入れ紹介サイト

こんなゲームを作った!

※画面は開発中です。 ※画面は開発中です。

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

Unity4.3(Free) http://japan.unity3d.com/unity/download/

…あと、土日☆

用意したもの

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

ドットインストール Unity講座http://dotinstall.com/lessons/basic_unity ※触る前に、先に見ておくことをお勧めします(全部見て1時間ちょい)! 【書籍】Unityで作るスマートフォン3Dゲーム開発講座 http://www.amazon.co.jp/gp/product/4798126195/?tag=dotinstall03-22 ※ただし、前半だけしか触っておらず。 Unity Projects: 2D Platformer(通称:まめ) http://u3d.as/content/unity-technologies/unity-projects-2d-platformer/5m5 ※丁寧にコメント付きで記述されていますので、2Dゲーム用のスクリプティングの 参考になります。制作中はこれを絶えず横に開きながら作業していました。

前知識

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

さっそく作っていきます

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

File→New Project のダイアログボックスから…

2Dの設定方法

Macの人は、こちらをご覧ください! Macだとプロジェクトの新規作成時の2D指定が反映されないみたい。これだと便利機能に気が付かない人も居るかも

新規制作で

2Dを選ぶだけ

※厳密には普通の3Dプロジェクトから2~3設定を変

更するだけですので、後から修正できます。また、2Dを選んでも普通に3Dを使えます。

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

Unityの画面をざっくり解説

【Scene View】 ここにキャラクターなどの

GameObjectを配置します。

【Hierarchy View】

GameObjectの階

層構造を指定します。

【Inspector View】 選択した

GameObjectや各種

プロパティの設定や変更を行えます。

【Assets View】 ゲームの構成要素(シーン・画像・音楽・スクリプト・AssetStoreからインポートしたもの)を、こ

こで管理します。

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

適当な画像を用意します。

HelloWorldをしよう

やあ。

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

HelloWorldをしよう

Helloworld.png

Assets Viewに 画像をドラッグします。

そろり… そろり…

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

HelloWorldをしよう

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

HelloWorldをしよう

その画像 (2DSprite)を Scene Viewに ドラッグします。

そろり… そろり…

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

HelloWorldをしよう

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

HelloWorldをしよう

上の再生ボタンを押す!

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

Hello Worldを落とそう

GameObjectを選択した状態から、Add Componentを選択。

Physics 2D → Rigidbody 2Dを選択。

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

Hello Worldを落とそう

そうすると…

落ちます。

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

Hello Worldを着地させよう

画面上に板をおきます。

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

Hello Worldを着地させよう

それぞれのInspector Viewに、 Physics 2D → Box Collider 2Dを配置します。

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

Hello Worldを着地させよう

そうすると…

乗ります。

すたっ!

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

Hello Worldを滑らそう

板をなんとかして、こんな感じにします。

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

Hello Worldを滑らそう

すべります。

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

スクリプトでHello World

Add Componentを選択。

New Script→ 「HelloWorld」 と入力。 Languageは「C#」に

作ります。

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

スクリプトでHello World

Asset Viewに ファイルができます。

ダブルクリックすると、エディタが開くので、 void Start()の中に Debug.Log ("Hello World!!"); と書きます。

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

スクリプトでHello World

出ました。

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

スクリプトでHello World

ちなみに、 void Update()の中に Debug.Log ("Hello World!!"); と書くと…。

すごい数の、 Hello Worldが出ます。

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

Hello Worldを吹っ飛ばそう

今度は、void Start()の中に rigidbody2D.AddForce (new Vector2 (500, 500)); と書きます。

※x軸、Y軸に500の物理エネルギーを加えていますという意味です。

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

Hello Worldを吹っ飛ばそう

吹っ飛びました。

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

もう…俺…何でもできる… ※すぐに折れました

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

Androidで見たい!

File→ Build Settings から、Androidを選択して Buildを押すだけ…ですが。

色々アラートがでます。

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

Android SDK、JDKが無いって言われる ↓ここが詳しいです! JDKの環境変数の設定も忘れずに。 http://tech.gmo-media.jp/post/52903538536/create-android-game-with-unity

bundle identifier が、どうとか言われる →次ページで解説

Androidで見たい!

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

Bundle Identifier が、どうとか

ダイアログの「Player Setting」ボタンを押すと、Inspector Viewに設定画面が出ます。 ここの「Other Settings」のBundle Identifierを、 たとえば、 jp.co.itaiNet.HelloWorld とかにします。

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

Androidで見たい!

注:画面はハメコミ合成です

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

画面サイズについての考察

※画面の縦に合わせて、横幅が設定されるようです。

4:3Monitor(800 x 600)

16:9 iPhone (640 x 1136)

9:16iPhone(1136 x 640)

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

画面の設定について

Game Viewから 左のプルダウンを押し、 +をクリック

こうします。

しかし、まだ問題が…

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

大きさの単位について

2Dに見えても、実際には、3D空間に存在しています。 大きさのワールド単位「1」は、一般的に「メートル」として使用されているらしいです。

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

大きさの単位について

ちなみに、これが 「1」です。 今回は、「1」=100px の設定にします。

1

1

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

大きさの単位を合わせる

iPhoneサイズで作った背景画像(640 x 1136px)をAssets Viewに入れます。

Pixels To Unitsの値を100にし、 Pivotを「Bottom Left」にします。

※Unityのワールド単位 (メートル)あたりのピクセル数

※画像の中心点

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

大きさの単位を合わせる

カメラのSizeが「1」だと、画面上では、高さの1/2のサイズになります。 これを利用して、1/100にします。

1

1

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

大きさの単位を合わせる

Sizeを、 1136(px) / 2(height) / 100(scale) = 5.68 にします。 ついでに、左下が0になるように、 Transformを調整します。

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

大きさの単位を合わせる

画像を入れて Transformを0にすると…

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

出来た

注:画面はハメコミ合成です

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

実際は…

16:9より画面の髙さの比率が小さい端末

のために、画像の横幅は余裕をもたせて、制作する必要がありそうです。

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

後半戦に続きます。 ご清聴、ありがとうございました。

ご感想・間違えなどを指摘していただけますと幸いです。

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

・プロジェクトとシーンの関係 ・タップのトリガー取得 ・シーン間の移動 ・GameObject同士の通信 こちらにもUnity情報を載せています~ http://i-tai.net/apps/unity/

後半戦で書きたい内容