作成日：2024年08月19日
三目並べを作ろう（４）
全ページのレイアウトを作成する
それでは、ようやくレイアウト作成に入ります
まずは下図の様に、タイトル、対戦モード選択、対戦、戦歴閲覧の4つのレイアウトを作成します
タイトルレイアウトの作成
さて、ようやくタイトルのレイアウト作成を開始します
パートなどは不要なので、ボディだけ残して削除
またサイズをiPhone向けとして、幅：375pt、高さ：647ptとします
引き続き、レイアウトに必要なパーツを配置していきます
タイトルテキストとイメージイラスト、ボタン２つを適当に配置します
まぁ、悪くはないんじゃないでしょうか
iPhoneアプリとして考えるなら終了ボタンもあるべきだと今更思いましたが、場所もないので気が付かなかった事にします
ただ中央のイラストは、折角なので順番に手を打っていくアニメーション処理も入れる事にします
スクリプトの作成
続いて、スクリプトの作成に入ります
必要なスクリプトは５つあります
- イラストのアニメーション処理を行うスクリプト
- イラストのアニメーション処理を終了するスクリプト
- 「タイトル」レイアウトが表示された時に盤面を指定の内容にするスクリプト
- 「対戦する」ボタンを押した時に対戦モード選択画面へ移動するスクリプト
- 「戦績を見る」ボタンを押した時に戦績閲覧画面へ移動するスクリプト
順番に作成していきましょう
盤面アニメーション処理
スクリプト
# ################################################## # タイトル画面での盤面アニメーション処理 # 作成日：2024年08月19日 # ################################################## 変数を設定 [$$time; 値: $$time + 1] If [$$time = 1] フィールド設定 [一時記録::盤面A; 画像保管::アイコン[1]] フィールド設定 [一時記録::次の手番; "後手"] Else If [$$time = 2] フィールド設定 [一時記録::盤面B; 画像保管::アイコン[2]] フィールド設定 [一時記録::次の手番; "先手"] Else If [$$time = 3] フィールド設定 [一時記録::盤面E; 画像保管::アイコン[1]] フィールド設定 [一時記録::次の手番; "後手"] Else If [$$time = 4] フィールド設定 [一時記録::盤面I; 画像保管::アイコン[2]] フィールド設定 [一時記録::次の手番; "先手"] Else If [$$time = 5] フィールド設定 [一時記録::盤面G; 画像保管::アイコン[1]] フィールド設定 [一時記録::次の手番; "後手"] Else If [$$time = 6] フィールド設定 [一時記録::盤面D; 画像保管::アイコン[2]] フィールド設定 [一時記録::次の手番; "先手"] Else If [$$time = 7] フィールド設定 [一時記録::盤面C; 画像保管::アイコン[1]] フィールド設定 [一時記録::勝敗手筋; "CEG"] Else If [$$time = 8] ウインドウ内容の再表示 [] Else If [$$time = 9] フィールド設定 [一時記録::勝敗; 画像保管::勝敗表示[1]] Else If [$$time ≥ 12] フィールド設定 [一時記録::盤面A; ""] フィールド設定 [一時記録::盤面B; ""] フィールド設定 [一時記録::盤面C; ""] フィールド設定 [一時記録::盤面D; ""] フィールド設定 [一時記録::盤面E; ""] フィールド設定 [一時記録::盤面G; ""] フィールド設定 [一時記録::盤面I; ""] フィールド設定 [一時記録::勝敗手筋; ""] フィールド設定 [一時記録::勝敗; ""] 変数を設定 [$$time; 値: 0] ウインドウ内容の再表示 [] End If
盤面アニメーション処理終了
スクリプト
# ################################################## # タイトル画面での盤面アニメーション処理終了 # 作成日：2024年08月19日 # ################################################## OnTimerスクリプトをインストール [] 変数を設定 [$time; 値: ""]
「タイトル」画面の表示
スクリプト
# ################################################## # タイトル画面を表示させる時に実行する処理 # 作成日：2024年08月19日 # ################################################## フィールド設定 [一時記録::盤面A; "" ] フィールド設定 [一時記録::盤面B; "" ] フィールド設定 [一時記録::盤面C; "" ] フィールド設定 [一時記録::盤面D; "" ] フィールド設定 [一時記録::盤面E; "" ] フィールド設定 [一時記録::盤面F; "" ] フィールド設定 [一時記録::盤面G; "" ] フィールド設定 [一時記録::盤面H; "" ] フィールド設定 [一時記録::盤面I; "" ] フィールド設定 [一時記録::勝敗手筋; "" ] フィールド設定 [一時記録::勝敗; "" ] レイアウト切り替え [「タイトル」（一時記録）; アニメーション: 右から反転] OnTimerスクリプトをインストール [「盤面アニメーション」; 間隔: .5] ツールバーの表示切り替え [隠す] メニューバーの表示切り替え [ロック: オフ; 隠す] ウインドウの調整 [収まるようにサイズ変更]
「対戦モード選択」画面の表示
スクリプト
# ################################################## # 対戦モード選択画面を表示させる時に実行する処理 # 作成日：2024年08月19日 # ################################################## フィールド設定 [一時記録::参加人数; 1 ] フィールド設定 [一時記録::難易度; "接待" ] フィールド設定 [一時記録::手番の選択; "先手" ] スクリプト実行 [指定: 一覧から; 「盤面アニメーション終了」; 引数: ] レイアウト切り替え [「対戦モード選択」（一時記録）; アニメーション: 右から反転]
「対戦モード選択」画面の表示
スクリプト
# ################################################## # 戦績閲覧画面を表示させる時に実行する処理 # 作成日：2024年08月19日 # ################################################## スクリプト実行 [指定: 一覧から; 「盤面アニメーション終了」; 引数: ] レイアウト切り替え [「戦績閲覧」（一時記録）; アニメーション: 右から反転] 全レコードを表示 レコードをソート [記憶する; ダイアログあり: オフ]
スクリプトの記述が終わったら、スクリプトを割り当てます
「対戦する」ボタン → 対戦モード選択画面表示
「戦績を見る」ボタン → 戦績閲覧画面表示
起動時のスクリプトトリガ → タイトル画面表示
これで何とかタイトル画面が出来上がりました
尚、レイアウトのフィールドを追加したり条件付書式を設定したりしています
今回はここまでとし、次回は「対戦モード選択」「戦績閲覧」を作成します
三目並べを作ろう（５）へ続きます
以上で今日のメモ書きは終了です
内容はいかがでしたか？
もしご意見やご要望、誤りの指摘などありましたら、下記フォームよりお気軽にご連絡ください