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)


# Tonyu2 であほげーを作ろう その２

[前回](https://qiita.com/hoge1e3/items/388bdb47f3d56ed0789f)に引き続き，あほげーのテンプレートを紹介していきます．

前回，タイトルが表示されて，Startボタンが出たけれど押しても何も起きなかったと思いますので，今回はちゃんとゲームをスタートさせるところを作ります．
なお，ゲームの内容はテーマが決まってから詰めるところなので，今回作るゲームの肝心の内容はテキトーです．要するにゲーム全体の流れ（タイトル→ゲーム本体→ゲーム終了）を構築しておいて，テーマが出たら内容をしっかり詰める作戦でいきます．

では，[今回のプログラム](https://edit.tonyu.jp/index.html?fromPrjB=ahgtmpl0.02.zip)を開いてみてください．

<img width="167" alt="スクリーンショット 2018-03-25 16.39.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/127248/53813d74-e9b3-c0bb-ace8-5501acaafeac.png">


今回追加・変更したファイルは次の3つです

- `Main`  [追加] ゲーム開始時にキャラを出現させるオブジェクト
- `Player` [追加] プレイヤーのオブジェクト
- `Title` [変更] ボタンを押したときに`Main`に移動する処理を追加．

## Main 

Main では，プレイヤーのオブジェクトを出現させています．

~~~JS:Main
new Player{x=100,y=100};
~~~

前回書き忘れましたが，`{x=100,y=100}`の部分は，オブジェクトを生成するときに，フィールドの値に書き込みを行うためのものです．JavaScriptに慣れた方は「あれ？」と思うかもしれませんが，Tonyu2のオブジェクトリテラルでは，属性名の後に`=`を書くこともできます（`:`も可）．また，オブジェクトリテラルを引数として渡すときに`()`を省略することも可能です．

メニューの「実行」から「Mainを実行」を選べば，いきなりメイン画面から始めることも可能です．（タイトルから始めたい場合は「Settingを実行」にしてください）

## Player

プレイヤーは次のようになっています．

~~~JS:Player
pad=new APad;//★１
p=$pat_ahoge26+0;//★２
while(true) {
    x+=pad.vx*5;//★1-1
    y+=pad.vy*5;
    update();//★3
}
~~~

- ★1  スマートフォンでも動かせるよう[APad](http://edit.tonyu.jp/doc/APad.html)を使います．これは，画面上に仮想的なアナログパッドを表示させるものです．スマートフォンではスワイプして動かします．PCではキーボードでも操作可能です．
- ★1-1  パッド移動方向は`pad.vx`などで取得します（-1から1まで）．この値を使ってフィールド`x`や`y`を変化させると，画面内のキャラクタがその座標に移動します．[^coord]
- ★2 画像は，次のファイルを使っています．くどいようですが，テキトーです．テーマが決まったらちゃんとしたのに差し替えましょう．
- ★3 `update`メソッドは，このオブジェクトの1フレーム分の動作を終了させる役割をもちます．繰り返しが行われるたびに基本的に1回実行する必要があります．

★2のahoge26.pngはこれです：
![ahoge26.png](https://qiita-image-store.s3.amazonaws.com/0/127248/99b83ed8-9e8e-8f18-e870-90a63490cfd3.png)

上のahoge.png が追加されていることは， メニューの「ウィンドウ」から「画像リスト」を表示して確認できます．次のように，32x32ドットごとに別のパターンになるようにしています．「画像詳細」ウィンドウ左端の「プレイヤー」をクリックすると，`$pat_ahoge26+0` というパターン番号（整数値）が割り振られていることが確認できます．
 
<img width="837" alt="スクリーンショット 2018-03-22 17.19.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/127248/db7d7a9a-c456-ff6a-26e1-73d2432c5b03.png">

プログラム中で，`p=$pat_ahoge26+0;`のようにフィールド`p`にパターン番号を代入すると，そのパターンを表示できます．

## Title

Titleクラスは前回にもありましたが，今回はボタンを押したらMainに移動する処理を追加しました．

~~~JS:Title(一部)
//前略
//スタートボタン
new Button{
    text="Start",
    top=300,
    onClick=start,//★4追加
};
//★5追加↓
\start() {
    new FadeEffect{type="out",page=Main};//★6
}
~~~

ボタンを押したときの動作は，ボタン生成時にonClickフィールドに設定します．`start`は★5で定義されているstartメソッドを指します．

★5の`\start()...`は`function start` と等価です，つまり`start`メソッドを定義しています．
メソッド内では★6のように[FadeEffect](http://edit.tonyu.jp/doc/FadeEffect.html)オブジェクトを生成しています．これは，

- フェードアウトを表示
- 今まで動いていたオブジェクトを全部消し
- `page`フィールドに指定したクラスのオブジェクトを生成します．

簡単にいうと，別のページ（シーン）に移動する処理にフェードアウトをおまけでつけています．[^loadpage]

これによって，Startボタンが押されたらMain,つまりゲーム本体が始まるという処理ができました．

今回はここまで．テキトーなゲームなのにまだ完成していないのでそれは[次回](https://qiita.com/hoge1e3/items/c5d8379db1304a2897fd/)に．

[^coord]: 座標は左上が(0,0)，ピクセル単位です．
[^loadpage]: フェードアウトが不要な場合は[loadPage](http://edit.tonyu.jp/doc/loadPage.html)メソッドを呼ぶことで代用可能です．