কণা সহ নরম প্রান্ত অঞ্চলগুলি কীভাবে প্রয়োগ করা যায়


13

আমার গেমটি ফ্যাসার ব্যবহার করে তৈরি করা হয়েছে তবে প্রশ্নটি নিজেই ইঞ্জিন-অজোনস্টিক।

আমার গেমটিতে আমার বেশ কয়েকটি পরিবেশ রয়েছে, মূলত বহুভুজীয় অঞ্চল যেখানে প্লেয়ারের চরিত্রগুলি প্রবেশ করতে পারে এবং দ্বারা প্রভাবিত হতে পারে। উদাহরণস্বরূপ বরফ, আগুন, বিষ ইত্যাদি 'এই অঞ্চলের গ্রাফিক উপাদানটি হ'ল রঙে ভরা বহুভুজ অঞ্চল এবং উপযুক্ত প্রকারের কণা (উদাহরণস্বরূপ বরফের শার্ড)। কণার প্যাটার্নটি দিয়ে টাইলস্প্রাইটকে coveringেকে দেওয়া বহুভুতির মুখোশ দিয়ে আমি বর্তমানে এটি বাস্তবায়ন করছি:

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

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

উদাহরণস্বরূপ (মকআপ):

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

আমি মনে করি বহুভুজ অস্পষ্ট করে 1 অর্জন করা যেতে পারে তবে আমি কীভাবে 2 দিয়ে যেতে পারি তা নিশ্চিত নই।

আপনি কীভাবে এটি বাস্তবায়ন করবেন?


2
দারুণ লাগছে। আপনার গেমের সাথে আমার কি একটি লিঙ্ক থাকতে পারে দয়া করে? :)
ashes999

@ গেমএলচেমিস্ট এখানে টাইল চিত্রটি রয়েছে i.imgur.com/y54CeQ9.png
OpherV

@ ashes999 এটি এখনও কাজ চলছে। আমি একবার এখানে
আসার

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

পছন্দ করুন দয়া করে আপনার প্রশ্নটি সম্পাদনা করুন এবং একটি লিঙ্ক পোস্ট করুন - এটি সম্ভবত এই সাইটে এটি বাজারজাত করার সবচেয়ে অনন্য-বিষয় :) :)
ashes999

উত্তর:


2

1. যদি আপনি এমন কিছু চান যা আপনার মকআপের নিকটে থাকে তবে আমি কণা ব্যবহার করব (এটি সম্পূর্ণরূপে বিকশিত কণা সিস্টেম হওয়া উচিত নয়)।

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

আপনি ত্রিভুজগুলি সরাসরি কণার জমিনে রাখার চেষ্টা করতে পারেন এবং দেখুন কীভাবে এটি কার্যকর হয়। অন্যথায় এগুলিকে আপনার পৃথক স্তর হিসাবে "কণা স্যুপ" এর উপরে রেন্ডার করুন।

আপডেট হওয়া জেসফিলে এমন একটি দ্রুত মকআপ তৈরি করা হয়েছে যা দেখে মনে হয় ডেমো আপনি এখানে আপডেট হওয়া ডেমোটি খুঁজে পেতে পারেন

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

একটি কণার বেগ গণনা করার সূত্রটি এরকম কিছু হবে:

//player.velocity and particle.velocity are vectors 
//k is a factor to enhance or weaken the influence of players velocity
var distanceToPlayer = (player.position - particle.position).length();
particle.velocity = particle.velocity + ((k * player.velocity) + particle.velocity) * (1/distanceToPlayer);

কণার অবস্থান গণনা করতে আপনি এটি আপনার আপডেট পদ্ধতিতে রেখেছেন:

var speedY = -(springConstant * (particle.position.y - particle.origin.y)) - (dampingFactor * particle.velocity.y);
var speedX = -(springConstant * (particle.position.x - particle.origin.x)) - (dampingFactor * particle.velocity.x);

particle.position.y = particle.position.y + speedY;
particle.position.x = particle.position.x + speedX;

particle.velocity.x = particle.velocity.x + speedX;
particle.velocity.y = particle.velocity.y + speedY;

এটি আপনাকে একটি "তরল" দেবে যেখানে প্লেয়ার যখন তরলকে চাপ দেয় তখন প্রতিটি কণা তার উত্সের চারদিকে ঘুরে বেড়ায়। স্প্রিংকনস্ট্যান্ট পরিবর্তন করে যে কোনও কণা তার উত্স এবং স্যাঁতসেঁতে ফ্যাক্টর থেকে কতটা দূরে সরে যায় কণাটি কীভাবে বিশ্রামে আসে তা দ্রুত। আমি আমার গেমটিতে ব্যবহৃত 1 ডি সিমুলেশনের পরিবর্তিত সংস্করণ থেকে আপনার কোডটি টুইট করতে হতে পারে।

এখন একটি ডেমো সাথে ডেমো শুধু তরল আচরণ করবে যতক্ষণ না উপরের 3 ধ্রুবক খামচি আপনি এটি করতে চান।


এটি # 1 সমাধান করার জন্য একটি সত্যিই আকর্ষণীয় ধারণা! আমি এটা পছন্দ করি. আপনি কীভাবে ত্রিভুজ আন্দোলন-ব্যবধান বাস্তবায়নের পরামর্শ দিবেন?
OpherV

1
প্রশ্নের উত্তর # 2 দিতে আমি মূল পোস্টটি সম্পাদনা করেছি।
জিলুস

কণা প্রভাব একটি ছোট ডেমো যুক্ত। আমি মনে করি আপনি সামান্য টুইট করে আপনার পছন্দসই প্রভাবটি পেতে পারেন।
জিলুস

আমি আপনার সমাধানটি ব্যবহার করে শেষ করেছি, এটি আমি যে প্রভাবটি অর্জন করতে চাইছিলাম তার নিকটতম এটি। ধন্যবাদ! যদিও একটি প্রশ্ন - আমি কীভাবে আপনার উদাহরণগুলিতে বসন্তকে বাতাব, যাতে সামান্য হালকা চলাচলের ফলে কণাগুলি এত বড় দূরত্ব অতিক্রম করতে না পারে?
ওফেরভি

আপনি স্যাঁতসেঁতে ফ্যাক্টর এবং স্প্রিংকনস্ট্যান্টের সাথে চারপাশে খেলতে পারেন। একটি উচ্চ স্যাঁতসেঁতে কণাগুলি বিশ্রামে দ্রুত নিয়ে আসে। একটি নিম্ন বসন্ত ধ্রুবক কণার গতি হ্রাস করে। দুর্ভাগ্যক্রমে, উভয় মানই কণার স্যুপটিকে আরও সান্দ্র মনে করে। সুতরাং পরিবর্তে, যখন আপনার প্লেয়ারটি কণাকে স্পর্শ করে, আপনি প্লেয়ারটি কণায় সর্বাধিক গতিবেগকে ক্ল্যাম্প করতে পারেন, যেমন: কণা.বেলোসিটি.এক্স = ক্ল্যাম্প (ম্যাক্সেলোসিটি, -ম্যাকভেলসিটি, পার্টিকেল.বেলোসিটি.এক্স + ((প্লেয়ারআইফ্লুয়েন্সফ্যাক্টর * ডেল্টাভেলোসিটিএক্স ) + কণা.বেলোসিটি.এক্স) * (1 / দূরত্ব টোপ্লেয়ার)); বাতা জন্য দেখুন: stackoverflow.com/a/11409944
zilluss

4

এই দুটি বিষয় সম্পর্কে আমার ধারণা:

  1. আপনি শেডার ব্লার ব্যবহার করতে পারেন, তবে এটি খুব ব্যয়বহুল হতে চলেছে। পরিবর্তে আমি ত্রিভুজগুলির একটি অতিরিক্ত সীমানা আঁকবো যা কেন্দ্রে স্বচ্ছ থেকে প্রান্তে বিবর্ণ হয়ে "ঝাপসা" অনুকরণ করে। আমি আমার একটি খেলায় এটি করেছি এবং এটি বেশ ভালভাবে কাজ করে। আমার গেমটিতে একটি রংধনু-ইশ বুস্টারটির দুটি স্ক্রিনশট এখানে।

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

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

  2. আমি একটি কণা সিস্টেম প্রোগ্রাম এবং কণাগুলি বহুভুজ অনুসরণ করতে হবে। এটি করে, আপনাকে কিনারায় কী হবে তা নিয়ে চিন্তা করতে হবে না। আপনার কণা সিস্টেমের গতিশীলতাগুলি নিশ্চিত করবে যে কণাগুলি বহুভুজের ভিতরে রয়েছে এবং সমানভাবে বিতরণ করা হয়েছে। আপনি নিকটতম কণাগুলি একে অপরকে দূরে সরিয়ে দেওয়ার চেষ্টা করতে পারেন, তবে এটি অনেকগুলি "ভর" দিয়ে তৈরি করুন যাতে আপনার জড়তা থাকে এবং এটি মসৃণ দেখায়। এই জিনিসটিকে দ্রুত করতে, কিছু সম্ভাবনা রয়েছে তবে বড় সমস্যাটি একে অপরের প্রক্রিয়াটিকে ধাক্কা দেওয়ার সময় জটিলতা হতে চলেছে। আপনি যদি প্রতিটি কণাকে প্রতিটি অন্যান্য কণাকে ধাক্কা দিয়ে থাকেন তবে আপনার ও (এন ^ 2) থাকবে যা আপনার সিস্টেমে উদাহরণস্বরূপ 100 টি কণা রাখলে ভাল নয়। আপনি কীভাবে এটি অপ্টিমাইজ করতে পারবেন সে সম্পর্কে একটি ভাল পঠন পিক্সেল জাঙ্কের উপস্থাপনা:http://fumufumu.q-games.com/gdc2010/shooterGDC.pdf

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


ধন্যবাদ! ১. এটি দেখার জন্য আমার খুব কষ্ট হচ্ছে। আপনার গেমটিতে এটি কীভাবে দেখাচ্ছে? এটির মতো একটি মকআপ পোস্ট করতে পারেন? 2. আকর্ষণীয়! এ সম্পর্কে পড়তে হবে
OpherV

ছবিগুলির জন্য ধন্যবাদ। আমি দেখতে পাচ্ছি যে এটি কোনও নল বা লাইন ভিত্তিক আকারে কীভাবে কাজ করবে তবে কীভাবে বহুভুজ নিয়ে কাজ করবে? প্রতিটি দিক থেকে অনুমান করা ত্রিভুজগুলির গ্রেডিয়েন্টগুলি ভালভাবে সরে যাবে না ...?
OpherV

তাদের সুন্দরভাবে ফিট করুন। এটাই ধারণা। এর মধ্যে ছেদগুলির কয়েকটি গণিত এবং কম্পিউটিং পয়েন্টগুলি অন্তর্ভুক্ত রয়েছে You সম্ভাবনা টন।
মার্টিজন কোর্টেক্স

3

আপনার পোস্টটি পড়ার সময় আমার এই ধারণাটি ছিল:
t এমন একটি টাইলস তৈরি করুন যা আপনি আপনার অঞ্চলে ব্যবহার করবেন।
Poly টাইল রেজোলিউশনে একটি ছোট অস্থায়ী ক্যানভাসে অঞ্চল বহুভুজটি রেন্ডার করুন (উদা: উদাহরণস্বরূপ: টাইলগুলি 16X16 হয়, একটি (16 এক্স, 16 এক্স) নিম্ন রেজোলিউশনে রেন্ডার করুন)।
Can টাইলস রেন্ডার করার জন্য ওয়েথারের সিদ্ধান্ত নেওয়ার জন্য সেই অস্থায়ী ক্যানভাসটি ব্যবহার করুন বা মূল ক্যানভাসে নয়:
যদি নিম্ন-রেস ক্যানভাসে কোনও বিন্দু সেট করা থাকে তবে মূল ক্যানভাসে একটি 'এলোমেলো' টাইল আঁকুন। যদি বিন্দুটি কোনও নির্দিষ্ট বিন্দুর প্রতিবেশী হয় তবে মূল ক্যানভাসে একটি নিম্ন রঞ্জক (ট্রানজিশন করতে) একটি 'এলোমেলো' টাইল আঁকুন।

আমি ভীত ছিলাম যে রেজোলিউশন হ্রাস একটি ব্লক প্রভাব তৈরি করবে, তবে 20X20 টাইলস সহ এটি বেশ ভাল দেখাচ্ছে:

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

এর জন্য পদক্ষেপগুলি: আপনার বহুভুজটি নিন:
এখানে চিত্র বর্ণনা লিখুন

আপনার টাইল রেজোলিউশনে বহুভুজটি আঁকুন: এখানে চিত্র বর্ণনা লিখুন(!! হ্যাঁ এটি মল লাল জিনিস)।

তারপরে টাইল বা নোট আঁকতে ওয়েদার সিদ্ধান্ত নেওয়ার জন্য লো-রেজোলিউশন ক্যানভাসের ইমেজ ডেটা ব্যবহার করুন।
যদি কোনও পিক্সেল কম-রেজো ক্যানভাসে সেট করা থাকে তবে এর অর্থ আমাদের টাইল আঁকতে হবে: কোন টাইল আঁকতে হবে তা বেছে নিতে একটি 'এলোমেলো' টাইল সূচক বেছে নিন। প্রদত্ত অঞ্চল / টাইলের জন্য এলোমেলো সূচক সর্বদা একই হওয়া উচিত।
যদি একটি বিন্দু খালি থাকে তবে একটি ভরাট পয়েন্টের পাশে, একটি টাইলও আঁকুন, তবে অর্ধেক অস্বচ্ছতার সাথে।

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

সুতরাং টাইলস আঁকুন:

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

বহুভুজের জন্য আমি বহুগুণ বহুবার আঁকছি, এটিকে কমিয়ে এনেছি এবং প্রতিটি ড্রতে অস্বচ্ছতা বর্ধন করছি (কেউ গ্লোবাল কম্পোজিটঅপ্রেশন 'লাইটার' ব্যবহার করতে পারে)।

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

একবার আপনি সমস্ত কিছু যোগ করার পরে এটি দেয়:

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

ফিডল এখানে:

http://jsfiddle.net/gamealchemist/T7b4Y/

আমাকে জানতে দা্ও এটা সাহয্য করে কি - না.


আপনার সমাধানটি বিস্তারিতভাবে ব্যাখ্যা করার জন্য এবং কোড সরবরাহ করার জন্য ধন্যবাদ! "তারপরে কোন টাইল বা নোট আঁকতে ওয়েদার সিদ্ধান্ত নেওয়ার জন্য লো-রেজুলেশন ক্যানভাসের চিত্রটি ডেটা ব্যবহার করুন" এর অর্থ কী? আপনি কীভাবে ছোট চিত্রের ডেটা ব্যবহার করবেন তা স্থির করতে যেখানে the বড় চিত্রটিতে কীভাবে আঁকবেন? এবং এই পদ্ধতিটি ব্যবহার করে আমি কীভাবে ত্রিভুজগুলির ওভারল্যাপটি এড়াতে পারি তাই আমার মকআপের মতো ফাঁক ফাঁকে স্থান অর্জন করতে পারি?
OpherV

মানে এটি একটি সম্পূর্ণ বুলিয়ান পরীক্ষা: আমার কি এই টাইলটি পূরণ করা দরকার? , সত্য বা মিথ্যা, চিত্রের ডেটা [(x + y * প্রস্থ) * 4] এর নিম্ন-রেজাল্ট পরীক্ষার মাধ্যমে দেওয়া হয়েছে! = 0, মানে == 'আমি কি নীচের রেস ক্যানভাসে কিছু আঁকলাম? সেই টালি জায়গা? '। তারপরে যদি হ্যাঁ, আমি (x, y) থেকে একটি 'এলোমেলো' টাইল সূচীতে যেতে কিছু বিশদযুক্ত প্রাইম-নম্বর-পূর্ণ সূত্র (getRandomNumber) ব্যবহার করি যা প্রদত্ত অঞ্চল + (x, y) এর জন্য সর্বদা একই সংখ্যা সরবরাহ করবে। আমি দেখতে পাচ্ছি না যে জিনিসগুলি কীভাবে ওভারল্যাপ হতে পারে যদি আপনি সঠিকভাবে আপনার বহুভুজটি সংজ্ঞায়িত করেন যাতে আমি আপনার দ্বিতীয় প্রশ্নটি না পাই।
গেমএলচেমিস্ট

1

শুধু একটি ধারণা:

আপনার টাইলের মধ্যে, "টুকরা" সর্বাধিক প্রায় 80px প্রশস্ত। আমি 2 টি অঞ্চল তৈরির পরামর্শ দেব। আপনি আপনার মূল বহুভুজটি আঁকুন এবং আপনি প্রতিটি প্রান্ত থেকে প্রায় 80 পিক্সেল বের করে এনে একটি মকআপ তৈরি করেন। তারপরে আপনি আপনার টাইলগুলি বড় বহুভুজের মধ্যে আঁকুন।

তারপরে, সমস্ত "টুকরোগুলি" যার অভ্যন্তরের বহুভুজের বাইরে পিক্সেল থাকে এবং অভ্যন্তরীণ বহুভুজের সাথে কোনও ছেদ না করে আপনি এটিকে স্বচ্ছতার সাথে পূরণ করতে পারবেন না।

এটি খুব উচ্চ স্তরের, তবে আমি অনুভব করেছি যে আমি এটি আপনার সাথে ভাগ করব। এখানে অনেকগুলি বিশদ নির্ধারিত হবে।

প্রদর্শনের জন্য একটি অপরিশোধিত চিত্র:

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

ভিতরের কালো বহুভুজটি যদি আসল ছিল তবে আপনি একটি লাল বিন্দু দিয়ে সমস্ত বহুভুজ মুছে ফেলবেন।


অভ্যন্তরীণ বহুভুজ সহ টাইল ইমেজটিতে থাকা টুকরোগুলির জন্য ছেদটি কীভাবে পরীক্ষা করবেন?
OpherV

@ ওফারভি উহুম, আপনি নির্ধারণ করতে পারেন যে পয়েন্ট এক্সটি বহুভুজের ঠিক আছে কিনা? আপনি বাহ্যিক বহুভুজের সমস্ত পিক্সেল লুপ করতে পারেন এবং প্রতিটি সাদা পিক্সেলের জন্য বন্যা সমস্ত পিক্সেল পরীক্ষা করে দেখতে পারেন এবং অভ্যন্তরীণ / আউটটারগুলির মধ্যে কোনও মিথ্যা রয়েছে কিনা তা দেখুন। এটি যদিও বিশেষভাবে কার্যকর শোনাচ্ছে না, তবে একবার আপনার কিছু হয়ে গেলে আপনি অনুকূল করার উপায়গুলি ভাবতে পারেন?
user46560

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

@ টিওড্রন এটিই আমি উত্তরটি দেওয়ার চেষ্টা করেছি। এটি একটি উচ্চ স্তরের ধারণা এবং আমি সত্যিই গেম ডেভেলপার নই। আমি শুধু একটি ধারণা ছিল।
user46560

@ ইউজার ৪656060০ হ্যাঁ, তবে এই আন্তঃ-বহুভুজ ব্যান্ডে পিক্সেলগুলি কি তা গণনা করতে হবে না .. জিপিইউতে বা সিপিইউতে নয়। আপনি যেহেতু গেম বিকাশের পথে অভ্যস্ত নন তাই আপনার ধারণার জন্য আপনি একটি +1 প্রাপ্য :)।
teodron
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.