icon 横沢電鉄LED方向幕シミュレータ

使い方・概要など下の方にあります
2024.8.10更新 Ver. 2.0
2023.5.28公開 Ver. 1.0

タイプ
種別
行先
次駅表示
OFF  
 ON
次駅名
特急号車
特急種別
特急行先



当シミュレータは作者が作りたいように作っているものなので、ユーザーの方にとっては思うように動いてくれない場合があります。以下起こりそうなこと。

Q. 使い方は?
A. とりあえず実行欄の「ランダムな内容で実行」を押してみましょう

Q. 「6000形初期前面」「6000形後期前面」で何も表示されないことがあるよ
A. 前面タイプでは、種別・行先のどちらかを空欄にしてください

Q. 次駅表示を「する」にしたのに表示してくれないよ
A. 指示内容のタイプを「6000形後期側面」にしてください。次駅表示は6000形後期側面のみ対応です

Q. 表示がおかしくなったよ
A. 再読み込みをしてください。ボタン連打はバグの元なので控えましょう

当シミュレータは架空鉄道「横沢電鉄」のLED方向幕の動作をシミュレートしたものです
HTML5 canvas, CSS, javascriptで構成されています。
このシミュレータでは、コマごとに画像を用意し表示する方式ではなく、リアルタイムにコマ画像を生成する方式をとっています。
まず方向幕で使用される漢字や英数字を集めたマスター画像があり、そこから必要な文字だけを引っ張ってきて任意の表示が作られます。画像の生成はjavascriptによってブラウザ上で行われます。
こうすることで、文字の色や形を調整したいときもマスターを編集するだけで簡単に対応できます。
生成された画像を基に、今度はLED風画像が作られます。これも同様にjavascript, canvasで行われます。
結構負荷のかかる処理ですが、Ver.2.0ではLED風画像生成を効率化、スクロール表現を一新し、より高速になりました。
ぜひ遊んでみてください。

〈Ver.2.0更新内容〉

  • 発車標シミュレータでの技術をフィードバック
    • 次駅スクロールの処理を変更、軽量化
    • LED風画像生成の効率化
    • 画像生成のオプションをページ上で変更可能に
    • フォント情報をテキスト化
  • LED風画像生成関数の機能追加
    • 電球形状(丸/角)を追加
    • 幕切れ・劣化・珠切れを追加
  • 「7000形(特急)」で種別の日英交互表示を実装
  • bootstrapを導入してUIを更新
  • 行先自由入力を削除

Ver.1.0はこちら

〈フォントについて〉
フォントのソースは下記の通りです 漢字はjis第一水準まで対応

フォントソース
24ドットフォント(ゴシック)Noto Sansの字形をベースにエンゼシアが作成/左記に収録されていない漢字のみNoto Sans Mediumを24dotで二値化したもの
24ドットフォント(明朝)Noto Serifの字形をベースにエンゼシアが作成/左記に収録されていない漢字のみJFドットjiskan24h(全角文字はパブリックドメイン)
16ドットフォントJFドット東雲ゴシック16(パブリックドメイン)
16ドットフォント(太字)オリジナル
7×5dot英数字オリジナル

ここにあった行先自由入力機能は削除されました。

「LED方向幕メーカー(仮)」として別個で公開予定です。

ベースカラー info-circle
透過  
 次の色で描画
電球形状 info-circle
円  
 四角
電球サイズ info-circle
 inputイベントで値を表示px
電球間隔 info-circle
 inputイベントで値を表示px
電球ガンマ補正 info-circle
 inputイベントで値を表示
フレアガンマ補正 info-circle
 inputイベントで値を表示
フレア強さ info-circle
 inputイベントで値を表示
枠の太さ info-circle
 inputイベントで値を表示px
枠の色 info-circle
消灯されたLED(#000000)の対応 info-circle
描画を行わない  
 次の色で描画
消灯されたLED(#000001)の対応 info-circle
描画を行わない  
 次の色で描画

幕切れ幅(縦) info-circle
 inputイベントで値を表示px
幕切れ幅(横) info-circle
 inputイベントで値を表示px
劣化具合 info-circle
 inputイベントで値を表示
球切れ(3色LED用) info-circle
 inputイベントで値を表示%

以下開発用

表示サイズ縦
表示サイズ横
スクロール速度
 inputイベントで値を表示px/フレーム
文字間隔
 inputイベントで値を表示px

次駅表示への切替タイム
 inputイベントで値を表示ミリ秒
次駅表示日英切替タイム
 inputイベントで値を表示ミリ秒
「一定間隔ランダム表示」インターバル
 inputイベントで値を表示ミリ秒


↑表示一覧を作成します。この処理には数秒かかります

©エンゼシアの架空鉄道 トップページ