SSブログ
お絵かき ブログトップ
前の5件 | -

C.P.U. フォーマット 2/2 [お絵かき]

前回の記事「C.P.U. フォーマット 1/2」はこちら

拡大画像
3色ペイント部分拡大画像

「2色ペイント」は2色が市松模様で並びます。
ABABABABABAB
BABABABABABA
ABABABABABAB
BABABABABABA
ABABABABABAB
BABABABABABA

「3色ペイント」は横方向には3色が、縦方向には2色が規則的に並びます。
ABCABCABCABC    ABCABCABCABC
BACBACBACBAC    BCABCABCABCA
ABCABCABCABC    ABCABCABCABC
BACBACBACBAC    BCABCABCABCA
ABCABCABCABC    ABCABCABCABC
BACBACBACBAC    BCABCABCABCA

「単色ペイント」はもちろん同色が連続しています。
AAAAAAAAAAAA
AAAAAAAAAAAA
AAAAAAAAAAAA
AAAAAAAAAAAA
AAAAAAAAAAAA
AAAAAAAAAAAA

この3種類のタイルペイントを効率よく格納するために考えられた方法が「縦方向変則RL圧縮」です。
横方向に圧縮しようとすると、「AB」「ABC」「AA」の3パターンを考慮しないといけないですが、縦方向だと、どのタイリングペイントでも、「2色が交互に並ぶ」か「1色が連続する」の2パターンだけを考慮すれば、効率的に圧縮が行えることになります。
しかし、「1色が連続する」のパターンを「2色が交互に並ぶ」場合のひとつと考えれば、考慮するパターンはひとつだけで済むことになります。



まず、PC-8801 や FM-8 のグラフィックは色数が8色なので、2³ = 8 ですから1ピクセルは3ビットで表せます 。
縦方向の2ピクセルを1パターンとして格納するには、2色分の色情報に6ビットが必要です。
1バイトは8ビットなので、残りの2ビットに「繰り返し回数」を格納します。
XXX  YYY  NN

XXX: 色1 
YYY: 色2
NN:  繰り返し回数

2ビットで表せるのは0から3までですが、繰り返し回数が1から3の場合は「繰り返し回数」にそのまま格納し、4以上の場合は「繰り返し回数」を0にして、次の1バイトに「繰り返し回数」を格納します。
例として色Aを黒色(ビットパターンでは000)、色Bを白色(ビットパターンでは111)と仮定すると、

繰り返し回数が3以下の場合
000 111 NN
N:  繰り返し回数(1~3)

繰り返し回数が4以上の場合
000 111 00 | NNNNNNNN
N:  繰り返し回数(4~100)

となります。

繰り返し回数が100回(200ピクセル分)までとなっているのは、FM-8 版の「お絵かきプログラム」の制約だそうです。
繰り返し回数が4以上の場合に、「回数 - 3」を格納するようにすれば、最長で258回(516ピクセル分)までを2バイトで済ませることができたのですが、互換性のためには仕方がありません。

画像の色情報は保存範囲の左上端から下(Y座標軸方向)へ走査され、下端へ到達すると右隣の列(X座標軸方向)の上端から走査が継続されます。


例として下のパターンを圧縮する場合、色2を赤色(ビットパターンでは010)、色6を貴色(ビットパターンでは110)、色7を白色(ビットパターンでは111)、色0を黒色(ビットパターンでは000)と仮定すると、
626026726726
262072672672
626000000726
260072672672
006026726726
262072672672
626026726726
262072672672
626026726726

実際に生成されるデータストリームは、
110 010 10 | 000 010 01 | 110 010 11 | 110 000 01 |
110 010 11 | 110 000 01 | 110 010 10 | 110 000 01 |
000 000 00 |  00000001  | 010 111 01 | 000 111 01 |
010 111 10 | 010 110 01 | 010 000 01 | 010 110 11 |
111 110 01 | 000 110 01 | 111 110 10 | 111 010 01 | 
111 000 01 | 111 010 11 | 110 010 01 | 000 010 01 |
110 010 10 | 110 111 00 |  00000010  | 010 111 00 | 
 00000001  | 010 110 00 |  00000010

となります。(合ってるのか?^^;)

元データのサイズは 9 pixels × 12 pixels × 3 = 324 bits
生成されたデータは 31 bytes × 8 = 248 bits
なので、圧縮率は 248 ÷ 324 ≅ 0.765 となります。



実際の画像では、

retro_024.png

前の記事でお絵かきした画像です。

PC-DOS 画像ファイル情報

「LEN :1945」となっています。16進数なので10進数に直すと、6,469 bytes です。
複雑な絵ではないので極端な例になってしまいますが、48 KB が約 6.5 KB になっているので圧縮率は約 0.135 です。



現在 Windows や Mac で使用されるデータファイルのフォーマットでは、ファイルの先頭に数バイトの識別用 ID が設けられる事が多いですが、当時はファイル名か拡張子で画像ファイルであるかどうかを「人間」が判別していました。 特に PC-DOS ではファイル名が29文字まで許されていたので全く困らなかったということもあります。

実際に圧縮されたデータがファイルに格納されるには、データストリームの前にヘッダが付きます。
横方向の画像サイズ、縦方向の画像サイズがそれぞれ2バイトのビッグエンディアンで格納されます。
640 × 200 サイズの画像だと、02 80 00 C8 となります。
エンドマークの類は存在しません。

追記ここから

実際に圧縮して格納されたデータのサンプルを 256 Bytes 分だけ載せておきます。

どんな絵が出来るのかはナイショです。

C.P.U. フォーマット ダンプ

追記ここまで



なかなか優秀な圧縮フォーマットだと思うの(手前味噌です^^;)ですが、皆さんの判定はどうでしょう?

C.P.U. フォーマット 1/2 [お絵かき]

ご心配をお掛けしましたが、ガベージコレクションも終了(笑)し、復活いたしました。




グラフィックエディタ関係の記事で色々な画像を紹介してきましたが、今回は画像データの圧縮についてです。

PC-8801シリーズや初期のFM-8/7シリーズでは、カラーグラフィックは全画面サイズで 640 pixels × 200 pixels の大きさがあります。
データサイズだと 640 pixels × 200 pixels × 3 planes = 384,000 bits = 48,000 bytes = 48 Kbytes です。
Microsoft の Disk BASIC が標準で使用していたディスクフォーマットだと、2D メディアの容量が 40 tracks × 16 sectors × 256 bytes × 2 sides で 327,680 bytes ですから、非圧縮状態で画像を格納しようとすれば、327,680 ÷ 48,000 ≅ 6.826 ということで、システムやローダーが無い状態でも6枚しか保存できないことになります。

ちなみに、当時はまだ5インチフロッピーディスクの値段が高く、一枚250~500円程度でした(発売当初は一枚1,500円程でした)。


「お絵かきプログラム」で作られたデータのサイズは 20 KBytes を超えるものもありましたが、非圧縮状態で保存すると 48 KBytes にもなってしまい、1枚のフロッピーには今までの半分程度の枚数しか保存できない上、パターンで塗りつぶされた領域の多い美少女キャラ画像をデータ圧縮をせずに保存するのは効率が悪いということで、美少女キャラ画像を効率よく圧縮するための方法が考案されました。
それが「C.P.U.フォーマット」です。




リン・ミンメイ
リン・ミンメイ

上の「リン・ミンメイ」の一部を拡大したのが下の画像です。
「Graphic Editor 88」だと拡大できる範囲が小さいので、PNG 形式に変換したものを Windows に付属の「ペイント」で拡大してあります。

拡大画像
拡大画像

肌色の部分には影の付き方に応じて合計4種類の「3色ペイント」が使用されています。
特に目の上の髪の毛の陰になっている部分は、色指定をあえて2色にすることで濃い影を表現していますし、瞳の中の色の付いた部分も同じ手法で描かれています。

髪の毛で光の当たっていない部分は「2色ペイント」が使用されています。
光源に近いベールの外側や髪の毛のハイライト部分は「単色ペイント」(通常のペイント)で表現されています。




複雑な配色を使ったクロマキーペイント(タイルペイント)ですが、『PC-8801 N88-BASIC の PAINT ステートメントで「タイルストリング指定」を使えば可能じゃないの?』 と言う声が聞こえてきそうなので、ちょいと補足しておきます。

N88-BASIC の PAINT ステートメントには、領域を指定されたタイルパターンで埋めるために「タイルストリング」と言う機能があります。

PAINT (100,100), <境界色>
とする代わりに、
PAINT (100,100), <タイルストリング>, <境界色>
と指定することで任意のパターンで領域を埋めることができます。

タイルストリング機能は、RGB それぞれの要素の横方向の塗りつぶしパターンを16進数に置き換えて文字列で指定することで、任意のパターンを使用した塗りつぶしが可能です。
文字列は先頭から、青、赤、緑の順で指定します。

例えば、
PAINT (100,100), CHR$(&&H55)+CHR$(0)+CHR$(&&HFF), 7
と指定すると、緑と水色の縦縞模様になります。
PAINT (100,100), CHR$(&&H55)+CHR$(0)+CHR$(&&HFF)+CHR$(&&HFF)+CHR$(0)+CHR$(&&H55), 7
と指定すると、緑と水色の市松模様になります。

タイルストリングの指定を増やすことで、縦方向の繰り返しパターンを増やすことはできますが、横方向のパターンは 8 pixel 固定なので、横方向に3色を並べた「3色ペイント」は不可能です。

『それなら、縦方向の「3色ペイント」にすればいいんじゃない?』 と言われそうですが、
FM-8 や PC-8801 のグラフィック画面は 640 pixels × 200 pixels で、ピクセル自体が縦方向に長いため、縦方向に3色を並べると綺麗なタイリングになりません。




単色ペイント/2色ペイント/3色ペイントを共に効率よく圧縮するために「縦方向変則RL圧縮」(当時は、いや、今だってそんな言葉はないかもね)が採用されました。
RL圧縮とは、同じパターンが連続して現れる場合、パターンと連続する回数を記録することで圧縮する方法です。

RL圧縮について詳しく知りたい方は、Wikipedia: 連長圧縮 へどうぞ。

拡大画像を見てもらえば分かるのですが、どのペイントでも縦方向は異なる2色か同じ色の繰り返しになっています。
ですから、縦方向の2ピクセルを1パターンとしてRL圧縮をすれば、単色ペイント/2色ペイント/3色ペイント共に効率よく圧縮できるはずです。


つづく

【転】 - グラフィックエディタ [お絵かき]

【承】 - 増殖と進化」へ戻る

「お絵かきプログラム」のクロマキーペイントは2色混合だけでなく3色混合もできるようになり表現力が向上したのですが、凝った絵を描こうとするとデータ量が増えるため、メモリ容量を気にしなければならないという状況が発生していました。

特に FM-8 版の「お絵かきプログラム」にはクレヨン効果やブラシ効果等の機能が追加されたため、これらの機能を使用するとデータ量が飛躍的に増えてしまうことがあった為です。
PC-8801 はBASIC のテキストをメモリの裏バンクに格納するため問題になりませんでしたが、FM-8 ではメインメモリに格納するため深刻な問題でした。

描画履歴をデータとして蓄積していく方式には、限界が見え始めていました。


その頃、発売されたのが SONY SMC-70 です。

SMC-70 は CP/M をベースとしたSONY FILER を基本OS としたマシンで、16色使用できるグラフィックや、オプションではあるがビデオ信号へのテロップ合成機能など、業務用放送機器を手がけている SONY だけあって、他社が発売していた8ビットパソコンとは一線を画すものでした。

SONY FILER Version 1.2J (SMC-777)(1983)(SONY)
SONY FILER Version 1.2J (SMC-777)(1983)(SONY)
画像は SMC-777 用のSONY FILER です。


SMC-70 用に別売で用意されていたのが「SONY Graphic Editor」です。

SONY Graphic Editor V1.1 - タイトル画面 (SMC-70)(1982)(Sony)
SONY Graphic Editor V1.1 - タイトル画面 (SMC-70)(1983)(Sony)

Graphic Editor V1.1 - 編集画面 (SMC-70)(1982)(Sony)
SONY Graphic Editor V1.1 - 編集画面 (SMC-70)(1983)(Sony)


画像の一部を拡大表示することでドット単位での編集が容易にでき、当時のグラフィックエディタとしては珍しく UNDO 機能も備わっていました。
また、SONY FILER が OS として存在することで画像データをファイルとして簡単に扱うことができ、画像同士の重ねあわせも可能でした。
描画履歴をデータとして蓄積していく方式だと絵が複雑になるのに比例して増えてゆくデータ量も、画像データをファイルとして保存すれば問題ありません。
「SONY Graphic Editor」の登場はお絵かきをしているメンバーたちにとっては、まさに大変衝撃的なものでした。

KCB では、BASIC を基本とした「お絵かきプログラム」の限界を認識し、PC-DOS(KCB製)を基本とする PC-8801 用のグラフィックエディタの開発を心に決めたのです。

つづく…

太古のお絵かき手順 2/2 [お絵かき]

前回の記事「太古のお絵かき手順 1/2」はこちら


ブラウン管へのラップの貼り付けが終われば、いよいよグラフィックエディタ88(以下GE88と略します)での作業です。

retro_024.png

今回は、この絵の制作過程を説明します。



《グラフィックエディタでの作業》


1. まず準備として、画面全体を2色でタイリングしておきます。

 2色で交互にタイリングしておくことで、画面上でドットが数え易くなります。


2. ラップに描かれた線画に沿ってトレースします。

手順2:トレース


3. トレースが終わったら、顔を描きます。

 顔は後で肌色をタイリングするため、単色で塗りつぶしておきます。

2804381487.png
 顔を描くと絵の全体イメージが掴み易くなります。


4. 髪を黒色で塗るための準備として、輪郭と「つや」を境界で囲みます。

2804435332.png


5. 髪の毛を単色で塗りつぶします。

2804452417.png
 GE88 はペイント時の境界色を複数指定できるので楽ですね。


6. 色変換で髪の毛を黒色に変換します。

2804464821.png
 境界線も含めて黒色に変換されました。


7. 髪の毛の「つや」の部分をダークグリーンに色変換します。

2804491316.png
 今回は範囲を指定して色変換しています。

2804514612.png


8. 背景をグレーにするための準備として、服の色を変えておきます。

2804570090.png
 黒/青のタイリングが黒/水色に変わりました。

2805015069.png
 はみ出した部分は手作業で修正…


9. 背景を色変換で灰色にします。

2805032208.png


10. 服の色を元に戻し、顔を色変換する準備をします。

2805142042.png


11. 最後に肌色の色変換をすれば完成です。

2806265486.png
 肌色の部分は複雑な3色タイリングになっています。



今回は太古の画像と寸分違わないモノを作成したので2時間ほど掛かりましたが、この程度の絵だと慣れれば1時間ほどで描けちゃいますね。

太古のお絵かき手順 1/2 [お絵かき]

太古のお絵かきの手順を再現してみました。


《用意するもの》
  • 元となる原画
  • トレーシングペーパー
  • 方眼紙
  • 食品用ラップ
  • 鉛筆/シャーペン
  • 油性ペン


トレーシングペーパーは、原画を写し取るのに使用します。
方眼紙は、原画を拡大/縮小するためのものです。原画が画像サイズと同じなら必要ありません。
食品用ラップは、パソコンの画面(当時はブラウン管)に貼り付けて、線画を写し取るために使用します。



《お絵かきの準備》

1. トレーシングペーパーを原画に重ね、鉛筆で元になる原画から輪郭を写し取ります。

2. 拡大/縮小が必要な場合は、トレーシングペーパーの下に方眼紙を重ね、マス目サイズの異なる別の方眼紙にフリーハンドで書き写すことで拡大/縮小します。
これで画面サイズと同じ大きさの線画ができました。

3. 線画の上に食品用ラップを重ね、油性ペンでラップに線画を書き写します。
出来上がった線画ラップは、上に保護用のラップを重ね、破れにくくしておきます。
上に重ねることで、擦れて消えることを防ぐ効果もあります。

4. ブラウン管に線画を書き写したラップを貼れば準備は完了です。
ブラウン管は静電気を帯びているので、簡単に密着してくれます。



《あの頃は…回想》

 普通は雑誌の巻頭カラーページの原画等を元にして書き写すのですが、つわものは布製カバンのキャラクタからトレーシングペーパーに書き写したそうです。

 最初は食品用ラップではなくアニメ用のセルを使う手を考えたのですが、店が10枚単位で小口売りをしてくれなかったので断念しました。
 当時のブラウン管モニタは映像面がフラットではなかったので、セルを貼り付けても密着しなかったため、見る位置によってズレが出ることも、セルを使うのをやめた理由の一つです。


この続き「太古のお絵かき手順 2/2」はこちら
前の5件 | - お絵かき ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。