見出し画像

ティラノスクリプト製ゲーム「マダム・ポプスキンの憂鬱」の技術的な話【通知（js・css）】

とてちけ

前回の記事で『次回は「調査手帳の雑記以外」で利用している技術でjsとcssの合わせ技について解説予定です。』と書いていましたが、記事のボリュームが多い＋改訂すべきjsとjQueryが多く時間がかかっています。
ので、先に「通知」についての解説を公開することにしました。

今回の解説はhtml・js・cssで作る「通知」

「通知」は特定の情報を得たら、右上に「〜〜しました」と数秒間表示されるものです。何個も連続で表示できます。

さらに行動指針・調査手帳のどちらの情報を得たかを判別して通知内のアイコン画像が変更されるようにしました。

この記事を読むために

レベル感やjsの記述ルールなどはこちらの記事を参考にしてください。
ただし今回の記述はjsでclass名を指定するのがめんどすぎるので、jQueryが混じっています。

通知を作ろう

実践1：htmlとcssを書こう

jsを書く前に、通知のデザインを決めてhtmlとcssを作成します。
※通知内のアイコン画像変更は画像の用意をするのも面倒だと思いますので、情報によって色が変わる記述としています。

ksファイルに記述するhtmlとcssファイル読み込みの記述

;後述のcssを/data/others/css/配下に「notice.css」という名前で保存
[loadcss file="./data/others/css/notice.css"]

;「is-infoA」を「is-infoB」にすると円の色が赤から青に変わる
[html name="htmlblock"]
<div id="notice">
  <p class="notice__tip notice__tip-1 is-infoA">
    <span>調査手帳に『40年前の時系列表』が追加されました</span>
  </p>
</div>
[endhtml]

cssファイル

@charset "UTF-8";

/*
/data/others/css/配下に「notice.css」という名前で保存
.htmlblockは実践2では不要です、削除してください
*/

.htmlblock {
  width: 100%;
  height: 100%;
}

#notice {
  z-index: 100000001;
  position: absolute;
  width: 100%;
}

.notice-tip {
  background: rgba(245, 245, 246, 0.8);
  color: #111111;
  border-radius: 16px;
  font-size: 16px;
  height: 68px;
  padding: 8px 12px 8px 8px;
  display: flex;
  align-items: center;
  line-height: 1.2;
  text-align: left;
  position: absolute;
  right: 30px;
  top: 24px;
  width: 398px;
  box-sizing: border-box;
  z-index: 10000;
}

.notice-tip span {
  width: 320px;
}

.notice-tip.is-infoA::before {
  background-color: #ff7272;
  background-position: left center;
  content: "";
  height: 40px;
  width: 40px;
  display: inline-block;
  background-repeat: no-repeat;
  margin-right: 8px;
  margin-left: 6px;
}

.notice-tip.is-infoB::before {
  background-color: #72a7ff;
  background-position: left center;
  content: "";
  height: 40px;
  width: 40px;
  display: inline-block;
  background-repeat: no-repeat;
  margin-right: 8px;
  margin-left: 6px;
}

Tyrano Studioなりで該当ファイルを実行すると、以下のような通知が画面右上に表示されます。

この時点ではアニメーションはついていない静的な表示です。
通知のデザインを変更したり要素を追加する場合は静的な状態で作成すると確認がスムーズですので、この状態で変更していきましょう。
「.is-infoA」「.is-infoB]が色をふりわけるcssですので、情報に合わせて使いたい画像や色を指定できます。
このクラス名は任意かつ好きに増やして問題ありません。

実践2：jsを書いてmacro化しよう

通知のアニメーションをつけるかつ、最大10件連続で表示するための記述をjsで作成し、macro化しましょう。
実践1のcssを/data/others/css/配下に「notice.css」という名前で保存したうえで、ksファイルとjsファイルを用意します。

ksファイル

#
メッセージ枠が表示されている前提。

;後述のjsを/data/others/js/配下に「notice.js」という名前で保存
;macroと同じように最初に読み込むファイルに記述しておきましょう
[loadjs storage="js/notice.js"]

;実践1のcssを/data/others/css/配下に「notice.css」という名前で保存
[loadcss file="./data/others/css/notice.css"]

;通知のmacro
:最初に読み込むファイルに記述しておきましょう
[macro name="notice"]
  [iscript]
  //スキップ時は表示しない
  if (TYRANO.kag.stat.is_skip != true) {
    //#変数をこのjsで使うための変数として格納
    var notice_num = tf.notice_sum

    //#noticeを見られるようにする
    $('#notice').show()

    //通知最後まで表示にかかる秒数を計算
    noticetime = notice_num * 4000

    //通知件数までfor文で同じ処理をする
    for (let i = 0; i < notice_num; i++) {
      //クロージャ、これを設定しないとfor内のsetTimeoutでは期待する結果が得られない
      (function(i){
        //fornumの番号は0からスタートしたくないのでi+1
        var fornum = i + 1
        //class名を設定
        var forclass = '.notice__tip-' + i
        var forclassspan = forclass + ' span'
        //一時的変数であるtf.notice_typeをこのjsで使うための変数として格納
        var changetype = eval("tf.notice_type" + fornum)
        //一時的変数であるtf.notice_textをこのjsで使うための変数として格納
        var changetext = eval("tf.notice_text" + fornum)
        //通知の装飾を決定
        $(forclass).addClass(changetype)
        //通知のテキストを設定
        $(forclassspan).text(changetext)
        setTimeout(function () {
          //通知表示中にスキップが開始されたら、以降の通知は表示しないようにする
          if (TYRANO.kag.stat.is_skip != true) {
            //通知を表示
            $(forclass).animate({ opacity: 1 }, { duration: 600, easing: 'linear' })
            setTimeout(function () {
              //通知を一定時間後削除
              $(forclass).animate({ opacity: 0 }, { duration: 600, easing: 'linear' })
            }, 3000)
          }
        }, i * 2000)
      })(i)
    }
    //通知の表示が終わったあとの処理
    setTimeout(function () {
      //#noticeを隠す
      $('#notice').hide()
      //notice__tipの装飾を削除
      $('#notice .notice__tip').removeClass('is-infoA is-infoB')
    }, noticetime)
  }
  [endscript]
[endmacro]

#
画面をクリックすると通知が表示されます。[p]

;通知を表示したいタイミングでこの記述を書く
[iscript]
  //通知の表示件数を指定
  tf.notice_sum = 4
  //通知の中身を指定
  tf.notice_type1 = 'is-infoA'
  tf.notice_text1 = '調査手帳に情報が追加されました。'
  tf.notice_type2 = 'is-infoB'
  tf.notice_text2 = '行動指針に情報が追加されましたね。'
  tf.notice_type3 = 'is-infoA'
  tf.notice_text3 = 'なんと！　調査手帳に情報が追加されました。'
  tf.notice_type4 = 'is-infoB'
  tf.notice_text4 = 'そうですか、行動指針に情報が追加されましたね。'
[endscript]
[notice]

#
通知が4件表示されました。[p]
通知は時間をおけば何度も表示できます。（表示されているタイミングで使うと、前に表示している通知の表示がおかしくなる）。[p]
繰り返し記述する場合も↑に書いている方法と同じです。
[s]

jsファイル

// /data/others/js/配下に「notice.js」という名前で保存

$(function(){
  // 通知用レイヤー追加
  $('#root_layer_system').after(
    '<div id="notice" style="display: none;"><p class="notice__tip notice__tip-0" style="opacity: 0;"><span></span></p><p class="notice__tip notice__tip-1" style="opacity: 0;"><span></span></p><p class="notice__tip notice__tip-2" style="opacity: 0;"><span></span></p><p class="notice__tip notice__tip-3" style="opacity: 0;"><span></span></p><p class="notice__tip notice__tip-4" style="opacity: 0;"><span></span></p><p class="notice__tip notice__tip-5" style="opacity: 0;"><span></span></p><p class="notice__tip notice__tip-6" style="opacity: 0;"><span></span></p><p class="notice__tip notice__tip-7" style="opacity: 0;"><span></span></p><p class="notice__tip notice__tip-8" style="opacity: 0;"><span></span></p><p class="notice__tip notice__tip-9" style="opacity: 0;"><span></span></p><p class="notice__tip notice__tip-10" style="opacity: 0;"><span></span></p></div>'
  )
})

ksファイルの記述から[html]が消えたのにお気づきでしょうか。
実は[html]で書いてしまうとhtmlが記述される位置の関係で[mask]などの画面処理に巻き込まれてしまい通知がうまく表示できないことがあります。
また、シナリオ進行時に影響がでないようにするため事前に「notice.js」で「#root_layer_system」要素の後ろに追加しています。
他のjs記述はコメントアウトの通りです。

まとめ

今回は「通知」を作成するために必要なhtml・css・jsを解説しました。
実際ゲーム画面でどんな挙動をしているか確認したい場合は、ゲーム「マダム・ポプスキンの憂鬱」をプレイしてみてください。

ノベルゲームコレクションの配信（ブラウザ・Windowsダウンロード版）https://novelgame.jp/games/show/6563

ふりーむの配信（Windowsダウンロード版）https://www.freem.ne.jp/win/game/28248

特設サイトhttps://totetike.rgr.jp/madam/

次回こそは「調査手帳の雑記以外」で利用している技術でjsとcssの合わせ技について解説予定です。

※この記事は2022年7月2日時点の内容をまとめたものです。

この記事が気に入ったらサポートをしてみませんか？