スクラッチでアンダーテール風ピクセルアートの作り方

ゲーム作りのテクニック

今回つくるもの

今回は、アンダーテール 風のピクセルアートを簡単に作れる方法を解説していきます。その中でも戦闘シーンなどにある黒背景の中にピクセルアートの敵がいるようなものを作っていきます。ここではスクラッチのネコを白黒ピクセルアート化します。

スクラッチでアンダーテール風ピクセルアートの作り方

ステップ①

まずは、新規プロジェクトを作り、背景を黒くします。。ステージに黒い四角を描くだけです。

スクラッチでアンダーテール風ピクセルアートの作り方

そして、ネコのスプライトに移動して、

オレンジ色 →黒く塗りつぶす
輪郭の黒線→白色にする

とします。操作方法は以下の動画を参考にしてください。

ステップ②

つぎに、この画像をビットマップに変換します。左下にあるビットマップに変換のボタンを押すだけです。

ステップ③

次にコードのタブに移動して、以下のようにコードを書きます。🏴をおせば画像がピクセル化されます。ピクセルの効果の数値を変更すると荒くなったりきれいになったりします。(以下の画像ではみやすいように大きさを200にしています)

スクラッチでアンダーテール風ピクセルアートの作り方

ステップ④(応用)

ここまででもピクセルアートは完成ですが、自動的にピクセル化されるので細かな調整ができません。細かな調整をしてクオリティーを上げたいときは、WEBサービスを利用します。

画像を保存する

まずはさきほど作ったモノクロビットマップ画像を自分のパソコンに書き出します。(画像を右クリックすると出てきます)

スクラッチでアンダーテール風ピクセルアートの作り方

WEBツールに画像を取り込む

インターネットで「ドット絵 作成」と検索するといろいろなツールが出てきますが、今回はミニドット絵メーカーというWEBツールを利用します。ミニドット絵メーカーに移動すると以下のような画面が出てきます。

スクラッチでアンダーテール風ピクセルアートの作り方

新規ボタンをクリックすると、以下のようにサイズ選択画面になりますので、ここは50:50のままにしておいてください。

スクラッチでアンダーテール風ピクセルアートの作り方

OKボタンを押すと、以下のような画面になり、ドット絵の作成がスタートできます。自分で一からピクセルアートを作るのはとても大変なので、先ほど取り込んだ画像を読み込んでいきます。

スクラッチでアンダーテール風ピクセルアートの作り方

画像読み込みボタンを押して、先ほど保存したモノクロビットマップ画像を取り込みます。すると、以下のような画面になるので色数を3まで減らしてください。

スクラッチでアンダーテール風ピクセルアートの作り方

ピクセルアートを完成させる

これである程度のピクセルアートは完成されますが、ここから調整を入れていきます。まず灰色の部分をすべて黒く塗りつぶしていきます。塗りつぶしには鉛筆ツールか塗りつぶしツールを利用します。

スクラッチでアンダーテール風ピクセルアートの作り方

以下の動画のように色を塗っていきます。

次に、白の部分を黒くしたり、黒の部分を白くしたりして調整を入れていきます。

今回はこのような感じに仕上げてみました。

スクラッチでアンダーテール風ピクセルアートの作り方

書き出してパソコンに保存

ではこのピクセルアートを書き出してパソコンに保存します。PINGで書き出しボタンを押して保存します。

スクラッチでアンダーテール風ピクセルアートの作り方

スクラッチに取り込む

最後に、保存したピクセルアートをスクラッチに取り込んでいきます。コスチュームの左下の追加ボタンからコスチュームをアップロードを選択し、取り込んだピクセルアートを指定します。

スクラッチでアンダーテール風ピクセルアートの作り方

すると、以下のように白と透明のピクセルアートがアップされます。スクラッチで自動的にピクセル化するよりちょっといいものになると思います。

スクラッチでアンダーテール風ピクセルアートの作り方

アンダーテールのサンズ戦を作ってみよう

ピクセルアートができれば実際にゲームを作ってみましょう。サンズ戦の作り方がこちらの記事で紹介されていますので、参考にしてください。