2012年8月11日土曜日

福島GameJam in 南相馬2012の感想

8/4、5に開催された東北ITコンセプト福島GameJam in 南相馬 2012に参加してきた。30時間で即興のチームでゲームを作るという催しだ。

前回、技術的な話を書いたので、今回は全体的な感想を。

福島GameJamは昨年に引き続き2回目の開催。今回は、高校生も含む地元の若い人の姿も多く、ITによる震災復興という目標に少しは近づけたかもしれない。

ぼくのチームは8名で、全員がプログラマという無茶な構成。内訳は、ある程度の経験者4名、若い人4名。

SEGAの石畑さんがチームにいたが、ぼくは開発中はバーチャロン・シリーズのプログラマの人だと気づかなかった。というか、開発で頭がいっぱいだった。バーチャロンはかなり夢中になったゲームだったので、緊張しかねないので、開発中は気づかなくてよかったかもしれない。

それぞれのメンバーの経験したことがある開発環境はバラバラだった。若い人たちはC(やC++)を習っているところだが、さすがにこれでゲームを作り始めると30時間では終わらない予感。話し合った結果、enchant.jsで開発することになった。

ゲームの企画を考えて、個々のタスクに落としていく。ぼくは、各メンバーがコーディングできるように、最初にゲームのフレームの部分を作ることになった。その間、他のメンバーはコードが書けないので、絵を描くことになった。

プログラマに絵を描かせるなんて…。

そもそも絵を描くツールすらパソコンに入っていない。スッポンを描け、ヒバリを描け、馬を描け、風船を描け…。想像を絶するタスクが割り当てられる。

ゲームのフレーム部分ができたのは、1日目の夜。2D横スクロールのマップ上をスッポンが這って移動し、風船などのNPCにつかまって障害を乗り越え、それぞれのステージのゴールを目指すというもの。

あんまりJavaScriptに慣れた人はいないので、その後も、苦しい戦いが続く。というか、Cしか習っていない若い人は、オブジェクトがどうのと言われてもよくわからなかったかもしれない。また、JavaScriptの場合、クラスベースの言語と異なるし、同じものを記述する方法が何種類もあるので、最初はわかりにくいだろう。

また、設計上、コードを再利用しようとしてコンフリクトするよりも、個々のプログラマの裁量にまかせる方針にした。しかし、その辺をうまく共有しそこねて、作業は多くなるわ、コードのコミットとマージでボトルネックが発生するわ、となかなか厳しい開発となった。

うまく基本を設計しようとすると、作業分担できるようになるまでに、時間がかなり必要となる。30時間内で、基本設計と個々のコーディングの時間配分はなかなか難しいものを感じた。

昨年参加したときは、チーム構成はプログラマ2名+グラフィッカ3名だった。ある程度の経験者のプログラマ2名だと、プログラムを完全に分業できるように分担することは容易で、ほとんどこの問題は発生しなかった。

半分が若い人で、全員プログラマだと、どう分担するかは悩ましい問題だ。経験者1名+若い人1名のサブチーム4つに分けて、個々に完全に分業できる形で開発するなど、特殊なチーム構成に応じた対応が必要だったかもしれない。

作ったゲームは、以下のリンクから遊ぶことができる。ところどころバグっていて、音が出なかったり、地面に埋もれたりする。

なお、プログラマ8名というありえないチャレンジに対して、Unity社からUnity賞をいただきました。どうもありがとうございます。

いずれにせよ、とてもチャレンジングな環境で苦しい戦いを戦ったチームのみんなに感謝します。 もちろん、運営や他のチームや関わったみなさんにも。

また、ふだんチームで開発しないので、いろいろと参考になることが多かった。

帰ってきて、リリース版のコードを読み直してみた(バグを修正しちゃおうか、敢えてこのままにしようかちょっと悩んでいる。というか、実はほとんどリファクタリングもしちゃったコードが手元にある)。若い人たちの書いたコードを見て思ったことなど。

  • コーディング規約に対する留意
    コーディング規約を決めていたわけではないが、変数、定数の命名方法などは、周りに合わせた方がいい。また、インデントは適切に行なった方がいい。
    というのも、バグを見つけて直すのは、下手をするとコードを捨てて1から書き直した方が楽なくらい激しく大変なので、読みやすく間違いを見つけやすく書いた方がいいということ。
  • 状態の管理があやしいところがある
    状態遷移図を書いてから、コードを書いた方がいい。
    というのも、状態も、バグりやすく直しにくいので、きちんと最初の段階から管理する必要があるので。
  • 他人に影響するコードの追加・修正
    コードを追加・修正するときは、他人に影響しないように行なった方がいい。難しい場合は、相談した上で。

若い人の書いたコードを見て、学校でプログラムの書き方を教えているが、そこで何が不足しているのかについて、いろいろ参考になることが多かった。今後、是非、役立てたいと思う。これは、ぼくにとっては、本当に大きな経験となった。

2012年8月7日火曜日

福島GameJam in 南相馬2012の技術的教訓

東北ITコンセプト 福島GameJam in 南相馬2012に行ってきた。

今回は、8人のチームで全員がプログラマという構成だった。その中で、結果として、前半にベースのフレームとなるプログラムを作り、後半は主にはプログラム相談に応じたような形となった。

そこで、技術的な教訓を書いておこうと思う。

今回は、enchant.js(JavaScript+HTML5なゲームフレームワーク)でゲームを開発して、次のものが必要だと思った。

1.クラスベースの言語のプログラマ向けのJavaScriptの説明資料

『Ajaxイン・アクション』の「付録B オブジェクト指向プログラマのためのJavaScript講座」でもいいかもしれない。しかし、そのために厚くて情報が古くなっている本を買うのはちょっと厳しいような。
あと、JavaScriptのデバッグ方法書いたものも欲しいかも。たとえば、たにぐちまことさんの『よくわかるJavaScriptの教科書』のFireBugの使い方の説明は詳しくていいかも。

2.enchant.jsで多人数でコーディングするときの設計とコーディング指針

3.はじめての人向きのGitなどの分散バージョン管理システムの説明資料

前回の福島GameJamでは、2人でenchant.jsでコーディングし、完全に独立に書けるように分担した(更に、わたしは途中で具合が悪くなってあんまり役に立たなかったという話も)。
今回は、8人でenchant.jsでコーディングしたところ、分担するためのベース(含む検証)のコーディングに1日目を使ってしまい、だいたい2日目から分担してコーディングに入った。
それでも、あんまりうまく設計できなかった部分があり、コード間の結合性が高くなってしまった。そして、分担時の説明がJavaScriptをやったことがない人にはあまりうまくできなかったような気がする。

また、8人でコーディングしたところ、コミットとマージで時間ロスがあった。

なお、前回のときは、シーンの結合があんまりうまくいかなくて、結局、jQueryでオープンニングつけたりした。その後、『ゼロからはじめるenchant.js入門』が出て、これを読んだところ、今回は問題なくできるようになった。

2011年12月15日木曜日

キー同時押し対応: Processingでゲームを作るときに使うキーの状態を管理するクラス

課題

Processingでは、キーを押したり、離したりといったイベントに対応したプログラムを簡単に書くことができる(※1)。 しかし、どのキーが押されていて、離されているのかを調べることは、素直にはできない。 これはキーの同時押しなどに、ナイーブには対応できないということだ。

ゲームでは、キーの同時押しなどにも対応する必要がある。 そこで、キーの状態を管理するクラスを作ってみた。

※1: それぞれkeyPressed()とkeyReleased()メソッドをオーバーライドする。


原因

Processingには、イベントが発生したキーの値を調べるために、char型のkeyとint型のkeyCodeという変数が用意されている(※2)。 この変数には、最後にイベントが起こったキーが入っている。 それは、一般に現在押されているキーとは異なる。

※2: キーがASCIIコード表にあるものなら、keyにその文字が入る。ない場合は、keyの値がCODEDになり、keyCodeにUPなどの対応した値が入る。詳しくはリファレンスを参照。


解決方法

キーのクラスを作り、押されているか否かという状態をフィールドに用意する。

キーが押されたり、離されたりしたイベントが発生したら、どのキーでそのイベントが起こったか調べ、押されているか否かという状態を更新する。


実装例

クラス図は次のようになる。

キー
キーの名前: String
keyの値: char
keyCodeの値: int
キーが押されているか否か: boolean
引数で指定されたキーと一致するか(keyの値: char, keyCodeの値: int)
引数で指定されたキーが押された(keyの値: char, keyCodeの値: int)
引数で指定されたキーが離された(keyの値: char, keyCodeの値: int)
キーの絵を描画(表示位置のx座標: int, 表示位置のy座標: int, 横幅: int, 高さ: int, フォント: PFont, フォントサイズ: int)

キーの絵を描画するメソッドは、下の方に書いた使用例で使うために用意した。 これは必要なければ、用意しなくてもいい。

具体的なコードは以下である。

// Processingでキーの状態を管理するクラス
class Key {
  String name; // キーの名前
  char key; // keyの値
  int keyCode; // keyCodeの値
  boolean isPressed; // 押されているか否か

  // コンストラクタ
  Key(String tempName, char tempKey, int tempKeyCode) {
    name = tempName;
    key = tempKey;
    keyCode = tempKeyCode;
    isPressed = false;
  }

  // 引数で指定されたキーと一致するかどうかを判定
  boolean equals(char tempKey, int tempKeyCode) {
    if (tempKey != CODED) {
      if (key == tempKey) {
        return true;
      } else {
        return false;
      }
    } else {
      if (keyCode == tempKeyCode) {
        return true;
      } else {
        return false;
      }
    }
  }

  // 引数で指定されたキーが押された
  void pressed(char tempKey, int tempKeyCode) {
    if (equals(tempKey, tempKeyCode) == true) {
      isPressed = true;
    }
  }

  // 引数で指定されたキーが離された
  void released(char tempKey, int tempKeyCode) {
    if (equals(tempKey, tempKeyCode) == true) {
      isPressed = false;
    }
  }

  // キーの絵を描画する
  void draw(int xOffset, int yOffset, int width, int height, PFont font, int fontSize) {
    int textColor, backgroundColor;

    if (isPressed == true) {
      textColor = 255;
      backgroundColor = 0;
    } else {
      textColor = 0;
      backgroundColor = 255;
    }

    stroke(0);

    fill(backgroundColor);
    rect(xOffset, yOffset, width, height);

    textAlign(CENTER);
    textFont(font);
    fill(textColor);
    text(name, xOffset + width / 2, yOffset + height / 2 + fontSize / 2);
  }
}

使用例

ゲームでよく使うキー(上下左右スペース)の状態を画面に表示するプログラムを作ってみた。

ゲームのキーのコントローラー

まず、ゲームでよく使うキーをコントロールするコードを、メインプログラムに直接書くとぐちゃぐちゃする。 よって、ゲームのキーのコントローラーのクラスを用意した。 このクラスは、ゲームに必要なキー(この例では上下左右スペース)によって、変更を受ける。 クラス図は以下のようになる。

ゲームに使うキーのコントローラー
上キー: キー
下キー: キー
左キー: キー
右キー: キー
スペースキー: キー
使用するすべてのキー: キー[]
キーを描画する横幅: int
キーを描画する高さ: int
キーを描画するフォント: PFont
キーを描画するフォントのサイズ: int
引数で指定されたキーが押された(keyの値: char, keyCodeの値: int)
引数で指定されたキーが離された(keyの値: char, keyCodeの値: int)
キーのコントローラーを描画(表示位置のx座標: int, 表示位置のy座標: int)

具体的なコードは以下である。

// ゲームに使うキーのコントローラーのクラス
class KeyController {
  Key upKey, downKey, leftKey, rightKey, spcKey; // 使用するキー
  Key[] keys; // キーを入れる配列
  int keyWidth, keyHeight; // キーの描画サイズ
  PFont keyFont; // キーの描画フォント
  int fontSize; // キーの描画フォントのサイズ

  KeyController() {
    // キーの描画の設定
    keyWidth = 50;
    keyHeight = 50;
    fontSize = 10;
    keyFont = createFont("MS Gothic", fontSize);

    // 上下左右スペースキーを作る
    upKey    = new Key("UP",    (char)CODED, UP);
    downKey  = new Key("DOWN",  (char)CODED, DOWN);
    leftKey  = new Key("LEFT",  (char)CODED, LEFT);
    rightKey = new Key("RIGHT", (char)CODED, RIGHT);
    spcKey   = new Key("SPC",   ' ',         0);

    // 作ったキーを登録する
    keys = new Key[5];
    keys[0] = upKey;
    keys[1] = downKey;
    keys[2] = leftKey;
    keys[3] = rightKey;
    keys[4] = spcKey;
  }

  // 引数で指定されたキーが押された
  void pressed(char tempKey, int tempKeyCode) {
    // 全キーに引数で指定されたキーが押されたことを通知
    for (int i = 0; i < keys.length; i++) {
      keys[i].pressed(tempKey, tempKeyCode);
    }
  }

  // 引数で指定されたキーが押された
  void released(char tempKey, int tempKeyCode) {
    // 全キーに引数で指定されたキーが離されたことを通知
    for (int i = 0; i < keys.length; i++) {
      keys[i].released(tempKey, tempKeyCode);
    }
  }

  // キーの状態を描画する
  void draw(int left, int top) {
    /*
                  -------
                  | UP  |
      -------------------------
      | SPC |LEFT |DOWN |RIGHT|
      -------------------------
    */
    upKey.draw(   2 * keyWidth + left,             top, keyWidth, keyHeight, keyFont, fontSize);
    downKey.draw( 2 * keyWidth + left, keyHeight + top, keyWidth, keyHeight, keyFont, fontSize);
    leftKey.draw(     keyWidth + left, keyHeight + top, keyWidth, keyHeight, keyFont, fontSize);
    rightKey.draw(3 * keyWidth + left, keyHeight + top, keyWidth, keyHeight, keyFont, fontSize);
    spcKey.draw(                 left, keyHeight + top, keyWidth, keyHeight, keyFont, fontSize);
  }
}

メインプログラム

ゲーム用のキーのコントローラーのクラスを作って、そちらにコードをまとめたので、メインプログラムは以下のようにすっきり書ける。

// ゲームに使うキーのコントローラーのオブジェクト
KeyController keyController;

void setup() {
  size(400, 400);
  keyController = new KeyController();
}

void draw() {
  keyController.draw(100, 100);
}

void keyPressed() {
  keyController.pressed(key, keyCode);
}

void keyReleased() {
  keyController.released(key, keyCode);
}

メモ

この実装は、Casey Reas、Ben Fry著、『Processingをはじめよう』、オライリー、2011年程度の知識がある人が見ることを想定している。 このため、カプセル化などは行なっていないし、拡張性のある柔軟な設計にもしていない。

たとえば、KeyControllerクラスとKeyクラスには、デザインパターンのObserverパターンの一部を使っている。 しかし、KeyControllerに、柔軟にKeyを追加したり、削除したりするようなメソッドを用意していない。

Javaに関してより高度な知識があれば、KeyやKeyControllerクラスのフィールドを外部から隠蔽し、必要なsetterやgetterを付けてもいいかもしれない。 また、KeyやKeyControllerから、画面表示に関連するコードを分離してもいいかもしれない。

2011年11月22日火曜日

オブジェクト指向がわかっている人向けのProcessing(Java)の配列

前提


1.配列の宣言

Processing(Java)の配列は、実はオブジェクトだ。 だから、使うには、配列の変数を宣言して、newで配列のインスタンスを用意してそれに代入する必要がある。

たとえば、整数型で100個の要素を持った配列xを使いたければ、次のように書く。

int[] x; // 配列の変数xを宣言
x = new int[100]; // 整数型で100個の要素を持った配列のインスタンスを用意してxに代入

このように、配列の変数を宣言するには、「型[] 配列の名前」と書く。 また、インスタンスを用意して代入するには「配列の名前 = new 型[個数]」と書く。

これは、1行で書くこともできる。

int[] x = new int[100];

※Cで、同様の配列を用意するには「int x[100];」である。なお、Cの配列はオブジェクトではない。


2.配列の要素

配列の要素は0番目からはじまる。 よって、10個の要素を持った配列xを用意した場合、使えるのはx[0]〜x[9]である。


3.配列の要素の数

Processing(Java)の配列はオブジェクトなので、フィールドやメソッドを持つ。

よく使うフィールドに、配列の要素の数lengthがある。 たとえば、配列xの要素の数は、「x.length」で取得することができる。

これを使うと、整数型の要素10個持った配列xを用意して、0から9の値を代入するプログラムは、以下のように書ける。

int[] x;
x = new int[10];
for (int i = 0; i < x.length; i++) {
    x[i] = i;
}

※Cの配列はオブジェクトではないので、フィールドがない。Cの場合は、sizeof(x)/sizeof(x[0])のように、sizeof演算子を使って、「配列全体のサイズ/配列の要素1個分のサイズ」で求める。

※Cの文字列の場合、実際に入っている文字数と入れられる最大文字数は異なる。sizeof演算子で求められるのは最大文字数の方である。実際に入っている文字数はstrlen()関数で求める。また、関数を使わないで、文字列の終わりであるヌル文字「\0」が入っている位置を見つけてもいい。


4.配列の初期化

Processing(Java)の配列は、以下のように初期化することができる。

int[] x = { 31, 20, -9 };

この場合、newでインスタンスを用意するという手続きは、明確に書かない。

※Cの場合、初期化は「int x[] = { 31, 20, -9 };」でほとんど同じ。


5.配列の要素のコピー

Processing(Java)の配列は、オブジェクトであり、配列の要素のコピーを生成するメソッドclone()が用意されている。 以下のように配列yに、配列xのコピー生成して代入することができる

int[] y = x.clone();

ちなみに、事情はここで説明しないが、cloneした結果には、以下のようにキャストを行なった方が安全である。

int[] y = (int[])x.clone();

※この方法は、浅いコピーと言われているもので、ある種の場合、完全なコピーを生成してくれるわけではない。

※Cの場合、次のようにfor文などでくり返し代入する処理を書く必要がある。Processing(Java)でもこの方法は有効である。

for (i = 0; i<配列の要素数; i++) {
    y[i] = x[i];
}

Todo?

浅いコピーと深いコピー、オブジェクトを要素に持った配列、etc.

2011年11月19日土曜日

CSS3 3D Transformsの表示テスト

2013年7月31日追記: transform-styleの指定を適切なセレクタに移動。Firefox、Opera、IE用の記述も追加。

Safari、Chrome、Firefox、Opera、IE用のCSS3 3D Transforms Module 3の表示テスト。 2013年7月31日現在、ChromeとFirefoxではZバッファがおかしい、Operaは3次元回転しない、IEはチェックしていないがIE10では動くという情報もある。

ちなみに、Safariでも、Windowsだとグラフィックカードなどによっては3D表示に対応しない: 「CSS3の3D表示機能が、実はSafariでも使えないことがある件 」

コードは以下。

CSS

#wrapper {
 position: relative;
 width: 200px;
 height: 200px;
 padding: 50px;
 border: 1px solid black;
 transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
}
#panel1, #panel2 {
 position: absolute;
 width: 200px;
 height: 200px;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 animation-duration: 8s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -webkit-animation-duration: 8s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: linear;
 -moz-animation-duration: 8s;
 -o-animation-iteration-count: infinite;
 -o-animation-timing-function: linear;
 -o-animation-duration: 8s;
 -ms-animation-iteration-count: infinite;
 -ms-animation-timing-function: linear;
 -ms-animation-duration: 8s;
}
#panel1 {
 background-color: red;
 animation-name: rotate1;
 -webkit-animation-name: rotate1;
 -moz-animation-name: rotate1;
 -o-animation-name: rotate1;
 -ms-animation-name: rotate1;
}
#panel2 {
 background-color: blue;
 animation-name: rotate2;
 -webkit-animation-name: rotate2;
 -moz-animation-name: rotate2;
 -o-animation-name: rotate2;
 -ms-animation-name: rotate2;
}
@keyframes rotate1 {
 0% { transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@keyframes rotate2 {
 0% { transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-webkit-keyframes rotate1 {
 0% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-webkit-keyframes rotate2 {
 0% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-moz-keyframes rotate1 {
 0% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-moz-keyframes rotate2 {
 0% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-o-keyframes rotate1 {
 0% { -o-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -o-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -o-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-o-keyframes rotate2 {
 0% { -o-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -o-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -o-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-ms-keyframes rotate1 {
 0% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-ms-keyframes rotate2 {
 0% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}

HTML

<div id="wrapper">
<div id="panel1">
</div>
<div id="panel2">
</div>
</div>

2011年11月16日水曜日

Fate/stay nightでわか(ったような気がす)るProcessing(Java)のオブジェクト指向:1

それなりに需要があるかもしれないので、まとめてみました。


前提

  1. Casey Reas, Ben Fry著、船田巧訳、『Processingをはじめよう』、オライリージャパン、2011年の「9章オブジェクト」以前の内容は理解している。
  2. Fate/stay nightを知っていて、ネタバレがあっても構わない

1.オブジェクト指向プログラミング

オブジェクト指向のプログラムは、「コンピュータの中にオブジェクトというものがあって、これがお互いにメッセージを送り合うことで動いている」といった感じで作ります。

なお、メッセージを送ることを、メッセージ・パッシング(message passing: メッセージ送信)といいます。

オブジェクトというのは、Fate/stay night(以下Fate)を例にすると、サーヴァント(使い魔)のようなものです。オブジェクトにメッセージを送ることは、サーヴァントに指示を出して使役することに対応します。

Fateと違うのは、いくらでもサーヴァントと契約できることです。いろいろなサーヴァントを召喚して、使役して、プログラムを組み立てます。


2.クラス

Processingは、実際にはJavaだったりします。Javaはクラス・ベースのオブジェクト指向言語で、オブジェクトを使うために、クラスを用意する必要があります。
クラスは、オブジェクトの設計図のようなものです。

このクラスは、Fateのクラスのようなものだと思ってください。実際にはあんまりちゃんと対応しないけど、取りあえず。

クラスには、そのクラスのサーヴァントが持つべきパラメータと、そのクラスのサーヴァントを使役するのに使う指示を用意します。
このパラメータのことをフィールド(field データを記入する欄)、指示をメソッド(method 処理方法)と言います。

たとえば、セイバー(剣の騎士)のクラスのサーヴァントには、真名と魔力というフィールドを持たせ、攻撃しろというメソッドを用意するとします。他にもいろいろあると思いますが、簡単のためにこの3つにしておきます。

これをクラス図というもので書くと以下のようになります。

セイバー
真名
魔力
攻撃しろ()

プログラム的には、フィールドは変数の宣言、メソッドは関数の定義みたいに書きます。
というわけで、具体的には、以下のようになります。

/* セイバーのクラスの定義 */
class Saber {
    /* フィールドの宣言 */
    String trueName; // 真名
    int magicalEnergy; // 魔力

    /* メソッドの定義 */
    void attack() {
        println("剣で攻撃しました。");
    }
}

3.オブジェクトの生成と使用

ここまでは、まだ、クラス(設計図)を用意しただけで、実際にオブジェクトを使うところまで行っていません。

これは、セイバーというクラスはあるけれど、具体的にサーヴァントが召喚されていないし、使役もされていないということです。

それでは、召喚して使役する方法を説明します。まず、とりあえず、仮の名前を用意します。
普通の変数の宣言と同じように、型(ここではクラス名)と変数名(仮の名前)を以下のように書きます。

Saber ahoge;

次に、プログラムの中でサーヴァントを召喚し、契約します。

ahoge = new Saber();

ここで、new クラス名()で、召喚を行ないます。
仮の名前に=で代入することで、名前で縛ることで、契約がなされます。

これは、プログラム的には、クラスの定義から、オブジェクトを生成したことになります。
このオブジェクトは、設計図であるクラスではなく、具体的な実体があるので、インスタンス(instance 具体的な実体)とも呼ばれます。

Fateの現界している個々のサーヴァントがインスタンスということです。ちなみに、new(召喚)しても、=(契約)しないと、現界できなくなって、消滅し(ガーベッジ・コレクションされ)てしまいます。

召喚して契約したら、使役できます。具体的には、以下のように、「仮の名前.メソッド名()」で、サーヴァントに指示を出して使役します。

ahoge.attack();

4.オブジェクトの初期化

変数を初期化するときには、「int i = 0;」のように、宣言と同時に代入していました。
しかし、一般にオブジェクトは、複数のパラメータを持っているので、同じように初期化することはできません。

では、たとえば、Saberの場合、召喚時に真名と魔力を初期化したいとします。
次のように書くことで、真名を「アルトリア・ペンドラゴン」、魔力を「40」と、初期化するという文法にするのはどうでしょうか?

ahoge = new Saber("アルトリア・ペンドラゴン", 40);

で、実際、Javaの場合、そういう文法になっています。

これはよく見ると、Saberという関数があって、その引数が真名と魔力になっているようなものです。
また、この関数は、Saberクラスのサーヴァント(オブジェクト)を返すので、戻り値の型はSaberです。

というわけで、この関数の宣言を以下のように書いてはどうでしょう。

/* セイバーのクラスの定義 */
class Saber {
    /* フィールドの宣言 */
    String trueName; // 真名
    int magicalEnergy; // 魔力

    /* コンストラクタの定義 */
    Saber(String name, int energy) {
        trueName = name;
        println("真名を" + name + "にしました。");
        magicalEnergy = energy;
        println("魔力を" + energy + "にしました。");
    }

    /* メソッドの定義 */
    void attack() {
        println("剣で攻撃しました。");
    }
}

戻り値の型はSaberなので、わざわざ書くと、2回Saberと書くことになるので、書かないという文法にしておきます。

このように、オブジェクトを初期化するのに使う関数のようなものを、オブジェクト指向言語ではコンストラクタ(constructor 生成するのに使用されるもの)と呼びます。

文法的には、クラス名と同じ名前の関数の定義です。ただし、戻り値の型は書きません。


5.まとめ

  • オブジェクト指向のプログラムでは、サーヴァント(オブジェクト)を召喚して、使役することで、処理を実行する
  • クラスは、Fateのクラスみたいなもの
  • クラスの定義には、そのクラスのサーヴァントが持っているパラメータを変数の宣言みたいに、使役するのに使う指示を関数の定義みたいに書く
  • サーヴァントは、召喚して(new クラス名())、契約して(仮の名前に=で代入)、使役できるようになる
  • 使役するには、「仮の名前.メソッド名()」
  • サーヴァントを召喚と同時に初期化するのに、コンストラクタというものを使う
  • コンストラクタの定義は、クラス名と同じ名前の関数。ただし、戻り値の型を書かない

では、最後にProcessingのプログラムの全体を書いておきます。

Saber ahoge; // 仮の名前を用意

void setup() {
    /* セイバーのサーヴァントを召喚して、契約します */
    ahoge = new Saber("アルトリア・ペンドラゴン", 40);

    /* セイバーを使役します(攻撃するように命じます) */
    ahoge.attack();
}

/* セイバーのクラスの定義 */
class Saber {
    /* フィールドの宣言 */
    String trueName; // 真名
    int magicalEnergy; // 魔力

    /* コンストラクタの定義 */
    Saber(String name, int energy) {
        trueName = name;
        println("真名を" + name + "にしました。");
        magicalEnergy = energy;
        println("魔力を" + energy + "にしました。");
    }

    /* メソッドの定義 */
    void attack() {
        println("剣で攻撃しました。");
    }
}

Todo?

カプセル化とアクセス制御、継承、多態性、抽象クラスとインターフェイス。
同じクラスのサーヴァントでも、インスタンスによって、いろいろな宝具とか、攻撃が使えるようにする設計。

2011年5月31日火曜日

"9leap" Game Programming Camp @仙台参戦記:参加を終えて

戦場から帰ってきたら、待っていたのは、PerlでCGI書きだった(久しぶりだったので、CGI.pmの使い方を思い出すのに時間がかかった。いや、年のせいか?)。
EncodeでUTF-8とShift_JISと半角カタカナとiso-2022-jpと銃撃戦をしている間に、この果てしない宇宙のどこかでは、JavaとJavaScriptが戦争になっていた。なんかJava(Script)まで現れていたようだが。

就職活動中の女子大生にJavaとJavaScriptの違いを説明してみる
JavaとJavaScriptの20年戦争

ぼくからは、これを。

Douglas Crockford、「JavaScript: 世界で最も誤解されたプログラミング言語」

今回のキャンプはよかった。自分のコーディングのクセや欠点がすごくよくわかった。そして、考え方も。
食事をする時間を惜しんで、コンビニに走って、甘いモノを買ってきて、口に高速で詰め込んで、コードを書くのは楽しかった。

UEIから来ていた若い人たちも、おもしろかった。9leapのゲームを提供するシステムも、自分で登録してプレイしてみて、改めてすごくうまくできていると思った。才能を感じた。

参加者の人たちも、クセがあってよかった。コーディングするのに熱中していたので、他の人のゲームで遊んだり、あんまり話す余裕がなかったのが残念だ。

週アスプラスには、もう翌日には詳しい記事が載っているし驚いた(合図若松と人口知能は修正してあげて下さい)。
ゼミで学生たちに、週アスの記事を見せて、アトラスXを紹介したら、ウケていた。今度ゼミで作ってみてもいいかもしれない。


今回、若い人たちを育てるのに役に立つといいなという気持ちもあって、ゲームプログラミングキャンプに参加した。

もちろん、中身もすごくおもしろいことばかりだった。いろいろヒントも得られた。

でもね、本気で集中してガンガンやる。しかも、義務とかと一切関係なく。自分の持っているものと、限られた制約の中でいろいろやってみる。とにかくこれがすごく楽しい。

きみもやってみないか?


スタッフ、参加者のみなさんどうもありがとうございました!!


それはともかく、清水社長が風邪をひいたのは、キャンプの会場が寒かったのに、Tシャツ1枚だったからではないか。