『愛とはあなたを破壊する魔法』制作記録十二

2023年9月2日

愛とはあなたを破壊する魔法

進捗
ティラノ版について
進捗状況について

進捗

ティラノスクリプト版のプログラミングなどをしました。

ティラノ版について

引き続きティラノ版のプログラミングをしています。

Ren’py版をなるべく再現しています。
さすがにメニューボタンとメニュー画面の二カラム表示はできなくて諦めました。

画像左が二カラム表示のメニュー、右が一カラム表示のメニューです。

システム改造について

ティラノスクリプトのいろいろなシステムを改造しています。
例えばバックログ画面は、発言ごとにキャラクターアイコンが表示されるようにしています。
また発言一つにつき一つの枠で表示されるようにしています。

セーブ画面では、現在読み進めている章名が表示されるようにしています。
また地味な変更点として、枠に収まらないメッセージ文章を省略して「…」を付けるようにしています。
またセーブデータが無い状態を示す文章を変更しました。

セーブデータが無い場合、デフォルトの表示文章は「まだ、保存されているデータがありません。」になります。
「tyrano」フォルダにある「lang.js」ファイル五行目を書き換えることで、この表示文章を変更できます。
私は別途javascriptファイルを用意して、そこで値を上書きしています。

通知表示について

ver515betaから追加されたイベントリスナを使用して、スキップ・オート・セーブ通知を作りました。

イベントリスナを使用したシムテム制作に関しては以下のページを参照しました。

Notion

V515beta 2-5 ＊上級者・プラグイン開発者向けの情報

具体的なコードを紹介します。

これから作成するファイルは全てotherフォルダに作成することを前提としています。ファイルパスの指定を正しく行えれば、どこに作成しても問題ありません。

まず通知用のHTMLファイルを作成します。ファイル名は「auto_notify.html」です。

<div class="oct_notify oct_auto_notify">
    Auto
</div>

通知のデザインはCSSファイルを作成して設定します。ファイル名は「style.css」です。

/*色設定。変数で管理*/
:root {
    --color__white1: #f3f2ee;
    --color__gray2: #858582;
}

/*アニメーション*/
/*Autoの隣で動き続けるドットアニメーション*/
@keyframes anm_dot {
    0% {
        content: "";
    }
    25% {
        content: ".";
    }
    50% {
        content: "..";
    }
    75% {
        content: "...";
    }
}

/*通知の退場アニメーション*/
@keyframes anm_notify_fadeout {
    
    0% {
        opacity: 1.0;
    }
    75% {
        opacity: 1.0;
    }

    100% {
        opacity: 0;
    }

}

.oct_notify {
    /*位置指定*/
    position: fixed;
    top: 200px;
    left: 0;
    /*z-indexを設定しないと、背景画像やメッセージ画像などに通知が隠れてしまう*/
    z-index: 999999999;
    /*デザイン部分*/
    display: flex;
    padding: 0.75rem 2rem 0.75rem 4rem;
    box-sizing: border-box;
    font-size: 2rem;
    line-height: 100%;
    border-radius: 0 4px 4px 0;
    font-family: "sabu_font";
    color: var(--color__gray2);
    background-color: var(--color__white1);
}

.oct_notify::after {
    /*アニメーション用設定*/
    content: "";
    animation: anm_dot 2s steps(4) infinite;
    animation-duration: 1s;
    /*デザイン部分*/
    display: block;
    min-width: 2rem;
    height: 2rem;
    margin-left: 0.5rem;
}

適当なjavascriptファイルを作成します。ここでは「main.js」ファイルを作成しました。
通知を表示する関数と非表示にする関数を作成します。
通知の表示は先ほど作成した「auto_notify.html」ファイルを読み込んで行い、非表示はremove関数を使用して行います。
（通知の表示内容は、変数で直接設定してもよいと思います）

//通知表示関数
function oct_show_auto_notify(){
    const elements_with_class_tyarano_base = document.querySelector(".tyrano_base");

    fetch( "./data/other/html/auto_notify.html")
        .then(response => response.text())
        .then(html => {
            elements_with_class_tyarano_base.insertAdjacentHTML("afterbegin", html);
        })
        .catch(error => {
            console.error("ファイルの読み込みエラー:", error);
        });

}

//通知非表示関数
function oct_hide_auto_notify(){
    const elements_with_class_oct_auto_notify = document.querySelector(".oct_auto_notify");

    elements_with_class_oct_auto_notify.remove();
}

イベントリスナを登録します。
第一引数にイベント名、第二引数に先ほど作成した関数を指定します。
今回はオートが開始されたことを示す「auto-start」と、オートが終了したことを示す「auto-stop」をそれぞれ使用しました。

TYRANO.kag.on("auto-start", oct_show_auto_notify)
TYRANO.kag.on("auto-stop", oct_hide_auto_notify)

main.jsとstyle.cssを適当なksファイルで読み込みます。起動後ゲーム開始までに必ず実行する場所で読み込むべきです。読み込む代表的な場所はfirst.ksファイルです。

[loadjs storage="main.js"]
[loadcss file="./data/other/style.css"]

以上の方法で、ゲーム中オート通知を表示させることができました。

進捗状況について

諸事情あり、今まで通りの創作時間が取りづらくなってきました。
そのためゲーム完成予定時期を今年中に変更します。

あと少しで完成というところで完成時期が延びるのは、完成をお預けにされているようで、心苦しいです。
ですがあと少しということは、あとは完成させるだけという心意気でゲーム制作ができることでもあります。最悪スチル無しならほぼ公開できる状態でもあるので、もうほとんど完成しているのだと考えながら、気楽に作業できそうです。
引き続きがんばります。

< PREVIOUS

NEXT >

甘翼