楽譜レンダラーを作っている
楽譜エディタを作るために1年くらい前から楽譜を描画するシステムを作っているsatake.icon 2022/06/16
動機
自分にも作れそうな気がした
musescoreのコードをチラ見してみて、あれだけ巨大でハイクオリティなアプリも地道な実装の積み重ねなんだなという感想を持った 楽譜エディタはすごい複雑なシステムだという思い込みがあって尻込みしていた。が、その認識が変わってきた ドローイングやテキスト編集ができるエディタのメーカーに転職して、タッチイベントの当たり判定も座標計算も結局は人間が頑張って実装してることを知れたというのも影響している
浄書を前提としないライトな楽譜エディタがほしい
美しい楽譜も、巨大なスコアも、五線じゃない音楽も書けて、できることは多いんだけどとにかく巨大なアプリケーションになっている。 ちょっとメモ程度に楽譜を書くみたいなことがお手軽にできるシステムではない
軽く耳コピしたりアレンジしたいことがあるので、ピアノの横に置いたスマホやタブレットでサッと済ませたい 楽譜編集UIだけ工夫すればいいと思いきや、意外と使い勝手の良い楽譜描画ライブラリが無い
abcjsならABC記譜法とセットだし、ライブラリそれぞれが想定してる用途の外側で使うとかゆいところに手が届かないもどかしさがある 好き勝手に改良するには楽譜レンダラーから自作したほうが結局早いし自由にものづくりできて楽しい
進捗
タイの入力🇹🇭
https://scrapbox.io/files/639406756999f3001e2b702c.mov
タイの描画🐟
https://gyazo.com/0b5dcd25794f3fdb4da6f0afc660f4aa
当たり判定できるようにした
https://scrapbox.io/files/637a16a15125e1001d8127d3.mov
半音
https://scrapbox.io/files/635ce97d24cf0d002389163a.mov
異なる音価を連桁で繋げられるようにした
https://scrapbox.io/files/6346d06994138c0022b62a2b.mov
フリックで小節線を選べるようにした
https://scrapbox.io/files/63382df7159b5a001ed9b88d.mov
小節線が打てるようになった
https://scrapbox.io/files/632ed47fa6ab04001d32120f.mov
プレビューまわりの地味な改良
https://scrapbox.io/files/632eaeda31317b001d2a7781.mov
16分, 32分の連桁も書けるようにした
https://scrapbox.io/files/6329753f12905d001d37d371.mp4
調整
https://gyazo.com/38dbf354b2711e73e6dc76890871e4e9
https://gyazo.com/a25f0ca68449649abe1071792b0e9c8d
連桁の傾きをいい感じにした
https://gyazo.com/cfc0c1b39621133fa7ad86b0f618eefa
キャレットのようなものを実装した
https://video.twimg.com/tweet_video/FNlDak6UUAIlbfE.mp4
連桁も書けるようになった
https://gyazo.com/95cd516c7ad2a67f13ad9500ce27db71
自作楽譜レンダラー
和音を実装した
https://gyazo.com/60ad17b69aa15025a393133fe4b8fc10
週刊 楽譜描画エンジンをつくる
https://gyazo.com/196cd72d008f8a86c6344a0789fcb1d3
https://gyazo.com/0002d0d960b39c6fc4eed207ef4c98d9
https://gyazo.com/3a75786fcf9b9c6d1f0de437729328a8