스프라이트 타일이 잘 있는지 어떻게 빨리 확인할 수 있습니까?

47

타일을 멋지게 타일링 할 수있는 타일 맵 스프라이트를 만들려고하지만 타일이 얼마나 잘 타일링되어 있는지 확인하는 것은 정말 번거로운 작업입니다.

이상적으로는 이와 같은 레이아웃을 보여주는 이미지 편집기가 필요하므로 수동 검사없이 타일이 잘 표시되는지 확인할 수 있습니다.

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

이 작업을 수행 할 수있는 프로그램 또는 다른 방법으로 쉽게 만들 수 있습니까?

— 사용자
소스

텍스처 타일링이 원활하게 작동하는지 확인하는 것에 대해 이야기하고 있다고 생각합니다. 그리고 적어도 내 지식에 짐프는 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 에 감사합니다 !)}

웹 브라우저에서 엽니 다.

이미지 타일의 정도를 확인해야 할 때마다 저장하고 웹 브라우저를 새로 고치십시오.

김프 의 내보내기 바로 가기 Ctrle와 Chromium 의 새로 고침 바로 가기가 Ctrlr있습니다. e및 r쿼티 (QWERTY)에 인접, 그래서 이것은 할 매우 빠릅니다.

— 앙코
소스

10

매우 독창적입니다! <body style="background: url(tile.jpg) repeat 0 0;">

— driima

15

<body> 바로 앞에 <header> <meta http-equiv = "Refresh"content = "2"> </ header>를 추가하여 2 초마다 페이지를 자동로드 할 수도 있습니다.

— Shivan Dragon

7

또는 너무 기울어지면 더 깊이 들어가서 grunt 또는 gulp와 같은 도구를 설정하여 변경 사항을보고 브라우저를 새로 고칠 수 있습니다.

— Seiyria

1

@Kroltan ddsview 는 전용 "타일 뷰"를 가지고 있다고합니다. 김프 의 범람 도구는 클립 보드에서 읽을 수 있으며 테스트도 빠릅니다.

— Anko

2

@Anko True, 그러나 나의 요점은 실제적이고 편집 가능하며 완벽하게 기능하는 타 일식 뷰에 대한 것입니다. 이러한 도구를 사용하면 속도는 빨라지지만 완벽한 프로세스는 아닙니다 (의도적 인 실수).

— Kroltan

18

포토샵이나 김프를 사용하면 오프셋 명령을 사용할 수 있습니다. 100x100px 이미지로 작업하는 경우 각 방향으로 50px 오프셋 할 수 있으며 이미지 타일이있는 이음새가 이미지 중간에 표시됩니다.

이 페이지에는 작동 방식을 보여주는 스크린 샷이 있습니다. http://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html

— 팹 스프로
소스

2

추가 보너스로 이제 심이 이미지의 중앙에있어 쉽고 빠르게 편집 할 수 있습니다!

— Cort Ammon

17

Krita에는 타일 텍스처를 편집하고 변경 사항이 실시간으로 업데이트되는 기능이 있습니다. W 키를 누르면 랩 어라운드 모드가 활성화되어 가능합니다. 이 기능이 적용된 YouTube 동영상은 여기 에서 볼 수 있습니다 . (기능은 0:12에 활성화됩니다)

— KritaUser00402050
소스

2

이로 인해 더 많은 투표가 필요합니다. 한 번의 버튼 누름으로 정확히 요구되는 것을 수행하는 소프트웨어입니다. 더 나은 방법은 또한 페인팅을 감싸는 것입니다. 거의 모든 사람이 매끄러운 질감을 만드는 데 도움이 될 것입니다. 또한 Krita는 무료이며 다운로드 할 수 있습니다. krita.org/download/krita-desktop

— darkflame

1

+1 누군가가 같은 질문을한다면, 이것이 가장 먼저 볼 것입니다. "어떤 프로그램이 이것을 할 수 있습니까?" "크리 타".

— Jibb Smart

6

바탕 화면에서 타일을 타일 배경 화면으로 만듭니다. 매우 쉽고 코딩이나 외부 소프트웨어가 없습니다.

— 잼 롤
소스

2

+1이 작동 화려 아니라 리눅스에서 inotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; done실행할 수 있습니다. 이미지를 저장하십시오. 벽지가 즉시 바뀝니다. 또한 여러 파일을 지정한 경우에도 작동합니다 tile.png. 전체 화면이 필요하지 않은 경우이 문제가 발생합니다.

— Anko

5

여러 이미지를 테스트하려면 Anko의 답변을 기반으로 미니 웹 응용 프로그램을 만드는 것이 좋습니다. 이렇게하면 이미지를 페이지로 드래그하여 빠르게 연속해서 테스트 할 수 있습니다.

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

또 다른 매우 직관적 인 답변. 크롬 확장 프로그램을 만들거나 이것을 사용하여 Node.js / Electron 데스크톱 응용 프로그램을 만들 수 있습니다.

— driima

0

김프에서 : 필터-> 맵-> 타일. 단위를 "%"로 변경 한 다음 치수에 300 % x 300 %를 입력하면 이미지의 3x3 타일이 만들어져 네 모서리를 모두 쉽게 볼 수 있습니다. 한 번 수행 한 후에는 물론 다른 필터를 사용하지 않는 한 Ctrl-F (마지막 필터 반복)를 사용하여 수정 후 타일링을 다시 수행 할 수 있습니다.

— 홉스
소스