আমি কীভাবে মসৃণ 2 ডি আলোকসজ্জার প্রভাব অর্জন করতে পারি?


18

আমি এক্সএনএ-তে একটি 2 ডি টাইল ভিত্তিক গেম তৈরি করছি।

বর্তমানে আমার বাজ মত দেখায় এই

আমি এটা দেখতে কেমন কিভাবে যাব এই ?

প্রতিটি ব্লকের নিজস্ব রঙিন হওয়ার পরিবর্তে এটির মসৃণ ওভারলে রয়েছে।

আমি কিছুটা শেডর ধরে নিচ্ছি, এবং আশেপাশের টাইলগুলির জন্য শেডারে আলোকিত মানগুলি পাঠানোর জন্য, তবে আমি শেডারের সাথে একটি শিক্ষানবিশ তাই আমি নিশ্চিত নই।

আমার বর্তমান আলো আলোকে গণনা করে এবং তারপরে এটি পাস SpriteBatchকরে টিন্ট প্যারামিটার দিয়ে আঁকায়। প্রতিটি টাইলের একটি থাকে Colorযা আমার আলোকসজ্জার অ্যালগরিদমে আঁকার আগে গণনা করা হয়, যা টিন্টের জন্য ব্যবহৃত হয়।

আমি কীভাবে বর্তমানে আলোকের গণনা করি তার একটি উদাহরণ এখানে রয়েছে (আমি বাম, ডান এবং নীচে থেকে এটিও করি তবে ফ্রেম দ্বারা এই ফ্রেমটি করতে আমি সত্যিই ক্লান্ত হয়ে পড়েছি ...)

এখানে চিত্র বর্ণনা লিখুন

সুতরাং আসলে এখন পর্যন্ত আলো পেতে এবং আঁকতে কোনও সমস্যা নেই !

আমি যুদ্ধের কুয়াশায় এবং ধীরে ধীরে বজ্রপাত তৈরি করতে গ্রেডিয়েন্ট বিজ্ঞপ্তি ওভারলে ব্যবহার করে অজস্র টিউটোরিয়াল দেখেছি, তবে প্রতিটি টাইলকে একটি বিদ্যুতের মান নির্ধারণের জন্য ইতিমধ্যে আমার একটি দুর্দান্ত পদ্ধতি রয়েছে, এটি কেবল তাদের মধ্যে ধীরস্থির করা দরকার।

তাই পর্যালোচনা করা

  • আলোক গণনা (সম্পন্ন)
  • টাইলস আঁকুন (সম্পন্ন, আমি জানি শেডারের জন্য আমার এটি পরিবর্তন করতে হবে)
  • শেড টাইলস (মানগুলি কীভাবে পাস করবেন এবং "গ্রেডিয়েন্ট প্রয়োগ করবেন)

উত্তর:


6

কিভাবে ভালো কিছু সম্পর্কে?

আপনার টাইলের স্প্রিটকে টুকরো টুকরো করে আপনার আলো আঁকবেন না। আপনার আনলিট টাইলসকে রেন্ডার টার্গেটে আঁকুন , তারপরে টাইলের লাইটগুলি দ্বিতীয় রেন্ডার টার্গেটে আঁকুন , প্রতিটি একটিকে টাইলের ক্ষেত্রফলকে গ্রেজস্কেল আয়তক্ষেত্র হিসাবে উপস্থাপন করুন। চূড়ান্ত দৃশ্যটি রেন্ডার করতে, দুটি রেন্ডার লক্ষ্যগুলি একত্রিত করতে একটি শেডার ব্যবহার করুন, দ্বিতীয়টির মান অনুযায়ী প্রথমটির প্রতিটি পিক্সেল গা dark় করে।

এটি এখন আপনার কাছে যা ঠিক তা তৈরি করবে। এটি আপনাকে সাহায্য করে না, সুতরাং আসুন এটি কিছুটা পরিবর্তন করুন।

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

ধরে নিই যে আপনি আপনার শেডারটি সঠিকভাবে লিখেছেন লাইট ম্যাপটি কার্যকরভাবে মিশ্রনের সময় "স্কেল আপ" হওয়া উচিত। এটি আপনাকে গ্রাফিক্স ডিভাইসের টেক্সচার স্যাম্পলারের মাধ্যমে বিনামূল্যে একটি দুর্দান্ত গ্রেডিয়েন্ট এফেক্ট দেবে।

আপনি শেডারটি কাটাতে এবং 'অন্ধকার' ব্লেন্ডস্টেটের সাহায্যে আরও সহজেই এটি করতে সক্ষম হতে পারেন, তবে আপনাকে নির্দিষ্ট করে দেওয়ার আগে আমার এটি পরীক্ষা করে নিতে হবে।

হালনাগাদ

সত্যই এটি উপহাস করার জন্য আমার আজ কিছু সময় ছিল। উপরের উত্তরটি আমার প্রত্যেকের প্রথম উত্তর হিসাবে শেডারগুলি ব্যবহার করার অভ্যাস প্রতিফলিত করে তবে এই ক্ষেত্রে সেগুলি আসলে প্রয়োজনীয় নয় এবং তাদের ব্যবহার অযথাই জিনিসগুলিকে জটিল করে তোলে।

আমি যেমন পরামর্শ দিয়েছি, আপনি কাস্টম ব্লেন্ডস্টেট ব্যবহার করে ঠিক একই প্রভাব অর্জন করতে পারেন। বিশেষত, এই কাস্টম ব্লেন্ডস্টেট:

BlendState Multiply = new BlendState()
{
    AlphaSourceBlend = Blend.DestinationAlpha,
    AlphaDestinationBlend = Blend.Zero,
    AlphaBlendFunction = BlendFunction.Add,
    ColorSourceBlend = Blend.DestinationColor,
    ColorDestinationBlend = Blend.Zero,
    ColorBlendFunction = BlendFunction.Add
}; 

মিশ্রণ সমীকরণ হয়

result = (source * sourceBlendFactor) blendFunction (dest * destBlendFactor)

আমাদের কাস্টম ব্লেন্ডস্টেটের সাথে তাই হয়ে যায়

result = (lightmapColor * destinationColor) + (0)

যার অর্থ খাঁটি সাদা রঙের এক উত্সের রঙ (1, 1, 1, 1) গন্তব্য রঙটি সংরক্ষণ করবে, খাঁটি কালো রঙের একটি উত্স রঙ (0, 0, 0, 1) গন্তব্যটির রঙকে বিশুদ্ধ কালো করে গাen় করবে এবং যে কোনও মাঝের ধূসর ছায়া গোছের পরিমাণে গন্তব্য রঙটি গাen় করবে।

এটি ব্যবহারে আনতে প্রথমে আপনার লাইটম্যাপ তৈরি করতে যা যা করা দরকার তা করুন:

var lightmap = GetLightmapRenderTarget();

তারপর শুধু আপনার আঁকা unlit স্বাভাবিক backbuffer সরাসরি দৃশ্য:

spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend);
/* draw the world here */
spriteBatch.End();

তারপরে কাস্টম ব্লেন্ডস্টেট ব্যবহার করে লাইটম্যাপটি আঁকুন:

var offsetX = 0; // you'll need to set these values to whatever offset is necessary
var offsetY = 0; // to align the lightmap with the map tiles currently being drawn
var width = lightmapWidthInTiles * tileWidth;
var height = lightmapHeightInTiles * tileHeight;

spriteBatch.Begin(SpriteSortMode.Immediate, Multiply);
spriteBatch.Draw(lightmap, new Rectangle(offsetX, offsetY, width, height), Color.White);
spriteBatch.End();

এটি উত্স রঙ (লাইটম্যাপ) দ্বারা গন্তব্য রঙ (আনলিট টাইলস )কে গুণিত করবে, যথাযথভাবে অন্লিট টাইলগুলি গাening় করে তুলবে এবং লাইটম্যাপ টেক্সচারটি প্রয়োজনীয় আকার পর্যন্ত পরিমাপ করার ফলে একটি গ্রেডিয়েন্ট প্রভাব তৈরি করবে।


এটি বেশ সহজ বলে মনে হচ্ছে, আমি পরে কী করতে পারি তা দেখুন। আমি এর আগে কিছু সিমলার চেষ্টা করেছি (আমি সমস্ত কিছুর উপর দিয়ে লাইটম্যাপটি রেন্ডার করেছি এবং একটি ব্লার শেডার ব্যবহার করেছি, তবে আমি রেন্ডারট্যারেটটিকে "স্বচ্ছ" করতে পারিনি, এটিতে বেগুনি রঙের ওভারলে ছিল, তবে আমি
এটিটি বাস্তব

ডিভাইসে আপনার রেন্ডার টার্গেট সেট করার পরে, ডিভাইসকে কল করুন lear ক্লিয়ার (রঙ। ট্রান্সপারেন্ট);
কোল ক্যাম্পবেল

যদিও, এই ক্ষেত্রে, এটি উল্লেখ করার মতো যে আপনার লাইটম্যাপটি সম্ভবত সাদা বা কালো, সাফ যথাক্রমে পূর্ণ আলো এবং সম্পূর্ণ অন্ধকারের মধ্যে পরিষ্কার করা উচিত।
কোল ক্যাম্পবেল

আমি মনে করি যে আমি এর আগে যা চেষ্টা করেছি তা কিন্তু এটি বেগুনি রঙের ছিল, ভাল আমি কাল এটির দিকে নজর দেব this
সাইরাল

প্রায় এই সমস্ত কাজ করে গেছে, তবে এটি কালো থেকে স্বচ্ছ, কালো পরিবর্তে স্বচ্ছ হয়ে যায়। শেডার অংশটি হ'ল আমি কী বিভ্রান্তিতে আছি, কীভাবে একটির নতুন লেখার মূল আনলিট দৃশ্যটি ম্লান করতে লিখতে হয়।
সাইরাল

10

ঠিক আছে এখানে কিছু সহজ এবং মসৃণ 2 ডি বাজ তৈরির জন্য একটি তিনটি সহজ পদ্ধতি, তিনটি পাসে রেন্ডার করুন:

  • পাস 1: বাজ ছাড়াই গেম ওয়ার্ল্ড।
  • পাস 2: বিশ্ব ছাড়া বাজ
  • 1. এবং 2. পাসের সংমিশ্রণ যা স্ক্রিনে প্রদর্শিত হয়।

পাস 1 আপনি সমস্ত sprites এবং ভূখণ্ড আঁকুন।

পাস 2 এ আপনি স্প্রাইটের একটি দ্বিতীয় গ্রুপ আঁকেন যা আলোর উত্স। তাদের দেখতে
এখানে চিত্র বর্ণনা লিখুন
এটির অনুরূপ হওয়া উচিত: কালো দিয়ে রেন্ডার টার্গেটটি আরম্ভ করুন এবং সর্বাধিক বা অ্যাডেটিভ মিশ্রণের সাহায্যে সেইগুলিতে স্প্রিটগুলি আঁকুন।

পাস 3 এ আপনি দুটি পূর্ব পাস একত্রিত করুন। এগুলি একত্রিত করার জন্য একাধিক বিভিন্ন উপায় রয়েছে। তবে সবচেয়ে সহজ এবং সর্বনিম্ন আর্টসি পদ্ধতিটি হ'ল মাল্টিপ্লাইয়ের মাধ্যমে তাদের একত্রিত করা। এটি দেখতে এটির মতো হবে:
এখানে চিত্র বর্ণনা লিখুন


বিষয়টি হ'ল আমার কাছে ইতিমধ্যে একটি আলোক ব্যবস্থা রয়েছে এবং কিছু বস্তুর মধ্য দিয়ে যাওয়ার জন্য আলোক প্রয়োজন এবং কিছু না পারার কারণে পয়েন্ট লাইটগুলি এখানে কাজ করে না।
সাইরাল

2
ঠিক আছে যে আরও জটিল। ছায়া পেতে আপনাকে রে-কাস্ট করতে হবে। তেরেরিয়া তাদের ভূখণ্ডের জন্য বড় বড় ব্লক ব্যবহার করে যাতে কোনও সমস্যা হয় না। আপনি অদম্য রশ্মির castালাই ব্যবহার করতে পারেন তবে এটি টেরিয়ারিয়ার চেয়ে ভাল লাগবে না এবং আপনার গ্রাফিকগুলি অবরুদ্ধ না করে থাকলেও এটি আরও কম ফিট হতে পারে। উন্নত এবং সুদর্শন কৌশলটির জন্য এই নিবন্ধটি রয়েছে: গেমদেব.नेट
এপিআই-বিস্ট

2

আপনার পোস্ট করা দ্বিতীয় লিঙ্কটি এক ধরণের যুদ্ধের কুয়াশার মতো দেখাচ্ছে , এটি নিয়ে আরও বেশ কয়েকটি প্রশ্ন রয়েছে

এটি আমার কাছে এমন জমিনের মতো দেখাচ্ছে যেখানে আপনি প্লেয়ারটি এগিয়ে যাওয়ার সাথে সাথে কালো ওভারলেয়ের বিটগুলি "মুছুন" (পিক্সেলের আলফা 0 সেট করে))

আমি বলব যে ব্যক্তি অবশ্যই ব্রাশ প্রকারের "মুছা" ব্যবহার করেছে যেখানে প্লেয়ার অন্বেষণ করেছে।


1
এটি যুদ্ধের কুয়াশা নয়, এটি প্রতিটি ফ্রেমের বাজ গণনা করে। আমি যে খেলাটির দিকে ইঙ্গিত করেছি তা টেরারিয়ার মতো।
সাইরাল

আমি যেটা বোঝাতে
চাইছিলাম

2

টাইলগুলির পরিবর্তে হালকা প্রান্ত (টাইলগুলির মধ্যে কোণ)। তার চারটি শীর্ষের উপর ভিত্তি করে প্রতিটি টাইল জুড়ে মিশ্রিত আলো।

এটি কতটা প্রজ্জ্বলিত তা নির্ধারণের জন্য প্রতিটি শিখরে লাইন অফ দর্শন পরীক্ষা করুন (আপনি হয় সমস্ত ব্লক থামাতে পারেন বা হালকা হ্রাস করতে পারেন, উদাহরণস্বরূপ, প্রতিটি ভার্টেক্সের কতগুলি ছেদকে দূরত্বের সাথে মিলিত করে একটি আলোক মান গণনা করার পরিবর্তে গণনা করুন) খাঁটি বাইনারি দৃশ্যমান / দৃশ্যমান নয়)

টাইল রেন্ডার করার সময়, প্রতিটি ভার্টেক্সের জন্য হালকা মানটি জিপিইউতে প্রেরণ করুন। টাইলের স্প্রিটের প্রতিটি খণ্ডে স্বচ্ছলভাবে প্রতিটি পিক্সেল আলোকিত করার জন্য আপনি প্রতিটি টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো শব্দ জিএলএসএল স্পর্শ করার পরে এটি যথেষ্ট দীর্ঘ হয়েছে যে আসল কোডের নমুনা দিতে আমি স্বাচ্ছন্দ্য বোধ করি না তবে সিউডো কোডে এটি এতটা সহজ হবে:

texture t_Sprite
vec2 in_UV
vec4 in_Light // coudl be one float; assuming you might want colored lights though

fragment shader() {
  output = sample2d(t_Sprite, in_UV) * in_Light;
}

ভার্টেক্স শ্যাডারটি কেবল ইনপুট মানগুলি টুকরা শ্যাডারে প্রেরণ করতে হবে, এমনকি দূরবর্তী থেকে জটিল কিছুও নয়।

আপনি আরও শীর্ষে (এমনকি প্রতিটি টাইলকে চারটি সাব-টাইল হিসাবে রেন্ডার করা হয়) দিয়ে আরও মসৃণ আলো পাবেন, তবে আপনি যে মানের দিকে যাচ্ছেন তার উপর নির্ভর করে যে প্রচেষ্টা করা উচিত হবে তা নয়। প্রথমে সহজ উপায়টি ব্যবহার করে দেখুন।


1
line-of sight tests to each vertex? এটা ব্যয়বহুল হতে চলেছে।
ashes999

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

দর্শন পরীক্ষার লাইন ব্যবহার করা এটিকে আরও জটিল করে তুলবে, আমি ইতিমধ্যে আলোক সজ্জিত করেছি। এখন আমি যখন 4 টি প্রান্তকে শেডারে প্রেরণ করব তখন আমি কীভাবে এটি করতে পারি? আমি জানি আপনি বাস্তব কোড নমুনা দিতে স্বাচ্ছন্দ্য বোধ করেন না, তবে আমি যদি আরও কিছু তথ্য পেতে পারি তবে তা ভাল। আমি আরও তথ্য দিয়ে প্রশ্ন সম্পাদনা করেছি।
সাইরাল
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.