初心者向けドット絵：使い方説明書

インディー開発者は多くの場合、ゲーム デザイナー、プログラマー、作曲家、アーティストなど、複数の役割を同時に組み合わせる必要があります。 ビジュアルに関しては、多くの人がピクセル アートを選択します。一見するとシンプルに見えます。 しかし、それを美しく仕上げるには、多くの経験と特定のスキルが必要です。 このスタイルの基本を理解し始めたばかりの人向けのチュートリアルを見つけました。例として XNUMX つのスプライトを使用した特別なソフトウェアと描画テクニックの説明が含まれています。

背景

ピクセル アートは、ピクセル レベルで変更が加えられるデジタル アートの一種です。 主に 80 年代と 90 年代のビデオ ゲームのグラフィックスに関連しています。 当時、アーティストはメモリ制限と低解像度を考慮する必要がありました。 今日、ピクセル アートは、リアルな 3D グラフィックスを作成できるにもかかわらず、ゲームや一般的なアート スタイルとして依然として人気があります。 なぜ？ ノスタルジーはさておき、このような厳密な枠組みの中でクールな作品を生み出すのは楽しくてやりがいのある挑戦です。

ピクセル アートへの参入障壁は、従来のアートや 3D グラフィックスに比べて比較的低く、インディーズ開発者を惹きつけています。 しかし、それは簡単になるという意味ではありません 終了 このスタイルのゲーム。 私はクラウドファンディング プラットフォームでピクセル アートのメトロイドヴァニアを開発しているインディーズ開発者をたくさん見てきました。 彼らは XNUMX 年ですべてが終わると考えていましたが、実際にはさらに XNUMX 年かかりました。

メタルスラッグ3（アーケード）。 SNK、2000年

多くの人が作りたいレベルのドット絵は時間がかかり、短いチュートリアルもほとんどありません。 3D モデルを操作する場合、モデルの回転、変形、個々のパーツの移動、あるモデルから別のモデルへのアニメーションのコピーなどが可能です。 高レベルのピクセル アートでは、ほとんどの場合、各フレームにピクセルを注意深く配置するために多大な労力がかかります。

一般的に、私はあなたに警告しました。

ここで私のスタイルについて少し説明します。私は主にビデオ ゲームのピクセル アートを描いており、そこからインスピレーションを得ています。 特に、私はファミコン/NES、16 ビット コンソール、90 年代のアーケード ゲームのファンです。 当時の私のお気に入りのゲームのピクセル アートは、殺風景でミニマルというよりは、明るく、自信に満ちていて、きれい (でもきれいすぎない) と表現できます。 これは私自身のスタイルですが、このチュートリアルのアイデアとテクニックを簡単に適用して、まったく異なるものを作成することができます。 さまざまなアーティストの作品を探索して、好みのピクセル アートを作成してください。

柔らかい

ピクセル アートの基本的なデジタル ツールは、ピクセルを配置するためのズームとペンシルです。 線、形状、選択、移動、ペイントバケットも便利です。 このようなツールのセットを備えた無料および有料のソフトウェアが数多くあります。 最も人気のあるものと私自身が使用しているものについて説明します。

ペイント（無料）

Windows を使用している場合、組み込みのペイントは原始的なプログラムですが、ピクセル アートのためのすべてのツールが含まれています。

ピスケル （無料）

ブラウザ上で動作する、予想外の機能を備えたドット絵エディター。 作品を PNG またはアニメーション GIF としてエクスポートできます。 初心者にとっては優れたオプションです。

グラフィグスゲイル （無料）

GraphicsGale は、ピクセル アート専用に設計され、アニメーション ツールが含まれている、私が聞いた唯一のエディタです。 開発したのは日本のヒューマンバランス社。 Aseprite は 2017 年から無料で利用可能になっており、Aseprite の人気が高まっているにもかかわらず、依然として需要があります。 残念ながら、Windows でのみ動作します。

アセプライト （$）

おそらく現在最も人気のあるエディターです。 オープンソース、多くの機能、アクティブなサポート、Windows、Mac、Linux のバージョン。 ピクセル アートに真剣に取り組んでいて、まだ適切なエディタが見つからない場合は、これが必要なエディタかもしれません。

ゲーム会社スタジオ2 ($$+)

GameMaker Studio 2 は、優れた Sprite Editor を備えた優れた 2D ツールです。 独自のゲーム用のピクセル アートを作成したい場合は、すべてを XNUMX つのプログラムで行うことができるので非常に便利です。 今、私はこのソフトウェアを使用して作業しています UFO50、50 のレトロ ゲームのコレクション: GameMaker でスプライトとアニメーションを作成し、Photoshop でタイルセットを作成します。

フォトショップ ($$$+)

Photoshop はサブスクリプションで配布される高価なソフトウェアであり、ピクセル アート用に設計されていません。 高解像度でのイラストのレンダリングに携わっている場合、または私のように画像に対して複雑な操作を実行する必要がない場合を除き、購入はお勧めしません。 静的なスプライトやピクセル アートを作成できますが、専用のソフトウェア (GraphicsGale や Aseprite など) に比べて非常に複雑です。

他の

私のピクセルアートキット。 全部真っ黒です、今気づきました。

グラフィックタブレット ($$+)

手根管症候群を避けるために、デジタルイラスト作業にはグラフィックタブレットをお勧めします。 治療するよりも予防​​する方がはるかに簡単です。 ある日、あなたは痛みを感じるでしょう、そしてそれは増加するだけです - 最初から自分自身の世話をしてください。 以前はマウスで絵を描いていたため、キーを押す必要があるゲームをプレイするのが難しくなりました。 現在Wacom Intuos Pro Sを使用しています。

手首サポート ($)

タブレットが手に入らない場合は、少なくとも手首のサポートを入手してください。 私のお気に入りは、Mueller Green Fitted Wrist Brace です。 残りの部分はきつすぎるか、十分なサポートが得られません。 キャリパーはオンラインで問題なく注文できます。

96×96ピクセル

ファイナルファイト。 カプコン、1989年

始めましょう！ 96x96 ピクセルのキャラクター スプライトから始めましょう。 例として、スケールがわかるようにオークを描いてファイナルファイトのスクリーンショット（上の写真）上に配置してみました。 これ большой ほとんどのレトロ ゲームのスプライト、スクリーンショット サイズ: 384x224 ピクセル。

このような大きなスプライトでは、私が話したいテクニックを示しやすくなります。 ピクセル単位のレンダリングは、あなたがよく知っている伝統的な芸術形式 (描画や絵画など) にもより似ています。 基本的なテクニックをマスターしたら、より小さなスプライトに進みます。

1. パレットを選択する

ピクセル アートにおけるピクセルは、他のデジタル領域よりもはるかに深い概念です。 ピクセル アートは、色などの制限によって定義されます。 適切なパレットを選択することが重要であり、それはスタイルを決定するのに役立ちます。 ただし、最初はパレットについて考えず、既存のパレットの XNUMX つ (またはランダムな色をいくつか選択するだけ) を選択することをお勧めします。いつでも簡単に変更できます。

このチュートリアルでは、作成した 32 カラー パレットを使用します。 UFO50。 ピクセル アートの場合、多くの場合、32 色または 16 色から組み立てられます。 私たちのものは、ファミコンと PC エンジンの間のどこかに現れる架空のコンソール用に設計されています。 それを選択することも、他のパレットを選択することもできます。チュートリアルは、選択したパレットにはまったく依存しません。

2. 大まかな概要

鉛筆ツールを使用して描画を開始しましょう。 通常の紙とペンと同じように下絵を描いてみましょう。 もちろん、ピクセル アートと従来のアートは、特にこのような大きなスプライトに関しては重なります。 私の観察によると、優れたピクセル アート アーティストは少なくとも手で描くのが得意であり、その逆も同様です。 したがって、描画スキルを向上させることは常に役立ちます。

3. 輪郭の精緻化

輪郭を微調整します。余分なピクセルを削除し、各線の太さを XNUMX ピクセルに減らします。 しかし、正確に何が余分だと考えられるのでしょうか？ この質問に答えるには、ピクセルの線と不規則性を理解する必要があります。

不規則性

ピクセル アートで XNUMX つの基本的な線、直線と曲線を描く方法を学ぶ必要があります。 ペンと紙の場合は筋肉のコントロールがすべてですが、私たちは小さな色のブロックを操作します。

正確なピクセル ラインを描画するための鍵は、ギザギザです。 これらは、線の滑らかさを損なう単一のピクセルまたは小さなセグメントです。 前にも言いましたが、ピクセル アートでは XNUMX つのピクセルが大きな違いを生むため、凹凸があると全体の美しさが損なわれる可能性があります。 紙に直線を描いていると、突然誰かがテーブルにぶつかったと想像してください。ピクセル アートの凹凸は、ランダムな波線のように見えます。

Примеры：

ダイレクト

曲線

曲線に不規則性が現れるのは、線分の長さが徐々に増加しなかったり、徐々に減少したりする場合です。

バンプを完全に避けることは不可能です。お気に入りのレトロ ゲームには必ずバンプがあります (もちろん、ピクセル アートが単純な形だけで構成されている場合は別です)。 目標: 凹凸を最小限に抑えながら、必要なものをすべて表示します。

4.最初の色を適用します

塗りつぶしまたはその他の適切なツールを使用してキャラクターに色を付けます。 パレットを使用すると、この部分の作業が簡素化されます。 ソフトウェアでパレットの使用が提供されていない場合は、上記の例のように画像内にパレットを直接配置し、スポイトを使用して色を選択できます。

左下隅に私たちの友人、会いましょう、ボールを描きました。 これにより、各段階で何が起こっているのかを正確に理解することが容易になります。

5. シェーディング

影を表示します。スプライトに暗い色を追加するだけです。 こうすることで画像が立体的に見えます。 オークの左側の上に光源が XNUMX つあると仮定しましょう。 これは、キャラクターの上と前にあるすべてのものが照らされることを意味します。 右下に影を追加します。

フォームとボリューム

このステップが難しい場合は、単なる線や色ではなく、XNUMX 次元の形状として描画すると考えてください。 形状は XNUMX 次元空間に存在し、ボリュームを持つことができ、影の助けを借りて構築します。 これは、キャラクターを詳細なしで視覚化し、ピクセルではなく粘土でできていることを想像するのに役立ちます。 シェーディングは単に新しい色を追加することではなく、形を構築するプロセスです。 適切にデザインされたキャラクターでは、細部によって基礎となる形状が隠されることはありません。目を細めると、大きな光と影の塊が見えるでしょう。

アンチエイリアシング（アンチエイリアシング）

新しい色を使用するたびに、アンチエイリアス (AA) を適用します。 XNUMX つの線分が交わる角に中間色を追加することで、ピクセルを滑らかにするのに役立ちます。

灰色のピクセルは線の「切れ目」を和らげます。 線分が長いほど、AA セグメントも長くなります。

オークの肩にAAを乗せるとこんな感じです。 筋肉の曲線を示すラインを滑らかにする必要があります

アンチエイリアシングは、ゲームで使用されるスプライトを超えて、または色が不明な背景に対して拡張すべきではありません。 たとえば、明るい背景に AA を適用すると、暗い背景ではアンチエイリアスが醜く見えます。

6. 選択概要

以前は輪郭が完全に黒だったので、スプライトが非常に漫画っぽく見えていました。 絵がいくつかのセグメントに分割されているように見えました。 たとえば、腕の黒い線は筋肉組織とのコントラストが強すぎるため、キャラクターの一貫性が低下します。

スプライトがより自然になり、セグメンテーションが目立たなくなると、文字の基本的な形状が読みやすくなります。 これを行うには、選択的なアウトラインを使用します。つまり、黒いアウトラインを明るい色のアウトラインに部分的に置き換えます。 スプライトの照らされた部分では、最も明るい色を使用することも、スプライトがネガティブ スペースに接している場合は、輪郭を完全に削除することもできます。 黒の代わりに、影に選択した色を使用する必要があります。こうすることで、(筋肉、毛皮などを区別するために) セグメンテーションが維持されます。

この段階で暗い影も追加しました。 その結果、オークの皮膚には XNUMX つのグラデーションの緑色が現れました。 最も濃い緑色は、選択的なアウトラインと AA に使用できます。

7. 最後の仕上げ

最後に、キャラクターの準備が整うまで、または次のキャラクターに進むまで、ハイライト (スプライト上の最も明るい点)、詳細 (イヤリング、スタッド、傷跡) やその他の改善を追加する価値があります。

この段階で適用できる便利なテクニックがいくつかあります。 図面を水平に回転します。これは、比率や陰影の間違いを特定するのに役立ちます。 色を削除することもできます。彩度をゼロに設定して、どこで影を変更する必要があるかを理解します。

ノイズの作成 (ディザリング、ディザリング)

これまでのところ、主に大きくて実線のシャドウ領域を使用してきました。 しかし、ディザリングという別のテクニックがあり、これを使用すると、XNUMX 番目の色を追加せずに、ある色から別の色に移ることができます。 以下の例を見てください。

上部の暗い色から明るい色へのグラデーションでは、何百もの異なる青の色合いが使用されています。

平均的なグラデーションでは XNUMX 色しか使用されていませんが、それでも同じ色の色合いが多すぎます。 いわゆるバンディングが発生します（英語のバンド - ストライプに由来します）。太い均一な縞があるため、目の焦点は色自体ではなく、色の接触点にあります。

一番下のグラデーションにはディザリングを適用しました。これによりバンディングが回避され、XNUMX 色のみが使用されます。 さまざまな強度のノイズを作成して、色のグラデーションをシミュレートします。 この技術は、印刷で使用されるハーフトーン (ハーフトーン画像) に非常に似ています。 イラストやコミックの点描（粒子の粗い画像）だけでなく。

オークでは、テクスチャを伝えるためにかなりディザリングしました。 ピクセルアーティストの中には、それをまったく使用しない人もいれば、逆に恥ずかしがらずに非常に上手にそれを行う人もいます。 ディザーは、単色で塗りつぶされた広い領域（上のメタルスラッグのスクリーンショットの空を見てください）、または粗く不均一に見えるべき領域（汚れなど）で最もよく見えることがわかりました。 使い方は自分で決めてください。

大規模で高品質のディザリングの例を見たい場合は、80 年代のイギリスのスタジオである The Bitmap Brothers のゲーム、または PC-98 コンピューターのゲームをチェックしてください。 それらはすべて NSFW であることに注意してください。

カキュセイ（PC-98）。 エルフ、1996
この画像には 16 色しかありません。

8. ラストルック

ピクセル アートの危険性の XNUMX つは、(構造とスタイルの制限により) 簡単で単純に見えることです。 ただし、スプライトの調整に膨大な時間を費やすことになります。 それは解く必要があるパズルのようなものです。だからこそ、ピクセル アートは完璧主義者を惹きつけます。 XNUMX つのスプライトにそれほど時間がかかるべきではないことに注意してください。スプライトは、非常に複雑な部分のコレクションのほんの一部にすぎません。 全体像を見失わないことが重要です。

たとえあなたのピクセル アートがゲーム用ではないとしても、時には「もう十分だ!」と自分に言い聞かせる価値があります。 そして先に進んでください。 スキルを向上させる最善の方法は、できるだけ多くのトピックを使用して、最初から最後までのプロセス全体をできるだけ何度も繰り返すことです。

また、スプライトをしばらく放置しておくと、後で新鮮な目で見ることができるので便利な場合もあります。

32×32ピクセル

最初に 96x96 ピクセルの大きなスプライトを作成しました。そのサイズでは、ピクセルを使用して描画またはペイントすることに似ているからです。 スプライトが小さいほど、表示されるべきものとの類似性が低くなり、各ピクセルの重要性が高くなります。

スーパーマリオブラザーズでは、 マリオの目は、上下に重なったわずか XNUMX ピクセルです。 そして彼の耳も。 キャラクタークリエイターの宮本茂氏は、口ひげは鼻を顔の他の部分から分離するために必要だったと述べた。 したがって、マリオの主な特徴の XNUMX つは、単なるキャラクター デザインではなく、実用的な策略です。 これは、「必要は発明の母」という古い知恵を裏付けるものです。

32x32 ピクセルのスプライトを作成する主な段階は、スケッチ、色、影、さらなる微調整など、すでによく知られています。 ただし、このような状況では、最初のスケッチとして、サイズが小さいため、輪郭を描く代わりに色付きの図形を選択します。 色は輪郭よりもキャラクターを定義する上で重要な役割を果たします。 マリオをもう一度見てください、彼には輪郭がまったくありません。 興味深いのは口ひげだけではありません。 彼のもみあげは耳の形を決定し、袖は腕を示し、全体的な形は多かれ少なかれ体全体をはっきりと示しています。

小さなスプライトの作成には常に妥協が伴います。 ストロークを追加すると、影のためのスペースが失われる可能性があります。 キャラクターの腕と脚がはっきりと見える場合、頭はおそらくそれほど大きくないはずです。 カラー、選択ストローク、アンチエイリアスを効果的に使用すると、レンダリングされたオブジェクトは実際よりも大きく表示されます。

小さなスプライトの場合は、ちびスタイルが好きです。キャラクターはとてもかわいく見え、大きな頭と目を持っています。 限られたスペースでカラフルなキャラクターを作成するための素晴らしい方法であり、全体的に非常に素晴らしいスタイルです。 ただし、キャラクターの機動性や強さを示す必要がある場合は、頭のスペースを減らして体をより力強く見せることができます。 それはすべてあなたの好みと目標によって異なります。

チーム全員が集結しました！

ファイルフォーマット

この結果はピクセル アーティストを不安にさせる可能性があります

表示されている画像は、画像を JPG で保存した結果です。 ファイル圧縮アルゴリズムにより、一部のデータが失われました。 高品質のピクセルアートは最終的に見栄えが悪くなり、元のパレットに戻すのは簡単ではありません。

品質を落とさずに静止画像を保存するには、PNG 形式を使用します。 アニメーションの場合 - GIF。

ピクセルアートを適切に共有する方法

ソーシャル ネットワークでピクセル アートを共有することは、フィードバックを得たり、同じスタイルで活動する他のアーティストと出会うための素晴らしい方法です。 ハッシュタグ #pixelart を使用することを忘れないでください。 残念ながら、ソーシャル ネットワークでは、尋ねることなく PNG を JPG に変換することがよくあり、エクスペリエンスが悪化します。 さらに、画像が変換された理由は必ずしも明らかではありません。

さまざまなソーシャル ネットワークに必要な品質でピクセル アートを保存する方法については、いくつかのヒントがあります。

Twitter

Twitter 上で PNG ファイルを変更しないようにするには、256 色未満を使用するか、 確実にファイルの最長辺が 900 ピクセル未満であることを確認してください。 ファイルサイズを少なくとも 512x512 ピクセルに増やします。 また、スケーリングは 100 の倍数 (200% ではなく 250%) になり、シャープなエッジが維持されます (Photoshop の最近傍)。

Twitter投稿用のアニメーションGIF 持っている 重さは 15 MB 以下です。 画像は少なくとも 800x800 ピクセルでなければならず、ループするアニメーションは XNUMX 回繰り返す必要があり、最後のフレームは他のフレームの半分の長さでなければなりません。これが最も一般的な理論です。 ただし、Twitter が画像表示アルゴリズムを常に変更していることを考えると、これらの要件をどの程度満たす必要があるかは不明です。

Instagram

私の知る限り、品質を落とさずに写真を Instagram に投稿することは不可能です。 ただし、少なくとも 512x512 ピクセルに拡大すると、確実に見栄えがよくなります。

出所： habr.com