スプライトタイルが適切に機能するかどうかをすばやく確認するにはどうすればよいですか？

47

私はうまくタイルを張るタイルマップスプライトを作成しようとしていますが、タイルがどれだけうまく並べられるかを確認するのは本当に面倒です。

理想的には、このようなレイアウトを表示するイメージエディターが欲しいので、手動で確認することなくタイルがうまく表示されるかどうかを確認できます。

     [img]
[img][img][img]
     [img]

どのプログラムがこれを行うことができますか、またはどのようにしてこれを簡単にすることができますか？

— user73424
ソース

テクスチャタイルがシームレスに機能するかどうかを確認していると思います。少なくとも私の知る限り、gimpにはrender-> mapまたはそれを行う機能があります。ただし、編集中はそうではありません。それ以外の場合、wallyにはこの機能がありますが、非常に古いものです。（半減期テクスチャエディター）

— v.oddou

1

amnoid.de/ddsviewは、多くの画像形式のタイルプレビューをサポートしています。そして、どの画像エディターを使用していますか？画像をタイリングする何らかの方法があると確信しています。

— snake5

1

どのエディターを使用していますか？Photoshopのスマートオブジェクトを使用して何かを一緒にハッキングできるようにする必要があります

— PlasmaHH

4

デスクトップの背景として設定し、「タイル」オプションを選択します。

— user14146

「これができるプログラム」Kritaはこれを行うことができ、ラップされた状態でも喘ぎます（下記の回答を参照）

— darkflame

67

これは、あらゆる画像エディターで動作する簡単なハックです。

タイルイメージが呼び出される場合tile.png、次のindex.htmlように作成します。

<body style="background:url(tile.png) repeat 0 0"></body>

^{（よりシンプルな代替品を@Derylliumに感謝します！）}

Webブラウザーで開きます。

画像のタイルの状態を確認し、保存し、Webブラウザーを更新する必要があるときはいつでも。

GIMPの輸出ショートカットがあるCtrleとクロムのリフレッシュのショートカットですCtrlr。QWERTYに隣接しているので、これはかなり速く行うことです。er

— あんこ
ソース

10

非常に独創的です！また、次を使用してHTMLをシンプルにすることもできます<body style="background: url(tile.jpg) repeat 0 0;">

— -driima

15

<body>の直前に<header> <meta http-equiv = "Refresh" content = "2"> </ header>を追加して、ページを2秒ごとに自動ロードすることもできます。

— シヴァンドラゴン

7

または、あなたがそんなに傾いているなら、あなたはより深く行って、変更を監視し、変更を加えたときにブラウザをライブリロードするために、うなり声や一口のようなツールをセットアップすることができます。

— セイリア

1

@Kroltan ddsviewには、専用の「タイルビュー」があります。GIMPのフラッドフィルツールは、クリップボードから読み取ることができます。これも高速でテストできます。

— アンコ

2

@Anko本当ですが、私のポイントは、実際の編集可能な完全に機能するタイルビューです。これらのツールはそれを高速化しますが、シームレスなプロセスではありません（意図しないしゃれ）。

— Kroltan

18

photoshopまたはGIMPを使用して、offsetコマンドを使用できます。たとえば100x100pxの画像で作業している場合、各方向に50pxオフセットすることができ、画像の中央に画像タイルが一緒に表示される継ぎ目が表示されます。

このページには、これがどのように機能するかを示すスクリーンショットがあります：http : //blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html

— ファブスプロ
ソース

2

追加のボーナスとして、画像の中央に縫い目が配置され、すばやく簡単に編集できるようになりました！

— コートアンモン

17

Kritaには、タイルテクスチャを編集し、変更がライブで更新されるのを確認できる機能があります。Wキーを押すと、ラップアラウンドモードが有効になり、これが可能になります。動作中のこの機能のyoutubeビデオはこちらから入手できます。（機能は0:12で有効になります）

— KritaUser00402050
ソース

2

これは、より多くの賛成に値します。ボタンを1回押すだけで要求されることを正確に実行するソフトウェアです。さらに良いことに、それはまたあなたの絵も包み込むことを可能にします-これはほぼ確実に誰もがシームレスなテクスチャを作るのを助けるでしょう。また、Kritaは無料でダウンロードできることも指摘してください。krita.org/download/krita-desktop

— darkflame

1

+1同じ質問がある場合、これは最初に表示される回答です。「これができるプログラムは？」「クリタ」。

— ジブスマート

6

タイルをデスクトップ上のタイルの壁紙にします。非常に簡単で、コーディングや無関係なソフトウェアはありません。

— ジャムロール
ソース

2

+1これは、実行中のLinux上で見事に機能しinotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; doneます。画像を保存するだけです。壁紙はすぐに変わります。に加えて指定された複数のファイルでも動作しますtile.png。フルスクリーンを必要としないとき、これは揺れ動きます。

— アンコ

5

複数の画像をテストする場合は、Ankoの答えに基づいたミニWebアプリを作成すると役立つ場合があります。これにより、画像をページにドラッグして、すばやく連続してテストできます。

window.addEventListener('load', function() {
  document.body.addEventListener('dragover', function(event) {
    // Accept the drag
    event.preventDefault();
  });

  document.body.addEventListener('drop', function(event) {
    // Prevent page redirect
    event.stopPropagation();
    event.preventDefault();

    var reader = new FileReader();

    reader.onload = function(e) {
      // Set background image
      document.body.style.background = 'url(' + e.target.result + ') repeat 0 0';
      document.body.textContent = ''; // Remove instructions
    };

    // Begin reading file
    reader.readAsDataURL(event.dataTransfer.files[0]);
  });
});

html, body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

html {
  border: 2px dashed black;
}

body {
  padding: 10px;
}

<p>Drag an image here</p>

スニペットを展開

— アエバビス
ソース

1

別の非常に直感的な答え。これを使用してChrome拡張機能を作成するか、Node.js / Electronデスクトップアプリケーションを作成できます。

— -driima

0

GIMPの場合：[フィルター]-> [マップ]-> [タイル]。単位を「％」に変更してから寸法に300％x 300％を入力すると、3x3の画像のタイルが表示され、4つのエッジすべてを簡単に確認できます。一度行った後、もちろん他のフィルターを使用しない限り、Ctrl-F（最後のフィルターを繰り返す）を使用して、変更後にタイルを再作成できます。

— ホッブズ
ソース