سپرائٹس کا تصور اب تھوڑی دیر سے رہا ہے۔ اسکرین پر متحرک تصاویر کی نمائش کے عمل کو تیز کرنے کے لئے یہ گیم انڈسٹری میں سب سے عام استعمال کی جانے والی تکنیک ہے۔ اس مضمون میں ، ہم خاص طور پر دیکھیں گے کہ کس طرح یہ تکنیک ویب صفحات پر صارف کے تجربے کو سی ایس ایس اسپرائٹس کی مدد سے درج ذیل ترتیب میں بہتر بنانے میں ہماری مدد کر سکتی ہے۔
- سپرائٹ کیا ہے؟
- فوری جائزہ - سی ایس ایس اسپرائٹ کیا ہے؟
- اس کی مثال کیسے ویب کی ترقی میں مدد کرتی ہے؟
- سی ایس ایس اسپرٹ کو استعمال کرنے کے فوائد
- سی ایس ایس اسپرائٹس کے ساتھ کام کرتے وقت ایک ڈویلپر کو کیا کرنا ہے؟
- سی ایس ایس اسپرائٹ شیٹ کیسے بنائیں؟
- CSS Sprites کے ساتھ کیسے کام کریں؟
- سی ایس ایس اسپرٹ استعمال کرنے والی کمپنیاں
سپرائٹ کیا ہے؟
سپرائٹ ایک واحد شبیہہ ہے جو گیم میں کسی بڑے سین کا حصہ ہوتی ہے۔ اس کے بعد ایک سے زیادہ اسپرٹ کو ایک بڑی شبیہہ میں ملایا جاتا ہے جسے اسپرائٹ شیٹ کہتے ہیں۔ ایک بار جب سپرائٹ شیٹ میموری میں لادا جاتا ہے تو ، مختلف اسپرائٹس کو حرکت پذیری کا بھرم دینے کے ل quick فوری یکے بعد دیگرے پیش کیا جاتا ہے۔ یہ کھیل میں ایک منظر بنانے کے لئے دسیوں سے سیکڑوں مختلف سپرائٹس کے ساتھ بیک وقت کیا جاتا ہے۔
c ++ اسکاپ آپریٹر
بنیادی خیال یہ ہے کہ متعدد امیجیز کو لوڈ کرنے اور ڈسپلے کرنے کے مقابلے میں جہاں کہیں بھی ضرورت ہو کسی تصویر کو لوڈ کرنا اور اس کا کچھ حصہ ڈسپلے کرنا بہت تیز ہے۔
سی ایس ایس اسپرائٹ کیا ہے: ایک فوری جائزہ؟
سی ایس ایس اسپرائٹ ایک ایسی تکنیک ہے جسے اکثر ویب ڈویلپرز ویب صفحات کی کارکردگی کو بہتر بنانے کے لئے استعمال کرتے ہیں۔ اس تکنیک میں ، ایک ہی سائز میں عام طور پر ایک ہی جہت کی ایک سے زیادہ چھوٹی تصاویر اکٹھی کی جاتی ہیں جس کو a کہتے ہیں سپرائٹ شیٹ یا ٹائل سیٹ . اس سپرائٹ شیٹ کا استعمال پھر انفرادی عناصر کو ظاہر کرنے کے لئے کیا جاتا ہے جہاں بھی ہمیں ان کی ضرورت ہوتی ہے۔
عام طور پر ، عناصر جیسے علامات ، نیویگیشن تیر ، بٹن سپرائٹ شیٹ میں شامل کیے جاتے ہیں کیونکہ وہ تقریبا ایک ہی جہت کے ہوتے ہیں اور ویب صفحہ میں کثرت سے استعمال ہوتے ہیں۔
اس کی مثال کیسے ویب کی ترقی میں مدد کرتی ہے؟
عام طور پر ، ویب صفحات کو ڈیزائن کرتے وقت تصاویر انفرادی فائلوں کے طور پر ذخیرہ اور استعمال ہوتی ہیں۔ لہذا ، جب کوئی صارف ویب صفحہ کھولتا ہے تو ، براؤزر کو ان فائلوں میں سے ہر ایک کے لئے HTTP درخواست کرنا ہوگی ، انہیں الگ سے ڈاؤن لوڈ کریں اور انھیں ڈسپلے کریں۔ اس سے صفحے کے بوجھ کے اوقات زیادہ ہوجاتے ہیں کیونکہ ایک خاص ویب پیج میں بڑی تعداد میں چھوٹی چھوٹی تصاویر جیسے بٹن ، شبیہیں ، لوگوز ہوسکتے ہیں۔
سی ایس ایس اسپرائٹس ڈویلپرز کو ان کثرت سے استعمال ہونے والی چھوٹی تصاویر کو ایک بڑی شبیہ میں جوڑنے میں مدد کرتے ہیں۔ اس کے بعد براؤزر کو صرف ایک فائل ڈاؤن لوڈ کرنا ہوگی جو اس کے بعد استعمال ہوتا ہےامیج کو آفسیٹ کرکے مطلوبہ سیکشن ڈسپلے کریں۔
سی ایس ایس اسپرٹ کو استعمال کرنے کے فوائد
عام تصاویر پر سی ایس ایس اسپرٹ استعمال کرنے کے دو اہم فوائد ہیں۔
تیز پیج لوڈنگ: صفحہ لوڈ کرنے کے وقت میں اضافہ کرتا ہے کیونکہ شیٹ ڈاؤن لوڈ ہوتے ہی ویب پیج میں استعمال ہونے والی تصاویر سامنے آتی ہیں۔
اس سے زیادہ وسائل اور کم وسائل کا استعمال: نہ صرف یہ تکنیک صفحے کے بوجھ کو تیز تر بنانے کے ذریعے صارف کے آخری تجربے کو بہتر بناتی ہے ،لیکن یہ نیٹ ورک کی بھیڑ کو بھی کم کرتا ہے کیونکہ HTTP درخواستوں کی کم تعداد کی جاتی ہے۔
سی ایس ایس اسپرٹس کے ساتھ کام کرتے وقت ایک ڈویلپر کو کیا کرنا ہے؟
انفرادی تصاویر کے ساتھ کام کرتے وقت ، ڈویلپر صرف HTML ٹیگ کے ساتھ کام کرسکتا ہے اور اگر ضرورت ہو تو اسے CSS میں اسٹائل کریں۔ لیکن جب سی ایس ایس اسپرائٹس کے ساتھ کام کرتے ہو تو ، ایک ڈویلپر کو دو مخصوص کام کرنے کی ضرورت ہوتی ہے۔
- سپرائٹ شیٹ کی تخلیق
ویب پیج تیار کرتے وقت اگر ڈویلپر سی ایس ایس اسپرٹ کو استعمال کرنے کا فیصلہ کرتا ہے تو اسے سب سے پہلے اسپریڈ شیٹ بنانا ہوگا جس میں مطلوبہ تمام عناصر جیسے بٹن ، لوگوز وغیرہ کو گرڈ جیسے نمونوں میں ضم کر کے کیا جا.۔ یہ فوٹو شاپ یا جیمپ جیسے کسی بھی تصویری ایڈیٹنگ پروگرام کا استعمال کرتے ہوئے کیا جاسکتا ہے۔ بہت سارے آن لائن ٹولز بھی دستیاب ہیں جو آپ کو اسپرائٹ شیٹ بنانے میں مدد کرتے ہیں۔ اس ٹول پر بعد میں اس مضمون میں تبادلہ خیال کیا گیا ہے۔
- کا استعمال کرتے ہوئے اسپرائٹ کے کسی خاص عنصر تک رسائی حاصل کریں سی ایس ایس کے پس منظر کی پوزیشن پراپرٹی
ایک بار جب سپرائٹ شیٹ تیار ہوجائے تو ، ڈویلپر کو پھر شیٹ کے مختلف حصوں تک رسائی کے ل CSS سی ایس ایس صفات کا استعمال کرنا ہوگا۔
- چوڑائی: اسٹرائٹ کی چوڑائی
- اونچائی: اسٹرائٹ کی اونچائی
- پس منظر: سپرائٹ شیٹ کا حوالہ
- پس منظر کی پوزیشن: اسپریٹ شیٹ کے صرف مطلوبہ حصے تک رسائی کے ل values آفسیٹ اقدار (پکسلز میں)
سی ایس ایس اسپرائٹ شیٹ کیسے بنائیں؟
آپ اپنی چھوٹی چھوٹی تصاویر کو گرڈ میں ترتیب دینے کے لئے کسی بھی تصویری ایڈیٹنگ سافٹ ویئر کا استعمال کرسکتے ہیں لیکن ذیل میں دو آسان طریقوں پر تبادلہ خیال کیا گیا ہے:
1. آن لائن اسپرائٹ شیٹ تخلیق کا آلہ
لنک: toptal.com/developers/css/sprite-generator/
یہ آلہ نہ صرف استعمال کرنے کے لئے آزاد ہے بلکہ آپ کو مطلوبہ سی ایس ایس کوڈ بھی فراہم کرتا ہے جو سپرائٹ شیٹ کا حوالہ دیتے ہوئے استعمال کیا جاسکتا ہے۔ اس کے علاوہ ، آپ مختلف خصوصیات کے ساتھ جداگانہ کرسکتے ہیں جیسے عناصر کے درمیان بھرتی اور ان کی صف بندی کو تبدیل کرنا۔
2. سپراٹی کے ساتھ سپرائٹ شیٹ پیدا کرنا
اگر آپ گرانٹ ، نوڈ یا گلپ استعمال کررہے ہیں تو ، آپ سپریٹی نامی ایک پیکیج انسٹال کرسکتے ہیں جو آپ کو PNG ، JPG وغیرہ جیسے مختلف فارمیٹس میں اسپرائٹ شیٹ بنانے میں مدد فراہم کرے گا۔
اوlyل ، آپ کو سپریٹی انسٹال کرنے کی ضرورت ہوگی:
npm انسٹال سپیٹی جی
پھر ، سپرائٹ شیٹ تیار کرنے کے لئے ، درج ذیل کمانڈ کا استعمال کریں:
سپراٹی. / آؤٹ پٹ - ڈائرکٹری /. / ان پٹ- ڈائرکٹری /
CSS Sprites کے ساتھ کیسے کام کریں؟
اس مثال میں ، ہم درج ذیل سپرائٹ شیٹ کا استعمال کریں گے۔
جیسا کہ آپ مندرجہ بالا تصویر میں دیکھ سکتے ہیں کہ چھ شبیہیں (انسٹاگرام ، ٹویٹر ، اور فیس بک) کو گرڈ نما طرز میں ترتیب دیا گیا ہے۔ پہلی صف میں ، ہمارے پاس نارمل حالت ہے اور دوسری صف میں ، ہمارے پاس ان کی ہوور حالت ہے (ایک بار پھر منظر عام پر آنے کے بعد ہم ان پر ماؤس کرسر ہوور کرتے ہیں)۔
اگر آپ نے ان ٹولوں کا استعمال کرتے ہوئے سپرائٹ شیٹ بنائی ہے جس کا ہم نے اوپر تبادلہ خیال کیا ہے تو آپ پہلے ہی سی ایس ایس میں درکار آفسیٹ کو جانتے ہو لیکن اگر آپ نے کوئی اور ٹول استعمال کیا یا آپ کو کچھ اسپرائٹ شیٹ دی گئی ہے تو پھر فکر نہ کریں ، ہم اس طریقہ کار پر تبادلہ خیال کریں گے آپ کو مطلوبہ عنصر کی آفسیٹ حاصل کرنے میں مدد کرے گا۔
اب ایم ایس پینٹ کا استعمال کرکے چھ آئیکنوں میں سے ہر ایک کیلئے مطلوبہ آفسیٹ حاصل کرنے کا ایک بہت آسان طریقہ دیکھتے ہیں۔ ہوسکتا ہے کہ اسپرٹ کے ساتھ کام کرنے کے لئے یہ ایک مثالی حل نہ ہو لیکن چونکہ اس میں یہ خصوصیت موجود ہے جو ماؤس کرسر کے نقاط فراہم کرتا ہے ، لہذا اسے مطلوبہ X اور Y کوآرڈینیٹ حاصل کرنے کے لئے استعمال کیا جاسکتا ہے۔
پہلے اپنے اسپرائٹ شیٹ امیج کو کھولیں (تمام چھوٹی چھوٹی شبیوں پر مشتمل گرڈ) اور اپنے ماؤس کرسر کو اسپرائٹ کے اوپری بائیں کونے پر لائیں جسے آپ قبضہ کرنا چاہتے ہیں۔
ایک بار جب آپ اپنے اسپرائٹ کے اوپر بائیں سمت (اوپر بائیں انسٹاگرام امیج) کے نقاط حاصل کرلیں تو ، آپ کہیں بھی سی ایس ایس کوڈ کا استعمال کرتے ہوئے اس مخصوص اسٹرائٹ کو ظاہر کرسکتے ہیں:
پس منظر: یو آر ایل ('img_sprites.png')
پس منظر کی پوزیشن: 0 0
چوڑائی: 125px
اونچائی: 125px
ہم چوڑائی اور اونچائی کو 125 پکسلز کے طور پر استعمال کر رہے ہیں کیونکہ ہمارے شبیہیں اس جہت کے ہیں۔ اگلی تصویر (ٹویٹر) کو اسی صف میں لانے کے ل we ، ہم مندرجہ ذیل کوڈ کا استعمال کرتے ہیں۔
پس منظر: یو آر ایل ('img_sprites.png')
پس منظر کی پوزیشن: -128px 0px
چوڑائی: 125px
اونچائی: 125px
مندرجہ بالا ٹکڑوں میں پس منظر کی حیثیت کا وصف نوٹ کریں۔ (-128px، 0) کا مطلب ہے کہ ہم اپنی سپرائٹ شیٹ کو بائیں طرف 128 پکسلز (عناصر کے مابین پیڈنگ کو مدنظر رکھتے ہوئے) اور Y-Axis پر سیٹ کر رہے ہیں۔ اگر ہم ٹویٹر ہوور آئیکن تک رسائی حاصل کرتے تو ہمارے پس منظر کی پوزیشن کا وصف یہ ہوگا:
پس منظر کی پوزیشن: -128px -128px
اس طرح ، اب ہم سی ایس ایس کا استعمال کرکے اپنی اسپرائٹ شیٹ کے ہر جزو تک رسائی حاصل کرسکتے ہیں۔ آئیے ایک مکمل ایچ ٹی ایم ایل اور سی ایس ایس کوڈ کو دیکھیں کہ اسے کیسے کریں۔
مرحلہ نمبر 1: مطلوبہ HTML کوڈ لکھنا
نیچے والے کوڈ میں ، ہم صرف تین لنکس شامل کر رہے ہیں۔ نیز ، ہم اپنے HTML کو اسٹائل شیٹ (اسکرین سی ایس ایس) کے ساتھ جوڑیں گے۔
مرحلہ 2: ضروری سی ایس ایس لکھنا۔ پہلے ، ہم اپنی مشترکہ آئکن کلاس کو اسٹائل کریں گے۔ یہاں ، آپ دیکھ سکتے ہیں کہ ہم نے جو اسپریٹ شیٹ تیار کی ہے اس کا حوالہ دے رہے ہیں۔
/ * مشترکہ آئیکون کلاس * /
span.icon ایک جوڑ،
span.icon a: ملاحظہ کیا{
ڈسپلے:بلاک
ٹیکسٹ انڈینٹ:-9999px
اشیاء جاوا کی ایک صف تشکیل دیں
پس منظر کی تصویر: یو آر ایل (./ img_sprites.png)
پس منظر دہرائیں:کوئی اعادہ
}
مرحلہ 3: آفسیٹس کا استعمال کرتے ہوئے اسپرائٹ شیٹ سے انفرادی شبیہیں حاصل کرنا۔
/ * انسٹاگرام کی علامت * /
span.instagram ایک جوڑ،
span.instagram a: ملاحظہ کیا{
چوڑائی:125 پکس
اونچائی:125 پکس
پس منظر کی پوزیشن:0 0
}
/ * ٹویٹر کی علامت * /
span.twitter ایک جوڑ،
span.twitter a: ملاحظہ کیا{
چوڑائی:125 پکس
اونچائی:125 پکس
پس منظر کی پوزیشن:-128px 0
}
جاوا میں کسی طاقت کے ل something کچھ اٹھائیں
/ * فیس بک کی علامت * /
span.facebook ایک جوڑ،
span.facebook a: ملاحظہ کیا{
چوڑائی:125 پکس
اونچائی:125 پکس
پس منظر کی پوزیشن:-257px 0
}
مرحلہ 4: آفسیٹس کا استعمال کرتے ہوئے اسپریٹ شیٹ سے ہوور شبیہیں حاصل کرنا۔
span.instagram a: ہوور{پس منظر کی پوزیشن:0 -128px}
span.twitter a: ہوور{پس منظر کی پوزیشن:-128px -128px}
span.facebook a: ہوور{پس منظر کی پوزیشن:-255px -128px}
سی ایس ایس اسپرٹ استعمال کرنے والی کمپنیاں
صنعت میں بہت سے بڑے نام اپنی ویب سائٹ کی ردعمل کو بہتر بنانے کے لئے سی ایس ایس اسپرٹس کا استعمال کرتے ہیں۔ گوگل ، فیس بک ، ایمیزون جیسی کمپنیاں اس طریقے کو بڑے پیمانے پر استعمال کرتی ہیں کیونکہ اس سے وہ کسی خاص صارف کے لئے فی سیشن HTTP درخواستوں کی تعداد کو کم کرنے میں مدد کرتا ہے۔ یہ بہت بڑا فائدہ ہے جب ہم اس بات کو مدنظر رکھتے ہیں کہ یہ کمپنیاں کسی بھی لمحے لاکھوں صارفین کی خدمت کرتی ہیں۔
اب جب آپ کی گرفت ہے کہ سی ایس ایس اسپرٹ کیا ہیں اور ان کے ساتھ کیسے کام کریں ، آپ سی ایس ایس سیکھنے کے سفر پر ایک قدم قریب ہیں۔ آج کے وقت میں اسپرٹ جیسے تصورات گیم چینجر ہیں کیونکہ ڈویلپرز کے لئے یہ بہت اہم ہو گیا ہے کہ وہ ویب پیج سے ہر کارکردگی کو نکالیں۔
ہمارے چیک کریں جو انسٹرکٹر کی زیر قیادت براہ راست تربیت اور حقیقی زندگی کے منصوبے کے تجربے کے ساتھ آتا ہے۔ یہ تربیت آپ کو بیک اینڈ اور فرنٹ اینڈ ویب ٹیکنالوجیز کے ساتھ کام کرنے کی مہارت میں مہارت حاصل کرتی ہے۔ اس میں ویب ڈویلپمنٹ ، jQuery ، انجولر ، نوڈ جے ایس ، ایکسپریس جے ایس ، اور مونگو ڈی بی کی تربیت شامل ہے۔
ہمارے لئے ایک سوال ہے؟ برائے کرم اس کا ذکر 'HTML امیجز' بلاگ کے تبصرے سیکشن میں کریں اور ہم آپ کو واپس ملیں گے۔