অচলিত আইসোমেট্রিক মানচিত্র: স্ক্রিন পয়েন্টের জন্য মানচিত্রের স্থানাঙ্কগুলি গণনা করুন

Question

আমি জানি যে এটি সম্পর্কে ইতিমধ্যে প্রচুর সংস্থান রয়েছে, তবে আমি আমার সমন্বয় ব্যবস্থার সাথে মেলে এমন একটিও পাই নি এবং আমার প্রয়োজনীয়তার সাথে যে কোনও সমাধানের সামঞ্জস্য করতে আমার প্রচুর সমস্যা হচ্ছে। আমি যা শিখেছি তা হ'ল এটি করার সর্বোত্তম উপায় হ'ল ট্রান্সফর্মেশন ম্যাট্রিক্স ব্যবহার করা। এটি কার্যকর করা কোনও সমস্যা নয় তবে আমি জানি না যে কীভাবে আমাকে স্থানাঙ্কের স্থানটি রূপান্তর করতে হবে।

এখানে একটি চিত্র যা আমার সমন্বয় ব্যবস্থাটি দেখায়:

আমি কীভাবে এই সমন্বিত সিস্টেমে পর্দার একটি বিন্দু রূপান্তর করব?

Comments

এটি দেখুন: jsfiddle.net/Sd4ZP/18

— মার্কাস ভন ব্রডি

এটি কোনও উপায়ে কীভাবে সহায়ক তা আমি দেখতে পাচ্ছি না। আমি মনে করি আপনি কী বলতে চাইছেন তা আপনি যথেষ্ট বুঝতে পারেন নি।

— ক্রিস

এটি রূপান্তরটি ঘটায়, অন্যদিকে কেবল অন্যদিকে, তাই আপনাকে এটির বিপরীত হওয়া দরকার।

— মার্কাস ফন ব্রডি

Answer 1

প্রথম, এখানে কোড। একটি ব্যাখ্যা অনুসরণ করবে:

/*
 * tw, th contain the tile width and height.
 *
 * hitTest contains a single channel taken from a tile-shaped hit-test
 * image. Data was extracted with getImageData()
 */

worldToTilePos = function(x, y) {

    var eventilex = Math.floor(x%tw);
    var eventiley = Math.floor(y%th);

    if (hitTest[eventilex + eventiley * tw] !== 255) {
        /* On even tile */

        return {
            x: Math.floor((x + tw) / tw) - 1,
            y: 2 * (Math.floor((y + th) / th) - 1)
        };
    } else {
        /* On odd tile */

        return {
            x: Math.floor((x + tw / 2) / tw) - 1,
            y: 2 * (Math.floor((y + th / 2) / th)) - 1
        };
    }
};

নোট করুন যে এই কোডটি আপনার প্রশ্নের মধ্যে প্রদর্শিত মানচিত্রের বাক্সের বাইরে কাজ করবে না। এটি আপনার বাম দিক থেকে বিজোড় টাইলস অফসেট করার কারণে, অন্যদিকে বিজোড় টাইলগুলি সাধারণত ডানদিকে অফসেট থাকে ( টাইল্ড মানচিত্র সম্পাদকের ক্ষেত্রে যেমন হয় )। বিজোড়-টাইল ক্ষেত্রে x মানটি টুইট করে এটির সহজ প্রতিকার করতে সক্ষম হওয়া উচিত।

ব্যাখ্যা

এটি এই কাজটি সম্পাদন করার জন্য আরও কিছুটা হিংস্র শক্তি পদ্ধতি বলে মনে হতে পারে তবে এটি কমপক্ষে পিক্সেল নিখুঁত এবং কিছুটা নমনীয় হওয়ার সুবিধা রয়েছে।

কৌশলটি কোনও একক স্তম্ভিত গ্রিড হিসাবে নয়, বরং দুটি গ্রিড একে অপরের শীর্ষে ওভারলেড হয়ে দেখার জন্য is এখানে বিজোড়-সারি গ্রিড এবং সম-সারি গ্রিড রয়েছে তবে আসুন পরিবর্তে তাদেরকে লাল এবং সবুজ বলি যাতে আমরা একটি সুন্দর চিত্র তৈরি করতে পারি ...

এই চিত্রের ডানদিকে লক্ষ্য করুন আমি বেগুনি বিন্দু দিয়ে একটি পয়েন্ট চিহ্নিত করেছি। এটি আমাদের মূল টাইল-স্পেসে অনুসন্ধানের চেষ্টা করব example

বিশ্বের যে কোনও বিন্দু সম্পর্কে লক্ষ্য করার বিষয়টি হ'ল এটি সর্বদা ঠিক দুটি অঞ্চলে থাকবে - একটি লাল এবং সবুজ একটি (যদি এটি কোনও কিনারায় না থাকে তবে আপনি সম্ভবত জাগ্রত প্রান্তের সীমানার মধ্যে ক্লিপিং করে যাবেন)। আসুন সেই অঞ্চলগুলি সন্ধান করি ...

এখন দুটি অঞ্চলের মধ্যে কোনটি সঠিক তা চয়ন করতে। সর্বদা সঠিক উত্তর হবে।

এখান থেকে আমরা আরও কিছু সহজ পাটিগণিত করতে পারি এবং দুটি অঞ্চলের প্রতিটি কেন্দ্র বিন্দুতে আমাদের নমুনা বিন্দু থেকে স্কোয়ার দূরত্বটি নিয়ে কাজ করতে পারি। যার নিকটতম আমাদের উত্তর হবে।

তবে বিকল্প উপায় আছে। প্রতিটি পরীক্ষার অঞ্চলের জন্য, আমরা একটি বিটম্যাপ নমুনা করি যা আমাদের টাইলসের সঠিক আকারের সাথে মেলে। আমরা সেই একক-টাইলের স্থানীয় স্থানাঙ্কে অনুবাদিত বিন্দুতে এটি নমুনা করি। আমাদের উদাহরণের জন্য এটি দেখতে এরকম কিছু লাগবে:

বাম দিকের একটি আমরা সবুজ অঞ্চলটি পরীক্ষা করে হিট পাই (ব্ল্যাক পিক্সেল) get ডানদিকে আমরা লাল অঞ্চলটি পরীক্ষা করি এবং একটি মিস (হোয়াইট পিক্সেল) পাই। দ্বিতীয় পরীক্ষাটি অবশ্যই অনর্থক কারণ এটি সর্বদা এক বা অন্য হতে হবে, কখনই নয়।

তারপরে আমরা এই সিদ্ধান্তে পৌঁছে যাচ্ছি যে আমাদের কাছে বিজোড় টাইলটি হিট হয়েছে 1,1 এ। বিজোড় এবং এমনকি সারিগুলির জন্য পৃথক রূপান্তর ব্যবহার করে মূল টাইল স্থানাঙ্কগুলিতে মানচিত্রের জন্য এই সমন্বয়টি সহজ হওয়া উচিত।

এই পদ্ধতিটি আপনাকে পিক্সেল পরীক্ষা বিটম্যাপ (গুলি) এ সাধারণ প্রতি পিক্সেল বৈশিষ্ট্যগুলিও পেতে দেয়। যেমন সাদা অফ-টাইল, কালো একটি হিট, নীল জল, লাল শক্ত।

Comments

এটা দুর্দান্ত ³

— হিউম্যানটগফুড

কল্পনাপ্রসূত এবং সুস্পষ্ট বর্ণিত উত্তর - এখন কেবল কোডে এটি প্রয়োগ করা দরকার। যেহেতু মূল পোস্টারটি এর পেছনের কোড বা জাভাস্ক্রিপ্টে ট্যাগ ছাড়া অন্য ভাষার কোনও তথ্য সরবরাহ করেনি আমি একটি উত্তর বলি

— টম 'ব্লু' পিডক

Answer 2

আমি মনে করি আপনার সমস্যাটি আপনার স্থানাঙ্কের জায়গার সাথে space আপনি টাইলগুলি যে স্থানাঙ্কগুলি দিয়েছেন সেগুলি আসলে একটি আইসোমেট্রিক প্রক্ষেপণ নয় - আপনাকে এক্সঅ্যাক্সিসটি নীচে-ডানদিকে তির্যক এবং yAxis এর তির্যক ডাউন-বাম হিসাবে (বা এর কিছু বৈকল্পিক) হিসাবে ভাবতে হবে

এই মুহূর্তে আপনি যদি চিত্রিত স্থানাঙ্ক অক্ষগুলি ধরে নিয়ে যান তবে আপনি "টাইল স্পেস" এর একটি তির্যক দিক দিয়ে ভ্রমণ করবেন যাতে স্কোয়ারগুলি হীরা হিসাবে শেষ হয় (এবং সবকিছু আরও জটিল হবে)

আপনি যে রূপান্তর ম্যাট্রিক্সটির সন্ধান করছেন সেটি সেই এক্স এবং ওয়াই অক্ষগুলির মধ্যে একটি of এটি কার্যকরভাবে নিম্নলিখিত গণনা করার মতোই।

screenOffsetXY = screenPointXY - tileOriginXY;
tileX = dot(screenOffsetXY, xAxis) / tileWidth;
tileY = dot(screenOffsetXY, yAxis) / tileWidth;

সম্পাদনা: আমি সবেমাত্র একটি অনুরূপ প্রশ্ন পেয়েছি (তবে যে সমন্বয় ব্যবস্থাটির সাথে আমি কথা বলছিলাম) এবং কেউ এখানে আরও একটি গভীর উত্তর দিয়েছেন:

মাউস স্থানাঙ্ককে আইসোমেট্রিক সূচকগুলিতে রূপান্তর করবেন কীভাবে?

Answer 3

মূলত আপনি ইভেন্ট শ্রোতার সাহায্যে উইন্ডোতে মাউসের অবস্থান পেতে চান, আপনাকে মাউস অবস্থানগুলি থেকে উইন্ডোতে ক্যানভাস অবস্থানের অফসেটটি সরিয়ে ফেলতে হবে, সুতরাং মাউসের অবস্থানটি তখন ক্যানভাসের সাথে সম্পর্কিত।

function mouseTwoGridPosition(e){

var mousex = e.pageX; //mouse position x
var mouseY = e.pageY;  //mouse position y
var canvas_width = 1000; //pixels
var offset_left = 100; //offset of canvas to window in pixels
var offset_top = 150; //offset of canvas to window in pixels

var isotile = 64; //if iso tile is 64 by 64

//get mouse position relative to canvas rather than window
var x = mousex - canvas_width/2 - offset_left;
var y = mousey - offset_top;


//convert to isometric grid
var tx = Math.round( (x + y * 2) / isotile) - 1;
var ty = Math.round((y * 2 - x) / isotile) - 1;

 //because your grid starts at 0/0 not 1/1 we subtract 1 
 // this is optional based on what grid number you want to start at



   return [tx,ty];
}

আমি ধরে নেব যে মাউসমোভের জন্য 'ক্যানভাসে ইভেন্ট শোনার পদ্ধতিটি কীভাবে করতে হবে তা আপনি জানেন, অন্যথায় আইসোমেট্রিক গেমের নকশা বিবেচনা করার আগে আপনি আরও জেএস শিখতে চাইতে পারেন: ডি

Comments

এটি কি খুব সহজ নয়? আমি চাই যে এটি পুরোপুরি আইসো টাইলের সাথে মেলে। আমি যদি এটি সঠিকভাবে বুঝতে পারি তবে আপনি কেবল একটি আয়তক্ষেত্রাকার অঞ্চলটি পরীক্ষা করছেন।

— ক্রিস

আইসোটাইলের "ফর্ম" বলতে কী বোঝেন ... উদাহরণস্বরূপ বলুন যে আপনার মাউসটি হীরা আকারের সীমানার মধ্যে 0: 1 এর মধ্যে রয়েছে তবে আপনার মাউস যে সীমানাটি ছাড়বে ততক্ষণ ফিরতে হবে 0: 1। যদি আপনার টাইলগুলি আকারে পরিবর্তিত হয় - তবে আমার পদ্ধতিটি কার্যকর হবে না। প্রদত্ত ফাংশনটি আমি যা ব্যবহার করি তা এটি আমার পক্ষে ভাল কাজ করে।

— ডেভ

কেবল ভাবছি, কারণ অন্যান্য সমস্ত সমাধানগুলি আরও জটিল। টাইলস অবশ্যই একই আকারের তাই আমি এটি পরীক্ষা করে দেখব।

— ক্রিস

এর সাথে টিঙ্কারটি নিশ্চিত করুন যে আপনি ক্যানভাসের বাম এবং শীর্ষের সঠিক অফসেট পেয়েছেন - এবং ক্যানভাস প্রস্থ, যখন আপনি গণিত করেন ঠিকঠাক কাজ করবে (এছাড়াও আইসোটাইল আকারের প্রস্থ)।

— ডেভ

আপনি কি নিশ্চিত যে আমার মতো একই সমন্বয় ব্যবস্থাটি ব্যবহার করছেন? এটি এখনও সম্পূর্ণ বন্ধ।

— ক্রিস

Answer 4

স্থানাঙ্কের স্থান পরিবর্তন করে আমি এটি সমাধান করেছি। এটি এখন প্রথম সারিতে অফসেট ছাড়াই শুরু হয় এবং এর জন্য আমি একটি কার্যকরী উদাহরণ পেয়েছি যা আমি কিছুটা সামঞ্জস্য করতে সক্ষম হয়েছি।

    hWidth = this.tileset.tileSize.width / 2;
    hHeight = this.tileset.tileSize.height / 2;

    pX = point.x - halfWidth;
    pY = point.y - halfHeight;

    x = Math.floor((pX + (pY - hHeight) * 2) / this.tileset.tileSize.width);
    y = Math.floor((pY - (pX - hWidth) * 0.5) / this.tileset.tileSize.height);

    tx = Math.floor((x - y) / 2) + 1 + this.camera.x;
    ty = y + x + 2 + this.camera.y;