Nocker Pixel — Canvasゲームのための、ドットフォント。
NOCKER PIXEL 1616 × 16
サイズを並べて比べる
8 × 8 · @nocker/font/8x8
BITMAP FONT / VERSION 1
Canvasゲームのための、ドットフォント。
AIとCanvasゲームを開発するための、0と1のフォント。ドットを確認し、間隔を調整して、そのままゲームの描画に使えます。
文字ごとに色分け橙 = 空白文字紫 = 追加字間青 = 行間
文字間隔
文字間隔は送り幅に足す距離です。かなは16px、英数字は8px進み、小さい『ゃ・ゅ・ょ・っ』も16pxのセルを使います。文字自体を縮めず、次の文字の開始位置だけが変わります。
同じ『ふぉんと Font』で比較。0pxは104px幅、1pxは112px幅、2pxは120px幅です。文字の両端の空白もあるため、実際の線と線の隙間はこの設定値だけでは決まりません。3倍表示なら、追加した1pxは画面上で3pxになります。
0px 文字間隔 · 104px 全体幅
1px 文字間隔 · 112px 全体幅
2px 文字間隔 · 120px 全体幅
プレビュー
表示倍率
文字間隔
行間
- 論理ピクセル寸法
- 0 × 0px
- 行の高さ
- 20px / 12px
- 行数
- 0
16 × 16
8 × 8
文字を調べる
ひらがな
カタカナ
英数字
記号
ゲームでの組み合わせ
会話 · ひらがなと小さい文字
メニュー · カタカナと英語
ステータス · 数字と日本語
Canvasで描画する
データ仕様
このデータをゲームへ。AIにも渡せるデータ仕様と描画例です。
rows[y] は16進数で、上位の桁が左の点。1の点を正方形で塗り、advance + letterSpacing だけ進めます。座標と倍率は整数にし、文字列はNFCで正規化します。未収録文字は ? に置き換えます。
AI向け仕様をダウンロードインストール
npm install @nocker/font// Import the size you use; only its data is loaded.
import { renderText, layoutText } from '@nocker/font/16x16'
// 8 × 8: import { renderText } from '@nocker/font/8x8'
const canvas = document.querySelector('canvas')!
canvas.width = 960
canvas.height = 240
const ctx = canvas.getContext('2d')!
renderText(ctx, 'こんにちワールド、はじめもして。', {
x: 8, y: 8,
scale: 3,
letterSpacing: 1,
maxWidth: 304,
color: '#ffffff',
})
const { width, height } = layoutText('こんにちは', { maxWidth: 304 })const font = await fetch('/fonts/nocker-pixel-16.json')
.then(response => response.json())
const { width } = font.cell
const scale = 3, letterSpacing = 1
let penX = 0
ctx.fillStyle = '#fff'
for (const char of 'ふぉんと Font'.normalize('NFC')) {
const glyph = font.glyphs[char] ?? font.glyphs['?']
glyph.rows.forEach((row, y) => {
const bits = parseInt(row, 16)
for (let x = 0; x < width; x++)
if ((bits >> (width - 1 - x)) & 1) ctx.fillRect(
(penX + x) * scale, y * scale, scale, scale
)
})
penX += glyph.advance + letterSpacing
}ライセンスSIL OFL 1.1 / Misaki
16 × 16 — DotGothic16から変換。かな・英数字・記号を収録し、漢字は含みません。JSONにはOFL全文を同梱しています。 商用ゲームへの組み込み・改変・再配布が可能です。元の著作権表示とOFLを保持してください。フォント単体の販売はできません。
8 × 8 — 門真なむさんの美咲ゴシック（8×8）から変換。かな・英数字・記号を収録し、漢字は含みません。JSONにライセンスを同梱しています。 フリーソフトウェアです。改変の有無や商用・非商用を問わず、自由に使用・複製・再配布できます。無保証です。