Skip to content

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

こんにちは、中嶋 (@ringo) です。
オンラインゲームを支える技術」という本の著者です。

本のほうでは、プロがいつも使う、実績のある考え方や知識を徹底的に紹介していますが、
この連載では新しげなことをやってみてます。

さて。

なんと前回、100個以上もブックマークされたみたいで驚いています。
みんなほんとはゲーム作ってみたいのにちがいない。

 

さて前回は、何をつくるか大体決めたあと、Unity3Dのデモを動かしましたね。

実は「どうやって作るか大体決める」というのをすっとばしてました。

というか、この連載は JavaScriptを使ってMMOGのサーバーもクライアントも作るという、
「手段」を、「目的」にしている連載なので、それでほとんど決まってしまっています。
プログラムの規模が小さいので、これ以上プログラムの内容を考えても仕方がないので、
「どうやって作るか大体決める」は、おしまい。
これは、仕事でやるプロジェクトとは大分違うところですね。

次に進みましょう。

「前に進む」という遊び(?)ができるバージョンを最速で用意したいのでした。

試しに作ってみたら、FPSの操作(WASD移動、マウスで視線変更、スペースでジャンプ)
がなんと 80行のコード(しかもスカスカ)でできてしまったので、
プレイアブルバージョンをアップロードしました。

fpstest1_wp.html

まずは触ってみてください。
Unity web playerが必要なので注意。

表示してる物体が少ないので、反応速度は良いです。

Unity3Dの開発環境で動作テストをした後、
ビルドして、unity3dバイナリを作って、それをChromeブラウザ上で
動作させるところまでを動画にしてみました。
それがこれ:

Unity web Playerさえインストールされていたら、開発環境でもブラウザでも
同じように動きます。 Windowsでも問題なし。Android端末やiPhoneでもOKです。

これがJavascript 80行あまり。
まるでメールを書くような速度でゲームができていく。
用途を限定した処理系の威力です。

これに必要だったコードはこんなのです。

// これは主人公のコード (HeroScript.js)

var pitch : float; // 主人公の向き
var yaw : float; // 主人公の見上げる向き

var dy : float;

function Start () { // 最初に1回だけ呼ばれる
pitch = 0;
dy = 0;
}

var nose : Vector3; // こういう風に関数の外に変数定義するとGUIで見える
var jumping = false; // ジャンプ中だったらtrue

function Update () { // 毎フレーム呼ばれる

var mx = Input.GetAxis( "Mouse X" ); // マウス入力 独特なので後で解説
var my = Input.GetAxis( "Mouse Y" );

pitch += mx / 10; // FPSのイディオム
yaw += my / 10;

var h = Input.GetAxis( "Horizontal"); // キーボード入力。独特なので後で解説。
var v = Input.GetAxis( "Vertical" );
var dnose : Vector3;

var dside : Vector3;

// FPS特有の移動方向制御
dnose.x = 1.0 * Mathf.Cos(pitch);
dnose.y = yaw;
dnose.z = 1.0 * Mathf.Sin(pitch);
dside.x = 1.0 * Mathf.Cos(pitch - Mathf.PI/2);
dside.y = 0;
dside.z = 1.0 * Mathf.Sin(pitch - Mathf.PI/2);

// 入力から「鼻先」の位置を決める。
nose = transform.position + dnose ;
transform.LookAt( nose );

var dtr : Vector3;
dtr = dnose * v/4 + dside * h/4;

// ジャンプ処理
var j = Input.GetButton( "Jump" );
if(j){
if( dy == 0 ){
dy = 0.1;
jumping = true;
}
}

// 見せかけの重力
if(jumping){
dy -= 0.005;
}
if( transform.position.y < -4 ){
transform.position.y = -4;
dy = 0;
jumping = false;
}

dtr.y = dy;

transform.position += dtr;
}

// 次はカメラのコード (CameraScript.js)

var hero : GameObject;

function Start () { // 最初に1回だけ呼ばれる
hero = GameObject.Find( "HeroCube" );
}

function Update () { // 毎フレーム呼ばれる
var hs = hero.GetComponent("HeroScript");
transform.LookAt( hs.nose );  // 主人公の鼻先をいつも見る FPSのイディオム
transform.position = hero.transform.position ;

print( "campos:" + hero.transform.position.x + "," +hero.transform.position.y + " camnose:" + hs.nose + " campitch:" + hs.pitch );
}

ぴょんぴょん飛び回るだけだけど、すごくクイックに動くのでなんとなく楽しい。
定数を変えて飛ぶ高さを高くしたりしたら、さらに楽しくなります。
FPSの操作系は人類のひとつの到達点だと思う。

コードは80行ぐらいしかないけど、Webブラウザで使うJavaScriptとはだいぶ違います。
全部Unityに特有の書き方だけど、DOMに通じるところもある。
Unityには、剛体の物理計算エンジンも内蔵されていて、
超高度な物理挙動や当たり判定も実現できるけど、かえってそういうエンジンを使うと
プログラムが肥大化してしまうので、なにより「陣取り」にはあまり必要ないので、
今回はこういう最小限の物理挙動を実装しました。
本家minecraftも、物体の動きについては同じように極めて単純な動きしか実装してないです。

yawとかpitchとか Vector3とかゲーム開発特有の用語がたくさん出現しています。
本格的に解説をしたいところですが。。
実はこういうぶぶんは、
ゲームプログラマになる前に覚えておきたい技術
とかの本でですばらしく解説されてるので、ここでは重複を避けて、
JavaScriptでMMOG 以外のトピックは省略させてください。ごめんなさい。

おっと、、今日は時間が来ました。
今回作ったものは、ソースが短いけど、それはUnityの開発環境がいろいろ
やってくれているからで、次回はそこも簡単に解説をして、
さらに前に進めたいとおもいます。

「はやくサーバサイドが見たい」というコメントもありましたが、
サーバーを作ってしまうと、クライアントとサーバーの両方の修正をし続ける必要があるので
ぎりぎりまでクライアントだけでやるのが定石です。まだ2〜3回、先になるかも。。

これで、このプロジェクトは一応「遊べる」状態になりました。
今後の開発は、遊べる状態を保ったまま進めます。

いまのところあまり障害がありませんが、今後何が待ち受けているのやら。。

(続く)

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

Related posts:

  1. JavaScriptで MMOG をつくってみよう その1
  2. shi3z式ゲームプログラミング #6 覚えておくといいテクニック
  3. 見た目でゴマカす超速Webアプリ開発 #1
  4. お絵描きアプリで学ぶHTML5のCanvas超速入門 #1.5 JavaScriptで描いた絵をサーバを使わずにセーブする!?

Facebook comments:

Post a Comment

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