Simutrans 2019年の取り組み
本記事は、Simutrans Advent Calendar 2019 〜 12/23 本家フォーラムに投げてみて です
Simutrans っていう、最高なフリーでオープンソースな交通シミュレーション
それについての、2019年の私のたぶん独自な取り組みについて書きます
今年は1イシュー、本家フォーラムに投げてみての雑感です
[統合された本体改造]
・MUSIC LOADING FROM THE PAK DIRECTORY
・Auto UnderGround Mode follow convoi
・REFACTORING OF DISPLAY SETTINGS DIALOG CLASS
・Extend "Waiting For Clearance" Tooltip
・Extend TOOL_CHANGE_GAME_SPEED, logarithmic control mode
・他 不具合修正数件
意外と採用してもらえました。
[本体統合されてみてわかったこと]
・どうでもいいちょい足しは、価値を理解してもらえなくても入れてくれる
・反応が全くなくても、気がついたら入れてくれてる
・指摘された仕様変更やコーディングの修正は提案した人がやろう
・大きい独自機能 ... を入れやすくする準備のコーディング改善策は入れてくれる
・Google 翻訳でもなんとかなる
・本家フォーラムを勝手に想像していたよりも、ずっと親切でチャーミングだった
[宣伝 ~ MUSIC LOADING FROM THE PAK DIRECTORY]
pak専用 musicフォルダ拡張です。
pakフォルダに musicフォルダがあると、そのpakのマップではその music を読み込みます。
アドイン職人と楽曲製作者とが組んで、もっと独自の世界観を一緒に作り上げて楽しんで貰えたら嬉しいです。
これはやはり、ﾄﾏｿﾝがきっかけです。
思ったより面白がってもらえなかったんですね。アレはアレで、simutransのプレイの難しいところも愛そうじゃないか！っていう、大真面目なところもあったんですけれども。
その後、何曲か作ったんのですが、日本フォーラムでのウケも悪いので、もう出すのはやめたい。でも、曲はできる。できたら出したい。で、こんな改造を思いついたわけです。
[本家統合を目指す本体改造者へのエール]
これはどうしても私の性格に寄るところです。
思うに、相手のプレイスタイルを変えない程度の小さい機能に小分けして、徐々に提案していくのがいいと思います。加えて、如何にその変更の利益が皆にあるか、恒久的に本家そしてsimutransを高めるかを、誇張してでもでっち上げて訴えかけてみてください。
1つ例にとります。
・REFACTORING OF DISPLAY SETTINGS DIALOG CLASS
この本体改造は、UI上やプレイ上の変更は一切ありません。いいえ、メモリ使用量がちょっと減ります。これが本体への恒久的な貢献。それ以上の本音は、本家統合を諦めた独自UIのメンテナンス性の改善です。こういう手もあるわけです。
[さいごに]
Simutrans に限らず趣味、もしかしたら仕事や生活ですら、自由を脅かすのは家族・親族です。そして、なによりも自分の健康・意欲です。さあ、乱開発しましょう！
2本の直線セグメントを2次Bezierで繋いでみる ~ ただしJSON手書き
2本の直線セグメントを2次Bezierで繋いでみます。
制御点は2つの直線セグメントがそれぞれのる2つの直線の交点としています。
2本の直線セグメントを１セット（セグメント対）として、任意個数のセグメント対を配列として、JSONで手書きできます。
とりあえず JSON - 例 [1], [2] あたりを [描画] していただいて、数値を変えてみてください。
(元気なら、もっと直感的に操作できるものを canvas の練習で作りたいので、これについての説明はエコで。ごめんなさい。)
JSON - 例
<経緯>
↓ 路線図メーカーっていうのがあります。
↓ (便利そうかもと思いつつ、私はまだ使ったことがないのですが。ごめんなさい。)
これの開発関連で、
・2本の直線セグメント (離れた位置で直角) を滑らかに繋ぐ
・平行して複数本あっても繋いでいる間もぶつからない、変に間が開かない
・直線セグメントと曲線は滑らかに行き来
... みたいなお題が出てて、楕円弧で繋ぐんだそうだ。
なんとなく、狭い私だと、Bezierで良いんじゃないかと思えた。
やってみないことにはイメージもつかなかったので、やってみた。
... というわけです。
少なくとも JavaScript の canvas は 任意次数のBezier を各関数が用意されてるっぽいので、このサンプルでは簡単でした。
他の言語でも Bezier はあるんじゃないかなぁ。
そもそもどうなんでしょうね、Bezier じゃまずいケースがあるんでしょうか？
[参考文献]
【JavaScript】canvas にベジェ曲線を描画する
JavaScript テキストエリアの値を取得/設定するサンプル | ITSakura
【JavaScript】配列←→JSON文字列に変換する方法 – 株式会社シーポイントラボ ｜ 浜松のシステム開発会社
HTML5 Canvas の描画領域全体をクリアする | まくまくJavaScriptノート
真ん中に文字入れただけの画像を作ってみた
音をアップロードしようとすると、画像ファイルが必要になることがあります。
とりあえず作品名の文字が入っただけのものだけでも、手軽に欲しいものです。
地味に面倒です。ということで、作りました。
psd で使っていた Century っていうフォントにしようと思ったのですが、
canvas だと 何故か Gothic になってしまったので、serif にしてます。
よくわかりません。
<参考文献>
[69-8] Canvasでテキストを描画しよう
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_font
画像ファイルをありがちなサイズで表示させるのを作ってみた
ギターで押さえているフレットのMIDIファイルを出力
MIDIファイルをいじるWebコンテンツ on はてなブログ 〜 の検討
今回は、ギターで押さえているフレットのMIDIファイルを出力します。
MIDIファイル生成は、 jazz-softさん作の JZZ.js を使っています。
左側の音名がそのチューニング。右側の数字がフレット番号。[Pick]がOff(白背景)の時は弾かないものとし、MIDIに出力しません。
チューニングに"半音下げ"と"ドロップD+半音下げ"なるものがあるのは、私のギターがそれだからです。楽です、半音下げとドロップD。
入力しやすさを考えるに、ダイアグラムで入力したいところ。今回は、主たるMIDIファイルの出力をまず作りました。cssでこだわる部分は後回し。ここまで作ってみると、やっぱりダイアグラムが欲しい。
試しで音を鳴らしたいところ。
<参考文献>
labelにforを使わずに、cssだけでトグルボタンを作る
【HTML】出来るだけ押しやすいチェックボックスを作る｜リスティング広告の運用代行ならカルテットコミュニケーションズ
VRM を読み込んで ~ zangyouをチョップさせてみた
VRM - VR向け3Dアバターフォーマット - を読み込んでみます。
VRMのページ : https://vrm.dev/
今回は zangyou をチョップです。
フォントは helvetiker 。Helvetica じゃないの？と思いつつ、threejs搭載のTextGeometryを使ってみました。
音量部分はいつぞやのWebAudioAPIのサンプルからコピペ、無駄にミキシング & 1 ~ 4 kHz に反応です。反応するのはFile0の方だけ。File1は伴奏用ということで。しかし、今回については反応するFile0の方にドラムを入れたほうが楽しそう。
Drop files here
File0
File1
mixing source0 :
mixing source1 :
Analyser
| SmoothingTimeConstant : | |
| MinDecibels : | |
| MaxDecibels : |
| mixed | ||
| audio0 | ||
| audio1 |
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 で自作したモデル。Mac の Chrome でだけ。
"Three.js での回転" かつ "VRM での関節の回転"はそれぞれ手探り。
相変わらず肘が痛そうな方向に曲がっていそうです。
今回は、zangyouをチョップすべく、腰 ("J_Bip_C_Spine") を軽く曲げさせています。
漢字とか変形とかやってみたい。やれるのかな？
VRM読み込みあたりは、kiruroboさん のサンプルを参考にしています。
モデル使用に関する免責事項のお手本は、https://facevtuber.com/ さん。
[参考文献]
https://threejs.org/docs/#api/en/geometries/TextGeometry
pixiv three-vrm のサンプルをコピペしてみた
VRM - VR向け3Dアバターフォーマット - を読み込みます。
VRMのページ : https://vrm.dev/
今回は『pixiv three-vrm』です。blendshapesのサンプルをコピペしてみました。
Webアプリケーションで3Dアバターモデルを簡単に扱える『pixiv three-vrm』をOSSとして公開しました！3Dモデルの専門知識がない開発者の方でも「VRM」ファイルをより簡単に扱うことができます！ #VRoid
— VRoid公式 (@vroid_pixiv) September 12, 2019
詳細: https://t.co/psBwTYe3cy
GitHubリポジトリ: https://t.co/j9IU2h2Zax pic.twitter.com/Fsp2VLbpkW
Drop files here
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 で自作したモデル。Mac の Chrome でだけ。
表情が変わって、スカートが揺れてます。簡単！
これまでやってきたVRMはthree.js自体に組み込まれているらしいものでした。参考のしてきたのはkiruroboさん のサンプル。
blendshapesをいじるのに挑戦していましたが、全然動かせられていませんでした。
pixiv three-vrmはその辺りが揃っていた、サンプルも色々あって、実にありがたいです。
モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。
[参考文献]
https://github.com/pixiv/three-vrm
