Archive for the ‘流動指向ゲームエンジン『Fooo』’ Category

コマと吹きだしを表示する

漫画独特の表現といえばコマと吹きだし。
Foooエンジンはもともとは『動く漫画』を作るためのゲームエンジンである。
そのため、漫画独特の表現を実現する専用の部品がある。

Decor_Frame CreateFrame命令

コマ部品を作成するのがCreateFrame命令だ。
Foooでは漫画のコマのことを『フレーム』と呼ぶ。
これは元々のシステムの名称に由来している。


method Main()
{
  CreateFrame(name="コマ", image="画像.png", x=50, y=50);
  Enter(to="コマ");
}

CreateFrame命令はCreateImage命令に似ているが、
画像に枠をつける機能がある。

x, yパラメータは部品の位置を指定するパラメータだ。
画像が左上にあると枠がわかりにくいのでx, yパラメータで位置を調整している。
x, yパラメータはほぼ全てのCreate系命令で共通して使えるパラメータでもある。

Fooo_DrawComic_Frame

ぼんやりとした枠がついているのがわかる。

Fooo_DrawComic_FrameZoom

Decor_Balloon CreateBalloon命令

吹きだし部品を作成するのがCreateBalloon命令だ。


method Main()
{
  CreateBalloon(name="吹きだし", text="hello, world", tail=-45, x=50, y=50);
  Enter(to="吹きだし");
}

CreateBalloon命令はCreateText命令に似ているが、
文章に吹きだし枠をつける機能がある。
tailパラメータには尾のつく角度を指定する。

Fooo_DrawComic_Balloon

吹きだしの素材は必要なく、形状は自動生成される。

Fooo_DrawComic_BalloonZoom

これらの部品を使うことで漫画のような画作りを簡単に行うことができる。
Foooエンジンの目指す『動く漫画』の姿がぼんやりと見えてきただろうか。


画像を表示する

基礎的な文法がわかったところで、今度は画像を表示させてみよう。
まず適当な画像ファイルをFooo.exeと同じ場所に用意しておく。

画像.png
Fooo_DrawImage_Image

前回述べた通り、Foooでは画面に表示する全てのものを部品として扱う。
Foooが扱える部品には前回使った文章部品のほかにも様々な種類がある。

Decor_Image CrateImage命令

画像を画面に表示させるには『画像部品』を使う。
画像部品を作成する命令はCrateImage命令だ。


method Main()
{
  CreateImage(name="画像", image="画像.png");
  Enter(to="画像");
}

実行してみよう。

Fooo_DrawImage_Exec

このようにFoooでは画面上に様々な部品を”作る”ことで、画作りをしていく。


スクリプトを細かく見てみよう

では”hello’ world”と表示するスクリプトがどういう内容なのか見ていこう。


method Main()
{
  CreateText(name="Text", text="hello, world");
  Enter(to="Text");
}

プログラミング言語に触れたことのある方は、
パッと見ただけで何をしているのかおおかた予想がつくだろう。
それもそのはず。

Foooスクリプトの文法は代表的なプログラミング言語である
C++言語をベースにしているのだ。

アドベンチャーゲーム用のエンジンなのに
C++に似てるってドユコト!?

っていうツッコミは後でお願いしますwww

method Main()

最初のmethod Main()は、スクリプトを実行すると最初に実行される部分を表している。
とりあえずは必ず書く必要がある”おまじない”のようなものだと思ってもらっていい。
そしてその後の { から } の間に、どんな処理を行うのか記述する。


method Main()
{
  // ここに処理を書く
}

処理内容には『命令文』を記述する。
{ } の中に書かれているCreateTextやEnterが命令文だ。
命令は上から書いた順番で実行される。

命令文の書式

命令文は次の書式で記述する。


  命令名();

命令文にはその命令の詳細をパラメータとして記述することができる。
パラメータの記法はC++とは異なり、名前付指定形式である。
これはwebページの記述言語であるHTMLでおなじみかもしれない。


  命令名(パラメータ名=パラメータ値);

パラメータはカンマ区切りで複数指定できる。


  命令名(パラメータ名=パラメータ値, パラメータ名=パラメータ値, ...);

Decor_Text CreateText命令

最初に書かれている命令文はCreateTextだ。


  CreateText(name="Text", text="hello, world");

CreateTextの直訳は「文章作成」。
そう、CreateTextはFoooエンジンに対して「文章を作れ」と指示する命令である。

なるほど…と思ったかもだが、しかしここでちょっと立ち止まって考えて見て欲しい。
よくよく考えると「文章を作れ」とは、なんとも違和感のある言葉であるではないか。
「文章を表示しろ」ではないのか。
実はこれが重要。

Foooエンジンは画面に表示されるすべてのものを
『部品』として扱う。

画面に何かを表示したい時は、まずFoooエンジンに部品を作らせる必要がある。
そう、CreateText命令は正確には「文章部品を作れ」と指示する命令なのである。

nameパラメータは新しく作る部品の名前を指定する。
名前は後で部品を操作するために必要なものだ。
ここでは部品に”Text”という名前をつけている。

textパラメータは文章内容である。

Enter命令

2つめの命令文は、Enterだ。


  Enter(to="Text");

Enterを直訳すれば「登場」…
EnterはFoooエンジンに「部品を表示状態にしろ」と指示する命令である。
CrateTextは部品を作るだけなので、Enter文で部品を表示状態にする必要がある。

「表示しろ」ではなく「表示状態にしろ」なことに注意して欲しい。
部品は表示するかどうかの状態を持ち、
表示状態である限り画面に表示され続けるのである。

toパラメータには命令の対象となる部品の名前を指定する。
対象は”Text”だ。

このようにして”hello world”と表示しているわけだ。
説明が随分と細かくなったけれど…
こんなシンプルなスクリプトを通してでも、Foooの特徴が少しばかり垣間見えて来たのではなかろうか。


Foooを実行してみる

とにもかくにもFoooエンジンを実行してみよう。
実行ファイルは”Fooo.exe”だ。

Fooo_0005_exe

ポチっとな♪

Fooo_0005_Exec

………何やらファイルの選択を求められる。
ここでは『Foooスクリプト』 ファイルを指定する。

Foooエンジンに何かをさせるにはFoooスクリプトを記述する必要がある。
Foooスクリプトファイルはただのテキストファイルだ。
適当にテキストファイルを作成して、前回書いた”hello, world”を書き込んでみよう。
ファイル名はなんでもいいのでとりあえず”Test.txt”にしておく。


// Test.txt
method Main()
{
   CreateText(name="Text", text="hello, world");
   Enter(to="Text");
}

さっきファイルの選択を求められたところで、この”Test.txt”を指定してやると…
こうなる。

Fooo_0005_Hello

ちょっと小さいので拡大。

Fooo_0005_HelloZoom

“hello world”と表示された!
,が表示されていないのだけれど、これにはちょっと理由がある。
それについては追々。

というわけで…

新世界へようこそ!


hello, world

“hello, world”とは、新しくプログラミング言語を学ぶ際に
おきまりのように最初に必ず出てくるサンプルプログラムのことである。
画面に”hello, world”と表示するだけのシンプルなプログラムだ。
「世界一有名なプログラム」とも言われる。
もともとはC言語の生みの親の一人であるカーニハン氏が使ったのが初出とされている。

この”hello, world”という言葉、自分はすごく好きだ。

直訳すれば 「こんにちは世界」 だが、
この言葉には 「新世界へようこそ」 といった意味がこめられているように思う。
コンピュータに初めて電源を入れると真っ暗な画面に最初にこの言葉が浮かび上がる…
そんなイメージでこの言葉を思いついたのではなかろうか。

──────はるか未来。
ジャンク山から朽ち果てたおんぼろアンドロイドを見つけ修理を始める。
そのアンドロイドが動いていたであろう時代のメモリーは既に失われていたが、
やっとのことで起動に成功する。
アンドロイドが再び初めて見る視界。
そのインナーモニターにはこう表示される。

“hello, world”

そんなシーンを思い浮かべるだけで胸が熱くならないだろうか?
ならない?

ううう、書きながら涙が…

前置きが長くなりすぎた…
というわけで、Foooスクリプトで”hello, world”を記述してみよう。


method Main()
{
   CreateText(name="Text", text="hello, world");
   Enter(to="Text");
}

簡単デスネ!

………
………………

そうでもない?


動く漫画を実現せよ

Foooはもともとはアドベンチャーゲーム開発用のゲームエンジンである。

作り始めたのは、もうかれこれ12年も前になる。
標準的なPCのスペックがCeleron 800MHz程度、800×600サイズのゲームもまだ珍しく
フルカラーのゲームがようやく増えてきたくらいの時代だ。

アドベンチャーゲームというと一般的には背景と立ち絵、
そしてメッセージウィンドウが表示された画をイメージするだろう。
12年前もアドベンチャーゲームといえばそういうイメージだった。
しかしFoooに要求されたのは、ソレとはまったく異なる画作り。

『動く漫画』

後にそう評される演出は、画面に漫画のコマのようなものを多数表示し
メッセージは吹きだしで表示する…当時としては結構革新的なものだった。

こんなかんじ。(今描いた落書き、なぜか配色がアメリカンなのはキニシナイ)
Fooo_RoughImage

けれども当初決まっていたのはそういったコンセプトだけで、
具体的にどんな演出を行うのかはまったく決まっていなかった。

まったくの手探り状態。
革新的なものだからこその悩み。
でも演出のビジョンがはっきりするのを待っていたらまるで開発が進まない。
うーん…

とりあえずなんでもできるようにしちゃえ!

とまぁ、軽いノリで、どんな演出でも実現できる仕様を目指すことに。
こうしてFoooは、アドベンチャーゲーム用のエンジンとしては妙に汎用的な
悪く言えば大仰な仕様のシステムとして開発がスタートしたのである。


命名!『Fooo』

前職ではFFD Systemというアドベンチャーゲーム用のゲームエンジンを開発していたのだけれど、
このFFDという名称は前職場である株式会社モノクローマの登録商標であるため、
その名称をそのまま使うのはちょっとアレだったりする。

そもそもFFD(Floating Frame Director)とは「動く漫画のような演出」を示す言葉であって、
FFDを実現するシステムだからFFD Systemという具合に
かなりテキトーにエンジン名を命名したという経緯がある。

そのまんますぎる

せっかくなのでこの機会にちゃんとイカしたエンジン名をつけておきたい。

覚えやすいのがいいなー
文字数はできるだけ少なくしたいなー
検索で当たりやすいのがいいなー
Rubyとかみたいに宝石とか鉱石の名前もいいなー

とかアレコレずいぶん悩んだのだけど…
やはり大本のコンセプトというか…
語感は残しておきたいということで、思いついたのが…

Fooo

読みは『フー』
floating object oriented organization の略。
『流動オブジェクト指向機構』という意味…のつもり。

プログラミングにおいて特に意味のない名称であることを示唆する名称”Foo”に掛けていたりする。
自分の仕事名である『アザナシ』と似たコンセプト!
コレダー!

という感じで、以降Foooと呼称していこうと思います。


エンジン公開計画的な。

新年ということで心機一転気持ちを切り替えて、
前職で開発に携わったゲームエンジンの技術情報などを公開して行こうかと考えていたり。

退職したのにそんなことして大丈夫なの?と思うかもですが、
ゲームエンジンに関してはクロスライセンス的な契約をしていたりします。

12年前に設計したエンジンなので、今では当たり前になってる機能も多く、
イマサラ感がかなーりあるかも。
実行環境を公開するかどうかは…サポートが面倒そうなので要検討(ぉ

とりあえずエンジンの名前どーしよーかなー