Skip to content

JavaScriptで MMOG をつくってみよう その1

みなさんはじめまして。中嶋といいます。

Twitterでは@ringoでつぶやいてます。
仕事では主に大規模オンラインゲーム(MMO)のサーバーのコードを毎日書いています。

実はきのう、ここ15年の仕事で学んだ知恵を目一杯つめこんだ、

オンラインゲームを支える技術

という本が発売になりました。
オンラインゲーム開発のプロたちがよく使う、「枯れた技術」を徹底的に解説した本です。
「枯れた」というのは、長年の動作実績があって、広く社会全体で使われているっていう意味です。

具体的には Linux、MySQL、C++、Flash、Ruby、 とかです。

こういう極めて安定した技術を土台にして、その上に独自のプログラムを作れば、
逆に新しいチャレンジがやりやすくなるので、難しいことをやろうとするときは、
案外、枯れた技術が選ばれることは多いものです。

特にサーバープログラムで発生するバグは再現性が低いものが多いので、
土台が安定してることは、とても大切なんです。

仕事では枯れた技術を使いまくりの日々ですが、趣味では、数年後のMMO開発で使えそうなものを探して、
いろんな言語処理系や、Webフレームワークなどを試しています。

最近、これはいい!と思ったのが、Google社のGo言語(golang)と、
JavaScriptを使って高速なサーバーを作れる node.js と、
JavaScript(とほとんど同じ言語)を使って簡単に、
いろんな端末で動く3Dのゲームをつくれる Unity3D という開発ツールです。

特に、node.jsと Unity3D を使えば、MMOGのシステム全部をJavaScriptで作れそうです。
そうすれば一気に開発の難易度が下がって、アイデアにあふれた、
ちいさなMMOGがたくさん世の中に出るのではないかとおもって、とても期待しています。

通信機能や、処理性能などいろいろ調査して、node.jsとUnityを使ってMMOGの開発ができるだろう、
という結論は出ましたが、まだ、実際にゲームを作ってはいません。
実際にゲームを作れば、いろいろな、予想できなかった障害が待ち受けているにちがいありません。

そこでこのwise9.jpにて、障害にぶちあたったときに、どう考え、どうやってのりこえていくのか、
読者のみなさんと一緒に体験ができるような連載をしたいと思います。
プロの人用の「枯れた」確実度の高い情報は、本のほうにまかせて、
ここでは、考え方の紹介とか、実験みたいなこともふくめてやってみたいとおもいます。

連載の難易度としては、wise9の他の連載でやっているようなJavaScriptの知識があれば、
だいたい理解できるようにします。ソースコードはgithubに置きましょう。
Unity3Dは無料で使えるので、まったくお金を支払うことなく、自分で試せます。

ただ筆者はスケジュールの厳しいプロジェクトに参加してる関係上、
どうしても時間が取れない日が続くこともあります。
確実な定期的な投稿はむずかしいでしょうから、そこは理解してくださいね。

さて。連載はだいたい、こんな感じで進むでしょう:

  1. なにをつくるか大まかに決める
  2. どうやって作るか大まかに決める
  3. 実際にコードを書いて調査する
  4. 足りないところを埋めていく

なにをつくるか?内容については頑張って考えずに、お手本を参考にしましょう。
小規模なゲームでちょうどいいのは。。

そうだ今回のお手本は”minecraft“にしましょう。

 

続きは以下のリンクから

しかし他のオンラインゲームにくらべると規模が小さいとはいえ、minecraftは意外と内容が多い。

ひととおり完成しないと全然意味ないので、もっとポイントを絞りたい。

なのでひとつ制約を加えて「minecraft風立体陣取り」にしましょう。
陣取りに関係ないアイテムとか敵とか、とくにクラフトの仕様を大幅削除。
演出も描画範囲も大幅に減らす。これでやることはだいぶ減るでしょう。
でも立体的な地形をつくるところは温存しましょう。

作るのはマルチプレイの陣取りゲームです。 立体なので、「取った体積の多いチームが勝ち」です。
「たいまつ」を立てる感じで、旗をたてていけば簡単でしょう。 時間制限も必要かもしれない。

minecraftでは地下より上空の体積がほとんどなので、いかに効率的に建物を上や横に伸ばすか、
構造物をつくる作戦の善し悪しがポイントになるでしょう。

minecraftはかなり有名なゲームですが、知らない人はニコ動あたりで検索してみてください。

ゲームの内容はこんな感じ。てきとうにまとめると

  • minecraftの世界で立体陣取り。構造物の作り方の計画性や操作の巧妙さを楽しむ。
  • チーム分け(分け方は後で考える)
  • 制限時間内に旗を立てまくる
  • 旗の周囲 10x10x10セル の合計体積が多いほうが勝ち?
  • 武器やアイテム、生物、地形の種類などは陣取りが成立する最小限にする
  • 旗はスタート地点で配布?

こまかいところは作りながら決めればいいです。
さて、コードを書く?

ちょっとその前に、同じコードが世界にあるかどうか調べます。
minecraftはとても有名なので、世界で100人ぐらいが真似してなにか作ってるはずです。
コピー商品まで出ているぐらいなので。

ちょっとぐぐると minecraftをUnity3Dで作ってみたらやたら重かったという書き込みがありました:

http://unity.murakumo.net/bbs-1/unitybanminecraft

 

注意:これを見るにはUnity web playerというのが必要です。

実際これを自分のMacで動かすとほとんどハングアップしてしまいます。
ここまでやったら重いということがわかりました。
ソースコードがあればもっと参考になるのだけど。。

このようにすでにある仕事を見ると勉強になりますね。

立体陣取りを楽しむためには、ここまで巨大な世界を表示する必要はなさそうです。
遠くの表示をあきらめればそれほど重くないようにできるでしょう。

それではぼちぼち始めましょうか。

ゲーム開発の鉄則は「常にプレイ可能な状態を保って作りつづける」ことです。
いまはどうでしょうか? プレイできません(当たり前です)。

最速でプレイ可能にしないといけません。

そこで最も原始的なプレイ「前に進む」ができるまでを最速でやってしまいましょう。

MMOGは、データセンターで動作させるサーバープログラムと、
プレイヤーのPCや携帯の上で動くプログラムとが通信するので、
最終的には両方作ることが必要ですが、まず「前に進む」だけなら、
サーバーは不要です。クライアント(Unityの部分)だけで十分です。

ではMacの用意はいいでしょうか? 筆者は MacBookProを使っています。(snow leopard)

まずUnity3Dの開発ツールをダウンロードします。

600MB以上あるのでディスクはあけておきましょう。

http://unity3d.com/unity/download/

unity-3.3.0.dmgというのが本体です。dmgのインストールは慣れてるでしょう?

Finderでダブルクリックして、表示されるパッケージをクリックしてインストールするとこんなかんじ:

DockにUnityが入ってます。

おもむろにDockから Unity を起動します。

 

こんなふうに青い画面が出現したら起動成功です。

サーバーはまだ作らないので、これ以上必要なものはありません。
日本語版がないのが、ちょっとつらい・・ですが翻訳の活動をやってる人もいるみたいです。

http://d.hatena.ne.jp/nakamura001/20100302/1267546099

次はさっそくコードを書く?
いえ、すでにあるサンプルプログラムを 見て使えそうなものをさがします。
いいツールなら、きっといいサンプルがあるものです。

Unity のサンプルはここにたくさんあります

http://unity3d.com/support/resources/example-projects/

それぞれ、小さくまとまっていて、試しやすいです。

たとえば、AnimationAPI というのがあります。375Kほど。

ダウンロードして展開するとこんなかんじ

AnimationAPI/Assets/Events.unity

というのがunityのプロジェクトファイルです。xcodeの xcodeprojみたいなもの。

これをダブルクリックすると

プロジェクトが読み込まれます。

Unityの特徴は、開発中の状態とプレイ中の状態がいつも同じってところ。
この画面は開発画面で、止まってるけど、画面上部の、
動画のプレイボタン みたいなボタンを押すと動き出す。

動いて、火花が散ったらOK!

動かしてる最中に、リアルタイムに変数をいじって、物体の大きさを変えたりできます。

画面左上の #Scene というタブを押して、真ん中の立方体をクリック。
すると画面右にいろんな属性が出てきます。
たとえばScaleのXが1になってるのを2にすると横長になります。

 

この立方体の動きはJavaScriptで定義されています。画面右端の、選択されてる立方体のいちばん下、

Animation Event Test (Script)のところに Scriptというのがそれです。

 

これをダブルクリックするとエディタが開きます。筆者はemacsを外部エディタにしてます。

コードはこんな感じ。JavaScriptです。
細かく言うと違うところもあるんですが、ほとんど同じです。

今日のところはなんとなく感じる程度でいいです。
今後、だんだん詳しく見ていきましょう。

var prefab : GameObject; // 立方体がもっている Assetにアクセスするための変数

function Start ()  // 立方体が産まれたときに、1回だけ呼ばれる関数
{
// アニメーションの動きを定義する。 X軸方向になめらかに加速減速するってかんじの動き。
var clip = new AnimationClip();
var curve = AnimationCurve.EaseInOut(0, 0, 3, 10);
clip.SetCurve("", Transform, "m_LocalPosition.x", curve);

// アニメーションが動き始めてから1秒後に、パーティクル(粒子)を産むように設定
var event = new AnimationEvent();
event.time = 1;
event.functionName = "InstantiateParticle";
clip.AddEvent(event);

// 最初から定義されてる、立方体のanimationに動きを追加
animation.AddClip(clip, "test");

// 動き開始
animation.Play("test");
}
// 粒子を出す関数。prefabをひとつ作り出す(Instantiate)します。
function InstantiateParticle (animEvent : AnimationEvent)
{
Instantiate(prefab, transform.position, transform.rotation);
}

@script RequireComponent(Animation) // Animationを使うよとUnityに知らせる

出てくる粒子を変えたかったら、画面右下の”new prefab”のところをクリックすると、
“Ellipsoid Particle Emitter”の設定が出て、なにをいくつぐらい、どういう大きさで出すか変えれます。

さて次回は、このUnityの中に小さな世界を作って、前に進む操作をやってみましょう!

質問あれば、この記事にコメントしてくれれば、すぐじゃないかもしれないけど答えます。

ではお楽しみに。(続く)

 

 

 

このエントリーをはてなブックマークに追加
はてなブックマーク - JavaScriptで MMOG をつくってみよう その1
Post to Google Buzz
Share on GREE

Related posts:

  1. 見た目でゴマカす超速Webアプリ開発 #1
  2. shi3z式ゲームプログラミング #6 覚えておくといいテクニック
  3. shi3z式ゲームプログラミング入門 #4 バナナと配列
  4. お絵描きアプリで学ぶHTML5のCanvas超速入門 #2 iPhoneで行こう
  5. shi3z式ゲームプログラミング #5 Twitterと連携だっ!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*