Tonyu System 2であほげーを作ろう - その１ 設定とタイトル

## 記事一覧
[第1回 設定とタイトル](https://qiita.com/hoge1e3/items/388bdb47f3d56ed0789f)
[第2回 メイン画面](https://qiita.com/hoge1e3/items/1a471a00b38576430f7e)
[第3回 ターゲットと敵と](https://qiita.com/hoge1e3/items/c5d8379db1304a2897fd/)
[第4回 スコア・時間など](https://qiita.com/hoge1e3/items/e2ab8fbe03469e933022)
[第5回 ゲームを公開する](https://qiita.com/hoge1e3/items/f7bd844fd9743073190e)
[第6回 Twitterにスコアを投稿](https://qiita.com/hoge1e3/items/821e5dd1f163d3d9f3c3/)
[第7回 サウンド関係]
(https://qiita.com/hoge1e3/items/a5b1726f6c95bbb4e852)
[第8回 物理エンジンなど]
(https://qiita.com/hoge1e3/items/b2a0df1d5aaba773310f)



## はじめに

以前に書いた[Tonyu System 2の記事](https://qiita.com/hoge1e3/items/727caca153914e702cb8) でも紹介しましたが，[あほげー](http://ahoge.info)というゲームジャムに参加させてもらっています．

今年は2月に[第２５回](http://ahoge.info/25/index.php)が開催されましたが，次回は７月ということで，だいぶ間が空いてしまうので，代わりにあほげー用ゲームのテンプレートを紹介していきたいと思います．

あほげーは，基本的に連休のある金土日にかけて開催されています．テーマの発表が金曜夜，エントリー期限が翌日の土曜日[^deadline]というスピード勝負のゲームジャムです．

手前味噌ながら，Tonyu System 2（以下，Tonyu2)はあほげーを素早く作るのに向いている環境と思います．それでも，テーマに関係なく必要なゲームの要素はあらかじめ用意しておくのがよいと思います．そこで，これから何回かに分けて，Tonyu2で作るゲームのテンプレートを紹介していきます．

この連載記事では

- プログラミング（特にJavaScript）はある程度触ったことがある方
- Tonyu2については何もご存知ない方

を対象にお話していきます．したがって，Tonyu2特有の言語仕様，API，UIについてはこってり，他のプログラミング言語と共通する部分(制御構造など）はあっさり解説します．

これから紹介するのは次のようなものになっていきます．

- タイトル（今回）
- ゲームクリア，ゲームオーバー
- スコアやタイムの計測
- ツイート機能
- 公開

肝心のゲーム内容は？ってそれはもちろんテーマを見てから作ることになります[^content]．まあスコアとか入らないと上の要素も説明できないので，とてもプリミティブかつ抽象的なものは用意する予定です．

なお，Tonyu2の使い方については，[公式サイト](https://www.tonyu.jp)の[ドキュメント](https://edit.tonyu.jp/doc/)なども参照してください．

# 今回のプログラム

さて，ここからは実際にコードを交えて説明したいと思います．幸い，Tonyu2はブラウザでそのまま編集・実行が可能なので，早速，[編集画面](https://edit.tonyu.jp/index.html?fromPrjB=ahgtmpl0.01.zip)を開いてみてください．自動的に今回のプログラムがダウンロードされます．

ダウンロードされたプロジェクト（ahgtmp0.01）を開くと，Setting と Main という2つのファイル（クラス）があります．

実行するにはメニューから「Settingを実行」を選んでください．今回はタイトルを表示するところだけなので，ボタンを押しても何も起きません．

![icon_thumbnail.png](https://qiita-image-store.s3.amazonaws.com/0/127248/c66f36c0-99b5-1fa2-58cb-3b6cf0743c60.png)


## プログラムの解説

まず，Settingを見てみましょう．

~~~JS:Setting
//---ゲームに関連する情報を定義しておきましょう
$no=26;
$theme="<<第"+$no+"回のテーマ>>";
// ストーリーや，タイトルは
// テーマによっては文脈にさっぱりあわないかもしれないので，
// テーマが発表されたらちゃんと直してね！
$title=$theme+"をゲットせよ！";
$author="hoge1e3";
$subTheme="<<テーマに関連する何か>>";
$story="あなたは"+$theme+"が好きなので，\n"+
$theme+"を集めよう!\n"+
$subTheme+"は集めるなよ！";
//----その他，ゲーム画面を開いたときに初期化したいことはここで

//-----タイトルに移動
loadPage(Title);
~~~

このクラスは，ゲームに関する各種情報をグローバル変数で定義しています．Tonyu2では，`$`で始まる変数はグローバル変数になります．

テーマが発表されたら，このへんの値を適切に設定しましょう．テーマによっては「~をゲット」できないかもしれませんし．

変数定義が終わると，loadPageメソッドでTitleを呼び出します．

~~~JS:Title
//あほげー表示
new Label{
    template="第$no 回あほげー作品", 
    x=$screenWidth/2,
    y=50,
    size=15,
    color="white",
};

//タイトル表示
new Label{
    text=$title, 
    x=$screenWidth/2,
    y=100,
    size=25,
    color="white",
};
//ストーリー表示
new Label{
    text=$story, 
    x=$screenWidth/2,
    y=200,
    size=15,
    color="white",
};
//スタートボタン
new Button{
    text="Start",
    top=300,
};
~~~

画面に文字を配置するときは，Labelクラスを使います．

~~~JS
new Label{
    text=表示する内容, 
    x=横位置,
    y=縦位置,
    size=文字サイズ,
    color=色,
};
~~~

なお，`text`のところを`template`にすると，文字列中の"$"で始まる部分はグローバル変数に展開し，ラベルを表示後に該当する変数が変化すると，ラベルの内容も変化します．

ちなみに，Labelオブジェクトは一度配置するだけで表示され続けてくれるのですが，次のようにずっと出現させ続けるコードを書く方がたまにいるので注意してください．

~~~JS:これはダメです
while(true) {
   new Label{...};//ずっとラベルがわき続けて重くなります！！
   update();
}
~~~

ボタンを配置するときは，Buttonクラスを使います．

~~~JS
new Button{
    text=表示する内容, 
    top=縦位置,
// ↓これらも指定できますが，省略可能です
    left=左端位置,
    width=幅,
    height=高さ,//(テキストサイズは高さから自動計算）
};
~~~

今回はここまでです．ボタンを押しても何も起きないのでそれは[次回](https://qiita.com/hoge1e3/items/1a471a00b38576430f7e)にて．

[^deadline]: 実際には「期限は次回テーマ発表まで」とのことですが，日曜日に発表放送があるので遅くともそこまでにはエントリーしたいところです．
[^content]: テーマを予測して作り置きしたり，[テーマに強引に結び付けたり](http://www.tonyu.jp/project/viewProject.cgi?mainkey=755)，というのもありかなと思いますが，たいてい苦しいです．