ゲームツクール！第4回Unity x Photon Cloudでオンラインゲーム

を作ろう！

2013年12月12日FAG Studio 荒川巧也

毎月１回放送USTREAM

http://www.ustream.tv/channel/16059441/

ニコ生 毎回URLが変更になります。Youtube “SB クリエイティブチャンネル” http://www.youtube.com/user/SBBITchannel/videos チェックしてください。

Unity4入門のご紹介• はじめてUnityをさわる人を想定して書かれた本

• Unity4から追加された機能を含む基本操作を学ぶことができます。

コッコと不思議な塔• FAGStudioがUnityを使って作ったピンボールゲーム。

• iOS/Androidで無料配信中

Photon Cloudって何だ？

Photon Cloudについて• ExitGamesというドイツの会社が開発。

• 無料で使えるプランがある(無料は20人まで同時に接続可能。プランの詳細は http://photoncloud.jp/pricing/ でご確認ください。)

• PC/Mac向けはもちろん、iOS/Androidなどのスマホ向けのオンラインゲームも作れる。(＊ただし、iOS/Android書き出し時にはUnityのPro版が必要のようです。)

Photon Cloudにアクセス

http://photoncloud.jp/ にアクセス。

「Photon Cloud 日本公式サイトへ」をクリックしてください。

新規アカウント登録

新規登録をクリック

メールアドレスを登録

登録するメールアドレスを登録してください。その後、登録したアドレスに確認用のメールが届きます。その後、メールに従いパスワードとApp ID取得してください

＊届いたメールの登録先のURLにアクセスできずに登録できない　場合は、↓のURLにアクセスして確認してください。http://photoncloud.jp/info/detail.php?no=1386151532　

登録が完了するとこのようなにアカウントを取得できます。

Unity New Project 起動

Asset Store起動Window -> Asset Store

Photonを検索

①“Photon”で検索

②“Photon Unity Networking Free”を選択

Photon Unity Networking Free ダウンロード

クリック！

<参考> iOS/Android対応について

→ iOS/Androidへの対応はPhoton有料版が必要です。　 iOS/Androidへの書き出しはUnity Proライセンスが 必要です。

Assetをインストール後、このような画面になりましたか？

Photon Cloudへ接続設定

① クリック

② アカウント設定時取得したAPPID入力

③ 登録地域を選択

④ 地域選択後”Save”をクリック

Photon Cloudのアセットを入れると、このセットアップ画面は自動で現れます。

接続完了！

ワンポイント!

---

このようにネットワークセットアップタブを整理することもいいでしょう。

InportしたAssetからDemoWorkerGame-Scene選択する

クリックDemoWorkerGame-Scene選択

このような画面になりましたか？

Static Stuff削除

Static Stuffを削除

Directional light追加

Terrainを使おう！

クリック

150100

Create -> Terrain positionの値チェック！

Terrain Assets追加Assets -> Import Package -> Terrain Assets

地形を作ろうTerrainのInspector Viewを確認して地形を作ろう

クリック

Scene View上で地形を作ろうTerrainを絵の具のように塗ると盛り上がります。

地形が完成！

Terrainの使い方はUnity4入門を見てね！

PlayerをHierarchyに移動

Assets -> Photon Unity Networking -> Demos-> Demo Worker -> Resources -> Player

PlayerをHierarchy Viewに移動させます。

玉を発射させる準備

胸のあたりに移動

空のGameObjectを作りそこから発射します。

このようにしているのはPlayerというTagを持っているPlayerが玉を発射させると、玉を発射した瞬間にPlayer自身がDestroyしてしまうからです。

ここでは名前を”Fire”にしました。

玉を発射させるスクリプト

//Fire.js#pragma strictvar bullet : Rigidbody; var speed = 20;

function Update () {if (Input.GetButtonUp("Fire1")){var clone = Instantiate(bullet,transform.position,transform.rotation);clone.velocity = transform.TransformDirection(Vector3(0,0,speed));Destroy(clone.gameObject,3);

}}

Playerに追加した空オブジェクト(Fire)に追加してください。Javascriptのスクリプトです。

玉を作ろう(Sphereで作成)

Sphereのサイズ変更Scale x:0.2 Y:0.2 Z:0.2

SphereにRigidbody追加 SphereをPrefab化

Prefab化できればHierarchyのSphereを削除してください。

Playerのあたり判定準備①

//hit.js#pragma strict

function OnCollisionEnter(info : Collision) { if (info.gameObject.tag == "Player") { info.gameObject.SendMessage("ApplyDamage"); }}

Javascriptのスクリプトです。Bullet(玉)に追加してください。hit.js

Bulletの準備(玉の準備)

BulletのNoneにRigidbody付きのPrefabオブジェクトを追加します。(この場合はPrefab化したSphere”bullet”です。)

Playerのあたり判定準備②

//Damage.js#pragma strict

var explosionPrefab : GameObject;

function ApplyDamage() { Instantiate(explosionPrefab, transform.position, Quaternion.identity); Destroy(gameObject); Application.LoadLevel(Application.loadedLevel);}

Javascriptのスクリプトです。Playerに追加してください。 Damage.js

爆発エフェクト追加

Expolsion PrefabにParticle追加

Assets -> Import Package -> Particles

Particle追加

変更を適応する

PlayerのInspectorのApplyをクリックする。

Hierarchy viewのPlayerを削除する。

Playボタンを押してみよう

Player名ルーム名 Create Roomをクリック

ゲーム開始

ゲームができました！

ゲームを書き出す

File -> Build SettingsPC or Macに書き出し。WebPlayerに書き出してWeb上に置くのもGoodです。

遊んでみよう！

1つのMacで2つのブラウザを立ち上げました。1つ目のブラウザは、Create Roomでゲームを始めます。

サンプルは、こちらで確認できます。http://p.tl/5gHe

2つ目のブラウザでは下に現れたRoomに入ってください

Joinを押す

2人が巡り会い！

右クリックで弾発射！

チャットも使える！

チャットできる！