タイトル画面を表示しよう

タイトル画面を使用可能にする

まずはタイトル画面を使えるようにするために、プラグインを読み込むことが必要です。 Almightではタイトル画面のプラグインを用意してありますので、libフォルダ内のconfigフォルダにあるalmight.config.jsをテキストエディタで開いて下さい。

以下のように記載されている箇所があるので、//'title.html',となっている部分のスラッシュ二つを削除し、'title.html',と書き換えて下さい。

// Almightプラグイン
plugin: [
    'blue-ui.html', // ナビゲーションバーや各種UI部品を追加(青テーマ)
    'history.html', // メッセージ履歴機能を追加
    'save.html', // セーブ画面を追加
    'load.html', // ロード画面を追加
    'setting.html', // 環境設定画面を追加
    //'title.html', // タイトル画面を追加
    //'cgmode.html', // CGモードを追加
    'sidebar.html' // サイドバー機能を追加
],

プラグインが正常に読み込まれている場合は、[showtitle]タグと[hidetitle]タグが使用可能になります。

タイトル画面を表示する

タイトル画面を表示するには[showtitle]タグを使用します。 タイトル画面といっても、「title.html」プラグインは透明な背景にボタンが表示されるのみなので、背景レイヤーにタイトルに使う画像を読み込んで使用して下さい。

// タイトル画像を背景レイヤーに表示します
[show_bg file="title.jpg"]
[action]
// タイトル画面のプラグインを表示します
[showtitle]

画像

「はじめから」ボタンを押すと、ゲームが開始されます。 「つづきから」ボタンを押すと、ロード画面が開きます。 「メニュー」ボタンを押すと、サイドバーが表示されます。

「はじめから」ボタンを押してゲームを開始しても、タイトル画面は[hidetitle]タグで非表示にするまで表示され続けるので、 本編シナリオのゲーム開始位置に[hidetitle]タグを入れるのを忘れないように注意してください。

「はじめる」ボタンで移動する先は、'first.ks' というファイルの '*newgame' というラベルがデフォルトになっています。 もし別のファイルに移動させたい場合は、以下のように書いて下さい

// タイトル画像を背景レイヤーに表示します
[show_bg file="title.jpg"]
[action]
// タイトル画面のプラグインを表示。「はじめる」を押すと second.ks の *geme_start というラベルにジャンプする
[showtitle storage="second.ks" target="*game_start"]

ボタンを変更する

ボタンの名称を変更するという場合もあるかと思います。 そういった場合は、「title.html」を編集することで実現できます。

「tutorial」フォルダの中にある「lib」フォルダを開き、「plugin」フォルダ内にある「title.html」というファイルをテキストエディタで開いてください。

ボタンの文字を変更したい場合は、「title.html」の以下の箇所を変更してください。

<div id="almight-title-window" data-append="yes" data-selector="#almight-container-stage">
    <div class="menu_list">
        <ul>
            <li id="almight-title-start">はじめから</li>
            <li id="almight-title-load">つづきから</li>
            <li id="almight-title-menu">メニュー</li>
        </ul>
    </div>
</div>

例えば、「はじめから」「つづきから」「メニュー」という文字を「START」「LOAD」「MENU」と変更したい場合は、以下のようになります。

<div id="almight-title-window" data-append="yes" data-selector="#almight-container-stage">
    <div class="menu_list">
        <ul>
            <li id="almight-title-start">START</li>
            <li id="almight-title-load">LOAD</li>
            <li id="almight-title-menu">MENU</li>
        </ul>
    </div>
</div>

画像

また、ボタンのデザインを変更したい場合は、「title.html」のcssを変更することで実現できます。 cssの部分はチュートリアルでは省略しますので、cssを変更した場合の一例を画像で提示しておきます。

画像