Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ゲームエンジン・ライブラリ・ツールの開発Advent Calendar 2016

Day 12
@hoge1e3

Tonyu System 2: キャラクターの「動き」に注目した、ブラウザゲーム開発環境

Last updated at Posted at 2016-12-07

この記事はゲームエンジン・ライブラリ・ツールの開発 Advent Calendar 2016 の 12 日目の記事です。

「ゲームを開発したい人が，既存の有名ゲームエンジン以外にどんな選択肢があるか？」というテーマのアドベントカレンダーがあるとのことで，拙作のゲームエンジン「Tonyu System 2」（以下Tonyu2）を紹介いたします．ちなみに，アドベントカレンダーの投稿もQiitaの投稿も初めてだったりします．よろしくお願いします．

ブラウザで動くゲームを，ブラウザで開発

Tonyu System2がターゲットにしているゲームは，ブラウザで気軽に遊べる2Dミニゲーム的なものが主です（もちろん大作を作ろうと思えば作れます）．Flashをはじめとするプラグインは不要で，スマートフォンのブラウザなどでも遊べるゲームを短期間で作りたい方におすすめです．

短期間で作るゲームのために，わざわざ開発環境をセットアップするのも面倒ですので，ブラウザ自身で開発までできるようにしました．早速動かしてみてください．(トップページの「新規作成」からプロジェクト名を入力して開始）

なお，ブラウザで開発したプログラムは，そのブラウザのlocalStorageに保存されるので，共有が面倒だったり，容量の心配があったりします．試してみて興味を持った方はダウンロード版（Mac/Win対応．Zip解凍のみ．インストーラー不使用）もお使い下さい．

書けばすぐ動くキャラクター達

Tonyu2 はTonyuという独自言語でゲームを作成します．文法などはJavaScriptに準拠していますが，動作モデルをゲーム向きにカスタマイズしています．

キャラクタを右に動かす，という処理は，次のような繰り返しを書くことで実現されます．
（開発環境上でファイル→新規→名前をChara1で作成）

Chara1
x=100;
y=100;
while(true) {
   x++;
   update();
}

(実行→Chara1を実行)

Tonyu2のオブジェクトには，いくつかの特別な意味をもつ変数があります．xやyはオブジェクトの位置を表していて，これを書き換えるだけでオブジェクトが動きます．（他にも回転拡大縮小，透過度，グラフィックスなどを制御する変数があります）短いプログラムでキャラクタの動作を表現できるのがTonyu2の特徴です

ところで，JavaScriptに慣れている方だとwhile(true) {..} というくだりを見て「うっ無限ループが...」「ブラウザ固まるんじゃ....」と思うかもしれませんが，ポイントはループ中に入っているupdate();というメソッドです．これが実行された時点で，描画のや入力処理を行ってくれるので，ブラウザが固まったりすることはありません．

#状態の自然な記述

さて，さきほどのChara1とは別に次のようなChara2を作ってみます．動きとしては，「100フレーム右に移動したあと，100フレーム下に移動する」というものです

Chara2
x=100;
y=200;
for(i=0;i<100;i++) {//右に100フレーム移動
   x++;
   update();
}
for(i=0;i<100;i++) {//下に100フレーム移動
   y++;
   update();
}

このように，複数の動きをしたければ，繰り返しをつなげて書くだけで表現できるのも特徴です．多くのゲームエンジンでこのような動作を実現するには，「今右に動いているのか，下に動いているのか」をフラグで管理する必要が出てきます．1

並行処理が得意

これら（Chara1とChara2）を両方出現させるには，別途オブジェクト（Mainとします）を作成します

Main
new Chara1;
new Chara2;

こうすると，Chara1とChara2が同時に移動の処理を行います．正確には，Chara1とChara2が交互に処理を行ない，update();のタイミングで相手の処理に切り替えるようになっています．

#こう見えてもオブジェクト指向言語

さきほどのnew Chara1;というコードがあったことからわかるように，Chara1はファイル名であると同時に，クラス名でもあります．Tonyu2のプログラムは，見かけ上class ... { }も main () { ... }もいらないスクリプト言語のように見えますが，ファイル全体がクラス定義になっています．

オブジェクト指向言語ですので，オブジェクトのフィールドへのアクセス，メソッド呼出なども普通にできます．例は省略しますが，継承やミックスインもサポートしています．

Main
$c=new Chara1;
updateEx(30); // 30フレーム待機
print($c.x); // $cのxの値を表示
updateEx(30);
$c.die(); // $cを消す

上のプログラムに出てきたdieは，組み込みのメソッドですが，もちろん自分でメソッドを定義して，呼び出すことも可能です

Chara1
x=100;
y=100;
while(true) {
   x++;
   update();
}
function bigger() {//biggerメソッドの定義
   scaleX*=2;
}
Main
$c=new Chara1;
updateEx(30); // 30フレーム待機
print($c.x); // $cのxの値を表示
updateEx(30);
$c.bigger(); // $cが大きくなる

#配列要らずの当たり判定

ゲームエンジンにもよりますが，当たり判定を行なう場合，対象となるキャラクタを全部配列に入れて，1個1個繰り返しで.... となることが多いですが，Tonyu2ではもっとさぼった書き方ができます。

Player
while(true) {
   item=crashTo(Item);
   if (item) {
       item.die();
   }
   update();
}

crashTo(Class)は、Classに属するオブジェクトのうち、どれかとぶつかっていれば、そのオブジェクトを返すメソッドです．

「同時に2体ぶつかっていたらどうなるの？」という疑問を持たれた方のために補足しておくと，crashTo(Class)はぶつかったもののうち「どれか1個」を返すという割といい加減なメソッドです2．ちゃんと全部処理したい場合，allCrash(Class)というメソッドが用意されています．

Player
while(true) {
   items=allCrash(Item);//ぶつかっているすべてのItemを配列で返す
   for (item in items) {//配列ごとに繰り返す（JSとは異なり，itemにはインデックスではなく要素が入る）
       item.die();
   }
   update();
}

モダンな要素：マルチタッチとか物理エンジンとか

このゲームエンジン名前がTonyu2 となっていることから，Tonyu1はあったのか，という質問が来そうですが，あります．Tonyu1は，2001年にリリースされています．当時はまだスマートフォンもなかったため、PC（Windows）専用のゲームエンジンでした。Tonyu2では、スマートフォンでの動作も想定して、マルチタッチなどにも対応しています。また，物理エンジン(Box2d)を簡単に用いることができるクラスもあります．

豊富なサンプルプログラム

ゲームに必要な機能を実装するためのサンプルプログラムを「用途別リファレンス」という形でドキュメントにまとめてあります．プログラミング初心者の方でも簡単なゲームであれば作れるようになっています．

作品投稿支援

Webブラウザで動くゲームを公開するには，Webサーバが必須となりますが，自分でWebサーバを持っていなくても公開できるように，Tonyu2ではいくつかの公開方法を用意しています．

AltJSならではの拡張性

Tonyu2は，Webブラウザ上でプラグインなしで動作させるために，プログラムをJavaScriptに変換して実行するAltJSとして実装されています．基本的には，Tonyu2自身が提供するAPIを利用すればゲームは作成できますが，JSの生の機能を使って機能拡張もできます．

Tonyu2にはnative宣言があり，JSのグローバルなオブジェクトへアクセスを提供してます．例として，Tonyu2の実行中にQiitaのトップページに移動するプログラムは次のようになります．

native location;

text="Press Q to go to qiita";
x=100;
y=200;
while(true) {
    if (getkey("q")==1) {
       location.href="https://qiita.com";
    }
    update();
}

Tonyu1の頃からTonyu Systemを愛用していただいている@makkii_bcr さんは，この機能を利用して，WebAudio経由での音楽演奏や，スコアのTweet機能などを作成してくださいました．
このように，AltJSの特徴を活かした機能拡張が実際に行われています．

短期開発におすすめ

さきほども書きましたが，Tonyu2は短期間でゲームを作るのに向いています．
最近では，私自身，あほげーという，1日で決められたお題でゲームを作る，Web上のゲームジャムに参加しています．Tonyu2の次のような特徴は，たった1日足らずでも，ゲームをとりあえずゲームっぽくすることの手助けになっていると思います．

  • 思いついたらすぐWeb上で開発
  • ゲームに最低限必要な機能（表示や当たり判定）がAPIで提供されている
  • 記述量が少ない

拙作のあほげー投稿作品：
koneko.png子猫痩せすぎ太りすぎ

Elevator AngerElevator Anger

先述した@makkii_bcrさんも，あほげー作品を投稿していただいています

ikakagisu.png遅刻なら待ってあげようイカカギス

マイエレマイエレ

気になることはすぐ試してみる

先月あたりに「乱数のコク」なるものがTwitter上で話題になりました．(rnd()+rnd()+rnd()+rnd()+rnd())/5のように，一様乱数を複数足し合わせることで，中央に値が集まりやすくなり，「コクがでる」「まろやかになる」などの効果？が得られるとの評判でした．

実際のところ本当にまろやかなのか？というのが気になるところですが，これを視覚化して表示するプログラム ( その1， その2 )を，Tonyu2のユーザである@damaguroさんが作成してくださいました．@damaguroさんは，他にもTonyu2の 物理エンジンのサンプル( その1， その2 ) をアニメーションGIFでツイートしてくださっています．

こういった，ゲームを構成するメカニズム，アルゴリズムをすぐに試せるのもTonyu2の特徴です．

今後の拡張

大作ゲームを作るために必要なレベルデザインの支援を行えるライブラリを整備したいと考えています。（例えば、敵やイベントの情報、出現テーブルなどを管理する簡易データベースのようなもの）

情報

  1. 他のゲームエンジンでも，いわゆる「コルーチン」という機能で実現できますが，Tonyu2では普通にプログラムを書いてもコルーチンとして動作します．明示的に「コルーチンを使うぞ」という意思表示が不要になっています． ↩

  2. 同時に2体ぶつかった場合，その時点でどちらかが消えて，次の繰り返し（フレーム）でもう片方が消える，という処理になります．これでもほとんどの場面では違和感なく使えます． ↩

9
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?