2 ডি গেমটিতে আইসোমেট্রিক টাইল আঁকার সঠিক উপায় কী?
আমি পড়তে রেফারেন্স (যেমন করেছি এই এক ) যে সুপারিশ টাইলস একটি উপায় যে হবে রেন্ডার করা মানচিত্রের 2D অ্যারের প্রতিনিধিত্ব প্রতিটি কলামের Zig-Zag। আমি কল্পনা করি যে এগুলি হীরা ফ্যাশনে আরও আঁকতে হবে, যেখানে স্ক্রিনে আঁকানো 2 ডি অ্যারে দেখতে কেমন হবে তার সাথে আরও ঘনিষ্ঠভাবে সম্পর্কিত, কেবল খানিকটা ঘোরানো।
উভয় পদ্ধতিতে সুবিধা বা অসুবিধা আছে?
উত্তর:
আপডেট: সংশোধন করা মানচিত্রের উপস্থাপনা অ্যালগরিদম, আরও চিত্র যুক্ত করা হয়েছে, বিন্যাস পরিবর্তন হয়েছে।
স্ক্রিনে টাইলস ম্যাপ করার জন্য "জিগ-জাগ" কৌশলটির সুবিধার জন্য এটি বলা যেতে পারে যে টাইলগুলির xএবং yস্থানাঙ্কগুলি উল্লম্ব এবং অনুভূমিক অক্ষতে রয়েছে।
"একটি হীরাতে অঙ্কন" পদ্ধতির:
"হীরাতে অঙ্কন" ব্যবহার করে একটি আইসোমেট্রিক মানচিত্র অঙ্কন করে, আমি বিশ্বাস করি যে কেবলমাত্র forদ্বি-মাত্রিক অ্যারের উপরে নেস্টেড- লুপ ব্যবহার করে মানচিত্রটি রেন্ডারিংকে বোঝায় :
tile_map[][] = [[...],...]
for (cellY = 0; cellY < tile_map.size; cellY++):
for (cellX = 0; cellX < tile_map[cellY].size cellX++):
draw(
tile_map[cellX][cellY],
screenX = (cellX * tile_width / 2) + (cellY * tile_width / 2)
screenY = (cellY * tile_height / 2) - (cellX * tile_height / 2)
)
সুবিধা:
পদ্ধতির সুবিধা হ'ল এটি সরল নেস্টেড- forলুপ যা মোটামুটি সোজা এগিয়ে যুক্তি যুক্ত যা সমস্ত টাইল জুড়ে নিয়মিতভাবে কাজ করে।
অসুবিধা:
এই পদ্ধতির একটি নেতিবাচক দিক হ'ল মানচিত্রে টাইলগুলির xএবং yস্থানাঙ্কগুলি তির্যক রেখাগুলিতে বৃদ্ধি পাবে, যা স্ক্রিনের অবস্থানটিকে অ্যারে হিসাবে উপস্থাপিত মানচিত্রে দৃশ্যমানভাবে ম্যাপ করা আরও কঠিন করে তুলবে:
তবে উপরের উদাহরণ কোডটি কার্যকর করার ক্ষেত্রে একটি সমস্যা হতে চলেছে - রেন্ডারিং অর্ডারটি এমন টাইলগুলি সৃষ্টি করবে যা কিছু টাইলসের পেছনের অংশ বলে মনে করা হত সামনে টাইলসের শীর্ষে আঁকা:
এই সমস্যাটি সংশোধন করতে, অভ্যন্তরীণ- forলুপের আদেশটি অবশ্যই বিপরীত হতে হবে - সর্বোচ্চ মান থেকে শুরু করে এবং নিম্ন মানের দিকে রেন্ডারিং:
tile_map[][] = [[...],...]
for (i = 0; i < tile_map.size; i++):
for (j = tile_map[i].size; j >= 0; j--): // Changed loop condition here.
draw(
tile_map[i][j],
x = (j * tile_width / 2) + (i * tile_width / 2)
y = (i * tile_height / 2) - (j * tile_height / 2)
)
উপরের ফিক্সের সাথে মানচিত্রের রেন্ডারিং সংশোধন করা উচিত:
"জিগ-জাগ" পদ্ধতির:
সুবিধা:
সম্ভবত "জিগ-জাগ" পদ্ধতির সুবিধা হ'ল রেন্ডার করা মানচিত্রটি "হীরা" পদ্ধতির চেয়ে কিছুটা উল্লম্বভাবে কমপ্যাক্ট বলে মনে হতে পারে:
অসুবিধা:
জিগ-জাগ কৌশলটি বাস্তবায়নের চেষ্টা করা থেকে, অসুবিধাটি হতে পারে যে রেন্ডারিং কোডটি লেখার জন্য কিছুটা কঠিন কারণ এটি forঅ্যারেতে প্রতিটি উপাদানকে নেস্টেড- লুপের মতো সহজ করে লেখা যায় না :
tile_map[][] = [[...],...]
for (i = 0; i < tile_map.size; i++):
if i is odd:
offset_x = tile_width / 2
else:
offset_x = 0
for (j = 0; j < tile_map[i].size; j++):
draw(
tile_map[i][j],
x = (j * tile_width) + offset_x,
y = i * tile_height / 2
)
এছাড়াও, রেন্ডারিং ক্রমের স্থির প্রকৃতির কারণে কোনও টাইলের স্থানাঙ্কটি বের করার চেষ্টা করা কিছুটা কঠিন হতে পারে:
দ্রষ্টব্য: এই উত্তরের অন্তর্ভুক্ত চিত্রগুলি টাইল রেন্ডারিং কোড উপস্থাপিত জাভা প্রয়োগের সাথে তৈরি intকরা হয়েছে, মানচিত্র হিসাবে নিম্নলিখিত অ্যারে সহ :
tileMap = new int[][] {
{0, 1, 2, 3},
{3, 2, 1, 0},
{0, 0, 1, 1},
{2, 2, 3, 3}
};
টাইল চিত্রগুলি হল:
tileImage[0] -> ভিতরে একটি বাক্স সহ একটি বাক্স।tileImage[1] -> একটি কালো বাক্স।tileImage[2] -> একটি সাদা বাক্স।tileImage[3] -> এটিতে একটি লম্বা ধূসর রঙের একটি বাক্স।টাইল প্রস্থ এবং উচ্চতা একটি নোট
ভেরিয়েবল tile_widthএবং tile_heightযা উপরের কোড উদাহরণ ব্যবহার করা হয় প্রস্থ এবং ইমেজ টালি প্রতিনিধিত্বমূলক মাটির টালি উচ্চতা উল্লেখ করুন:
চিত্রের মাত্রা এবং টাইলের মাত্রাগুলি যতক্ষণ মিলবে ততক্ষণ চিত্র ব্যবহার করবে। অন্যথায়, টাইল মানচিত্র টাইলস মধ্যে ফাঁক দিয়ে রেন্ডার করা যেতে পারে।
j = (2 * x - 4 * y) / tilewidth * 0.5; i = (p.x * 2 / tilewidth) - j;।
যেভাবেই কাজটি হয়ে যায়। আমি ধরে নিয়েছি যে জিগজ্যাগ দ্বারা আপনি এরকম কিছু বোঝাতে চাইছেন: (সংখ্যাগুলি রেন্ডারিংয়ের ক্রম)
.. .. 01 .. ..
.. 06 02 ..
.. 11 07 03 ..
16 12 08 04
21 17 13 09 05
22 18 14 10
.. 23 19 15 ..
.. 24 20 ..
.. .. 25 .. ..
এবং হীরা দ্বারা আপনার অর্থ:
.. .. .. .. ..
01 02 03 04
.. 05 06 07 ..
08 09 10 11
.. 12 13 14 ..
15 16 17 18
.. 19 20 21 ..
22 23 24 25
.. .. .. .. ..
প্রথম পদ্ধতিটিতে আরও টাইলস রেন্ডার করা দরকার যাতে পূর্ণ স্ক্রিনটি আঁকতে পারে তবে আপনি খুব সহজেই একটি বাউন্ডারি চেক করতে পারেন এবং কোনও টাইলসকে পুরোপুরি অফ স্ক্রিন এড়িয়ে যেতে পারেন। টাইল 01 এর অবস্থান কী তা নির্ধারণের জন্য উভয় পদ্ধতিতে কিছু সংখ্যক ক্রাঞ্চিংয়ের প্রয়োজন হবে the
আপনার যদি হীরার সীমানা ছাড়িয়ে এমন কিছু টাইল থাকে তবে আমি গভীরতার সাথে ক্রম আঁকার পরামর্শ দিচ্ছি:
...1...
..234..
.56789.
..abc..
...d...
কুলবার্ডের উত্তরটি সঠিক, সম্পূর্ণ একটি। যাইহোক, আমি আমার সাইটের অ্যাপ্লিকেশন (আইওএস / অবজেক্টিভ-সি) তে কাজ করে এমন কোড তৈরির জন্য অন্য সাইট থেকে আসা লোকদের সাথে তার ইঙ্গিতগুলি একত্রিত করেছি, যা এখানে এলো এমন জিনিস খুঁজছেন এমন যে কারও সাথে আমি ভাগ করে নিতে চাই। দয়া করে, যদি আপনি এই উত্তরটি পছন্দ করেন / আপ আপ করেন তবে মূল হিসাবে একই করুন; আমি যা কিছু করেছি তা "দৈত্যদের কাঁধে দাঁড়ানো"।
সাজানোর ক্রম হিসাবে, আমার কৌশলটি একটি পরিবর্তিত চিত্রশিল্পীর আলগোরিদিম: প্রতিটি বস্তুর (ক) বেসের উচ্চতা (আমি "স্তর" বলি) এবং (খ) "বেস" বা "ফুট" এর জন্য এক্স / ওয়াই থাকে চিত্রটি (উদাহরণস্বরূপ: অবতারের ভিত্তিটি তার পায়ে; গাছের গোড়াটি তার শিকড়গুলিতে; বিমানের ভিত্তি কেন্দ্র-চিত্র ইত্যাদি) তবে আমি কেবল সর্বনিম্ন সর্বোচ্চ স্তরে, তারপরে সর্বনিম্ন (সর্বোচ্চ স্ক্রিনে) থেকে সর্বোচ্চ বেসে সাজান sort Y, তারপরে সর্বনিম্ন (বাম-সর্বাধিক) থেকে সর্বোচ্চ বেস-এক্স। এটি টাইলসটি যেভাবে প্রত্যাশা করবে সেভাবে রেন্ডার করে।
স্ক্রিন (পয়েন্ট) টাইল (ঘর) এবং ফিরে রূপান্তর করতে কোড:
typedef struct ASIntCell { // like CGPoint, but with int-s vice float-s
int x;
int y;
} ASIntCell;
// Cell-math helper here:
// http://gamedevelopment.tutsplus.com/tutorials/creating-isometric-worlds-a-primer-for-game-developers--gamedev-6511
// Although we had to rotate the coordinates because...
// X increases NE (not SE)
// Y increases SE (not SW)
+ (ASIntCell) cellForPoint: (CGPoint) point
{
const float halfHeight = rfcRowHeight / 2.;
ASIntCell cell;
cell.x = ((point.x / rfcColWidth) - ((point.y - halfHeight) / rfcRowHeight));
cell.y = ((point.x / rfcColWidth) + ((point.y + halfHeight) / rfcRowHeight));
return cell;
}
// Cell-math helper here:
// http://stackoverflow.com/questions/892811/drawing-isometric-game-worlds/893063
// X increases NE,
// Y increases SE
+ (CGPoint) centerForCell: (ASIntCell) cell
{
CGPoint result;
result.x = (cell.x * rfcColWidth / 2) + (cell.y * rfcColWidth / 2);
result.y = (cell.y * rfcRowHeight / 2) - (cell.x * rfcRowHeight / 2);
return result;
}
আপনি বিন্দু থেকে সর্বোচ্চ এবং নিকটতম দর্শকের নিকট থেকে ইউক্যালিডিয়ান দূরত্ব ব্যবহার করতে পারেন, এটি ব্যতীত সঠিক নয় not এটি গোলাকৃতির সাজানোর ক্রমে ফলাফল দেয়। আপনি এটিকে আরও দূরে সন্ধান করে সোজা করতে পারেন। আরও দূরে বক্রতা সমতল হয়ে যায়। সুতরাং কেবল x, y এবং z 'দিতে প্রতিটি x, y এবং z উপাদানগুলিতে 1000 যোগ করুন। X '* x' + y '* y' + z '* z' এর উপর বাছাই।
আসল সমস্যাটি যখন আপনার প্রয়োজন হয় টাইল / স্প্রাইটসকে ছেদ করে / দুটি বা আরও বেশি টাইলস ছড়িয়ে দেওয়া।
সমস্যাটির 2 মাস (হার্ড) মাসিক ব্যক্তিগত বিশ্লেষণের পরে অবশেষে আমি আমার নতুন কোকোস 2 ডি-জেএস গেমটির জন্য একটি "সঠিক রেন্ডার অঙ্কন" খুঁজে পেয়েছি এবং প্রয়োগ করেছি। সমাধান প্রতিটি টাইলের (সংবেদনশীল) জন্য ম্যাপিংয়ের সাথে অন্তর্ভুক্ত থাকে, যা স্প্রাইটগুলি "সামনের, পিছনে, উপরে এবং পিছনে" থাকে। একবার এটি করার পরে আপনি তাদের "পুনরাবৃত্ত যুক্তি" অনুসরণ করে আঁকতে পারেন।