SVGでサラダの国のトマト姫

ドラマ『遺産相続弁護士 柿崎真一』(主演三上博史)
面白いです。柿崎とはなが楽しい。
昭和テイストもあって好んで視聴しています。

svg-saladtomato-title

昭和の良さの一つでPCゲームの面白さがあります。夢中になっていた当時は、PCのグラフィックの描画速度がとても遅く、メモリ容量も貧弱でした。ゲーム画面が切り替わる度に、描画し終えるのを待たなければなりませんでしたが、それでも一つ一つのゲームが魅力に溢れ、わくわくするものばかりでした。
当時はプレイだけでなく、ゲームを作るってことにも意欲的ではあったのですが、オールアセンブラとなると、とても骨の折れる作業です。なので、長くは続きません。作り始めて数週間で飽きてしまって、またゲームをプレイしているうちに、ゲームを作りたくなり、という連鎖で、そうしてプログラミングにもハマっていったのかもしれません。

私の中でゲームは、プログラミングする際のモチベーションにもなるので、スキルアップ訓練に持って来いです。ただ、ゲーム作りで難しいのが「絵」。絵心がないので特にそう思うのですが、絵で行き詰まってしまうと、簡単にやる気が削がれてしまいます。その点レトロゲームなら、絵も簡単に描けてしまいますので、絶好の訓練材料になります。

さて、日々コマンドラインばかり見ているので、たまには、GUIツールを触ってみます。inkscapeです。レトロゲームの「サラダの国のトマト姫」を作って見たいと思います。絵だけです。

inkscapeを起動します。
saladtomato-001

ページを横向きにします。
saladtomato-002

元絵をリンクで読み込みます。ファイル名を付けておきます。
saladtomato-003

もう元絵を修正しませんので、新規レイヤーを追加して、お絵かきは新規レイヤーで行います。
saladtomato-005

矩形ツールを選択して、
saladtomato-006

枠を描きます。真っ黒になってしまうので、右クリックでフィル/ストロークを選択して、
saladtomato-008

塗りなしにします。
saladtomato-009

次はペンツールを選択して海面の線を引きます。
saladtomato-011

元絵のレイヤーを非表示にして、弾いた線を確認したら、バケツを選択し、
saladtomato-013

青色で塗ります。
saladtomato-015

他の海面の線を引いて、山を描きます。
saladtomato-020

次は、タイトルを描いて、
saladtomato-023

そのまま塗ろうとすると、海面の直線で分断されてしまうので、タイトルロゴだけ別レイヤにします。
saladtomato-024

色が濡れたら、全レイヤーを合成して、今回のタイトル絵の完成です。
saladtomato-026

「サラトマ」でも使われている描画技術、貧弱なメモリでたくさんの画像を保存するには、ビットマップ画像ではすぐにメモリ不足に陥りますので、直線と塗りつぶしでグラフィックスを見せるって技が流行っていましたね。ラスタ画像を連想させる技術が使われていたってことに、古くても新しさを感じます。

コメント

タイトルとURLをコピーしました