MSXオンラインスプライトエディタ TinySprite の使い方

2025年1月3日 18:06

TinySpriteとは

MSX向けのオンラインスプライトエディタの紹介です。
自分も時々、デモ制作の際に使っているのですが、後のノートで利用したいという事情があり、簡単に使い方を説明しています。

長い間バージョンアップされてない気がしますが、ノート執筆時点のバーションは Ver 0.7.0です

便利な点

オンラインに公開されているので、スマホやPC以外の端末でもアクセスできる。→スキマ時間に編集できる、なたなか楽しいエディタです。

出力手段が豊富
BASIC ２パターン（サンプルコード付き）、アセンブラ形式２パターン（HEX,BIN）、C形式のデータ化ができます。
加えて、BackUP形式というテキスト形式は、ドットごとに文字を並べただけのベタ形式なので、手元のテキストエディタで加工して並べ替えたり置換したりできます。

不便な点

右クリックアクションが弱い
ブラウザ自身にも右クリックアクションが設定されてるので、消しゴムで１ドット消すたびに、後続イベントが発行してしまう。
矩形編集とか特定の色やレイヤーだけ移動するなど、細かいことはできない。

MSX2モード（カラースプライトモード）は、やや難アリで、１ライン単位で or 演算の相手方を計算してくれますが、近くのラインで同じ色を使っていても、組み合わせを最適化まではしてくれません。
（あと、サンプルコードがついてきません）
このへんは、仕様のほうがチョット複雑怪奇なので仕方ないですよね。
自動計算してくれるだけでもありがたい。

データコンバータとしての使い方が便利

絵を描いたら、[ Export Sprite ]ボタンを押すとダイアログが表示され
コード化されたデータが表示されるので、これを開発中のプログラムにコピーするというのが、大まかな流れです。

この時、Export As のオプションで出力形式を選択できます。
以下の形式の出力結果が得られます。

Data 形式 / Basic 形式

10 ' --- Slot 0
20 ' color 15
30 DATA 10,18,1F,17,17,77,1D,7F,0F,10,1F,3F,3F,3F,36,39
40 DATA 40,C0,C0,40,40,70,C6,E6,CE,EC,EC,FC,FC,FC,FC,F8
50 DATA *
60 SCREEN 2,2,0: GOSUB 10000
70 PUT SPRITE 0,(0,0),15,0
80 GOTO 80
10000 REM -- LOAD SPRITES
10010 S=BASE(9)
10020 READ R$: IF R$="*" THEN RETURN ELSE VPOKE S,VAL("&H"+R$):S=S+1:GOTO 10020

10 ' --- Slot 0
20 ' color 15
30 DATA &H10,&H18,&H1F,&H17,&H17,&H77,&H1D,&H7F
40 DATA &H0F,&H10,&H1F,&H3F,&H3F,&H3F,&H36,&H39
50 DATA &H40,&HC0,&HC0,&H40,&H40,&H70,&HC6,&HE6
60 DATA &HCE,&HEC,&HEC,&HFC,&HFC,&HFC,&HFC,&HF8
70 DATA *
80 SCREEN 2,2,0: GOSUB 10000
90 PUT SPRITE 0,(0,0),15,0
100 GOTO 100
10000 REM -- LOAD SPRITES
10010 S=BASE(9)
10020 READ R$: IF R$="*" THEN RETURN ELSE VPOKE S,VAL(R$):S=S+1:GOTO 10020

どちらも、BASIC言語で利用する形式です。データ自体は16進数表記で、違いは"&H" の有無ですので、好きな方選んでください。
「16進数とか意味わかんないから！」とか、オリジナルで１ドットに１文字割り当てる形式のデータを読みこむプログラムを組んでる人は、後ほどでてくる、ASM BIN 形式か、バックアップ形式から置換する利用方法が便利だと思います。

ASM hexa / ASM binary

; --- Slot 0
; color 15
DB $10,$18,$1F,$17,$17,$77,$1D,$7F
DB $0F,$10,$1F,$3F,$3F,$3F,$36,$39
DB $40,$C0,$C0,$40,$40,$70,$C6,$E6
DB $CE,$EC,$EC,$FC,$FC,$FC,$FC,$F8

; --- Slot 0
; color 15
DB 00010000b
DB 00011000b
DB 00011111b
DB 00010111b
DB 00010111b
DB 01110111b
DB 00011101b
DB 01111111b
DB 00001111b
DB 00010000b
DB 00011111b
DB 00111111b
DB 00111111b
DB 00111111b
DB 00110110b
DB 00111001b
DB 01000000b
DB 11000000b
DB 11000000b
DB 01000000b
DB 01000000b
DB 01110000b
DB 11000110b
DB 11100110b
DB 11001110b
DB 11101100b
DB 11101100b
DB 11111100b
DB 11111100b
DB 11111100b
DB 11111100b
DB 11111000b

アセンブラ（俗称でマシン語・機械語）形式のデータ出力で、16進数、2進数表記の２種類です。
MSX BASICの入門本でよく紹介されている、0と1でスプライトを定義しているソースを流用するなら、Bin 形式の末尾 "b"を、テキストエディタの一括置換で消すのが簡単でしょう。

C言語形式 Pascal形式

/* --- Slot 0 */
/* color 15 */
0x10,0x18,0x1F,0x17,0x17,0x77,0x1D,0x7F,
0x0F,0x10,0x1F,0x3F,0x3F,0x3F,0x36,0x39,
0x40,0xC0,0xC0,0x40,0x40,0x70,0xC6,0xE6,
0xCE,0xEC,0xEC,0xFC,0xFC,0xFC,0xFC,0xF8

{ --- Slot 0 }
{ color 15 }
$10,$18,$1F,$17,$17,$77,$1D,$7F,
$0F,$10,$1F,$3F,$3F,$3F,$36,$39,
$40,$C0,$C0,$40,$40,$70,$C6,$E6,
$CE,$EC,$EC,$FC,$FC,$FC,$FC,$F8

こちらも、表示の違いが、"0x"か、"$"かの違いですね。
C言語のクロス・コンパイラなんかを使う方には、インラインのアセンブラとどっちが便利かなぁ？な感じですが、お好みで。

💮バックアップ形式

TinySprite は、オリジナルの保存形式があります。

この形式で保存したデータは、Load BackUP のメニューから、再度エディタに取り込むことができます。
このデータ形式は、人間にとても優しい形式で、この機能こそがこのエディタの最大の強みとなります。

TinySpriteオンラインエディタ上で、複数のファイルをつなぎ合わせたり、データ順を変更することができませんが、サブのテキストエディタを使えば、コメントやデータ配列を目で見てどんな形状のキャラクタか確認しながら、複数のキャラクタデータを好みの並び順に組み換えて、他のデータスタイルに変換することができます。

TinySprite はエディタ上の操作で90°単位の回転や上下・左右の反転ができるので、たとえば

右向きキャラを複数書き、バックアップ形式のデータを取得する
TinySprite に読み込み、左右反転し再度バックアップデータを取得する
読み込みエリアでデータを結合して、読み込みを実行する

のような手順で、左右そろったデータセットが作成できるでしょう。

バックアップ形式データのフォーマット

!type
msx1
#Slot 0
...F.....F......
...FF...FF......
...FFFFFFF......
...F.FFF.F......
...F.FFF.F......
.FFF.FFF.FFF....
...FFF.FFF...FF.
.FFFFFFFFFF..FF.
....FFFFFF..FFF.
...F....FFF.FF..
...FFFFFFFF.FF..
..FFFFFFFFFFFF..
..FFFFFFFFFFFF..
..FFFFFFFFFFFF..
..FF.FF.FFFFFF..
..FFF..FFFFFF...

"." がドットが存在しない、場所のスペース、ほかは 0~Fのカラーコードを1ドット１文字で記述します。

データにインデントやカッコなどによるデータ区切りを設けていないシンプルなフォーマットなので、ExcelやGoogleSpreadSheetなんかに貼り付けても、壊れづらく、任意のエディタで加工が可能です。

２色以上の重ね合わせも対応しているので、テキストエディタでゴリゴリ描いて、エディタに戻すことができます。

”#”で始まるコメント行が設定されていますが、これは、エディタ上でのキャラクタ選択欄にも表示されますし、他の形式でデータ化した際にもその言語の形式で、コメントとして付加されますので、プログラム開発時に差し替えデータの埋め込み場所が迷子にならなくて良いかと思います。

読み込み時に、形式チェックもしているのでテキストエディタでの編集時は、文字数や空白に注意してください。