স্প্রাইটসের ধারণাটি এখন বেশ কিছুক্ষণ ধরে রয়েছে। কোনও পর্দায় অ্যানিমেশন প্রদর্শনের প্রক্রিয়াটি গতি বাড়ানোর জন্য গেম শিল্পে এটি সর্বাধিক ব্যবহৃত কৌশলগুলির মধ্যে একটি। এই নিবন্ধে, আমরা বিশেষত সিএসএস স্প্রাইটসের সাহায্যে নিম্নলিখিত কৌশলটিতে কীভাবে ওয়েব পৃষ্ঠাগুলিতে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করতে পারে তা আমরা বিশেষভাবে লক্ষ্য করব:
- স্প্রাইট কী?
- সিএসএস স্প্রাইট কী - একটি দ্রুত ওভারভিউ?
- এটি কীভাবে ওয়েব বিকাশে সহায়তা করে তার উদাহরণ?
- সিএসএস স্প্রাইট ব্যবহার করার সুবিধা
- সিএসএস স্প্রিটসের সাথে কাজ করার সময় কোনও বিকাশকারীকে কী করতে হবে?
- সিএসএস স্প্রাইট শিট কীভাবে তৈরি করবেন?
- সিএসএস স্প্রিটসের সাথে কীভাবে কাজ করবেন?
- সিএসএস স্প্রাইটস ব্যবহারকারী সংস্থাগুলি
স্প্রাইট কী?
একটি স্প্রাইট হ'ল একক চিত্র যা কোনও গেমের বৃহত্তর দৃশ্যের অংশ। একাধিক স্প্রিটকে একটি বড় চিত্রের সাথে একত্রিত করা হয় যার নাম স্প্রাইট শিট sheet একবার স্প্রিট শিটটি স্মৃতিতে লোড হয়ে গেলে অ্যানিমেশনের মায়াজাল দেওয়ার জন্য বিভিন্ন স্প্রিটগুলি দ্রুত ধারাবাহিকতায় রেন্ডার করা হয়। গেমটিতে দৃশ্যধারণের জন্য দশ-শতাধিক বিভিন্ন স্প্রাইটের জন্য এটি একসাথে করা হয়।
মূল ধারণাটি হ'ল একাধিক চিত্র লোড করা এবং প্রদর্শন করার তুলনায় কোনও চিত্র লোড করা এবং এটির যে কোনও অংশ প্রয়োজন যেখানে প্রদর্শন করা অনেক দ্রুত faster
সিএসএস স্প্রাইট কী: একটি দ্রুত ওভারভিউ?
সিএসএস স্প্রাইট একটি কৌশল যা ওয়েব ডেভেলপাররা প্রায়শই ওয়েব পৃষ্ঠাগুলির কর্মক্ষমতা অনুকূল করতে ব্যবহার করে। এই কৌশলটিতে, একই মাত্রার একাধিক ছোট চিত্রগুলি একক একটি বড় চিত্রের সাথে একত্রিত হয় called স্প্রাইট শীট বা টাইল সেট । এই স্প্রিট শিটটি তখন আমাদের যেখানে প্রয়োজন সেখানে পৃথক উপাদান প্রদর্শন করতে ব্যবহৃত হয়।
সাধারণত, লোগো, নেভিগেশন তীর, বোতামের মতো উপাদানগুলি স্প্রাইট শীটে অন্তর্ভুক্ত হয় কারণ এটি প্রায় একই মাত্রা এবং প্রায়শই একটি ওয়েব পৃষ্ঠায় ব্যবহৃত হয়।
এটি কীভাবে ওয়েব বিকাশে সহায়তা করে তার উদাহরণ?
সাধারণত, ওয়েব পৃষ্ঠাগুলি ডিজাইনের সময় চিত্রগুলি পৃথক ফাইল হিসাবে সংরক্ষণ করা হয় এবং ব্যবহৃত হয়। সুতরাং, যখন কোনও ব্যবহারকারী কোনও ওয়েবপৃষ্ঠা খুলবে, ব্রাউজারকে এই প্রতিটি ফাইলের জন্য একটি এইচটিটিপি অনুরোধ করতে হবে, সেগুলি আলাদাভাবে ডাউনলোড করতে হবে এবং তাদের প্রদর্শন করতে হবে। এটি কোনও পৃষ্ঠার লোড বারের দিকে নিয়ে যায় কারণ কোনও নির্দিষ্ট ওয়েব পৃষ্ঠায় বড় আকারের ছোট ছোট চিত্র যেমন বোতাম, আইকন, লোগো থাকতে পারে।
সিএসএস স্প্রাইটগুলি বিকাশকারীদের এই ঘন ঘন ব্যবহৃত ছোট চিত্রগুলি একটি বড় চিত্রের সাথে সংযুক্ত করতে সহায়তা করে। ব্রাউজারটি কেবল তখনই একটি ফাইল ডাউনলোড করতে হয় যা এর পরে ব্যবহৃত হয়চিত্রটি অফসেট করে প্রয়োজনীয় বিভাগটি প্রদর্শন করুন।
সিএসএস স্প্রাইট ব্যবহার করার সুবিধা
সাধারণ চিত্রগুলির চেয়ে CSS স্প্রাইট ব্যবহার করার দুটি প্রধান সুবিধা রয়েছে:
দ্রুত পৃষ্ঠা লোড হচ্ছে: ওয়েব পৃষ্ঠায় ব্যবহৃত চিত্রগুলি শীটটি ডাউনলোড হওয়ার সাথে সাথে প্রদর্শিত হওয়ার সাথে সাথে পৃষ্ঠা লোডিংয়ের সময় বাড়ায়।
বৃহত্তর থ্রুপুট এবং নিম্ন সংস্থান ব্যবহার: এই কৌশলটি কেবল পৃষ্ঠা লোডটিকে দ্রুত লোড করে শেষ ব্যবহারকারীর অভিজ্ঞতা উন্নত করে না,তবে এটি কম সংখ্যক এইচটিটিপি অনুরোধ করা হওয়ায় নেটওয়ার্ক জঞ্জাল হ্রাস করে।
সিএসএস স্প্রিটসের সাথে কাজ করার সময় কোনও বিকাশকারীকে কী করতে হবে?
স্বতন্ত্র চিত্রগুলির সাথে কাজ করার সময়, বিকাশকারী কেবল HTML ট্যাগ দিয়ে কাজ করতে পারেন এবং প্রয়োজনে এটি সিএসএসে স্টাইল করুন। তবে সিএসএস স্প্রাইটসের সাথে কাজ করার সময়, একজন বিকাশকারীকে দুটি নির্দিষ্ট কাজ করা দরকার:
- স্প্রাইট শীট তৈরি
ওয়েব পৃষ্ঠার বিকাশকালে যদি বিকাশকারী সিএসএস স্প্রিট ব্যবহার করার সিদ্ধান্ত নেন, তাকে প্রথমে গ্রিডের মতো প্যাটার্নে সমস্ত পছন্দসই উপাদানগুলির মতো বোতাম, লোগো ইত্যাদি মার্জ করে স্প্রিট শিটটি তৈরি করতে হবে। এটি ফটোশপ বা জিম্পের মতো কোনও চিত্র সম্পাদনা প্রোগ্রাম ব্যবহার করে করা যেতে পারে। এছাড়াও অনেকগুলি অনলাইন সরঞ্জাম উপলব্ধ রয়েছে যা আপনাকে স্প্রিট শীট তৈরি করতে সহায়তা করে। এই সরঞ্জামগুলি পরে এই নিবন্ধে আলোচনা করা হয়েছে।
- ব্যবহার করে স্প্রাইটের একটি নির্দিষ্ট উপাদান অ্যাক্সেস করুন সিএসএস পটভূমি-অবস্থান সম্পত্তি
একবার স্প্রাইট শীট প্রস্তুত হয়ে গেলে, বিকাশকারীকে তখন শীটের বিভিন্ন অংশে অ্যাক্সেসের জন্য সিএসএস অ্যাট্রিবিউট ব্যবহার করতে হয়।
- প্রস্থ: স্প্রাইটের প্রস্থ
- উচ্চতা: স্প্রাইটের উচ্চতা
- পটভূমি: স্প্রাইট শিটের রেফারেন্স
- পটভূমি অবস্থান: স্প্রাইট শীটের কেবলমাত্র প্রয়োজনীয় অংশ অ্যাক্সেস করতে মান (অফ পিক্সেল) অফসেট
সিএসএস স্প্রাইট শিট কীভাবে তৈরি করবেন?
আপনার ছোট চিত্রগুলিকে গ্রিডে সাজানোর জন্য আপনি যে কোনও চিত্র সম্পাদনা সফ্টওয়্যার ব্যবহার করতে পারেন তবে নীচে দুটি সহজ পদ্ধতি নিয়ে আলোচনা করা হয়েছে:
1. অনলাইন স্প্রাইট শিট তৈরির সরঞ্জাম
লিঙ্ক: toptal.com/developers/css/sprite-generator/
এই সরঞ্জামটি কেবল ব্যবহারের জন্য নিখরচায় নয় তবে স্প্রেট শিটটি উল্লেখ করার সময় আপনাকে প্রয়োজনীয় সিএসএস কোড সরবরাহ করতে পারে। এছাড়াও, আপনি উপাদানগুলির মধ্যে প্যাডিং এবং তাদের প্রান্তিককরণ পরিবর্তন করার মতো বিভিন্ন বৈশিষ্ট্য সহ চারপাশে ঝাঁকুনি দিতে পারেন।
২. স্প্রিটির সাথে স্প্রিট শীট তৈরি করা
আপনি গ্রান্ট, নোড বা গুল্প ব্যবহার করছেন, আপনি স্প্রেটি নামে একটি প্যাকেজ ইনস্টল করতে পারেন যা আপনাকে পিএনজি, জেপিজি, ইত্যাদি বিভিন্ন ফর্ম্যাটে একটি স্প্রাইট শীট তৈরি করতে সহায়তা করবে
প্রথমত, আপনার ব্যবহার করে স্প্রেটিটি ইনস্টল করতে হবে:
এনপিএম স্পিরিটি ইনস্টল করুন -জি
তারপরে, স্প্রাইট শিট তৈরি করতে, নিম্নলিখিত কমান্ডটি ব্যবহার করুন:
স্প্রিটিটি। / আউটপুট- ডিরেক্টরী /। / ইনপুট- ডিরেক্টরি: //
সিএসএস স্প্রিটসের সাথে কীভাবে কাজ করবেন?
এই উদাহরণে, আমরা নিম্নলিখিত স্প্রিট শীটটি ব্যবহার করব:
উপরের ছবিটিতে আপনি দেখতে পাচ্ছেন ছয়টি আইকন (ইনস্টাগ্রাম, টুইটার এবং ফেসবুক) গ্রিডের মতো প্যাটার্নে সাজানো হয়েছে। প্রথম সারিতে, আমাদের একটি স্বাভাবিক অবস্থা রয়েছে এবং দ্বিতীয় সারিতে, আমাদের তাদের হোভারের অবস্থা রয়েছে (চিত্রটি প্রদর্শিত হবে যখন আমরা তাদের উপর মাউস কার্সারটি হোভার করি)।
যদি আপনি উপরে আলোচনা করা সরঞ্জামগুলি ব্যবহার করে আপনি স্প্রিট শিটটি তৈরি করেন তবে আপনি সিএসএসে প্রয়োজনীয় অফসেটগুলি ইতিমধ্যে জেনেছেন তবে আপনি যদি অন্য কোনও সরঞ্জাম ব্যবহার করেন বা আপনাকে কেবল কিছু স্প্রাইট শিট দেওয়া হয় তবে চিন্তা করবেন না, আমরা এমন একটি পদ্ধতি নিয়ে আলোচনা করব যা আপনাকে প্রয়োজনীয় উপাদানটির অফসেট পেতে সহায়তা করবে।
এখন এমএস পেইন্ট ব্যবহার করে ছয় আইকনগুলির জন্য প্রতিটি জন্য প্রয়োজনীয় অফসেটগুলি পাওয়ার খুব সহজ উপায়টি দেখতে দিন। স্প্রেটসের সাথে কাজ করার জন্য এটি কোনও আদর্শ সমাধান নাও হতে পারে তবে এটির যেহেতু বৈশিষ্ট্যটি মাউস কার্সারের সমন্বয়গুলি সরবরাহ করে তাই এটি প্রয়োজনীয় এক্স এবং ওয়াই সমন্বয় পেতে ব্যবহার করা যেতে পারে।
প্রথমে আপনার স্প্রাইট শীট চিত্রটি খুলুন (সমস্ত ছোট চিত্রযুক্ত গ্রিড) এবং আপনার যে মাউসটি কার্সারটি নিতে চান তার উপরের বাম কোণে নিয়ে যান।
আপনার স্প্রাইটের শীর্ষ-বাম দিকের স্থানাঙ্কগুলি (উপরে বাম ইনস্টাগ্রাম চিত্র) হয়ে গেলে আপনি সিএসএস কোড ব্যবহার করে যেখানেই প্রয়োজন সেখানে এই নির্দিষ্ট স্প্রিটটি প্রদর্শন করতে পারেন:
পটভূমি: ইউআরএল ('img_sprites.png')
পটভূমি অবস্থান: 0 0
প্রস্থ: 125px
উচ্চতা: 125px
আমাদের আইকনগুলির মাত্রাটি হওয়ায় আমরা প্রস্থ এবং উচ্চতাটি 125 পিক্সেল হিসাবে ব্যবহার করছি। একই সারিতে পরবর্তী চিত্র (টুইটার) আনতে, আমরা নিম্নলিখিত কোডটি ব্যবহার করি:
পটভূমি: ইউআরএল ('img_sprites.png')
পটভূমি-অবস্থান: -128px 0px
প্রস্থ: 125px
উচ্চতা: 125px
উপরের স্নিপেটে পটভূমির অবস্থানের বৈশিষ্ট্যটি নোট করুন। (-128px, 0) এর অর্থ আমরা ওয়াই-অ্যাক্সিসে 128 পিক্সেল (উপাদানগুলির মধ্যে প্যাডিং গ্রহণ করে) এবং 0 পিক্সেল দ্বারা বাম দিকে আমাদের স্প্রিট শীটটি অফসেট করছি। আমরা যদি টুইটার হোভার আইকনটিতে প্রবেশ করতে পারি তবে আমাদের পটভূমি অবস্থানের বৈশিষ্ট্যটি হ'ল:
পটভূমি-অবস্থান: -128px -128px
এইভাবে, আমরা এখন CSS ব্যবহার করে আমাদের স্প্রাইট শিটের প্রতিটি উপাদান অ্যাক্সেস করতে পারি। এটি কীভাবে করা যায় তার একটি সম্পূর্ণ এইচটিএমএল এবং সিএসএস কোডের মধ্য দিয়ে আসা যাক।
ধাপ 1: প্রয়োজনীয় এইচটিএমএল কোড লেখা
নীচের কোডে, আমরা কেবল তিনটি লিঙ্ক যুক্ত করছি। এছাড়াও, আমরা আমাদের এইচটিএমএলকে স্টাইলশিটের সাথে যুক্ত করব (স্ক্রিন। সিএসএস)।
ধাপ ২: প্রয়োজনীয় সিএসএস লেখা। প্রথমত, আমরা আমাদের ভাগ করা আইকন ক্লাসটি স্টাইল করব। এখানে, আপনি দেখতে পাচ্ছেন যে আমরা তৈরি করা স্প্রাইট শীটটিতে আমরা উল্লেখ করছি।
/ * শেয়ারকৃত আইকন ক্লাস * /
span.icon একটি লিংক,
span.icon ক: পরিদর্শন করা হয়েছে{
প্রদর্শন:ব্লক
পাঠ্য-ইনডেন্ট:-9999px
পটভূমি চিত্র: ইউআরএল (./ img_sprites.png)
পটভূমি পুনরাবৃত্তি:না-পুনরাবৃত্তি
}
পদক্ষেপ 3: অফসেটগুলি ব্যবহার করে স্প্রাইট শীট থেকে স্বতন্ত্র আইকনগুলি পাওয়া।
/ * ইনস্টাগ্রাম আইকন * /
span.instگرام একটি লিংক,
span.instگرام ক: পরিদর্শন করা হয়েছে{
প্রস্থ:125px
উচ্চতা:125px
পটভূমি অবস্থান:0 0
}
/ * টুইটার আইকন * /
span.twitter একটি লিংক,
span.twitter ক: পরিদর্শন করা হয়েছে{
প্রস্থ:125px
উচ্চতা:125px
পটভূমি অবস্থান:-128px 0
}
/ * ফেসবুক আইকন * /
span.facebook একটি লিংক,
span.facebook ক: পরিদর্শন করা হয়েছে{
প্রস্থ:125px
উচ্চতা:125px
পটভূমি অবস্থান:-257px 0
}
সি ++ স্কোপ অপারেটর
পদক্ষেপ 4: অফসেটগুলি ব্যবহার করে স্প্রাইট শীট থেকে হোভার আইকনগুলি পাওয়া।
span.instگرام a: হোভার{পটভূমি অবস্থান:0 -128px}
span.twitter a: হোভার{পটভূমি অবস্থান:-128px -128px}
span.facebook a: হোভার{পটভূমি অবস্থান:-255px -128px}
সিএসএস স্প্রাইটস ব্যবহারকারী সংস্থাগুলি
শিল্পের অনেক বড় নাম তাদের ওয়েবসাইটের প্রতিক্রিয়াশীলতা উন্নত করতে CSS স্প্রাইট ব্যবহার করে। গুগল, ফেসবুক, অ্যামাজনের মতো সংস্থাগুলি এই পদ্ধতিটি ব্যাপকভাবে ব্যবহার করে কারণ এটি কোনও নির্দিষ্ট ব্যবহারকারীর জন্য প্রতি সেশনে এইচটিটিপি অনুরোধের সংখ্যা হ্রাস করতে সহায়তা করে। এই সংস্থাগুলি যে কোনও মুহুর্তে লক্ষ লক্ষ গ্রাহককে পরিষেবা দেয় তা আমরা বিবেচনায় নিলে এটি একটি বিশাল সুবিধা benefit
সিএসএস স্প্রাইটস কী এবং কীভাবে সেগুলির সাথে কাজ করবেন সে সম্পর্কে এখন আপনার মুঠোয়, আপনি সিএসএস শিখতে আপনার যাত্রার এক ধাপ কাছাকাছি are স্প্রেটসের মতো ধারণাগুলি আজকের সময়ে গেম-চেঞ্জার কারণ বিকাশকারীদের জন্য ওয়েবপৃষ্ঠা থেকে প্রতিটি বিট পারফরম্যান্স বের করা অত্যন্ত গুরুত্বপূর্ণ হয়ে উঠেছে।
আমাদের দেখুন যা প্রশিক্ষকের নেতৃত্বাধীন লাইভ প্রশিক্ষণ এবং বাস্তব জীবনের প্রকল্পের অভিজ্ঞতার সাথে আসে। এই প্রশিক্ষণটি আপনাকে ব্যাক-এন্ড এবং ফ্রন্ট-এন্ড ওয়েব প্রযুক্তিগুলির সাথে কাজ করার দক্ষতায় দক্ষ করে তোলে। এটিতে ওয়েব ডেভলপমেন্ট, জিউকিউরি, অ্যাঙ্গুলার, নোডজেএস, এক্সপ্রেসজেএস এবং মঙ্গোডিবি প্রশিক্ষণ অন্তর্ভুক্ত রয়েছে।
আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে এটি 'এইচটিএমএল চিত্রগুলি' ব্লগের মন্তব্য বিভাগে উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।