আমি কীভাবে পদ্ধতিগতভাবে অনিয়মিত আকারের স্বাস্থ্য বারগুলি রেন্ডার করতে পারি?


35

Traditionalতিহ্যবাহী আয়তক্ষেত্রাকার বা হার্ট-ভিত্তিক স্বাস্থ্য বারের বিষয়টি হ'ল কিছু বোঝা যায় এবং সহজেই সমাধান করা যায়। তবে নীচে তৈরি মকআপের মতো আরও "সৃজনশীল আকারের" স্বাস্থ্য বারগুলির জন্য গৃহীত সমাধান কী?

খালি স্বাস্থ্য সম্পূর্ণ স্বাস্থ্য, আংশিক স্বাস্থ্য

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

কেবলমাত্র অন্য একটি ধারণা যা আমি সামনে আসতে পারি তা হ'ল স্বাস্থ্যর প্রতিটি চিহ্নকে উপস্থাপনের জন্য "খালি স্বাস্থ্য" স্প্রাইট এবং প্রি-বেক সেটগুলির পিক্সেল স্থানাঙ্কের উপরে "সম্পূর্ণ স্বাস্থ্য" স্প্রিটকে ওভারলে করা এবং তারপরে সেগুলি স্বাস্থ্যরূপে অস্বচ্ছ বা স্বচ্ছ করতে হবে is উপরে বা নীচে যায়

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


5
"নায়ান্নোওম্মাএকসিহাইনিজ্ঞানী শেডার্স, পুত্র"
মুকেশ

আমার মনে হচ্ছে এই রূপান্তরটি গাণিতিকভাবে সংজ্ঞায়িত করা যেতে পারে, সেখান থেকে আপনি কম্পিউটারকে পিক্সেল স্থানাঙ্কগুলি প্রি-বেকিংয়ের পরিবর্তে প্রদর্শন / আড়াল করতে গণনা করতে পারেন
রিচার্ড টিংল

হার্ট আকৃতির স্বাস্থ্য বারটি কীভাবে "সহজেই সমাধান করা যায়"?
মুজবয়েস

1
@ মুজবয়েস আমি হৃদয়-নির্ভর স্বাস্থ্যের কথা বলছিলাম, হৃদয় আকৃতির নয়। লেজেন্ড অফ জেলদা গেমগুলি ভাবুন। আরও স্পষ্ট না হওয়ার জন্য দুঃখিত।
msd7734

@ রিচার্ডটিঙ্গেল, ভাল ধারণা :)
জন

উত্তর:


48

শেডারগুলির সাথে এটি অর্জনের খুব সহজ উপায় রয়েছে, আপনার তিনটি টেক্সচার প্রয়োজন: খালি স্বাস্থ্য বার, স্বাস্থ্য বারের টেক্সচার এবং এক প্রান্তে স্বাস্থ্য বিতরণের গ্রেডিয়েন্ট সহ একটি মুখোশ (উদাহরণস্বরূপ গা black় নয় কালো বা সবচেয়ে স্বচ্ছ আলফা মান) এবং অন্য প্রান্তে অন্যান্য। এটি চিত্রটিতে সর্বোত্তমভাবে প্রদর্শিত হয়েছে, আমি বর্তমানে কেবল বাঁকানো গ্রেডিয়েন্ট কেবল লিনিয়ার এক আঁকতে অক্ষম - তবে আমি নিশ্চিত যে আপনার শিল্পীদের কোনও অসুবিধা হবে না: এখানে চিত্র বর্ণনা লিখুন এখন শেডার নমুনায় টেক্সচার এবং মুখোশের মান উভয়ই প্রান্তিক করে, যা সমস্ত পিক্সেল নয় তা ছাড়িয়ে দেয় in ইনপুট থ্রেশহোল্ডের চেয়ে উজ্জ্বল (স্বাস্থ্যের% শেডার ইনপুটের উপর ভিত্তি করে)।
আপনি পারেকোনও টেক্সচারের পরিবর্তে মাস্কিংয়ের জন্য গাণিতিক সূত্র ব্যবহার করুন, তবে আপনি যদি এটি করেন তবে আপনি এখনও এমন আকারগুলিতে সীমাবদ্ধ থাকবেন যা আপনি বলেছেন সূত্রগুলি তৈরি করতে সক্ষম (= সাধারণ একটি) - এবং এটির সন্ধান তুচ্ছ নয়।
* মন্তব্য দেখুন


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

1
আপনার আসলে কালো না অন্ধকার দরকার নেই, আপনি চান না পিক্সেলগুলি স্ক্রিন আউট করতে আপনি আলফা চ্যানেলটি ব্যবহার করতে পারেন।
জ্যাক এইডলি

1
@ জ্যাকএইডলি নিশ্চিত যে এটি সম্ভব হবে, তবে আমি সমাধানটি যতটা সম্ভব নমনীয়ভাবে চেয়েছিলাম - বেশিরভাগ এএএ শিরোনামে আপনি এইচপি কেবল "লাল" নন তবে এটি টেক্সচারযুক্ত।
আশ্চর্য

1
@ বিসিক্রিট ভাল বক্তব্য, আমি এটিকে একটি অপ্টিমাইজেশন হিসাবে পরামর্শ দেওয়ার বিষয়টি বিবেচনা করেছি। তবে আমি এটি সঠিকভাবে আঁকতে পারি নি তাই আমি এটিকে যথাসম্ভব সহজ রাখার এবং বাস্তবায়নের জন্য অপ্টিমাইজেশন ছেড়ে যাওয়ার সিদ্ধান্ত নিয়েছি।
আশ্চর্য

@ ওন্ড্রা ওপিতে উদাহরণস্বরূপ অনেকগুলি ক্ষেত্রে আপনি কোনও টেক্সচারের পরিবর্তে একটি পদ্ধতিগত গ্রেডিয়েন্ট বা এক-মাত্রিক রঙের চেহারা (ইনপুট হিসাবে মুখোশের স্তর সহ) ব্যবহার করতে পারেন।
র্যান্ডম 832

34

পিক্সেল শেডার হিসাবে গাণিতিকভাবে প্রয়োগ করা:

সিপিইউতে, স্বাস্থ্য নির্দেশনা এবং এটির ভিট 2 এর সাথে ডট পণ্য গণনা করুন এখানে চিত্র বর্ণনা লিখুন

জিপিইউতে, প্রতিটি পিক্সেলের জন্য কেন্দ্রবিন্দু থেকে দূরে একটি সাধারণীকরণের দিকটি গণনা করুন। "ব্যাকগ্রাউন্ড" শেড করতে হবে বা রঙিন তা চয়ন করতে প্রতিটি ডট পণ্যকে স্বাস্থ্য নির্দেশের সাথে তুলনা করুন। এখানে চিত্র বর্ণনা লিখুন

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

প্রথমে একটি কোয়াডে অ্যালগরিদম প্রয়োগ করে বারটি আঁকুন; রেঞ্জমিন এবং রেঞ্জম্যাক্স (বেকড করা যেতে পারে) এবং ক্লিপ () এর মধ্যে আউটপুট রঙগুলি বা অন্য যেখানেই আউটপুট স্বচ্ছ। এরপরে, আলফা ব্যবহার করে এর উপরে (পরিবর্তিত) স্প্রিট আঁকুন। আমি আপনার বারটি সিএডিতে সন্ধান করেছি, এটি বন্যায় ভরা, তারপরে এটি মুছতে পেন্টের দৃ color় বর্ণের আকারটি "ম্যাজিক ঘোরাঘুরি" করে। আমার হাতে অটোক্যাড এবং পেইন্ট মিশ্রণের কারণে ক্র্যাপের মতো দেখাচ্ছে; আপনি অভ্যন্তরীণ প্রান্তগুলি স্বচ্ছের সাথে মিশ্রিত করে ধরেছেন, আপনার নিখুঁত দেখাবে ।

সাদা সীমানা কোয়াডের সীমা। এটি এবং লাল এক্সগুলি কেবলমাত্র রেফারেন্সের জন্য:

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

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


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

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

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

@ জ্যাকএইডলি, কিন্তু কোনও ব্যাকগ্রাউন্ড স্প্রাইট নেই? রংধনুটি কেবল চারটি ফ্লোট3 ওয়ার্ল্ড পজিশন ব্যবহার করে আঁকা; কোন ইউভি, কোনও "ব্যাকগ্রাউন্ড স্প্রাইট" নেই। এছাড়াও, আপনি কি উদ্বিগ্ন যে পিক্সেল শেডার কিছু ক্ষুদ্র কোয়েড নিয়ে কাজ করতে যাচ্ছে? এছাড়াও, রেঞ্জমিন এবং রেঞ্জম্যাক্স ক্লিপ () তত্ক্ষণাত্ those টুকরো।
জন

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