مرکزی مواد پر جائیں
اے آئی ٹیوٹوریلز

Bloub کے ساتھ بدلتی شکل والے SVG بوٹ اوتار کو بنائیں اور حسبِ ضرورت ڈھالیں

اس ٹیوٹوریل میں Bloub ترتیب دینے، اس کی 14 بدلتی شکلوں کو دریافت کرنے، اوتار کو حسبِ ضرورت ڈھالنے، ٹائم لائنز بنانے، جامد تصاویر اور اینیمیشنز برآمد کرنے، اور متعین پلے بیک و منجمد فریمز کے ساتھ Vue کمپوننٹ استعمال کرنے کا طریقہ بتایا گیا ہے۔

تقریباً 15 منٹ کا مطالعہ
Bloub کے ساتھ بدلتی شکل والے SVG بوٹ اوتار کو بنائیں اور حسبِ ضرورت ڈھالیں

Bloub کیا ہے؟

Bloub، x.ai بوٹ اوتار کی SVG شکل میں دوبارہ تخلیق ہے۔ یہ ایک بھری ہوئی سیاہ جسمانی شکل استعمال کرتا ہے جو 14 حالتوں کے درمیان تبدیل ہوتی ہے، اور آنکھوں کی دو آزاد سفید شکلیں رکھتا ہے؛ یہ سب ایک سادہ پس منظر پر پیش کیے جاتے ہیں۔ اینیمیشن کسی اینیمیشن لائبریری کے بغیر نافذ کی گئی ہے۔

اوتار کا ساکن، آنکھ مارنے، مدار اور پھٹنے کی حالتوں سے گزرنا

یہ منصوبہ ایک فریم ورک سے آزاد اینیمیشن انجن کو Vue 3 انٹرفیس کے ساتھ یکجا کرتا ہے۔ اس کا انجن گھڑی سے بھی آزاد ہے: engine.sample(t) کو کال کرنے سے فراہم کردہ وقت کی بنیاد پر خالصتاً ایک فریم تیار ہوتا ہے۔ اس سے توقف، آگے پیچھے تلاش، منجمد پیش نظارے اور DOM سے آزاد ٹیسٹ قابلِ تعین بنتے ہیں۔

اہم خصوصیات

  • چودہ ناپی گئی حالتیں: اوتار میں ساکن، آنکھ مارنے، مدار اور پھٹنے جیسی حالتیں شامل ہیں۔
  • اوتار کی تخصیص: 8 جسمانی شکلوں، 12 رنگوں اور 16 آرام کی کیفیات میں سے انتخاب کریں۔ انتخاب آئندہ آمد تک محفوظ رہتے ہیں۔
  • ٹائم لائن ایڈیٹر: حالتیں ترتیب دیں، ہر حالت کے برقرار رہنے کا دورانیہ مقرر کریں اور نتیجے کی اینیمیشن محفوظ کریں۔
  • متعدد برآمدی فارمیٹس: اوتار کو 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 کھول کر 8 جسمانی شکلوں، 12 رنگوں اور 16 آرام کی کیفیات میں سے ایک منتخب کریں۔ ایپلیکیشن یہ انتخاب آئندہ آمد تک محفوظ رکھتی ہے۔

اینیمیشن ٹائم لائن بنائیں

Animations کھول کر اوتار کی حالتوں کو ٹائم لائن میں ترتیب دیں۔ ہر حالت کے برقرار رہنے کا دورانیہ مقرر کریں، سلسلے کا پیش نظارہ دیکھیں اور اسے محفوظ کریں۔ پلے بیک کرسر صرف حالت کے ناموں کے بجائے ٹائم لائن کی پوزیشنوں کو ٹریک کرتا ہے، اس لیے ایک ہی حالت مونتاژ میں ایک سے زیادہ مرتبہ ظاہر ہو سکتی ہے۔

زبان تبدیل کریں اور کریڈٹس دیکھیں

Settings کھول کر فرانسیسی، انگریزی یا چینی منتخب کریں اور منصوبے کے کریڈٹس دیکھیں۔

تمام 14 حالتوں کا معائنہ کریں

تمام 14 حالتوں کو منجمد فریموں کی صورت میں ساتھ ساتھ دکھانے کے لیے مقامی URL میں #planche شامل کریں:

http://localhost:5190/#planche
14 حالتیں منجمد فریموں کی صورت میں ساتھ ساتھ

یہ منظر فوری طور پر جانچنے کے لیے مفید ہے کہ آیا تبدیلیوں نے کسی حالت کو غیر متوقع طور پر تبدیل کیا ہے۔

کسی مخصوص حالت کو پلے بیک روک کر کھولنے کے لیے 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 سے وابستہ، اس کی توثیق شدہ، یا اس سے منسلک نہیں ہے۔ لائسنس ریپوزٹری کے کوڈ پر لاگو ہوتا ہے، نہ کہ اس ڈیزائن پر جسے یہ دوبارہ تخلیق کرتا ہے۔