たかし@tak4: jsのstring型でドット絵を表現しました。string型の配列を作り、その場でjoinして1つの文字列にする。横幅は16ドットと決めてある。 const fish = ([ "0000000000000000", "0000000111111100", "1100011111111111", "0110111111110110", "1111111111111100", "0110111111111110", "1100011111111111", "0000000111111100" ].join("")); ↓16×8のドット絵を作り、縦に2倍にして表示。 <a class="link-in-note" href="https://pixelfed-tokyo.sgp1.digitaloceanspaces.com/public/m/_v2/913455706248965777/ffe7c43a6-a8b5f2/f9GzUPDuFdnL/ZURZjvEw2LRyQgF0BW2f7mvVV9gwzBAh40ggNfe1.png" target="_blank" rel="nofollow noopener">https://pixelfed-tokyo.sgp1.digitaloceanspaces.com/public/m/_v2/913455706248965777/ffe7c43a6-a8b5f2/f9GzUPDuFdnL/ZURZjvEw2LRyQgF0BW2f7mvVV9gwzBAh40ggNfe1.png</a>

Home | Notifications | New Note | Local | Federated | Search | Logout

Note Detail

たかし@tak4 (2026-01-30 01:16:13)
jsのstring型でドット絵を表現しました。string型の配列を作り、その場でjoinして1つの文字列にする。横幅は16ドットと決めてある。

const fish = ([
"0000000000000000",
"0000000111111100",
"1100011111111111",
"0110111111110110",
"1111111111111100",
"0110111111111110",
"1100011111111111",
"0000000111111100"
].join(""));

↓16×8のドット絵を作り、縦に2倍にして表示。

https://pixelfed-tokyo.sgp1.digitaloceanspaces.com/public/m/_v2/913455706248965777/ffe7c43a6-a8b5f2/f9GzUPDuFdnL/ZURZjvEw2LRyQgF0BW2f7mvVV9gwzBAh40ggNfe1.png


---Replies---

たかし@tak4 (2026-01-30 01:53:40)
前述の画像では見やすさのために512pxのcanvasに大きめに描画したけど、小さいcanvasをcssのtransformで拡大した方が効率が良いらしいのでさうする。js側の座標の計算が少しシンプルになった。canvasを使っても見た目の調整はcssの役割なんだね。

たかし@tak4 (2026-02-07 22:11:23)
カラーパレットを追加した (これ自体は数日前に作った)
文字列の0は透明、1-9に色を割り当てる。キャラごとに別々のパレットを適用できる。
https://pixelfed-tokyo.sgp1.digitaloceanspaces.com/public/m/_v2/913455706248965777/fbedcc803-0ec729/2db0o2U6J4P5/zePgF9nlEZglxtVy6KPzStKVKXdNpRFTPxMFSKJK.png