Bloub দিয়ে একটি রূপান্তরশীল SVG বট অবতার তৈরি ও কাস্টমাইজ করুন

Bloub কী?

Bloub হলো x.ai বট অ্যাভাটারের একটি SVG পুনর্নির্মাণ। এতে একটি পূর্ণ কালো দেহের আকৃতি ব্যবহার করা হয়েছে, যা ১৪টি অবস্থার মধ্যে রূপ বদলায়, এবং দুটি স্বতন্ত্র সাদা চোখের আকৃতি রয়েছে; সবকিছু একটি সাদামাটা পটভূমিতে উপস্থাপিত। অ্যানিমেশনটি কোনো অ্যানিমেশন লাইব্রেরি ছাড়াই বাস্তবায়িত হয়েছে।

প্রকল্পটি একটি ফ্রেমওয়ার্ক-মুক্ত অ্যানিমেশন ইঞ্জিনের সঙ্গে Vue 3 ইন্টারফেস যুক্ত করে। এর ইঞ্জিনটি ঘড়ি-নির্ভরও নয়: engine.sample(t) কল করলে সরবরাহ করা সময় থেকেই সম্পূর্ণভাবে একটি ফ্রেম তৈরি হয়। ফলে বিরতি দেওয়া, নির্দিষ্ট অবস্থানে যাওয়া, স্থির প্রিভিউ এবং DOM-বিহীন পরীক্ষা নির্ধারিত ফলাফল দেয়।

প্রধান বৈশিষ্ট্য

• চৌদ্দটি পরিমাপ করা অবস্থা: অ্যাভাটারে স্থির, চোখ টেপা, কক্ষপথ এবং বিস্ফোরণের মতো অবস্থা রয়েছে।
• অ্যাভাটার কাস্টমাইজেশন: ৮টি দেহের আকৃতি, ১২টি রং এবং ১৬টি বিশ্রামকালীন অভিব্যক্তি থেকে বেছে নিন। পছন্দগুলো পরবর্তী ভিজিটেও সংরক্ষিত থাকে।
• টাইমলাইন এডিটর: অবস্থাগুলো সাজান, প্রতিটি অবস্থা কতক্ষণ থাকবে তা নির্ধারণ করুন এবং তৈরি অ্যানিমেশন সংরক্ষণ করুন।
• একাধিক এক্সপোর্ট ফরম্যাট: অ্যাভাটারটি SVG, PNG বা অ্যানিমেটেড GIF হিসেবে এক্সপোর্ট করুন, অথবা সম্পূর্ণ টাইমলাইন GIF বা MP4 হিসেবে এক্সপোর্ট করুন।
• প্রয়োজনমতো ভিডিও এনকোডিং: প্রথমবার প্রয়োজন না হওয়া পর্যন্ত ভিডিও এনকোডার আনা হয় না।
• তিনটি ভাষা: ইন্টারফেসটি ফরাসি, ইংরেজি এবং চীনা ভাষা সমর্থন করে।
• নির্ধারিত রেন্ডারিং: একটি নির্দিষ্ট সময়ে সবসময় একই ছবি তৈরি হয়, ফলে নিখুঁত স্থির ফ্রেম এবং পুনরাবৃত্তিযোগ্য পরীক্ষা সম্ভব হয়।

পূর্বশর্ত

Bloub Vue 3, Vite, TypeScript, Tailwind CSS 4 এবং pnpm ব্যবহার করে। এগিয়ে যাওয়ার আগে একটি Node.js পরিবেশ এবং pnpm ইনস্টল করুন।

Bloub ইনস্টল ও চালান

1. রিপোজিটরিটি ক্লোন বা ডাউনলোড করে টার্মিনালে এর ডিরেক্টরি খুলুন।

2. নির্ভরতাগুলো ইনস্টল করুন:

   pnpm install

3. Vite ডেভেলপমেন্ট সার্ভার চালু করুন:

   pnpm dev

4. ব্রাউজারে http://localhost:5190 খুলুন।

পরীক্ষা চালান এবং প্রোডাকশন বিল্ড তৈরি করুন

নিচের কমান্ড দিয়ে Vitest টেস্ট স্যুট চালান:

pnpm test

TypeScript কোড পরীক্ষা করে অ্যাপ্লিকেশন বিল্ড করুন:

pnpm build

বিল্ড কমান্ডটি vite build-এর আগে vue-tsc --noEmit চালায়। রিপোজিটরিতে ইচ্ছাকৃতভাবে ESLint বা Prettier কনফিগারেশন নেই, তাই vue-tsc হলো কোডের মান যাচাইয়ের প্রধান ধাপ। কোনো পরিবর্তন সম্পূর্ণ বিবেচনা করার আগে pnpm build চালান।

অ্যাপ্লিকেশন ঘুরে দেখুন

বাম পাশের রেল তিনটি প্রধান ভিউয়ের মধ্যে পরিবর্তন করে।

অ্যাভাটার কাস্টমাইজ করুন

৮টি দেহের আকৃতি, ১২টি রং এবং ১৬টি বিশ্রামকালীন অভিব্যক্তির মধ্যে একটি বেছে নিতে Customise খুলুন। অ্যাপ্লিকেশনটি ভিজিটগুলোর মধ্যে এসব পছন্দ সংরক্ষণ করে।

অ্যানিমেশন টাইমলাইন তৈরি করুন

অ্যাভাটারের অবস্থাগুলো টাইমলাইনে সাজাতে Animations খুলুন। প্রতিটি অবস্থা কতক্ষণ থাকবে তা নির্ধারণ করুন, ধারাটি প্রিভিউ করুন এবং সংরক্ষণ করুন। প্লেব্যাক কার্সার শুধু অবস্থার নাম নয়, টাইমলাইনের অবস্থান অনুসরণ করে; তাই একই মন্টাজে একই অবস্থা একাধিকবার থাকতে পারে।

ভাষা পরিবর্তন ও ক্রেডিট দেখুন

ফরাসি, ইংরেজি বা চীনা ভাষা বেছে নিতে এবং প্রকল্পের ক্রেডিট দেখতে Settings খুলুন।

সব ১৪টি অবস্থা পরীক্ষা করুন

সব ১৪টি অবস্থাকে পাশাপাশি স্থির ফ্রেম হিসেবে দেখাতে স্থানীয় URL-এ #planche যোগ করুন:

http://localhost:5190/#planche

কোনো পরিবর্তনের ফলে কোনো অবস্থায় অনাকাঙ্ক্ষিত পরিবর্তন হয়েছে কি না দ্রুত যাচাই করতে এই ভিউটি কার্যকর।

প্লেব্যাক থামিয়ে নির্দিষ্ট কোনো অবস্থা খুলতে etat এবং stop হ্যাশ প্যারামিটার ব্যবহার করুন। উদাহরণ:

http://localhost:5190/#etat=orbit&stop

BloubBot Vue কম্পোনেন্ট ব্যবহার করুন

BloubBot কম্পোনেন্ট নিয়ন্ত্রিত প্লেব্যাক এবং নির্ভুল স্থির ফ্রেম দুটিই সমর্থন করে। বর্তমান টাইমলাইন ব্লক, অবস্থা এবং প্লেব্যাকের স্থিতি বেঁধে একটি নিয়ন্ত্রিত ইনস্ট্যান্স তৈরি করা যায়:

<BloubBot
  v-model:block="block"
  v-model:state="state"
  v-model:playing="playing"
/>

block মডেলটি প্লেব্যাক কার্সার। এই পার্থক্য গুরুত্বপূর্ণ, কারণ একটি টাইমলাইনে একই অবস্থা একাধিকবার থাকতে পারে। ব্লক ইনডেক্স নির্দিষ্ট টাইমলাইন অবস্থান শনাক্ত করে, আর state আউটপুট হিসেবে সেই কার্সার অনুসরণ করে।

একটি স্থির ফ্রেম রেন্ডার করুন

অ্যানিমেশন লুপ চালু না করে একটি নির্দিষ্ট ফ্রেম রেন্ডার করতে একটি অবস্থা, আকার এবং frozen-at মান দিন:

<BloubBot state="orbit" :size="120" :frozen-at="1.2" />

Bloub থাম্বনেইল এবং সম্পূর্ণ স্টেট বোর্ড তৈরি করতে স্থির রেন্ডারিং ব্যবহার করে। স্থিতিশীল প্রিভিউ বা নির্দিষ্ট সময়ের একটি ফ্রেমের প্রয়োজন হলেও এটি কার্যকর।

কম্পোনেন্টের উপলভ্য ইনপুট

কম্পোনেন্টটি নিম্নলিখিত প্রপস প্রকাশ করে:

• size
• shape
• color
• expression
• paper
• frozenAt
• cycle
• follow
• gaze

এর মডেলগুলো হলো block, state, playing এবং elapsed। সঠিক টাইপ ও কম্পোনেন্টের বিস্তারিত জানতে BloubBot.vue দেখুন।

অ্যাভাটার ও টাইমলাইন এক্সপোর্ট করুন

স্ক্রিনে প্রদর্শিত যেকোনো কিছু এক্সপোর্ট করা যায়। একটি অ্যাভাটারের জন্য SVG, PNG বা অ্যানিমেটেড GIF বেছে নিন। সম্পূর্ণ টাইমলাইনের জন্য GIF বা MP4 বেছে নিন।

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

উন্নত টিপস

নির্ধারিত ফ্রেমের জন্য Pure Engine ব্যবহার করুন

src/bot/-এর কোড কোনো ফ্রেমওয়ার্ক বা ঘড়ির ওপর নির্ভরশীল নয়। নির্দিষ্ট কোনো সময়ের জন্য ছবির প্রয়োজন হলে engine.sample(t) ব্যবহার করুন। ফলাফলটি চলমান ঘড়ির পরিবর্তে সরবরাহ করা সময়ের ওপর নির্ভর করায় বিরতি দেওয়া, পুনরায় চালু করা, নির্দিষ্ট সময়ে যাওয়া, পরীক্ষা এবং থাম্বনেইল তৈরি সবই সামঞ্জস্যপূর্ণ থাকে।

পরিমাপ করা ধ্রুবকগুলো সরল করবেন না

অনেক মান আপাতদৃষ্টিতে ইচ্ছেমতো মনে হতে পারে, কিন্তু এগুলো প্রতি সেকেন্ডে 10 ফ্রেমে কাটা রেফারেন্স ফুটেজ থেকে পরিমাপ করা হয়েছে। সাব-পিক্সেল রে কাস্টিংয়ের মাধ্যমে সিলুয়েট বের করা হয়েছে, চোখকে ক্যাপসুল হিসেবে ফিট করা হয়েছে, এবং রং ও স্ট্রোকের প্রস্থ সরাসরি নমুনা নেওয়া হয়েছে।

ধ্রুবকগুলোকে সুবিধাজনক মানে রাউন্ড করলে প্রকল্পটি যে দৃশ্যগত সাদৃশ্য সংরক্ষণের জন্য তৈরি, তা কমে যেতে পারে।

অ্যানিমেশন পরিবর্তন করার সময় এই পরিমাপ করা বৈশিষ্ট্যগুলো মনে রাখুন:

• চোখ দুটি ব্যাকস্ল্যাশের দিক বরাবর হেলে থাকে, উল্লম্ব দিক থেকে প্রায় 26 ডিগ্রি।
• দেহটি কার্যত একটি নিখুঁত বৃত্ত, যার রেডিয়াল বিচ্যুতি 0.7%-এর নিচে; এটি স্কুইর্কল নয়।
• ট্রানজিশনে এক্সপোনেনশিয়াল ইজ-আউট ব্যবহার করা হয় এবং দেহটি নির্ধারিত অবস্থান অতিক্রম করে না।
• ধূমকেতু প্রভাবে ডটটি স্থির থাকে, আর ট্রেইলটি তার চারপাশে ঘোরে।
• স্থির অবতারের ভেসে থাকার অনুভূতি নেই; তার প্রাণবন্ততা আসে দৃষ্টির সামান্য বিচরণ ও চোখের পলক ফেলা থেকে।

প্রোফাইল পরিবর্তন বা profiles.ts পুনরায় তৈরি করার আগে পরিমাপের ডকুমেন্টেশন দেখুন।

ইঞ্জিন সম্প্রসারণের আগে আর্কিটেকচার পর্যালোচনা করুন

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

ডিবাগ করার আগে রিলিজের ইতিহাস দেখুন

চেঞ্জলগে প্রতিটি রিলিজের জন্য একটি করে এন্ট্রি রয়েছে। আপনার স্থানীয় কপিতে নির্দিষ্ট কোনো সংশোধন অন্তর্ভুক্ত আছে কি না তা জানতে এটি দেখুন।

উপসংহার

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

কোডটি MIT লাইসেন্সের অধীনে উপলভ্য। প্রকল্পটির x.ai-এর সঙ্গে কোনো সম্পৃক্ততা, অনুমোদন বা সংযোগ নেই। লাইসেন্সটি রিপোজিটরির কোডের ক্ষেত্রে প্রযোজ্য, এটি যে ডিজাইন পুনর্নির্মাণ করে তার ক্ষেত্রে নয়।