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

Preview:

DESCRIPTION

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

Citation preview

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

自己紹介

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

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

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

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

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

触ったきっかけ

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

Unityのメリット

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

こんなゲームを作った!

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

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

…あと、土日☆

用意したもの

ドットインストール 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ゲーム用のスクリプティングの 参考になります。制作中はこれを絶えず横に開きながら作業していました。

前知識

さっそく作っていきます

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

2Dの設定方法

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

新規制作で

2Dを選ぶだけ

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

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

Unityの画面をざっくり解説

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

GameObjectを配置します。

【Hierarchy View】

GameObjectの階

層構造を指定します。

【Inspector View】 選択した

GameObjectや各種

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

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

こで管理します。

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

HelloWorldをしよう

やあ。

HelloWorldをしよう

Helloworld.png

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

そろり… そろり…

HelloWorldをしよう

HelloWorldをしよう

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

そろり… そろり…

HelloWorldをしよう

HelloWorldをしよう

上の再生ボタンを押す!

Hello Worldを落とそう

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

Physics 2D → Rigidbody 2Dを選択。

Hello Worldを落とそう

そうすると…

落ちます。

Hello Worldを着地させよう

画面上に板をおきます。

Hello Worldを着地させよう

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

Hello Worldを着地させよう

そうすると…

乗ります。

すたっ!

Hello Worldを滑らそう

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

Hello Worldを滑らそう

すべります。

スクリプトでHello World

Add Componentを選択。

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

作ります。

スクリプトでHello World

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

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

スクリプトでHello World

出ました。

スクリプトでHello World

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

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

Hello Worldを吹っ飛ばそう

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

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

Hello Worldを吹っ飛ばそう

吹っ飛びました。

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

Androidで見たい!

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

色々アラートがでます。

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

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

Androidで見たい!

Bundle Identifier が、どうとか

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

Androidで見たい!

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

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

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

4:3Monitor(800 x 600)

16:9 iPhone (640 x 1136)

9:16iPhone(1136 x 640)

画面の設定について

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

こうします。

しかし、まだ問題が…

大きさの単位について

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

大きさの単位について

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

1

1

大きさの単位を合わせる

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

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

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

※画像の中心点

大きさの単位を合わせる

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

1

1

大きさの単位を合わせる

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

大きさの単位を合わせる

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

出来た

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

実際は…

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

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

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

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

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

後半戦で書きたい内容