ฉันจะตรวจสอบได้อย่างรวดเร็วว่ากระเบื้องสไปรต์ของฉันดีหรือไม่

47

ฉันกำลังพยายามสร้าง tilemap sprite ที่เรียงอย่างดี แต่ตรวจสอบว่าการเรียงต่อกันของพวกเขายุ่งยากมากเพียงใด

เป็นการดีที่ฉันต้องการมีโปรแกรมแก้ไขรูปภาพที่แสดงเลย์เอาต์เช่นนี้ดังนั้นฉันจึงสามารถดูว่ามันทำงานได้ดีหรือไม่หากไม่มีการตรวจสอบด้วยตนเอง:

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

โปรแกรมใดบ้างที่สามารถทำสิ่งนี้ได้หรือฉันจะทำให้ง่ายขึ้นได้อย่างไร

— user73424
แหล่งที่มา

ฉันคิดว่าคุณกำลังพูดถึงการตรวจสอบว่าการปูกระเบื้องพื้นผิวทำงานได้อย่างราบรื่นหรือไม่ และอย่างน้อยความรู้ของฉันก็มีเรนเดอร์ - แมปหรือฟังก์ชั่นบางอย่างที่ทำเช่นนั้น แต่ไม่ใช่ในขณะที่แก้ไข มิฉะนั้นเก่งมีคุณสมบัตินี้ แต่มันเก่าแช่ง (โปรแกรมแก้ไขเนื้อชีวิตครึ่งชีวิต)

— v.oddou

1

amnoid.de/ddsviewรองรับการแสดงตัวอย่างแบบเรียงต่อกันของรูปแบบภาพจำนวนมาก แล้วคุณใช้โปรแกรมแก้ไขภาพอะไร ฉันแน่ใจว่ามันมีวิธีการเรียงภาพ

— snake5

1

คุณใช้โปรแกรมแก้ไขอะไร มันเป็นไปได้ที่จะแฮ็กบางอย่างร่วมกันโดยใช้วัตถุอัจฉริยะ Photoshops

— PlasmaHH

4

ตั้งเป็นพื้นหลังเดสก์ทอปของคุณและเลือกตัวเลือก "ไทล์"

— user14146

"โปรแกรมสามารถทำอะไรได้บ้าง" Krita สามารถทำสิ่งนี้ได้และยังช่วยให้คุณหอบขณะห่อ (ดูคำตอบด้านล่าง)

— darkflame

67

นี่คือแฮ็คด่วนที่ทำงานร่วมกับโปรแกรมแก้ไขภาพใด ๆ

หากภาพย่อยของคุณถูกเรียกtile.pngให้สร้างสิ่งindex.htmlนี้:

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

^{(ขอบคุณ@Derylliumสำหรับทางเลือกที่ง่ายกว่า!)}

เปิดสิ่งนั้นในเว็บเบราว์เซอร์

เมื่อใดก็ตามที่คุณต้องการตรวจสอบขนาดของรูปภาพให้บันทึกและรีเฟรชเว็บเบราว์เซอร์

GIMPของการส่งออกทางลัดมีCtrleและโครเมี่ยม 's รีเฟรชCtrlrทางลัด The eและrอยู่ติดกับ QWERTY ดังนั้นมันจึงค่อนข้างเร็วที่จะทำ

— Anko
แหล่งที่มา

10

สร้างสรรค์มาก ๆ ! นอกจากนี้คุณยังสามารถทำให้ HTML ง่ายขึ้นโดยใช้<body style="background: url(tile.jpg) repeat 0 0;">

— driima

15

คุณยังสามารถเพิ่ม <header> <meta http-equiv = "Refresh" content = "2"> </header> ต่อหน้า <body> เพื่อให้หน้าโหลดอัตโนมัติทุก 2 วินาที

— Shivan Dragon

7

หรือหากคุณเอียงคุณสามารถเจาะลึกและตั้งค่าเครื่องมือเช่นเสียงฮึดฮัดหรืออึกเพื่อดูการเปลี่ยนแปลงและโหลดเบราว์เซอร์สดเมื่อคุณสร้างมันขึ้นมา

— Seiyria

1

@Kroltan ddsviewรายงานว่ามี "มุมมองไทล์ " โดยเฉพาะ เครื่องมือเติมน้ำท่วมของGIMPสามารถอ่านได้จากคลิปบอร์ดซึ่งทดสอบได้อย่างรวดเร็วด้วย

— Anko

2

@Anko True แต่ประเด็นของฉันคือเพื่อให้ได้มุมมองที่แท้จริงแก้ไขและทำงานได้อย่างสมบูรณ์ เครื่องมือเหล่านี้ทำให้เร็วขึ้น แต่ไม่ใช่กระบวนการที่ราบรื่น (การเล่นโดยไม่เจตนา)

— Kroltan

18

การใช้ photoshop หรือ GIMP คุณสามารถใช้คำสั่ง offset ได้ หากคุณกำลังทำงานเพื่อพูดภาพ 100x100px คุณสามารถชดเชย 50px ในแต่ละทิศทางและรอยต่อที่ภาพเรียงต่อกันจะปรากฏที่ตรงกลางของภาพ

หน้านี้มีภาพหน้าจอที่แสดงวิธีการทำงานของ: http://blogs.adobe.com/jkost/2015/01/how-to-create-a-se Seamless-pattern-tile-in-photoshop.html

— fabspro
แหล่งที่มา

2

เป็นโบนัสเพิ่มตอนนี้ตะเข็บอยู่ตรงกลางของรูปภาพเพื่อการแก้ไขที่ง่ายและรวดเร็ว!

— Cort Ammon

17

Krita มีคุณสมบัติที่ช่วยให้คุณสามารถแก้ไขพื้นผิวการปูกระเบื้องและดูการเปลี่ยนแปลงการปรับปรุงสด โดยการกดปุ่ม W จะช่วยให้ล้อมรอบโหมดซึ่งทำให้เป็นไปได้ วิดีโอ YouTube ของคุณลักษณะนี้ในการดำเนินการสามารถใช้ได้ที่นี่ (เปิดใช้งานคุณลักษณะนี้เวลา 0:12)

— KritaUser00402050
แหล่งที่มา

2

สิ่งนี้สมควรได้รับการโหวตมากขึ้น เป็นบิตของซอฟต์แวร์ที่ทำสิ่งที่ต้องการในการกดปุ่มเพียงปุ่มเดียว ยิ่งไปกว่านั้นมันยังช่วยให้ภาพวาดของคุณห่อหุ้มด้วยซึ่งเกือบจะแน่นอนว่าจะช่วยให้ทุกคนสร้างพื้นผิวที่ไร้รอยต่อ คุณควรจะชี้ให้เห็นว่า Krita นั้นฟรีและสามารถดาวน์โหลดได้; krita.org/download/krita-desktop

— darkflame

1

+1 หากใครบางคนมีคำถามเดียวกันนี่คือคำตอบแรกที่พวกเขาควรเห็น "โปรแกรมใดที่สามารถทำสิ่งนี้ได้?" "Krita"

— Jibb Smart

6

ทำให้กระเบื้องของคุณเป็นภาพพื้นหลังบนกระเบื้องบนเดสก์ท็อปของคุณ ง่ายสุดและไม่มีการเข้ารหัสหรือซอฟต์แวร์ภายนอก

— แยมโรล
แหล่งที่มา

2

+1 นี้ทำงานไม่ยี่หระดีบน Linux กับinotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; doneการทำงาน เพียงบันทึกภาพ; เปลี่ยนวอลเปเปอร์ทันที tile.pngยังทำงานร่วมกับหลายไฟล์ที่ระบุไว้ในนอกเหนือไปจาก เมื่อฉันไม่ต้องการเต็มหน้าจอหินนี้

— Anko

5

หากคุณต้องการทดสอบภาพหลายภาพอาจช่วยให้มี webapp ขนาดเล็กตามคำตอบของ 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>

ขยายตัวอย่างข้อมูล

— aebabis
แหล่งที่มา

1

อีกคำตอบที่ใช้งานง่ายมาก คุณสามารถสร้างส่วนขยายของโครเมี่ยมหรือสร้างแอปพลิเคชัน Node.js / Electron บนเดสก์ท็อปได้

— driima

0

ใน GIMP: ตัวกรอง -> แผนที่ -> ไทล์ หากคุณเปลี่ยนหน่วยเป็น "%" จากนั้นป้อนขนาด 300% x 300% สำหรับขนาดคุณจะได้ภาพเรียงซ้อน 3x3 ซึ่งจะช่วยให้คุณเห็นขอบทั้งสี่ได้อย่างง่ายดาย หลังจากทำแล้วคุณสามารถใช้ Ctrl-F (ทำซ้ำตัวกรองสุดท้าย) เพื่อทำการเรียงใหม่หลังจากทำการแก้ไขตราบใดที่คุณไม่ได้ใช้ตัวกรองอื่น ๆ แน่นอน

— ฮอบส์
แหล่งที่มา