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

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

・Unityに興味をお持ちになっている方
・カジュアルゲームを作りたいけど、
どこから手をつけていいかわからない方
・Unity経験者(仲良くなりたいです☆)
あなたと僕と一緒に勉強していきましょう☆
触ったきっかけ

Unity4.3から2DSprite機能を
搭載したから
Unityのメリット
・基本アプリ無料、しかもアプリも書き出せる(だから試し放題)
・Unity4.3から2Dに対応 ※僕の中ではここが一番重要
・AssetStore(ゲームに使える素材販売所)の充実っぷり
・対応プラットフォームの多さ(We...
Unityで出てるアプリ

・魔法使いと黒猫のウィズ
・チェインクロニクル
・ケリ姫スイーツ
・蒼の三国志 …etc

100位中20本が
Unityで制作した
アプリ!!

詳しくは、
Google PlayのTop Grossing 100...
こんなゲームを作った!

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

※画面は開発中です。

※画面は開発中です。
用意したもの

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

…あと、土日☆
前知識

ドットインストール Unity講座
http://dotinstall.com/lessons/basic_unity
※触る前に、先に見ておくことをお勧めします(全部見て1時間ちょい)!

【書籍】Unityで作るスマートフォン3D...
さっそく作っていきます
2Dの設定方法
File→New Project
のダイアログボックスから…
新規制作で
2Dを選ぶだけ
※厳密には普通の3Dプロジェクトから2~3設定を変
更するだけですので、後から修正できます。また、
2Dを選んでも普通に3Dを使えます。
...
Unityの画面をざっくり解説
【Hierarchy
View】
GameObjectの階
層構造を指定し
ます。

【Scene View】
ここにキャラクターなどの
GameObjectを配置します。

【Assets View】
ゲームの...
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で見たい!

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

ダイアログの「Player
Setting」ボタンを押すと、
Inspector Viewに設定画面
が出ます。
ここの「Other Settings」の
Bundle Identifierを...
Androidで見たい!

注:画面はハメコミ合成です
画面サイズについての考察
※画面の縦に合わせて、横幅が設定されるようです。

4:3Monitor(800 x 600)

16:9 iPhone
(640 x 1136)

9:16iPhone(1136 x 640)
画面の設定について
Game Viewから
左のプルダウンを押し、
+をクリック

こうします。

しかし、まだ問題が…
大きさの単位について

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

1

1

ちなみに、これが
「1」です。
今回は、「1」=100px
の設定にします。
大きさの単位を合わせる

iPhoneサイズで作った背景画像(640 x 1136px)を
Assets Viewに入れます。
Pixels To Unitsの
値を100にし、
※Unityのワールド単位
(メートル)あたりのピクセル数

P...
大きさの単位を合わせる

1

カメラのSizeが「1」
だと、画面上では、
高さの1/2のサイズ
になります。

1

これを利用して、
1/100にします。
大きさの単位を合わせる

Sizeを、
1136(px) / 2(height) / 100(scale)
= 5.68
にします。
ついでに、左下が0になるように、
Transformを調整します。
大きさの単位を合わせる

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

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

16:9より画面の髙さの比率が小さい端末
のために、画像の横幅は余裕をもたせて、
制作する必要がありそうです。
後半戦に続きます。
ご清聴、ありがとうございました。
ご感想・間違えなどを指摘していただけますと幸いです。
後半戦で書きたい内容

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

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

25,214

Published on

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

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

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

Published in: Technology
0 Comments
31 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
25,214
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
80
Comments
0
Likes
31
Embeds 0
No embeds

No notes for slide

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

  1. 1. Unity初心者が2D Sprite使って カジュアルゲームを作ってみた! ☆
  2. 2. 自己紹介 名前:村石 敏享(むらいしとしたか) 職業:フロントエンドエンジニア(主にFlashを触ってます) Blog:http://i-tai.net (あいたいねっとだよイタいじゃないよ)
  3. 3. このプレゼンのターゲット ・Unityに興味をお持ちになっている方 ・カジュアルゲームを作りたいけど、 どこから手をつけていいかわからない方 ・Unity経験者(仲良くなりたいです☆) あなたと僕と一緒に勉強していきましょう☆
  4. 4. 触ったきっかけ Unity4.3から2DSprite機能を 搭載したから
  5. 5. Unityのメリット ・基本アプリ無料、しかもアプリも書き出せる(だから試し放題) ・Unity4.3から2Dに対応 ※僕の中ではここが一番重要 ・AssetStore(ゲームに使える素材販売所)の充実っぷり ・対応プラットフォームの多さ(Webゲーム、iOS、Androidに加え、 PSやDSのゲームも同一ファイルから書き出せちゃう万能っぷり!) ・企業がベースにあるメリット(AssetStore、下位互換の確保、サポートなど) ・ゲーム画面にモノを置いていく開発方法がデザイナー上がりの僕としてはステキ ・Flashよりゲーム実行速度が早い(現状、Flashではモバイル24fpsでも描画は苦しい)
  6. 6. Unityで出てるアプリ ・魔法使いと黒猫のウィズ ・チェインクロニクル ・ケリ姫スイーツ ・蒼の三国志 …etc 100位中20本が Unityで制作した アプリ!! 詳しくは、 Google PlayのTop Grossing 100に入っている+その他のタイトルでどのくら いcocos2d-xが使われているのか調べてみる
  7. 7. こんなゲームを作った! 人間玉入れ ※現在開発中です。 (2014/02/27現在) 詳細はこちらのページで ご確認ください。 人間玉入れ紹介サイト ※画面は開発中です。 ※画面は開発中です。
  8. 8. 用意したもの Unity4.3(Free) http://japan.unity3d.com/unity/download/ …あと、土日☆
  9. 9. 前知識 ドットインストール 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ゲーム用のスクリプティングの 参考になります。制作中はこれを絶えず横に開きながら作業していました。
  10. 10. さっそく作っていきます
  11. 11. 2Dの設定方法 File→New Project のダイアログボックスから… 新規制作で 2Dを選ぶだけ ※厳密には普通の3Dプロジェクトから2~3設定を変 更するだけですので、後から修正できます。また、 2Dを選んでも普通に3Dを使えます。 Macの人は、こちらをご覧ください! Macだとプロジェクトの新規作成時の2D指定が反映されないみたい。これだと便利機能に気が付かない人も居るかも
  12. 12. Unityの画面をざっくり解説 【Hierarchy View】 GameObjectの階 層構造を指定し ます。 【Scene View】 ここにキャラクターなどの GameObjectを配置します。 【Assets View】 ゲームの構成要素(シーン・画像・音楽・スクリ プト・AssetStoreからインポートしたもの)を、こ こで管理します。 【Inspector View】 選択した GameObjectや各種 プロパティの設定や 変更を行えます。
  13. 13. HelloWorldをしよう 適当な画像を用意します。 やあ。
  14. 14. HelloWorldをしよう そろり… そろり… Helloworld.png Assets Viewに 画像をドラッグします。
  15. 15. HelloWorldをしよう
  16. 16. HelloWorldをしよう そろり… そろり… その画像 (2DSprite)を Scene Viewに ドラッグします。
  17. 17. HelloWorldをしよう
  18. 18. HelloWorldをしよう 上の再生ボタンを押す!
  19. 19. Hello Worldを落とそう GameObjectを選択した状態から、 Add Componentを選択。 Physics 2D → Rigidbody 2Dを選択。
  20. 20. Hello Worldを落とそう そうすると… 落ちます。
  21. 21. Hello Worldを着地させよう 画面上に板をおきます。
  22. 22. Hello Worldを着地させよう それぞれのInspector Viewに、 Physics 2D → Box Collider 2Dを配置します。
  23. 23. Hello Worldを着地させよう すたっ! そうすると… 乗ります。
  24. 24. Hello Worldを滑らそう 板をなんとかして、こんな感じにします。
  25. 25. Hello Worldを滑らそう すべります。
  26. 26. スクリプトでHello World Add Componentを選択。 New Script→ 「HelloWorld」 と入力。 Languageは「C#」に 作ります。
  27. 27. スクリプトでHello World Asset Viewに ファイルができます。 ダブルクリックすると、エディタが開くので、 void Start()の中に Debug.Log ("Hello World!!"); と書きます。
  28. 28. スクリプトでHello World 出ました。
  29. 29. スクリプトでHello World ちなみに、 void Update()の中に Debug.Log ("Hello World!!"); と書くと…。 すごい数の、 Hello Worldが出ます。
  30. 30. Hello Worldを吹っ飛ばそう 今度は、void Start()の中に rigidbody2D.AddForce (new Vector2 (500, 500)); と書きます。 ※x軸、Y軸に500の物理エネルギーを加えていますという意味です。
  31. 31. Hello Worldを吹っ飛ばそう 吹っ飛びました。
  32. 32. もう…俺…何でもできる… ※すぐに折れました
  33. 33. Androidで見たい! File→ Build Settings から、Androidを選択して Buildを押すだけ…ですが。 色々アラートがでます。
  34. 34. Androidで見たい! Android SDK、JDKが無いって言われる ↓ここが詳しいです! JDKの環境変数の設定も忘れずに。 http://tech.gmo-media.jp/post/52903538536/create-android-game-withunity bundle identifier が、どうとか言われる →次ページで解説
  35. 35. Bundle Identifier が、どうとか ダイアログの「Player Setting」ボタンを押すと、 Inspector Viewに設定画面 が出ます。 ここの「Other Settings」の Bundle Identifierを、 たとえば、 jp.co.itaiNet.HelloWorld とかにします。
  36. 36. Androidで見たい! 注:画面はハメコミ合成です
  37. 37. 画面サイズについての考察 ※画面の縦に合わせて、横幅が設定されるようです。 4:3Monitor(800 x 600) 16:9 iPhone (640 x 1136) 9:16iPhone(1136 x 640)
  38. 38. 画面の設定について Game Viewから 左のプルダウンを押し、 +をクリック こうします。 しかし、まだ問題が…
  39. 39. 大きさの単位について 2Dに見えても、実際には、 3D空間に存在しています。 大きさのワールド単位「1」 は、一般的に「メートル」と して使用されているらしい です。
  40. 40. 大きさの単位について 1 1 ちなみに、これが 「1」です。 今回は、「1」=100px の設定にします。
  41. 41. 大きさの単位を合わせる iPhoneサイズで作った背景画像(640 x 1136px)を Assets Viewに入れます。 Pixels To Unitsの 値を100にし、 ※Unityのワールド単位 (メートル)あたりのピクセル数 Pivotを「Bottom Left」にします。 ※画像の中心点
  42. 42. 大きさの単位を合わせる 1 カメラのSizeが「1」 だと、画面上では、 高さの1/2のサイズ になります。 1 これを利用して、 1/100にします。
  43. 43. 大きさの単位を合わせる Sizeを、 1136(px) / 2(height) / 100(scale) = 5.68 にします。 ついでに、左下が0になるように、 Transformを調整します。
  44. 44. 大きさの単位を合わせる 画像を入れて Transformを0にすると…
  45. 45. 出来た 注:画面はハメコミ合成です
  46. 46. 実際は… 16:9より画面の髙さの比率が小さい端末 のために、画像の横幅は余裕をもたせて、 制作する必要がありそうです。
  47. 47. 後半戦に続きます。 ご清聴、ありがとうございました。 ご感想・間違えなどを指摘していただけますと幸いです。
  48. 48. 後半戦で書きたい内容 ・プロジェクトとシーンの関係 ・タップのトリガー取得 ・シーン間の移動 ・GameObject同士の通信 こちらにもUnity情報を載せています~ http://i-tai.net/apps/unity/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×