人生

やっていきましょう

206日目

f:id:nihility:20200110210408p:plain

「Aseprite」を使って絵を描写した。初めての試みでいくつか躓いた点があったが、ネット上にある学習資料を参考にすればある程度の問題は解決できるということが判明した。学習において重要なのは「まずは指示に従う」というものである。自分は先人の言うことをまったく無視して勢いで突っ走り、気がついたら崖から振り落とされているという性格であるから、人生というものに挫折が多く、致命的な傷を背負いやすい。ここではその衝動を極力抑え、大人しく先人の指導を受け入れ、技術を身に着ける態度を学ぶ。

今日はまず何も考えずソフトを触ってみた。基本的な機能をいくつか確認したが、十分な理解が得られなかったので動画を参考にした。

www.youtube.com

今回参考にした動画はこの動画だ。2時間超の動画だが、後半のアニメーションに関しては見るのを省略した。前半部は機能の説明に注力している。以後使用方法が分からなくなったらこの動画に戻ろうと思う。

この動画で得た重要な知識がいくつかある。まずは絵の修正に関するコマンドだ。このソフトにはペイントにあるような「戻るボタン」と「進むボタン」が存在しない。そのため今まではいちいち消しゴムで修正するか、わざわざ書き直す以外に方法はなかった。だがこのコマンドを使用することでそれらの手間が大幅に省け、より効率的な作業が可能となった。

コマンドは次の通りだ。

・Ctrl + z →  絵を1つ戻す  

・Ctrl + y →  絵を1つ進める

 次に「左右対称オプション」だ。このコマンドは画面に任意の直線を引くと、その線を対称に書いたピクセルが反対方向にも描写されるというものだ。この直線は縦ばかりでなく横に引いて上下対称にすることもできる。また縦線と横線を組み合わせて、上下左右の対称描写が同時に可能となる。

このコマンドの利点は歩行グラフィックの描写に役立つ。GBStudioで使うドット絵の場合、大抵のRPGゲームボーイソフトがそうであるように、キャラクターはほとんど左右対称である(ただし動作の演出に必要な、前足後ろ足等の描写は除く)。縦線に沿って左右対称の描写をすることが可能になれば、作業効率はぐんと増す。

このコマンドは以下の通りだ。

・上のタブの「表示」  →  左右対称オプション

また動画では触れられていなかったと思うが、ドット絵描写においてマス目の表示は何より重要になる。この機能は通常のドット絵においては必ずしも必要ないが、GBStudioでの制作を前提とするならば必要不可欠となる。とりわけ歩行グラフィックは等間隔の区切りが可視化されている必要がある。これはPixel Peteの動画を見れば一目瞭然だ。

www.youtube.com

このコマンドを使うには以下の手順に従う。

・上のタブの「表示」→グリッド→グリッドの設定→x軸,y軸,幅,長さの設定

以後これら3つのコマンドを積極的に使っていきたい。

 

ソフトの使用に関する最低限の知識は揃えた。次にGBStudioの利用を前提とした歩行グラフィックの描写を行う。先日述べた通り、歩行グラフィックは16*16のマスを6つ並べたものになっている。そのためまずは6列の素材を背景に16ビット間隔でマス目を並べていく。マス目にy軸は不要なので、x軸を16にするだけで良い。

f:id:nihility:20200112223941p:plain

マス目の間にうっすらと見える青い線がグリッドである。次にこの素材をすべて抹消し、任意のマスの中心に対称線を引く。

f:id:nihility:20200112224758p:plain

 これでグリッドは設定された。あとは適当に絵を描いてみる。

f:id:nihility:20200112225323p:plain

完成した。だがこれでは動作の演出としては不十分である。先ほどの素材を参考にすると、左手と右足を前に出している(これは一般に「斜対歩」というらしい。この反対が「側対歩」といい、主にラクダの歩き方である)。そこで素材を参考に、動作を表現する。

f:id:nihility:20200112232401p:plain
完成した。足と手の演出に自信がないが、とりあえずはこれで完成とする。

 ところでコピー&ペーストについても触れておく必要がある。ペイントの場合範囲設定から右クリックでコピーとペーストを行っていたが、「Aseprite」では右クリックによるタブが設定されていない。このソフトでは次のように行う。

・コピーしたい部分を範囲設定  →  ctrl + ドラッグ 

 前面の次には後面だが、これは少しだけ工夫がいる。左の絵で右足が前に出ていたら、後面では左足を描くことになる。右の絵はその反対だ。そして後ろ足は前足のように前面に押し出すのではなく地面に足がついているため、ドットの範囲も狭くする必要がある。

f:id:nihility:20200112233951p:plain

左側の裏面を描写するとき、右側の表面をそのままコピー&ペーストした。そして顔の部分を消去し首元を黒く覆い、足のサイズをy軸に1ビット減らした。それをコピー&ペーストして右側に反転させた。これで完成した。

反転について興味深い事実がある。ペイントを利用した際、反転は右クリックのタブからでしか変更ができなかった。だが「Aseprite」ではそのまま範囲のふちをクリックしながら、左から右へとドラッグするだけでよかった。この機能は革新的であるように思われた(おそらく現在、あらゆる編集ソフトがそうなっているのだろう。自分は2000年代のペイント機能が、2020年の今もそのまま残っていると錯覚している)。

そして側面だ。左面の場合、右足と左手を前に出しているのだから、右足を前に出して右手と左足を下げている右向きの図面を描く必要がある。頭と首元の位置は動かさないとして、手と足をどのように演出すれば良いか。また横顔の輪郭をどう表現すれば良いだろうか。

f:id:nihility:20200113002018p:plain

あまり好ましい出来とはいえない。特に二枚目の右側の左足をうまく演出することができなかった。ここは課題点であるように思う。横向きのドット絵の歩行について詳しく学習する必要がある。逆にうまくいったと考えられる点は手の動きだ。7ビットを想定し、左に3ビット振れていたら今度は中心点を跨ぎ4ビット反対方向に振った。それでうまくできたように思う(あまり根拠がない)。

とりあえず次回はこのキャラクターをGBStudioで動かそうと思う。それを確認できたら今度はマップチップの制作に入りたい。マップチップは屋外と屋内を想定しなければならないため、注意がいる。

 

◆おまけ

「Aseprite」を使って練習用に絵を描いた。GBStudioとは直接関係ないが、記念になるため保存しておいた。左は「Aseprite」で初めて描いた絵で、右は2度目に描いたものだ。

f:id:nihility:20200113003338p:plain f:id:nihility:20200113003358p:plain

ウェブ検索結果

検索結果

ウェブ検索結)。