Aseprite：テーマの作り方

こんにちは、asepriteでテーマを調整する方法についての私のガイドへようこそ。 Asepriteテーマでは、このチュートリアルを使用してプログラムの外観を決定し、スタイルに合わせてasepriteをパーソナライズすることができます。 テーマは、透明な背景を示すチェッカーボードや、[設定]メニューの独自のセクションで調整できるグリッドなど、キャンバスで使用される色には影響しません。 Zipファイルを作成するにはWinrarのようなプログラムが必要です。 私はあらゆる種類のコーディングでダミーなので、これはほとんどの場合、「この効果のためにこの番号を別の番号に置き換える」種類のチュートリアルであり、あまりにも奇抜なものではありません。
------------------------

とにかく、最初に独自のテーマを作成するために、デフォルトのasepriteテーマのコピーを作成します。 これを行う最も簡単な方法は、[テーマ]メニュー（[編集]->[設定]->[テーマ]）に移動し、[デフォルト]を選択して[フォルダーを開く]をクリックすることです。
------------------------

すべてのファイルをコピーしてから、ドキュメント/ダウンロード/写真などのアクセス可能な場所に移動します。 そこで、あなたはあなた自身のフォルダを作り、あなたが望むものに名前を付けることができます。私は、asepriteが持っていると思われる命名スキーム（「nameoftheme-theme」）に従うことをお勧めします。
------------------------

ファイルは次のとおりです。「LICENSE」ファイルは、テーマの配布/販売などを計画している場合を除いて、実際にいじる必要のないテキストファイルです。 「パッケージ」ファイルは、テーマに関するプロジェクト情報のようなものです。 「sheet.aseprite-data」ファイルは、asepriteが生成するファイルであり、これをいじる必要はまったくないと思います。 「シート」ファイルは、すべてのアイコン/ UI要素の画像です。ここにあるすべてのものは、色を変更したり、心ゆくまで完全に再描画したりできます。 最後に、「テーマ」ファイルは、色、サイズ、フォント、アイコン/ UI要素のサイズ、「シート」ファイル上のアイコン/ UI要素の位置とその名前を調整するために使用するものであり、多くのことを確信しています。もっと。 まず、「パッケージ」ファイルに焦点を当てて開始する必要があります。 それを選択して右クリックし、メモ帳または同等のもので開きます。 （特別なヒントです。Ctrlキーを押しながらスクロールすると、メモ帳のテキストのサイズを調整できます）
------------------------

いくつかのコードが表示されますが、幸運なことにそれほど多くはありません。 テキストを変更するときは、コンマと引用符を削除しないでください。 幸い、デフォルトのコピーを変更しているので、実際のデフォルトファイルは常にそこにあるはずです。 とにかく、最初に「aseprite-theme」の名前をこれらのファイルが含まれているフォルダーの名前に変更します。次に「AsepriteDefaultTheme」の名前をテーマの名前に変更します。 残りの部分も調整できますが、ほとんどの場合、テーマを他の人と配布または共有する場合にのみ重要です。 最後に、「id」と「path」という単語の横に「デフォルト」が表示されます。これは実際には名前を変更する必要があり、テーマの名前に変更します。 次に、ファイルを保存して終了します。
------------------------

これで、いつでも、winrarを使用してtheme-you-madeのフォルダーをzipに圧縮し、新しい拡張機能/テーマとしてasepriteに追加できます。 テーマを作成しているので、頻繁にテストすることをお勧めします。これは面倒な作業になる可能性があります。 しかし、何か間違ったことを調整して、それが何であるかを知らないよりはましです。 したがって、テーマを視覚的に調整する方法を紹介する前に、後で作成するときにどのように見えるかを確認できるように、テーマをasepriteに追加する方法を説明します。 まず、ZIPに変換する必要があります。圧縮するには、winrarがインストールされているフォルダを右クリックし、[アーカイブに追加...]をクリックするだけです。必要なのはアーカイブ形式でZIPを選択することだけです。 これにより、プロジェクトのZIPコピーが作成されます。 ZIPの名前を気にする必要がないので、mytheme（19645）という名前でも、「パッケージ」ファイルで調整したもので問題ありません。
------------------------

その後、asepriteにテーマをインストールするには、[拡張機能]メニュー（[編集]->[設定]->[拡張機能]）に移動し、[拡張機能の追加]をクリックします。 次に、zip /プロジェクトフォルダーを配置した見つけやすいフォルダーに移動し、ZIPをダブルクリックして拡張機能として追加します。 次に、テーマを適用するには、[テーマ]メニューに切り替えて、リストからダブルクリックします（テーマを選択して[OK]を押すか、適用してもテーマが変更されない場合は、ダブルクリックが非常に重要です。自分のテーマをXNUMX時間ほど正しく作成していなかったと思います）。 次に、拡張機能メニューに戻り、準備ができていない場合はテーマをアンインストールすることを忘れないでください。
------------------------

これで、テーマに合わせて実際に変更する準備が整いました。 プロジェクトの解凍バージョンに戻ります。 最初に「シート」ファイル。msペイントは透明度をサポートしていないため、このファイルをMSペイントで開かないでください。 もちろん、このファイルをasepriteで調整することをお勧めします。 最初に、スライスを示す多くの線に気付くでしょう（それらを表示したくない場合は、[表示]->[表示]->[スライス]に移動できます）。 asepriteの作成者はこれを私たちに含めており、各アイコン/ 9splice/ectのスプライトのサイズを示しています。 簡単な色の変更のテーマについては、それらが示すボックス内にとどまるようにしてください。 独自のスプライトシートを作成することもできます。「テーマ」ファイルに到達したら、置き換えるものの場所をこの画像ではなくその画像にリダイレクトできます。 アセプライトを頻繁に使用したことがある場合は、ここでほとんどのアイコンを認識できるでしょう。UIでエッジが丸いものを探してください。エッジが丸い場合は、9スプライスであり、このシートに示されています。 一部の色には透明度があり、asepriteのデフォルトの灰色のチェッカーボードではうまく表示されない場合があることに注意してください。
------------------------

シート上の9つのスプライスのいくつかがどこにあるかを知るために含まれている画像を次に示します。 押されていない状態、ホバーされた状態、押された状態のボタンには9スプライスがあるので、それを覚えておいてください。 スクロールバー、ドロップダウンメニューの選択、および入力ボックスにも独自の色があります。 よりプログラマースタイルの方向から色を調整したい場合は、各スプライスが正確に使用されるのは「テーマ」ファイルです。
------------------------

 

スプライトシートのどこに何が入っているかを推測するのは難しい場合があるため、目をつぶるような色にすることで、トラブルシューティングにかなり役立ちます。 「テーマ」ファイルのパーツセクションを見て、各スプライトの左上隅の名前とx / y座標を見つけることもできますが、名前は、アセプライトのどこに行くのかが常に明確であるとは限りません。
------------------------

「テーマ」ファイルは「パッケージ」ファイルと同様に開かれます。 メモ帳で選択して開きます。 このファイルは、他のすべての調整を行う場所であり、非常に圧倒される可能性があります。 私はそれを分解するために最善を尽くします。 まず、テーマの名前（整理目的）と画面のスケーリングとUIのスケーリングを調整できます。 画面のスケーリングは私が信じるキャンバスを調整し、UIのスケーリングは周りのUIウィンドウを調整します。 ここに入力したものは、全体の値としてのみ保存され、元のスケールに乗算されます…例：画面スケーリング1は100％の倍率に変換され、画面スケーリング1.9は100％の倍率に変換され、画面スケーリング2は200％の倍率に変換されます。 平均的なモニターには非常に便利ではありませんが、ベッドに横になっているときなどにプロジェクターを使用している場合に役立つ可能性があります。 このテーマを作ったクレジットとしてあなたの名前を入れる次の別の場所。
------------------------

次に、asepriteで使用されるフォントを変更するオプション。 ここに挿入するデフォルトのフォントオプションは制限されています。フォントを変更する場合は、asepriteのデータフォルダー（Aseprite \ data \ fonts）のfontsフォルダーに移動します。そこに、asepriteのカスタムデフォルトフォントとファイルを表示する2つの画像が表示されます。 「フォント」という名前。 メモ帳で「フォント」ファイルを開くと、フォントを変更できるデフォルトのオプションが表示されます。 このリストにない場合は、asepriteで使用することはできません。 独自のフォントを作成することに夢中になっている場合は、asepriteのカスタムフォントのスプライトシートのコピーを作成して、新しいフォントを作成するためのガイドとして使用できます。 申し訳ありませんが、カスタムフォントの作成についてはよくわかりません。 このリストに既存のインストール済みフォントを追加するには、Arialエントリをコピーして貼り付け、「Arial」をオペレーティングシステムの「fonts」ファイルにインストールされているフォントのファイル名に置き換えてから、「theme」ファイルにフォント名を書き出します。 asepriteを開いた状態でフォントをインストールした場合は、必ずasepriteを再起動してください。
------------------------

次は、私がピクセルであると信じているUI要素の寸法です。 ui要素はすべて非常によくラベル付けされているため、簡単に区別できるはずです。
------------------------

その後、カラーズ。 正直なところ、私にとって何がどこに行くのかを知るのは非常に難しいです。 これを調整するには、おそらく長い時間がかかります。 ここに表示されるのは、XNUMX進カラーコードが割り当てられているUIのセクションのリストです。
------------------------

幸いなことに、asepriteの色のXNUMX進カラーコードを簡単に把握し、そこからファイルにXNUMX進コードをコピーできます。
------------------------

交換できる可能性のある色を視覚化するのに役立つ、ファイルのデフォルトの色のリストを次に示します。 私が見つけた便利なことのXNUMXつは、ctrl + Fを押してメモ帳で検索メニューを開き、白から黒への変更と黒から白への変更を言いたい場合は、正確なXNUMX進色を検索することでした。 最後に、明らかに命名スキームがあり、UIの領域は一緒にグループ化されているようです。 顔はUIのセクションの背景色のようなもので、ホットな顔はクリック可能な部分だと思いますか？ ホットテキストはクリック可能なテキストであり、ラジオは私が信じるラジオメニューを指します。「選択された」は明らかに選択されたUI要素であり、カーソルを合わせると色にカーソルを合わせます。
------------------------

パーツは、「シート」ファイルのすべてのアイコン/UI要素です。 まず、アイコンが始まるスプ​​ライトシートにx座標とy座標を指定し、次にそのアイコンの高さと幅をピクセル単位で指定します。 これは、アイコンを大きくしたり小さくしたりすると変更されます。 複数の幅と高さを持つものは、スプライスされたアイコン/要素（9つのスプライスなど）であり、各セクションの長さを識別します。
------------------------

最後はスタイルセクションです。 これは、他のすべてのセクションで定義したものから、どの要素がどこに行くかを決定することです。 色やパーツがどこに向かっているのかを把握するのに役立ちます。 ここで、パディング、余白の長さ、テキストの配置を調整することもできます。