paint-brush
StatefulUI: রাজ্য এবং মার্কআপের উপর ভিত্তি করে একটি ইউনিটি UI লাইব্রেরিদ্বারা@dmitrii
2,943 পড়া
2,943 পড়া

StatefulUI: রাজ্য এবং মার্কআপের উপর ভিত্তি করে একটি ইউনিটি UI লাইব্রেরি

দ্বারা Dmitrii Ivashchenko12m2023/05/17
Read on Terminal Reader
Read this story w/o Javascript

অতিদীর্ঘ; পড়তে

Dmitrii Ivashchenko MY.GAMES-এর একজন সফটওয়্যার ইঞ্জিনিয়ার। এই নিবন্ধে, আমরা রাজ্য এবং উপাদানগুলির মার্কআপের উপর ভিত্তি করে ইউনিটিতে একটি ইউজার ইন্টারফেস তৈরি করার বিষয়ে কথা বলব। বর্ণিত পদ্ধতি [UI Toolkit] বা অন্যান্য UI বিল্ডিং সিস্টেমে প্রযোজ্য নয়।

People Mentioned

Mention Thumbnail
featured image - StatefulUI: রাজ্য এবং মার্কআপের উপর ভিত্তি করে একটি ইউনিটি UI লাইব্রেরি
Dmitrii Ivashchenko HackerNoon profile picture
0-item
1-item

সবাইকে হ্যালো, আমার নাম দিমিত্রি ইভাশচেঙ্কো, এবং আমি MY.GAMES-এর একজন সফটওয়্যার ইঞ্জিনিয়ার। এই নিবন্ধে, আমরা রাজ্য এবং উপাদানগুলির মার্কআপের উপর ভিত্তি করে ইউনিটিতে একটি ইউজার ইন্টারফেস তৈরি করার বিষয়ে কথা বলব।

ভূমিকা

প্রথমত, এটি লক্ষ করা উচিত যে আমরা ইউনিটি UI (uGUI) প্রযুক্তির প্রসঙ্গে কথা বলব, যা এখনও ডকুমেন্টেশন অনুসারে রানটাইমের জন্য সুপারিশ করা হয়। বর্ণিত পদ্ধতি UI টুলকিট , IMGUI , বা অন্যান্য UI বিল্ডিং সিস্টেমে প্রযোজ্য নয়৷



প্রায়শই ইউনিটি প্রকল্পগুলিতে, আপনি MonoBehaviour থেকে উত্তরাধিকারসূত্রে প্রাপ্ত ভিউ ক্লাসের উপর নির্মিত এবং প্রচুর সংখ্যক SerializeField ফিল্ডের সাথে তৈরি UI বাস্তবায়ন দেখতে পাবেন। এই পদ্ধতিটি UI-এর আচরণের উপর সম্পূর্ণ নিয়ন্ত্রণ প্রদান করে, তবে এটি ভিউ এবং উপস্থাপক স্তরে (ব্যবহৃত আর্কিটেকচারের উপর নির্ভর করে) প্রচুর পরিমাণে কোড লেখার জন্য প্রয়োজনীয় করে তোলে।


প্রায়শই, প্রকল্পের বিকাশ অব্যাহত থাকার সাথে সাথে, এই ক্লাসগুলি অবিশ্বাস্য আকারে ফুলে যায় এবং গেমঅবজেক্টের উপাদানগুলি নিজেই অভ্যন্তরীণ বস্তুর লিঙ্কগুলির একটি বিশাল সংখ্যা দিয়ে আচ্ছাদিত হয়:



এই ধরনের উপাদানগুলি পরিবর্তন করাও উপভোগ্য নয়: একটি ক্লাসে একটি নতুন উপাদানের একটি রেফারেন্স পেতে, আপনাকে SerializeField যোগ করতে হবে, কোডটি পুনরায় কম্পাইল করতে হবে, প্রিফ্যাব উপাদানটিতে নতুন ক্ষেত্রটি খুঁজে বের করতে হবে এবং প্রয়োজনীয় বস্তুটিকে এতে টেনে আনতে হবে। প্রকল্পের বৃদ্ধির সাথে সাথে কম্পাইলের সময়, ক্ষেত্রের সংখ্যা এবং প্রিফ্যাবগুলি সংগঠিত করার জটিলতাও পালাক্রমে বৃদ্ধি পায়।


ফলস্বরূপ, আমরা MonoBehaviour এর বিশাল এবং ওভারলোডেড সাবক্লাস (অথবা আপনার পছন্দের উপর নির্ভর করে প্রচুর সংখ্যক ছোট) নিয়ে আসি।


এটিও বিবেচনা করা উচিত যে এই জাতীয় UI-এর আচরণে যে কোনও পরিবর্তন প্রোগ্রামারের জন্য একটি কাজ, এবং সেই কাজটি সমস্ত সম্পর্কিত খরচের সাথে আসে: কোড পর্যালোচনা, মার্জ দ্বন্দ্ব সমাধান করা, পরীক্ষার সাথে কোড কভারেজ ইত্যাদি।


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


  1. প্রথমত, কোড ব্যবহার করে উইন্ডোর অবস্থার কোনো পরিবর্তন ঘটে। পাঠ্যের রঙ পরিবর্তন করতে, একটি চিত্র পরিবর্তন করতে, একটি অ্যানিমেশন চালাতে, একটি বস্তুকে স্ক্রিনে সরাতে — সমস্ত জড়িত অবজেক্ট এবং পরামিতিগুলির জন্য একটি সংশ্লিষ্ট SerializeField প্রয়োজন হয় এবং তারপরে এটি প্রয়োজনীয়তা অনুসারে কাজ করার জন্য প্রচুর পরিমাণে কোড লেখা হয়। . স্বাভাবিকভাবেই, শুধুমাত্র একজন প্রোগ্রামার এটি পরিচালনা করতে পারে, এবং বাস্তবায়নটি দীর্ঘ, ব্যয়বহুল এবং অতি-দক্ষ (প্রায়শই যে কেউ লক্ষ্য করতে পারে তার চেয়ে অনেক বেশি দক্ষ) হতে পারে।
  2. আরেকটি পদ্ধতিকে " সর্বশক্তিমান অ্যানিমেটর " হিসাবে বর্ণনা করা যেতে পারে। ভিউ ক্লাস ছাড়াও, একটি অ্যানিমেটর কন্ট্রোলার তৈরি এবং প্যারামিটারের মাধ্যমে নিয়ন্ত্রিত হয়। নতুন উইন্ডোতে একটি নতুন অ্যানিমেটর প্রদর্শিত হবে, এবং এভাবেই, যতক্ষণ না FPS যখন উইন্ডোগুলি প্রদর্শন করা শুরু হয় তখন ড্রপ হয়।



এখন যেহেতু আমরা uGUI এর সাথে কাজ করার কিছু অসুবিধা তুলে ধরেছি, আমি এই সমস্যাটি সমাধান করার জন্য একটি ভিন্ন পদ্ধতির বিষয়ে কথা বলতে চাই।

স্টেটফুল UI

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


লাইব্রেরির সোর্স কোড GitHub এ ডাউনলোডের জন্য উপলব্ধ

রাষ্ট্রীয় উপাদান

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



প্রতিটি লিঙ্ক তার ভূমিকার উপর ভিত্তি করে নামকরণ করা হয়. কোডের দৃষ্টিকোণ থেকে, ভূমিকার সেট একটি নিয়মিত enum । প্রতিটি ধরণের UI উপাদান (বোতাম, ছবি, পাঠ্য ইত্যাদি) জন্য ভূমিকার পৃথক সেট প্রস্তুত করা হয়:


 public enum ButtonRole { ... } public enum ImageRole { ... } public enum TextRole { ... } ...


ভূমিকা সরাসরি উপাদান থেকে তৈরি করা হয়, এবং ম্যানুয়ালি enum সম্পাদনা করার কোন প্রয়োজন নেই। একটি ভূমিকা তৈরি করার সময় পুনঃসংকলনের জন্য অপেক্ষা করাও প্রয়োজনীয় নয়, কারণ এই enum উপাদানগুলি তৈরির পরপরই ব্যবহার করা যেতে পারে।


মার্জ দ্বন্দ্বগুলিকে সহজ করার জন্য, উপাদানগুলির নামের উপর ভিত্তি করে গণনার মানগুলি গণনা করা হয়:


 [StatefulUI.Runtime.RoleAttributes.ButtonRoleAttribute] public enum ButtonRole { Unknown = 0, Start = -1436209294, // -1436209294 == "Start".GetHashCode() Settings = 681682073, Close = -1261564850, Quests = 1375430261, }


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


প্রতিটি ধরনের UI উপাদান (বোতাম, পাঠ্য, ছবি) তার নিজস্ব ট্যাবে অবস্থিত:



ভূমিকা ব্যবহার করে, প্রিফ্যাবের ভিতরে সমস্ত উপাদানের সম্পূর্ণ মার্কআপ অর্জন করা হয়। চিত্র এবং পাঠ্য অ্যাক্সেস করার জন্য SerializeField সেটের আর প্রয়োজন নেই, এবং StatefulComponent একটি রেফারেন্স থাকা এবং পছন্দসই চিত্রটির ভূমিকা জানা যথেষ্ট, উদাহরণস্বরূপ, এর স্প্রাইট প্রতিস্থাপন করতে।


বর্তমানে অ্যাক্সেসযোগ্য উপাদানগুলির প্রকারগুলি হল:


  • বোতাম, ছবি, টগল, স্লাইডার, ড্রপডাউন, ভিডিও প্লেয়ার, অ্যানিমেটর
  • UnityEngine.UI.Text এবং TextMeshProUGUI সহ পাঠ্য
  • UnityEngine.UI.InputField এবং TMP_InputField সহ TextInputs
  • বস্তু - নির্বিচারে বস্তুর উল্লেখের জন্য।


টীকাযুক্ত বস্তুর সাথে কাজ করার জন্য সংশ্লিষ্ট পদ্ধতি আছে। কোডে, আপনি StatefulComponent এর একটি রেফারেন্স ব্যবহার করতে পারেন বা StatefulView থেকে ক্লাসটি উত্তরাধিকারী করতে পারেন:


 public class ExamplePresenter { private StatefulComponent _view; public void OnOpen() { _view.GetButton(ButtonRole.Settings).onClick.AddListener(OnSettingsClicked); _view.GetButton(ButtonRole.Close).onClick.AddListener(OnCloseClicked); _view.GetSlider(SliderRole.Volume).onValueChanged.AddListener(OnVolumeChanged); } } public class ExampleScreen : StatefulView { private void Start() { SetText(TextRole.Title, "Hello World"); SetTextValues(TextRole.Timer, hours, minutes, seconds); SetImage(ImageRole.UserAvatar, avatarSprite); } }

পাঠ্য এবং স্থানীয়করণ

অবজেক্টের ভূমিকা এবং লিঙ্ক ছাড়াও পাঠ্য সহ ট্যাবে নিম্নলিখিত কলামগুলি রয়েছে:


  • কোড: স্থানীয়করণের জন্য একটি পাঠ্য কী
  • স্থানীয়করণ চেকবক্স: একটি সূচক যে পাঠ্য ক্ষেত্র স্থানীয়করণের বিষয়
  • মান: বস্তুর বর্তমান পাঠ্য বিষয়বস্তু
  • স্থানীয়করণ: কোড ক্ষেত্র থেকে কী দ্বারা পাওয়া বর্তমান পাঠ্য



লাইব্রেরিতে অনুবাদের সাথে কাজ করার জন্য একটি অন্তর্নির্মিত সাবসিস্টেম অন্তর্ভুক্ত নেই। আপনার স্থানীয়করণ সিস্টেম সংযোগ করতে, আপনাকে ILocalizationProvider ইন্টারফেসের একটি বাস্তবায়ন তৈরি করতে হবে। এটি তৈরি করা যেতে পারে, উদাহরণস্বরূপ, আপনার ব্যাক-এন্ড, স্ক্রিপ্টেবল অবজেক্টস বা Google পত্রকের উপর ভিত্তি করে।


 public class HardcodeLocalizationProvider : ILocalizationProvider { private Dictionary<string, string> _dictionary = new Dictionary<string, string> { { "timer" , "{0}h {1}m {2}s" }, { "title" , "Título do Jogo" }, { "description" , "Descrição longa do jogo" }, }; public string GetPhrase(string key, string defaultValue) { return _dictionary.TryGetValue(key, out var value) ? value : defaultValue; } }


অনুলিপি স্থানীয়করণ বোতামে ক্লিক করার মাধ্যমে, কোড এবং মান কলামের বিষয়বস্তু Google পত্রকগুলিতে আটকানোর জন্য উপযুক্ত বিন্যাসে ক্লিপবোর্ডে অনুলিপি করা হবে।

অভ্যন্তরীণ উপাদান

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


Inner Comps ট্যাবে, আপনি অভ্যন্তরীণ উপাদানগুলিতে ভূমিকা নির্ধারণ করতে পারেন:



কনফিগার করা ভূমিকা অন্যান্য ধরনের উপাদানের মতো কোডে ব্যবহার করা যেতে পারে:


 var header = GetInnerComponent(InnerComponentRole.Header); header.GetButton(ButtonRole.Close).onClick.AddListener(OnCloseClicked); header.SetText(TextRole.Title, "Header Title"); var footer = GetInnerComponent(InnerComponentRole.Footer); footer.GetButton(ButtonRole.Continue).onClick.AddListener(OnContinueClicked); footer.SetText(TextRole.Message, "Footer Message");

পাত্রে

অনুরূপ উপাদানগুলির একটি তালিকা তৈরি করতে, আপনি ContainerView উপাদান ব্যবহার করতে পারেন। আপনাকে ইনস্ট্যান্টেশনের জন্য প্রিফ্যাব এবং রুট অবজেক্ট (ঐচ্ছিক) নির্দিষ্ট করতে হবে। সম্পাদনা-মোডে, আপনি StatefulComponent ব্যবহার করে উপাদানগুলি যোগ করতে এবং সরাতে পারেন:



তাত্ক্ষণিক প্রিফ্যাবগুলির বিষয়বস্তু চিহ্নিত করার জন্য StatefulComponent ব্যবহার করা সুবিধাজনক। রানটাইমে, আপনি ধারকটি পূরণ করতে AddInstance<T> , AddStatefulComponent , বা FillWithItems পদ্ধতিগুলি ব্যবহার করতে পারেন:


 var container = GetContainer(ContainerRole.Players); container.Clear(); container.FillWithItems(_player, (StatefulComponent view, PlayerData data) => { view.SetText(TextRole.Name, data.Name); view.SetText(TextRole.Level, data.Level); view.SetImage(ImageRole.Avatar, data.Avatar); });


যদি স্ট্যান্ডার্ড Object.Instantiate() অবজেক্ট তৈরি করার জন্য আপনাকে উপযুক্ত না করে, আপনি এই আচরণটিকে ওভাররাইড করতে পারেন, উদাহরণস্বরূপ, Zenject ব্যবহার করে ইনস্ট্যান্টিয়েশনের জন্য:


 StatefulUiManager.Instance.CustomInstantiateMethod = prefab => { return _diContainer.InstantiatePrefab(prefab); };


অভ্যন্তরীণ উপাদান এবং ধারক যথাক্রমে StatefulComponent এর জন্য স্ট্যাটিক এবং গতিশীল নেস্টিং প্রদান করে।


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

রাজ্যগুলি

আমরা রাজ্যের ধারণাটিকে একটি প্রিফ্যাবে পরিবর্তনের একটি নামযুক্ত সেট হিসাবে বিবেচনা করব। এই ক্ষেত্রে নামটি StateRole enum থেকে একটি ভূমিকা, এবং prefab-এ পরিবর্তনের উদাহরণ হতে পারে:


  • একটি GameObject সক্রিয় এবং নিষ্ক্রিয় করা
  • চিত্র বস্তুর জন্য sprites বা উপকরণ প্রতিস্থাপন
  • স্ক্রিনে চলমান বস্তু
  • টেক্সট এবং তাদের চেহারা পরিবর্তন
  • অ্যানিমেশন খেলা
  • এবং তাই — আপনি আপনার নিজস্ব ধরনের অবজেক্ট ম্যানিপুলেশন যোগ করতে পারেন


পরিবর্তনের একটি সেট (স্টেট বর্ণনা) স্টেটস ট্যাবে কনফিগার করা যেতে পারে। একটি কনফিগার করা অবস্থা সরাসরি পরিদর্শক থেকে প্রয়োগ করা যেতে পারে:



SetState পদ্ধতি ব্যবহার করে কোড থেকে একটি কনফিগার করা অবস্থা প্রয়োগ করা যেতে পারে:


 switch (colorScheme) { case ColorScheme.Orange: SetState(StateRole.Orange); break; case ColorScheme.Red: SetState(StateRole.Red); break; case ColorScheme.Purple: SetState(StateRole.Purple); break; }


টুলস ট্যাবে, যখন অ্যাপ্লাই ইনিশিয়াল স্টেট অন এনাবল প্যারামিটার সক্রিয় থাকে, তখন আপনি স্টেট কনফিগার করতে পারেন যা অবজেক্ট ইনস্ট্যান্টেশনের সাথে সাথেই প্রয়োগ করা হবে।


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

রাষ্ট্রীয় গাছ

প্রকৃতপক্ষে, রাজ্যগুলির উপর ভিত্তি করে একটি UI বিকাশ করা অবিশ্বাস্যভাবে সুবিধাজনক। এতটাই যে, সময়ের সাথে সাথে, এটি অন্য সমস্যার দিকে নিয়ে যায় — প্রকল্পটি বিকশিত হওয়ার সাথে সাথে, একটি একক উইন্ডোর জন্য রাজ্যের তালিকা একটি অনিয়মিত দৈর্ঘ্যে বৃদ্ধি পেতে পারে এবং এইভাবে নেভিগেট করা কঠিন হয়ে পড়ে। উপরন্তু, কিছু অন্যান্য রাজ্যের প্রেক্ষাপটে শুধুমাত্র অর্থপূর্ণ যে রাজ্য আছে. এই সমস্যা সমাধানের জন্য, স্ট্যাটফুল UI এর আরেকটি টুল রয়েছে: স্টেট ট্রি। আপনি স্টেটস ট্যাবে স্টেট ট্রি এডিটর বোতামে ক্লিক করে এটি অ্যাক্সেস করতে পারেন।


ধরা যাক আমাদের একটি বুকের জন্য একটি পুরস্কার উইন্ডো তৈরি করতে হবে। উইন্ডোটির 3টি পর্যায় রয়েছে:


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


অভিভাবক রাষ্ট্র (এই উদাহরণে পুরস্কার ) প্রতিবার চাইল্ড স্টেটকে কল করা হলে প্রয়োগ করা হয়:



একটি কনফিগার করা StatefulComponent পরিচালনা করা একটি ন্যূনতম পরিমাণে সহজ এবং বোধগম্য কোডে নেমে আসে যা প্রয়োজনীয় ডেটা সহ উপাদানগুলিকে পপুলেট করে এবং সঠিক মুহুর্তে অবস্থাগুলি পরিবর্তন করে:


 public void ShowIntro() { SetState(StateRole.Intro); } public void ShowReward(IReward reward) { // Update the inner view with the reward reward.UpdateView(GetInnerComponent(InnerComponentRole.Reward)); // Switch on the type of reward switch (reward) { case ICardsReward cardsReward: SetState(StateRole.Cards); break; case IMoneyReward moneyReward: SetState(StateRole.Money); break; case IEmojiReward emojiReward: SetState(StateRole.Emoji); break; } } public void ShowResults(IEnumerable<IReward> rewards) { SetState(StateRole.Results); // Fill the container with the rewards GetContainer(ContainerRole.TotalReward) .FillWithItems(rewards, (view, reward) => reward.UpdateView(view)); }

স্টেটফুল API এবং ডকুমেন্টেশন

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



আপনি হয়ত ইতিমধ্যে প্রতিটি ট্যাবে কপি API এবং কপি ডক্স বোতামগুলি লক্ষ্য করেছেন — এইগুলি নির্বাচিত বিভাগের জন্য তথ্য অনুলিপি করে৷ এগুলি ছাড়াও, টুলস ট্যাবে অনুরূপ বোতাম রয়েছে — এইগুলি একবারে সমস্ত বিভাগের জন্য তথ্য অনুলিপি করে৷ আপনি যখন অনুলিপি API বোতামে ক্লিক করেন, তখন এই StatfulComponent অবজেক্ট পরিচালনার জন্য জেনারেট করা কোডটি ক্লিপবোর্ডে অনুলিপি করা হবে। আমাদের পুরষ্কার উইন্ডোর জন্য এখানে একটি উদাহরণ রয়েছে:


 // Insert the name of the chest here SetText(TextRole.Title, "Lootbox"); // Button to proceed to the reward issuance phase GetButton(ButtonRole.Overlay); // Button to display information about the card GetButton(ButtonRole.Info); // Container for displaying the complete list of awarded rewards GetContainer(ContainerRole.TotalReward); // Insert the card image here SetImage(ImageRole.Avatar, null); // Animated appearance of a chest SetState(StateRole.Intro);


আপনি যখন কপি ডক্স বোতামে ক্লিক করেন, তখন এই প্রিফ্যাবের ডকুমেন্টেশন মার্কডাউন ফর্ম্যাটে ক্লিপবোর্ডে কপি করা হবে:


 ### RewardScreen Buttons: - Overlay - Button to proceed to the reward issuance phase - Info - Button to display information about the card Texts: - Title - Insert the name of the chest here Containers: - TotalReward - Container for displaying the complete list of awarded rewards Images: - Avatar - Insert the card image here States: - Intro - Animated appearance of a chest - Cards - Displaying rewards in the form of a card - Money - Displaying rewards in the form of game currency - Emoji - Displaying rewards in the form of an emoji - Results - Displaying a complete list of issued rewards


এটা স্পষ্ট যে এই ধরনের বিস্তারিত নির্দেশাবলী সহ এই স্ক্রীনটি বাস্তবায়ন করার সময় একটি ভুল করা বেশ কঠিন। আপনি সহজেই প্রকল্পের জ্ঞানের ভিত্তিতে আপনার UI সংস্থা সম্পর্কে আপ-টু-ডেট তথ্য বজায় রাখতে পারেন।


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

উপসংহার

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


লাইব্রেরি একটি প্রকল্পে লেআউটগুলি সংগঠিত করার জন্য, প্রিফ্যাবগুলির মধ্যে বস্তুগুলি চিহ্নিত করার জন্য, স্টেট তৈরি করতে, সেগুলিকে UI উপাদানগুলির সাথে লিঙ্ক করার জন্য এবং UI পরিচালনার জন্য একটি API এবং ডকুমেন্টেশন প্রদানের জন্য একটি সামঞ্জস্যপূর্ণ পদ্ধতির অনুমতি দেয়৷ এটি UI প্রিফ্যাব তৈরির দায়িত্ব অর্পণ করার অনুমতি দেয় এবং তাদের সাথে কাজ দ্রুত করে।


এগিয়ে চলা, প্রকল্পের রোডম্যাপে নিম্নলিখিত আইটেমগুলি অন্তর্ভুক্ত রয়েছে:


  • রাজ্যগুলির ক্ষমতা প্রসারিত করা, বর্ণনায় নতুন ধরণের UI পরিবর্তনগুলিকে সমর্থন করা, যেমন নতুন ধরণের অ্যানিমেশন, রাজ্যগুলিতে শব্দ বাজানো ইত্যাদি


  • টেক্সট এবং ইমেজ রঙ করার জন্য রঙ প্যালেট জন্য সমর্থন যোগ করা


  • GameObjects পুনঃব্যবহারের সাথে আইটেমগুলির তালিকার জন্য সমর্থন যোগ করা


  • বৃহত্তর সংখ্যক ইউনিটি UI উপাদান সমর্থন করে


  • স্থানীয়করণের জন্য যোগ করা পাঠ্যের আনলোডিং স্বয়ংক্রিয়


  • একটি টেস্ট ফ্রেমওয়ার্ক বাস্তবায়ন। যেহেতু আমাদের কাছে আমাদের প্রিফ্যাবগুলির সম্পূর্ণ মার্কআপ রয়েছে, আমরা নিম্নলিখিত বিন্যাসে সহজে সেট-আপ স্ক্রিপ্টেবল অবজেক্ট-ভিত্তিক পরিস্থিতি তৈরি করতে পারি:


    1. ButtonRole.Settings বোতামে ক্লিক করুন

    2. TextRole.SomeText এ টেক্সট চেক করুন।SomeText "কিছু মান" এর সমান হতে হবে

    3. এটি একটি নির্দিষ্ট স্প্রাইটের সমান কিনা তা নিশ্চিত করতে ImageRole.SomeImage এ ছবিটি দেখুন


  • একটি টিউটোরিয়াল সিস্টেম। একইভাবে পরীক্ষার জন্য, চিহ্নিত লেআউট নির্দেশাবলীর আকারে ScriptableObject-ভিত্তিক টিউটোরিয়াল পরিস্থিতি তৈরি করতে দেয় যেমন " ButtonRole.UpgradeHero বোতামে পয়েন্টার দেখান"।


প্রজেক্ট সোর্স কোড GitHub এ উপলব্ধ । সমস্যা তৈরি করতে বা লাইব্রেরিতে অবদান রাখতে আপনাকে স্বাগতম!