人生

やっていきましょう

207日目

今日は「Aseprite」で制作した素材を実際に「GB Studio」で動かす。その後に屋外のマップ素材の制作にあたる。

作業に入る前に前回のコマンドをここでおさらいする。どれも重要なコマンドであるため理解を定着させる必要がある。

**********************************************

◆元に戻す・やり直し

・Ctrl + z →  絵を1つ元に戻す  

・Ctrl + y →  絵を1つやり直す

◆左右対称オプション

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

◆マス目(グリッド)の表示

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

◆コピー&ペースト

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

 ***************************************************

 

それでは作業を開始する。

まずはGB Studioを起動して適当なファイルを開く。昨日作った素材をspriteファイルに入れてインポートする。するとGB Studio内に画像データが読み込まれる。それを確認したら「ワールド」タブで主人公の初期位置から、主人公の歩行グラフィックを変更する。

次はマップ上でキャラクターを動かす。サンプルプロジェクトでは、事前にマップチップが敷かれている。その場を借りて動作を確認したい。

 

f:id:nihility:20200113120855g:plain

動きがややぎこちない。前面後面は問題ないが、横向きの歩行に違和感がある。また下の部分の足が切れているため、修正する必要がある。そして横顔の輪郭にやはり違和感が残る(デブ)。これらを修正してもう一度やり直す。

f:id:nihility:20200113124104g:plain

後頭部の輪郭を1ビット内側にずらし、足の形を調整して線を引いた。違和感が微妙に残るが前よりは見やすくなった。歩行グラフィックはこれで完成とする。

以上をもってGB Studio上での動作が確認できた。次はマップの制作に入る。マップをとは、歩行グラフィックの背景として描かれた演出の総称である。ウディタではマップチップの配置によってパーツごとにマップを設定していたが、このGB Studioはそうではない。チップではなく一枚絵としてマップを描き、GB Studio上で当たり判定を設定するというものだ。そのため比較的自由な描写が可能となる(とはいえAseprite上でチップのように素材を配置・管理するため、実質ほとんど変わりはない)。

一番の問題は「何を」配置するかということだ。マップの素材を大別すると、屋外と屋内の2つに分けられる。屋外は地面、自然、環境、建造物、などが考えられる。具体的には土、草木、石、湖、海、洞窟、木の家、柵、ビルディング、看板などだ。屋内は家具が中心となるだろう。具体例は数えきれないが、階段、ベッド、机、たんす、カーペット、窓、椅子などが考えられる。

途方もない作業に見えるが、実際は意外と簡単に見える。あまり細部にこだわらず、まずは汎用性のある素材を中心に描いていけばいい。たとえば机の上のティーカップや、草木の複雑なバリエーションを描く必要はない。汎用性のある素材を組み合わせるだけで、最低限のマップは完成する。

今日は屋外の素材、すなわち地面、岩、草むら、木を作ってみたいと思う。上記の絵を見ればわかるが、地面は最も単純なもののひとつで、あまり工夫を必要としない。岩、草むら、木については、Pixel Peteの動画が挙げられており、学習が容易であると判断した。

www.youtube.com

絵は基本的に2つの側面があると思う。形状と質感だ。質感を描くには色のグラデーションを工夫したり、影や艶を描かなければならない。だが今回自分はそこまで追求しない。形状を優先する。

f:id:nihility:20200113162945p:plain

 サンプルプロジェクトのマップを前提に考える。ここでは地面は3種類存在する。平地(空白)、草むら、そして花だ。雑草と花は必ずしもこの素材の描き方に従う必要はない。たとえば地図記号の ll (田)のように表現してもいい。三本草のような形でも問題ない。

とりあえず「Aseprite」を起動してマップを編集する。平地と雑草、花を配置する。

 

f:id:nihility:20200113165819p:plain

地面が完成した。次は岩を制作する。

岩は4つの部分によって構成することができる。まずはアウトライン。次に光の当たる面、陰りのある面、そして影の面だ。幸いGB Studioのパレットには透明色を除いて4色しかない。そのためアウトラインを最も暗い色、次に暗い色を影、順に陰り、光の面と配置することができる。

f:id:nihility:20200113173709p:plain

これはサンプルプロジェクトの岩だ。レイアウトが黒、そして光の部分、陰りの部分、影の部分となるにつれて色が濃くなっている。この色合いを参考に石を作成する。

Pixel Peteの動画ではカッティングの重要性が語られていた。岩のアウトラインに影を足したサンプルの岩でも十分だが、実際の岩は様々な面を持っている。よりリアルな岩を演出するためには、カッティングを含め、その影を演出することが求められる。

動画では同じアウトラインの3つの岩を用意して、カッティングの差異によって全く異なる岩を表現することができていた。それに倣い、自分も独自のカッティングを演出することにした。

f:id:nihility:20200113174824p:plain

より重厚でリアルな岩を表現することができた。右上のサンプルプロジェクトの岩と比較すると、左下の岩は一層奥行きが感じられる。動画では更に一歩踏み込んだ解説をしていたが、とりあえずはこれで十分だと思う。

次に木を作成する。木は岩よりも複雑な形をしている。まず根から頭にかけて木と枝があり、枝には大抵葉がついている。とくに葉の影の演出が難しい。どう書いたら良いのかまるで分からない。サンプルプロジェクトについている木のグラフィックは重厚だが複雑な形をしていて、できればもっと簡易的な演出にしたい。

とりあえず動画をあたって確認することにした。だが動画は凝った影と艶の演出が中心で、木の形状については詳しく解説していなかった。幸いPixel Peteの挙げているGB Studio用のフリー素材があるため、それを参考にすることにした。

f:id:nihility:20200113180931j:plain

この木についてまず衝撃を受けたのは、幹を黒塗りにして良いということだった。それに葉の構造についてもさほど複雑でなく、枝を一切書いていない。色も中間色がなく明暗2色だけで表現している。この木を目標にしたい。大きさは16*16が縦に2マス分。よく見ればアウトラインが微妙に対称形なので、左右対称オプションを利用する。

f:id:nihility:20200113185032p:plain

とくに不満はない。はじめに左右対称オプションで幹を描き、頂点から葉を3段階つけていった。形状について多少違和感があるが、気になるほどでもない。強いて言えば3段目をもう少し広げた方が良かっただろう。それから左右対称を少し崩したほうがいい。それからマップ全体との調和を考えて、色合いを調整した。もう少し影があった方がよかったかもしれない。

今日はキャラチップの動作の確認と、屋外のマップの制作を行った。初めて取り組んだことばかりだが、ちゃんと目標をしっかり定め、ブレのないように行えばある程度の成果が得られるということがわかった。このことは自分の自信になった。

明日は屋内マップの演出、とくに家具を中心とした素材の制作を行いたい。時間があれば家の制作や、素材のテーマの方向性、ゲームのシステムについて考えたい。