การจัดการแมปข้อความในอาเรย์แบบสองมิติบนภาพวาด HTML5 Canvas

ดังนั้นฉันกำลังสร้าง HTML5 RPG เพื่อความสนุก แผนที่คือ<canvas>(ความกว้าง 512px สูง 352px | 16 แผ่นข้าม, 11 แผ่นจากบนลงล่าง) ฉันต้องการทราบว่ามีวิธีการทาสีที่มีประสิทธิภาพมากกว่า<canvas>นี้หรือไม่

นี่คือวิธีที่ฉันมีตอนนี้

วิธีการโหลดและวาดภาพบนแผนที่

แผนที่จะถูกวาดด้วยกระเบื้อง (32x32) โดยใช้Image()ชิ้นส่วน ไฟล์ภาพจะถูกโหลดผ่านง่ายforห่วงและใส่ลงในอาร์เรย์ที่เรียกว่าจะทาสีเกี่ยวกับการใช้tiles[]drawImage()

ก่อนอื่นเราโหลดไพ่ ...

และนี่คือวิธีที่จะทำ:

// SET UP THE & DRAW THE MAP TILES
tiles = [];
var loadedImagesCount = 0;
for (x = 0; x <= NUM_OF_TILES; x++) {
  var imageObj = new Image(); // new instance for each image
  imageObj.src = "js/tiles/t" + x + ".png";
  imageObj.onload = function () {
    console.log("Added tile ... " + loadedImagesCount);
    loadedImagesCount++;
    if (loadedImagesCount == NUM_OF_TILES) {
      // Onces all tiles are loaded ...
      // We paint the map
      for (y = 0; y <= 15; y++) {
        for (x = 0; x <= 10; x++) {
          theX = x * 32;
          theY = y * 32;
          context.drawImage(tiles[5], theY, theX, 32, 32);
        }
      }
    }
  };
  tiles.push(imageObj);
}

ตามธรรมชาติแล้วเมื่อผู้เล่นเริ่มเกมมันจะโหลดแผนที่ที่พวกเขาทิ้งไว้ล่าสุด แต่สำหรับที่นี่มันเป็นแผนที่ที่เต็มไปด้วยหญ้า

ตอนนี้แผนที่ใช้อาร์เรย์ 2 มิติ นี่คือแผนที่ตัวอย่าง

[[4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 1, 1, 1, 1], 
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 13, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 13, 11, 11, 11, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 1, 1, 1, 1, 1, 1, 1, 13, 13, 13, 13, 13, 1], 
[1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1, 1, 1]];

ฉันได้แผนที่ที่แตกต่างโดยใช้ifโครงสร้างที่เรียบง่าย เมื่ออาร์เรย์ 2d ข้างต้นเป็นreturnจำนวนที่สอดคล้องกันในแต่ละอาร์เรย์จะได้รับการพ่นสีตามภายในที่เก็บไว้Image() tile[]จากนั้นdrawImage()จะเกิดขึ้นและทาสีตามxและyและเวลาโดย32การวาดบนx-yพิกัดที่ถูกต้อง

การสลับแผนที่หลายครั้งเกิดขึ้นได้อย่างไร

กับเกมของฉันแผนที่มีห้าสิ่งที่จะติดตาม: currentID, leftID, rightID, และupIDbottomID

• currentID: ID ปัจจุบันของแผนที่ที่คุณอยู่
• leftID: ID ใดของที่ currentIDจะโหลดเมื่อคุณออกจากด้านซ้ายของแผนที่ปัจจุบัน
• rightID: ID อะไรที่currentIDจะโหลดเมื่อคุณออกทางด้านขวาของแผนที่ปัจจุบัน
• downID: ID ใดของที่currentIDจะโหลดเมื่อคุณออกที่ด้านล่างของแผนที่ปัจจุบัน
• upID:รหัสใดของที่currentIDจะโหลดเมื่อคุณออกจากด้านบนของแผนที่ปัจจุบัน

บางสิ่งบางอย่างที่จะต้องทราบ: ถ้าอย่างใดอย่างหนึ่งleftID, rightID, upIDหรือจะไม่เฉพาะเจาะจงว่าพวกเขาเป็นbottomID 0นั่นหมายความว่าพวกเขาไม่สามารถออกจากด้านนั้นของแผนที่ได้ มันเป็นเพียงการปิดล้อมที่มองไม่เห็น

ดังนั้นเมื่อมีคนออกด้านข้างของแผนที่ขึ้นอยู่กับว่าพวกเขาออกจากที่ใด ... ตัวอย่างเช่นถ้าพวกเขาออกจากที่ด้านล่างbottomIDจะมีจำนวนของการmapโหลดและวาดบนแผนที่

ต่อไปนี้เป็นตัวแทน. GIF เพื่อช่วยให้คุณเห็นภาพดีขึ้น:

อย่างที่คุณเห็นไม่ช้าก็เร็วด้วยแผนที่มากมายฉันจะติดต่อกับID จำนวนมาก และนั่นอาจทำให้สับสนและวุ่นวายเล็กน้อย

ข้อดีที่ชัดเจนคือสามารถโหลดได้ครั้งละ 176 แผ่นรีเฟรชผืนผ้าใบขนาดเล็กขนาด 512x352 และจัดการแผนที่ครั้งละหนึ่งแผนที่ ข้อเสียคือรหัสแผนที่เมื่อจัดการกับแผนที่จำนวนมากอาจทำให้เกิดความสับสนในบางครั้ง

คำถามของฉัน

• นี่เป็นวิธีที่มีประสิทธิภาพในการจัดเก็บแผนที่ (เมื่อใช้งานไทล์) หรือมีวิธีที่ดีกว่าในการจัดการแผนที่หรือไม่?

ฉันกำลังคิดตามแนวของแผนที่ยักษ์ ขนาดแผนที่มีขนาดใหญ่และเป็นอาร์เรย์ 2 มิติทั้งหมด อย่างไรก็ตามวิวพอร์ตยังคงเป็น 512x352 พิกเซล

นี่คือ. gif อื่นที่ฉันทำ (สำหรับคำถามนี้) เพื่อช่วยให้เห็นภาพ:

ขออภัยถ้าคุณไม่เข้าใจภาษาอังกฤษของฉัน โปรดถามสิ่งที่คุณมีปัญหาในการทำความเข้าใจ หวังว่าฉันจะทำให้ชัดเจน ขอบคุณ

แก้ไข: เพิ่งเห็นว่าคำตอบของฉันเป็นไปตามรหัสของคุณ แต่ไม่ได้ตอบคำถามของคุณ ฉันเก็บคำตอบเก่าไว้ในกรณีที่คุณสามารถใช้ข้อมูลนั้นได้

แก้ไข 2: ฉันได้แก้ไขปัญหา 2 ฉบับด้วยรหัสต้นฉบับ: - การเพิ่ม +1 ในการคำนวณจุดสิ้นสุด x และ y นั้นเกิดจากความผิดพลาดภายในวงเล็บปีกกา แต่ต้องเพิ่มหลังจากการหาร - ฉันลืมตรวจสอบค่า x และ y

คุณสามารถมีแผนที่ปัจจุบันในหน่วยความจำและโหลดแผนที่โดยรอบ ลองจินตนาการถึงโลกที่ประกอบไปด้วยอาร์เรย์ 2 มิติในระดับเดียวกับขนาด 5x5 ผู้เล่นเริ่มต้นในสนาม 1 เนื่องจากขอบด้านบนและด้านซ้ายของระดับอยู่บนขอบของโลกพวกเขาไม่จำเป็นต้องโหลด ดังนั้นในกรณีที่ระดับ 1/1 ทำงานอยู่และโหลดระดับ 1/2 และ 2/1 ... หากผู้เล่นย้ายไปทางขวาทุกระดับ (นอกเหนือจากที่คุณย้ายไปยัง) ถูกยกเลิกการโหลดและสภาพแวดล้อมใหม่เป็น โหลด หมายถึงระดับ 2/1 เปิดใช้งานอยู่ขณะนี้โหลด 1/1, 2/2 และ 3/1 แล้ว

ฉันหวังว่าสิ่งนี้จะให้ความคิดแก่คุณว่าจะทำอย่างไร แต่วิธีนี้จะไม่ได้ผลดีมากเมื่อทุกระดับจะต้องมีการจำลองระหว่างเกม แต่ถ้าคุณสามารถตรึงระดับที่ไม่ได้ใช้งานได้ควรทำงานได้ดี

คำตอบเก่า:

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

//Mock values
//camera position x
//viewport.x = 233f;
//camera position y
//viewport.y = 100f;
//viewport.w = 640
//viewport.h = 480
//levelWidth = 10
//levelHeight = 15
//tilesize = 32;

//startX defines the starting index for the x axis.
// 7 = 233 / 32
int startX = viewport.x / tilesize;

//startY defines the starting index
// 3 = 100 / 32
int startY = viewport.y / tilesize;

//End index y
// 28 = (233 + 640) / 32 + 1
int endX = ((viewport.x + viewport.w) / tilesize) + 1;

//End index y
// 19 = (100 + 480) / 32 + 1
int endX = ((viewport.x + viewport.w) / tilesize) + 1;

//Validation
if(startX < 0) startX = 0;
if(startY < 0) startY = 0;
//endX is set to 9 here
if(endX >= levelWidth) endX = levelWidth - 1;
//endX is set to 14 here
if(endY >= levelHeight) endY = levelHeight - 1;

for(int y = startY; y < yEnd; y++)
    for(int x = startX; x < xEnd; x++)
          [...]

หมายเหตุ:รหัสข้างต้นไม่ได้ทดสอบ แต่ควรให้ความคิดว่าควรทำอย่างไร

ต่อไปนี้เป็นตัวอย่างพื้นฐานสำหรับการแสดงวิวพอร์ต:

public class Viewport{
    public float x;
    public float y;
    public float w;
    public float h;
}

ตัวแทนจาวาสคริปต์จะมีลักษณะเช่นนี้

<script type="text/javascript">
//Declaration
//Constructor
var Viewport = function(xVal, yVal, wVal, hVal){
    this.x = xVal;
    this.y = yVal;
    this.w = wVal;
    this.h = hVal;
}
//Prototypes
Viewport.prototype.x = null;
Viewport.prototype.y = null;
Viewport.prototype.w = null;
Viewport.prototype.h = null;
Viewport.prototype.toString = function(){
    return ["Position: (", this.x, "/" + this.y + "), Size: (", this.w, "/", this.h, ")"].join("");
}

//Usage
var viewport = new Viewport(23, 111, 640, 480);
//Alerts "Position: (23/111), Size: (640/480)
alert(viewport.toString());
</script>

หากคุณใช้ตัวอย่างรหัสของฉันคุณต้องเปลี่ยนการประกาศ int และ float ด้วย var นอกจากนี้ตรวจสอบให้แน่ใจว่าคุณใช้ Math.floor ในการคำนวณเหล่านั้นที่กำหนดให้กับค่าที่อิงตามเพื่อรับลักษณะการทำงานเดียวกัน

สิ่งหนึ่งที่ฉันจะพิจารณา (แม้ว่าฉันไม่แน่ใจว่าเรื่องนี้ใน javascript) คือการใส่ไทล์ทั้งหมด (หรือมากที่สุด) ในพื้นผิวขนาดใหญ่แทนที่จะใช้ไฟล์เดียวหลายไฟล์

นี่คือลิงค์อธิบายวิธีการทำ: http://thiscouldbebetter.wordpress.com/2012/02/25/slicing-an-image-into-tiles-in-javascript/

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

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

แสดงแผนที่ทั้งหมดในครั้งเดียว มีผ้าใบนอกหน้าจอที่คุณแสดงแผนที่และใช้สิ่งนี้ในเกมของคุณ หน้านี้แสดงวิธีการใช้งานฟังก์ชั่นจาวาสคริปต์อย่างง่าย:

var renderToCanvas = function (width, height, renderFunction) {
  var buffer = document.createElement('canvas');
  buffer.width = width;
  buffer.height = height;
  renderFunction(buffer.getContext('2d'));
  return buffer;
};

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

var map = renderToCanvas( map_width*32, map_height*32, renderMap );

var MapSizeX = 512;
var MapSizeY = 352;

var draw = function(canvas, mapCentreX, mapCentreY) {
  var context = canvas.getContext('2d');

  var minX = playerX - MapSizeX/2;
  var minY = playerY - MapSizeY/2;

  context.drawImage(map,minX,minY,MapSizeX,MapSizeY,0,0,MapSizeX,MapSizeY);
}

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

คุณยังสามารถเพิ่มแผนที่ของคุณได้ถ้าคุณต้องการหรือถ้าโลกของคุณใหญ่และไม่เหมาะกับความทรงจำในระบบเป้าหมายของคุณ (จำไว้ว่าแม้ 1 ไบต์ต่อพิกเซลแผนที่ 512x352 คือ 176 KB) แต่ก่อน - การแสดงแผนที่ของคุณเช่นนี้คุณจะเห็นประสิทธิภาพที่เพิ่มขึ้นอย่างมากในเบราว์เซอร์ส่วนใหญ่

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

ในการใช้งานทั้งหมดที่ฉันได้เห็นแผนที่ย่อยมักจะสร้างเป็นภาพใหญ่หนึ่งภาพจากนั้น "สับ" เป็นชิ้นเล็ก ๆ

https://gamedev.stackexchange.com/a/25035/10055

ชิ้นส่วนเหล่านี้มักจะอยู่ในอำนาจ 2 ดังนั้นพวกเขาพอดีในหน่วยความจำได้อย่างดีที่สุด

วิธีที่ง่ายในการติดตาม ID คือเพียงแค่ใช้อาร์เรย์ 2d อื่น ๆ กับพวกเขาใน: โดยการดูแล x, y ใน "meta array" นั้นคุณจะสามารถค้นหา ID อื่น ๆ ได้อย่างง่ายดาย

ที่ถูกกล่าวว่านี่คือ Google ใช้เวลาในการเล่นเกมผ้าใบปูกระเบื้อง 2D (จริง ๆ แล้วหลายคน HTML5 แต่กระเบื้องเครื่องมือยังครอบคลุม) จาก I / O 2012 ล่าสุดของพวกเขา: http://www.youtube.com/watch?v=Prkyd5n0P7kมัน ยังมีซอร์สโค้ดให้ด้วย

ความคิดของคุณในการโหลดแผนที่ทั้งหมดลงในอาเรย์นั้นเป็นวิธีที่มีประสิทธิภาพ แต่มันจะง่ายกว่าที่จะได้รับ JavaScript Injection'd ทุกคนจะสามารถรู้แผนที่และไปผจญภัยได้

ฉันกำลังทำงานบนเกม RPG บนเว็บเช่นกันวิธีที่ฉันโหลดแผนที่ของฉันคือผ่าน Ajax จากหน้า PHP ที่โหลดแผนที่จากฐานข้อมูลซึ่งมีคำว่า X, Y, Z, Zla และ vlaue ของกระเบื้องวาดและในที่สุดผู้เล่นย้าย

ฉันยังคงพยายามทำให้มันมีประสิทธิภาพมากขึ้น แต่แผนที่โหลดเร็วไปจนถึงมากพอที่จะใช้งานต่อไป

ไม่มี , อาร์เรย์เป็นวิธีที่มีประสิทธิภาพมากที่สุดในการจัดเก็บแผนที่กระเบื้อง

อาจมีบางโครงสร้างที่ต้องใช้หน่วยความจำน้อยกว่าเล็กน้อย แต่เสียค่าใช้จ่ายที่สูงกว่ามากสำหรับการโหลดและเข้าถึงข้อมูล

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

วิธีนี้คุณสามารถสร้างภาพลวงตาของเส้นขอบโลกที่น้อยกว่าด้วยการวาดแผนที่ที่อยู่ติดกันด้วยในกรณีนี้คุณต้องโหลดไม่เพียง แต่แผนที่ที่อยู่ติดกัน แต่ยังที่อยู่ติดกัน

ฉันไม่แน่ใจว่าทำไมคุณคิดว่า: อย่างที่คุณเห็นไม่ช้าก็เร็วด้วยแผนที่มากมายฉันจะติดต่อกับ ID จำนวนมาก และนั่นอาจทำให้สับสนและวุ่นวายเล็กน้อย

LeftID จะเป็น -1 ของ currentID เสมอ ID ด้านขวาจะเป็น +1 ของ currentID เสมอ

UpID จะเป็น - (ความกว้างของแผนที่ทั้งหมด) ของ ID ปัจจุบันและ DownID จะเป็น + (ความกว้างของแผนที่ทั้งหมด) ของ ID ปัจจุบันโดยมีข้อยกเว้นศูนย์ซึ่งหมายความว่าคุณได้ตีที่ขอบ

แผนที่เดียวสามารถแบ่งออกเป็นหลาย ๆ แผนที่และบันทึกตามลำดับด้วย mapIDXXXX โดยที่ XXXX เป็นรหัส ด้วยวิธีนี้ไม่มีอะไรให้สับสน ฉันเคยไปที่ไซต์ของคุณแล้วและดูเหมือนว่าฉันอาจผิดที่ปัญหาลงไปที่ตัวแก้ไขแผนที่ของคุณกำหนดขนาด จำกัด ซึ่งเป็นอุปสรรคต่อระบบอัตโนมัติของคุณในการแยกแผนที่ขนาดใหญ่เป็นขนาดเล็กหลายรายการในการบันทึกและข้อ จำกัด นี้คือ อาจ จำกัด โซลูชันทางเทคนิค

ฉันเขียนตัวแก้ไขแผนที่ Javascript ซึ่งเลื่อนไปทุกทิศทุกทางมีไทล์ 1000 x 1,000 (ฉันไม่แนะนำให้ใช้ขนาดนั้น) และมันยังเคลื่อนที่ได้ดีเท่ากับแผนที่ 50 x 50 และมี 3 ชั้นรวมถึงการเลื่อนแบบพารัลแลกซ์ มันบันทึกและอ่านในรูปแบบ json ฉันจะส่งสำเนาให้คุณถ้าคุณบอกว่าคุณไม่รังเกียจอีเมลประมาณ 2meg มันมีความหมายที่จะอยู่ใน GitHub แต่ฉันไม่ได้มีชุดไพ่ (ถูกกฎหมาย) ที่เหมาะสมซึ่งเป็นเหตุผลว่าทำไมฉันยังไม่ใส่ใจที่จะใส่มันลงไปที่นั่น