BabylonJS GUI সিস্টেম ব্যবহার করে আপনি ব্যবহারকারীর ইনপুট যেমন বাটন ক্লিক, স্লাইডার মুভমেন্ট, টেক্সট ইনপুট ইত্যাদি হ্যান্ডল করতে পারেন। এই ইনপুটগুলিকে সঠিকভাবে হ্যান্ডল করার জন্য, onPointerUpObservable, onPointerDownObservable, onValueChangedObservable, onTextChangedObservable ইত্যাদি ইভেন্ট ব্যবহার করা হয়। এই গাইডে, আমরা GUI এর মাধ্যমে ব্যবহারকারীর ইনপুট হ্যান্ডলিং দেখব।
১. বাটন ক্লিক হ্যান্ডলিং
বাটনের মাধ্যমে ইনপুট নেওয়া হয় সাধারণত onPointerUpObservable ইভেন্ট দিয়ে। এই ইভেন্টটি তখন ট্রিগার হয় যখন ব্যবহারকারী বাটনে ক্লিক করে।
উদাহরণ:
// 3D scene তৈরি করা
var scene = new BABYLON.Scene(engine);
// GUI সিস্টেম তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
// বাটন তৈরি করা
var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me!");
button.width = "150px";
button.height = "40px";
button.color = "white";
button.background = "green";
button.top = "200px";
button.left = "100px";
// বাটন ক্লিক হলে একশন
button.onPointerUpObservable.add(function() {
alert("Button clicked!");
});
// বাটন UI-তে যোগ করা
advancedTexture.addControl(button);
এখানে:
onPointerUpObservable.addব্যবহারকারী যখন বাটনে ক্লিক করবেন, তখন একটি অ্যালার্ট শো হবে।
২. স্লাইডার মুভমেন্ট হ্যান্ডলিং
স্লাইডার ব্যবহার করে ইনপুট নেওয়ার জন্য onValueChangedObservable ইভেন্ট ব্যবহার করা হয়। স্লাইডারের মান পরিবর্তন হলে এই ইভেন্ট ট্রিগার হয়।
উদাহরণ:
// 3D scene তৈরি করা
var scene = new BABYLON.Scene(engine);
// GUI সিস্টেম তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
// স্লাইডার তৈরি করা
var slider = new BABYLON.GUI.Slider();
slider.minimum = 0;
slider.maximum = 100;
slider.value = 50; // প্রাথমিক মান
slider.height = "20px";
slider.width = "200px";
slider.top = "300px";
slider.left = "100px";
// স্লাইডারের মান পরিবর্তন হলে একশন
slider.onValueChangedObservable.add(function(value) {
console.log("Slider Value: " + value);
});
// স্লাইডার UI-তে যোগ করা
advancedTexture.addControl(slider);
এখানে:
onValueChangedObservable.addস্লাইডারের মান পরিবর্তন হলে কনসোলে মানটি দেখাবে।
৩. টেক্সট ইনপুট হ্যান্ডলিং
টেক্সট ইনপুটের জন্য BABYLON.GUI.InputText ব্যবহার করা হয়। এই ইনপুট বক্সের মাধ্যমে ব্যবহারকারী টেক্সট প্রবেশ করাতে পারে। onTextChangedObservable ইভেন্ট ব্যবহার করে আপনি ব্যবহারকারীর টাইপ করা টেক্সট হ্যান্ডল করতে পারেন।
উদাহরণ:
// 3D scene তৈরি করা
var scene = new BABYLON.Scene(engine);
// GUI সিস্টেম তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
// ইনপুট টেক্সট তৈরি করা
var inputText = new BABYLON.GUI.InputText();
inputText.width = "200px";
inputText.height = "40px";
inputText.text = "Type something...";
inputText.top = "400px";
inputText.left = "100px";
// টেক্সট পরিবর্তন হলে একশন
inputText.onTextChangedObservable.add(function(text) {
console.log("Text Entered: " + text);
});
// ইনপুট টেক্সট UI-তে যোগ করা
advancedTexture.addControl(inputText);
এখানে:
onTextChangedObservable.addব্যবহারকারী যখন টেক্সট ইনপুট পরিবর্তন করবেন, তখন টেক্সট কনসোলে দেখানো হবে।
৪. বাটন এবং স্লাইডার ইনপুট কম্বিনেশন
আপনি একাধিক UI উপাদান একসাথে ব্যবহার করতে পারেন, যেমন বাটন এবং স্লাইডার। এর মাধ্যমে আপনি ব্যবহারকারীর ইনপুট আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিকভাবে হ্যান্ডল করতে পারবেন।
উদাহরণ:
// 3D scene তৈরি করা
var scene = new BABYLON.Scene(engine);
// GUI সিস্টেম তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
// টেক্সট ব্লক তৈরি করা
var textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "Use the slider!";
textBlock.color = "white";
textBlock.fontSize = 24;
textBlock.top = "50px";
advancedTexture.addControl(textBlock);
// স্লাইডার তৈরি করা
var slider = new BABYLON.GUI.Slider();
slider.minimum = 0;
slider.maximum = 100;
slider.value = 50;
slider.height = "20px";
slider.width = "200px";
slider.top = "150px";
slider.left = "100px";
// স্লাইডারের মান পরিবর্তন হলে টেক্সট আপডেট হবে
slider.onValueChangedObservable.add(function(value) {
textBlock.text = "Slider Value: " + value;
});
// স্লাইডার UI-তে যোগ করা
advancedTexture.addControl(slider);
// বাটন তৈরি করা
var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "Reset Slider");
button.width = "150px";
button.height = "40px";
button.color = "white";
button.background = "blue";
button.top = "250px";
button.left = "100px";
// বাটনে ক্লিক করলে স্লাইডার রিসেট হবে
button.onPointerUpObservable.add(function() {
slider.value = 50;
});
// বাটন UI-তে যোগ করা
advancedTexture.addControl(button);
এখানে:
- স্লাইডারের মান পরিবর্তন হলে টেক্সট পরিবর্তন হবে।
- বাটনে ক্লিক করলে স্লাইডারটি রিসেট হয়ে যাবে।
৫. কাস্টম ইভেন্ট হ্যান্ডলিং
আপনি GUI উপাদানগুলির জন্য কাস্টম ইভেন্টও তৈরি করতে পারেন, যেমন একটি বাটন ক্লিক হলে অন্য কোনো UI উপাদান পরিবর্তন করা।
উদাহরণ:
// 3D scene তৈরি করা
var scene = new BABYLON.Scene(engine);
// GUI সিস্টেম তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
// বাটন তৈরি করা
var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "Toggle Text");
button.width = "150px";
button.height = "40px";
button.color = "white";
button.background = "red";
button.top = "200px";
button.left = "100px";
// টেক্সট ব্লক তৈরি করা
var textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "Initial Text";
textBlock.color = "white";
textBlock.fontSize = 24;
textBlock.top = "100px";
textBlock.left = "100px";
advancedTexture.addControl(textBlock);
// বাটন ক্লিক হলে টেক্সট পরিবর্তন হবে
button.onPointerUpObservable.add(function() {
textBlock.text = textBlock.text === "Initial Text" ? "Text Changed!" : "Initial Text";
});
// বাটন UI-তে যোগ করা
advancedTexture.addControl(button);
এখানে:
- বাটনে ক্লিক করলে টেক্সটটি পরিবর্তিত হবে। এটি কাস্টম ইভেন্ট হ্যান্ডলিংয়ের একটি উদাহরণ।
সারাংশ
BabylonJS GUI সিস্টেম ব্যবহার করে আপনি সহজে ব্যবহারকারীর ইনপুট হ্যান্ডল করতে পারেন। বিভিন্ন UI উপাদান যেমন বাটন, স্লাইডার, টেক্সট ইনপুট ইত্যাদি এর মাধ্যমে ব্যবহারকারী থেকে ইনপুট নেয়া সম্ভব। onPointerUpObservable, onValueChangedObservable, এবং onTextChangedObservable ইভেন্টগুলির মাধ্যমে আপনি UI উপাদানগুলির সাথে ইন্টারঅ্যাকশন হ্যান্ডল করতে পারেন এবং একটি ইন্টারেক্টিভ অ্যাপ্লিকেশন তৈরি করতে পারেন।
Read more
