روز بخیر، امروز می خواهم به شما بگویم که چگونه یک آیکون CSS برای وب سایت خود بسازید. بله، در موارد دیگر، نه تنها نمادها، بلکه هر عنصر دیگری، به عنوان مثال، دکمه ها، منوها و غیره. حداقل گرافیک کل صفحه فرود.
مقاله باید به بخش برود، زیرا استفاده از sprites سرعت بارگذاری صفحه را افزایش می دهد، زیرا یک تصویر، حتی با اندازه بزرگتر، سریعتر از چندین تصویر کوچکتر بارگذاری می شود. این اتفاق می افتد زیرا بازدیدهای کمتری به سرور ایجاد می شود.
برای کسانی که نمی دانند، sprite به این صورت است:
یعنی در رابطه با وب این یک عکس با عناصر زیاد است که هر کدام به دلیل موقعیت یابی در جای مناسب سایت نشان داده شده است.
اما من در مقاله بعدی به این سوال می پردازم که یک صفحه با استفاده از sprites چقدر سریعتر یا کندتر بارگذاری می شود و قطعاً در دسته بندی مناسب قرار می گیرد. پس مشترک شوید توییترتا اطلاعیه مقاله را از دست ندهید.
و در این پست سعی می کنم با استفاده از نمونه آیکون های وبلاگم، عملکرد درونی نحوه استفاده از اسپرایت ها در وب را به شما نشان دهم.
بنابراین، من یک نماد ساده در فتوشاپ ایجاد کردم. من خیلی اذیت نشدم، اما از هر نوع یک جفت ساختم تا نشان دهم نه تنها چگونه از یک اسپرایت استفاده کنیم، بلکه چگونه می توان از اسپرایت برای ایجاد انیمیشن شبه استفاده کرد.
اکنون باید نشانه گذاری html را ترسیم کنید. هیچ چیز غیرعادی نیست لیست نامرتب:
مشترک شدن در به روز رسانی
به جای "#"، آدرس حساب های خود را وارد کنید. عنوان را به پیوندها اضافه کنید. و بیایید به اضافه کردن سبک ها ادامه دهیم!
ایجاد css sprite – css markupاستایل های ظرف را تنظیم کنید:
سوکستی (
عرض: 270 پیکسل؛
ارتفاع: 150 پیکسل؛
حاشیه: 200 پیکسل خودکار;
پس زمینه: url(../images/bg-soc.png) no-repeat;
بالشتک: 15 پیکسل؛
}
ما سبک‌ها را برای متن و یک لیست بدون شماره توضیح می‌دهیم که آنها را به سمت چپ شناور می‌کنیم (روش استاندارد برای منوها و عناصر مشابه)
Socseti ul (
سرریز: پنهان;
عرض: 246 پیکسل؛
حاشیه: 20 پیکسل خودکار;
}
Socseti ul Li (
شناور به سمت چپ؛
margin-left:2px;
}
Socseti ul li: آخرین فرزند(
حاشیه سمت راست: 2 پیکسل
}
حالا سرگرمی شروع می شود. بیایید سبک های کلی پیوندها را تنظیم کنیم:
Socseti ul li a (
نمایش: بلوک؛
عرض: 59 پیکسل؛
ارتفاع: 59px;
}
همانطور که ممکن است متوجه شده باشید، من هنگام ایجاد sprite اشتباه جزئی کردم و به همین دلیل به اندازه احمقانه 59x59 پیکسل رسیدم - اما این بر درک بصری تأثیری نداشت. بیا ادامه بدهیم...
بیایید یک تصویر پس زمینه برای پیوند اول تنظیم کنیم.
آ. توییتر (
انتقال: 0.3s;
}
آ. توییتر: شناور(
انتقال: 0.3s;
}
برای اینکه عنصر sprite مورد نیاز نمایش داده شود، باید در موقعیت قرار گیرد. برای این کار، پس از تنظیم پس زمینه لینک، باید مختصات را تنظیم کنید.
به عنوان مثال، ممکن است متوجه شده باشید که در sprite اولین عنصر نماد شبکه اجتماعی "VKontakte" است و اولین نماد در منوی اجتماعی است. نمادها - "تویتر". یعنی اگر پهنای آیکون های من 59 پیکسل باشد، باید پس زمینه را به 59- پیکسل برسانم. و همچنین، من می خواهم رنگ از خاکستری به رنگی تغییر کند. برای این کار باید پس زمینه را 59 پیکسل کم کنم. که در اینجا نشان داده شده است:
آ. توییتر (
پس زمینه: url(../images/css-sprite-iconok2.png) -59px -59px بدون تکرار;
انتقال: 0.3s;
}
برای اینکه سبک‌های کلاس هنگام شناور کردن تغییر کنند، باید کلاس شبه شناور را تنظیم کنید. کاری که من اینجا انجام می دهم:
آ. توییتر: شناور(
پس زمینه: url(../images/css-sprite-iconok2.png) -59px 0 بدون تکرار.
انتقال: 0.3s;
}
و برای اینکه عکس تغییر موقعیت دهد، مختصات نمایش را تغییر دادم.
ویژگی transition برای تنظیم سرعت تغییر موقعیت استفاده می شود. روی 0.3 ثانیه تنظیم کردم.
به روشی مشابه، باید موقعیت عناصر باقیمانده اسپرایت را تنظیم کنید، آن را با ۱۱۸ پیکسل حرکت دهید تا نماد RSS نمایش داده شود و برای نمایش نماد "VK" آن را به ۰ پیکسل برگردانید.
امیدوارم مقاله برای شما مفید بوده باشد و اکنون از css sprites برای وب سایت های خود استفاده کنید. فردا سعی خواهم کرد تجزیه و تحلیل کنم که سایت با استفاده از این فناوری چقدر سریعتر بارگذاری می شود.
حدود یک هفته پیش، یکی از مشترکین من از من خواست که در مورد CSS sprites، اینکه آنها به طور کلی هستند و با چه چیزهایی استفاده می شوند صحبت کنم. بنابراین، امروز تصمیم گرفتم این مقاله را بنویسم که در آن به شما بگویم CSS sprites چیست و کجا استفاده می شود.
یک CSS sprite یک تصویر ترکیبی است که شامل بسیاری از تصاویر مختلف است و با استفاده از ویژگی background-position تصویر مورد نظر را در جای مناسب قرار می دهیم. فرض کنید یک دکمه داریم و وقتی نشانگر ماوس را روی آن می‌برید، این دکمه ظاهر خود را تغییر می‌دهد. می توانید برای مثال 2 عکس بسازید و سپس یک یا عکس دیگری را به عنوان پس زمینه دکمه جایگزین کنید. اما عیب این روش واضح است: 2 برابر فایل بیشتر، تقریباً 2 برابر حجم، بنابراین زمان بارگذاری 2 برابر بیشتر از 1 تصویر. و تکنیک CSS sprite به شما این امکان را می دهد که فقط یک عکس ایجاد کنید که دارای 2 پس زمینه دکمه به طور همزمان باشد.
برای روشن تر شدن موضوع، بیایید این مشکل را حل کنیم. ما یک تصویر داریم، فرض کنید، 20 پیکسل ارتفاع و 100 پیکسل عرض. عرض دکمه 50 پیکسل و ارتفاع آن 20 پیکسل است. در یک تصویر ما تصاویر هر دو حالت را (یکی پس از دیگری) قرار می دهیم. کد HTML به شکل زیر خواهد بود:
دکمه
و کد CSS:
آ (
پس زمینه: url("button.jpg") بدون تکرار بالا سمت چپ. // پس زمینه دکمه
نمایش: بلوک؛ // آن را به یک عنصر بلوک تبدیل کنید
ارتفاع: 20 پیکسل؛ // ارتفاع دکمه
عرض: 50 پیکسل؛ // عرض دکمه
text-decoration: هیچ; // زیرخط را بردارید
}
یک: شناور (
پس زمینه موقعیت: سمت راست بالا. // موقعیت پس زمینه را به گونه ای تغییر دهید که تصویر آفست شود
}
با این روش هوشمندانه می توانید تصاویر زیادی را در یک عکس ذخیره کنید. تاکید می کنم که تعداد زیادی عکس است و فقط 2 تا نیست. گاهی اوقات تقریباً کل سایت از یک عکس تشکیل شده است که شامل تمام تصاویر استفاده شده است. به نظر من این خیلی خوب نیست، اما حداقل تعداد فایل های تصویری و حداقل حجم بارگذاری صفحه خواهد داشت که همیشه خوب است.
دوست داشت:
27
دوست نداشتن: 4
ترجمه ای موجود نیست
جن
قبل یا بعد از "قبل" "بعد" "بعد"
angry_bird angry.png. index.html
ترجمه ای موجود نیست
CSS sprites گرافیک هایی برای وب سایت شما هستند که در یک فایل گرافیکی ترکیب شده اند. "چرا یک فایل؟" - تو پرسیدی. واقعیت این است که این رویکرد برای ذخیره تصاویر به شما امکان می دهد عملکرد صفحات وب را بهبود بخشید و همچنین تصاویر گرافیکی را به روشی سازمان یافته تر ذخیره کنید. بیایید نگاهی به برخی از بهترین روش ها برای استفاده از اسپرایت بیندازیم. نام اسپرایت ها ممکن است شما را به یاد بازی های اسپرایت، کنسول های بازی یکپارچهسازی با سیستمعامل و حتی بازی های مرورگرهایی بیاندازد که امروزه بسیار محبوب هستند:
بنابراین، برای طراحی وب، یک sprite فقط یک فایل بزرگ است که حاوی چندین تصویر برای سایت شما است و در زمان دانلود و انتقال فایل از طریق شبکه صرفه جویی می کند. به عنوان مثال، زمانی که یک اسپرایت شامل 20-30 تصویر باشد، این می تواند بار روی سرور را به میزان قابل توجهی کاهش دهد، زیرا اگر این تصاویر به طور جداگانه ذخیره می شدند، سرور باید 20-30 درخواست جداگانه برای به دست آوردن هر یک از این تصاویر ارائه دهد. به لطف sprite، تنها یک درخواست HTTP به سرور ارسال می شود - برای دریافت یک تصویر. یک اسپرایت ممکن است از نظر بصری برای چشم "خوانا" نباشد، زیرا وظیفه اصلی آن تنها مونتاژ "قطعات" مختلف طراحی شما با هم است. به عنوان مثال، یک sprite می تواند به شکل زیر باشد:
Sprites توسط اکثر سایت های مدرن استفاده می شود، و VKontakte معروف نیز از این قاعده مستثنی نیست. به عنوان مثال، به این صورت است که "قطعات" رابط را در یک فایل ذخیره می کند - یعنی نمادهای آشنا:
نکته مهم در مورد استفاده از CSS sprites این است که شما فقط باید یک فایل گرافیکی حاوی تمام تصاویر خود را به سرور بفرستید، نه بسیاری از تصاویر جداگانه - و از طریق CSS می توانید هر بخش کوچکی از آن فایل گرافیکی را به عنوان پس زمینه یک عنصر نمایش دهید. برخی از مردم فکر می کنند که تصاویر فردی سریعتر بارگذاری می شوند، اما این درست نیست. هنگام آپلود یک فایل گرافیکی با تعداد زیادی عکس، فقط یک درخواست به سرور ارسال می کنیم و در هنگام آپلود تعداد زیادی عکس، درخواست های بیشتری را به سرور ارسال می کنیم. ترکیب تصاویر در یک فایل نه تنها تعداد درخواست های HTTP را به میزان قابل توجهی کاهش می دهد، بلکه حجم کلی فایل تصویر را نیز کاهش می دهد.
بگذارید مثال دیگری از اسپرایت برایتان بزنم. به این صورت است که یک وب سایت معروف غربی که به طراحی اختصاص داده شده است، عناصر گرافیکی را ذخیره می کند:
ممکن است بپرسید بهترین زمان برای تهیه اسپرایت چه زمانی است؟ برای این کار دو رویکرد متفاوت وجود دارد.
رویکردهای مختلف - ایجاد sprite قبل و بعد از ایجاد سایتدو روش متداول در هنگام ایجاد یک صفحه sprite وجود دارد - آن را قبل یا بعد از ایجاد سایت خود بسازید. شما می توانید قبل از ایجاد سایت، تمام تصاویر را در یک صفحه sprite قرار دهید. این همان چیزی است که ما آن را رویکرد "قبل" می نامیم. علاوه بر این، می توانید تمام تصاویر را به صورت فایل جداگانه ایجاد کنید و ویرایش آنها را آسان تر کنید. هنگامی که سایت ساخته شد و همه تصاویر آماده شدند، می توانید به سرعت و به آسانی یک صفحه sprite را به صورت دستی یا با استفاده از یکی از چندین ابزار ایجاد کنید. ما این را رویکرد «بعد» می نامیم. اگر برگه‌های sprite برای شما جدید هستند یا در طراحی وب تازه کار هستید، روش «بعد» برای شما مناسب‌تر خواهد بود. ابزارها، خدمات و برنامه های زیادی برای کمک به شما در ایجاد sprite وجود دارد که اکثر آنها به صورت رایگان توزیع شده و در دسترس هستند.
چیدمان تصاویر در اسپرایت به صورت سازمان یافتههنگام ایجاد یک sprite در فتوشاپ، توصیه می شود بلافاصله همه تصاویر را به صورت سازماندهی شده و به ترتیب خاصی که توسط شما انتخاب شده است قرار دهید تا بعداً کار با آنها آسان و ساده باشد. سعی کنید همیشه فضای هر تصویر اسپرایت را به نزدیکترین 10 پیکسل گرد کنید یا اگر اندازه همه آنها یکسان است فضای بیشتری در اطراف آنها بگذارید. وقتی صحبت از نوشتن سبک CSS می شود، نیازی به یادداشت اندازه گیری مختصات نخواهید داشت و احتمال اینکه اعداد مختصات تصاویر مورد نظرتان را فراموش کنید کمتر خواهد بود. در اینجا نمونه ای از قرار دادن موفقیت آمیز تصاویر مختلف در یک sprite آورده شده است:
بنابراین، ما با مفهوم sprite در طراحی وب آشنا شدیم، اما تئوری بدون عمل چیزی نیست. بنابراین، اکنون اولین اسپرایت خود را ایجاد می کنیم و یاد می گیریم که چگونه یک انیمیشن ساده در یک صفحه HTML بسازیم. مثال ما بر اساس شخصیتی از بازی Angry Birds خواهد بود - این یک پرنده قرمز خنده دار است. ابتدا بیایید یک تصویر اسپرایت با فرمت PNG. حاوی 4 مرحله انیمیشن پرنده آماده کنیم:
بیایید یک دایرکتوری angry_bird در جایی روی دیسک ایجاد کنیم - فایل های نمونه خود را در آنجا قرار می دهیم. ما sprite را با birds در این دایرکتوری ذخیره می کنیم و فایل angry.png را فراخوانی می کنیم. گام بعدی ایجاد یک فایل در همان دایرکتوری به نام index.html است - این صفحه آزمایشی ما با انیمیشن خواهد بود. سپس این فایل را در ویرایشگر باز کنید و کد زیر را در آن قرار دهید:
درس وب سایت - نمایش کار با sprites $(document).ready(function() ( // در اینجا کد jQuery خواهد بود که انیمیشن را ایجاد می کند ));
بگذارید کمی توضیح بدهم که الان چه کار کرده ایم. ابتدا سند HTML خود را روی UTF-8 encoding قرار می دهیم، به این معنی که باید index.html خود را در آن کدگذاری ذخیره کنیم. شما همچنین می توانید یکی دیگر را تنظیم کنید، به عنوان مثال، ویندوز-1251 - برای وظیفه ما این مهم نیست. سپس فایل style.css را به سند وصل کردیم (هنوز در دایرکتوری angry_bird ما نیست، کمی بعد آن را ایجاد خواهیم کرد). ما همچنین پیوندی را به یک اسکریپت خارجی تنظیم کردیم و کتابخانه jQuery را متصل کردیم - با استفاده از jQuery به صورت پویا تصاویر پرنده خود را تغییر می دهیم و "فاز" آن را از sprite تغییر می دهیم. ما همچنین یک بلوک جاوا اسکریپت داخلی آماده کرده‌ایم که در آن کدی که پرنده را متحرک می‌کند، قرار می‌دهیم. و در نهایت، بدنه اصلی سند حاوی یک لینک واحد است که داخل آن یک بلوک DIV قرار دارد و شناسه آن بر روی birdImage تنظیم شده است و کلاس پیش فرض bird-sleeping است. این بدان معنی است که پرنده ما هنگام باز کردن صفحه "خواب" خواهد بود - این مربوط به تصویر پایین سمت چپ در داخل جن است - جایی که چشمانش بسته است. اکنون زمان آن فرا رسیده است که اسپرایت خود را برش دهیم، یعنی. تصاویر فردی را از آن انتخاب کنید.
برش اسپرایت با استفاده از سرویس SpriteCow.Comوظیفه "برش دادن" یک اسپرایت کاملاً کار فشرده است - به مراقبت نیاز دارد تا با مختصاتی که هر تصویر را در اسپرایت تعریف می کند اشتباه نکنید. خوشبختانه امروزه خدماتی وجود دارد که این سردرد را به طور کامل از دست طراح و طراح چیدمان دور می کند. من از سرویس http://spritecow.com برای برش استفاده می کنم و آن را به شما توصیه می کنم. ماهیت این سرویس ساده و بسیار راحت است - ما هر تصویر پرنده را با ماوس انتخاب می کنیم و SpriteCow کد CSS آماده با مختصات را به ما می دهد. تنها کاری که باید انجام دهیم این است که به سادگی برای هر مرحله از پرنده 4 سبک تنظیم کنیم! پس از ورود به سایت، 2 دکمه را مشاهده می کنیم - "تصویر باز" و "نمایش مثال". ما به اولین دکمه نیاز داریم، روی آن کلیک کنید:
در گفتگوی باز شده، فایل sprite ما angry.png را انتخاب کنید، پس از آن می بینیم که چگونه sprite ما در سایت بارگذاری شده است. در مرحله بعد، ما باید رنگ پس زمینه را تعیین کنیم، برای انجام این کار، روی نوار ابزار "انتخاب پس زمینه" کلیک کنید و به ناحیه سفید اسپرایت خود اشاره کنید - این به ما امکان می دهد هر مرحله از پرنده را به درستی برش دهیم:
اولین تصویر را انتخاب کنید و به طور خودکار کد CSS را برای آن دریافت کنید:
اکنون زمان ایجاد یک فایل style.css در فهرست angry_bird است. در آنجا ما به طور متوالی 4 قطعه کد CSS تولید شده را وارد می کنیم، اما به جای کلاس .sprite استاندارد که توسط SpriteCow به ما ارائه شده است، اجازه دهید سبک های خود را واضح تر فراخوانی کنیم. همچنین، از آنجایی که تصویر sprite را مستقیماً در ریشه دایرکتوری ذخیره می کنیم، عنصر مسیر غیر ضروری - imgs/ را از ویژگی پس زمینه حذف می کنیم. من اینجوری گرفتم:
/* پرنده «عادی». تصویر بالا سمت چپ در sprite */ .bird-normal ( پس زمینه: url("angry.png") no-repeat -12px -16px; عرض: 97px; ارتفاع: 94px; ) /* پرنده "Happy". تصویر بالا سمت راست در sprite */ .bird-happy ( پس زمینه: url("angry.png") no-repeat -118px -17px; عرض: 97px; ارتفاع: 94px; ) /* پرنده "Sleeping". تصویر پایین سمت چپ در sprite */ .bird-sleeping ( پس زمینه: url("angry.png") بدون تکرار -12 پیکسل -120 پیکسل؛ عرض: 97 پیکسل؛ ارتفاع: 94 پیکسل؛ ) /* پرنده "عصبانی". تصویر پایین سمت راست در sprite */ .bird-angry ( پس‌زمینه: url("angry.png") بدون تکرار -118 پیکسل -120 پیکسل؛ عرض: 97 پیکسل؛ ارتفاع: 94 پیکسل؛ )
آخرین مرحله نوشتن کد jQuery است که انیمیشن را ایجاد می کند.
اکنون که sprite را با موفقیت برش دادیم و 4 سبک برای هر تصویر در فایل style.css خود قرار دادیم، تنها کاری که باید انجام دهیم این است که مقداری کد jQuery بنویسیم که زمانی که هایپرلینک ما روی ماوس قرار می‌گیرد و زمانی که پیوند روی آن قرار می‌گیرد، یک انیمیشن اضافه می‌کند. کلیک شده است. همانطور که به یاد داریم، به طور پیش فرض ما کلاس bird-sleeping را داریم، i.e. پرنده قرمز ما هنگام باز کردن یک سند "خواب" می کند :)
تمام انیمیشن ها بر اساس 3 روش جی کوئری خواهند بود:
- hover - کنترل کننده برای نگه داشتن مکان نما روی پیوند و برای دور کردن مکان نما از پیوند. وقتی مکان نما را نگه می داریم، پرنده "بیدار می شود" - یعنی. کلاس عادی می شود
- mousedown - کنترل کننده برای کلیک کردن روی دکمه سمت چپ ماوس روی یک پیوند. در این حالت ، پرنده "خوشحال" می شود - یعنی. بلوک DIV به کلاس bird-happy اختصاص داده خواهد شد
- mouseup - کنترلر آزاد کردن دکمه سمت چپ ماوس. هنگام رها شدن، پرنده "عصبانی" می شود - یعنی. بلوک DIV به کلاس bird-angry اختصاص دارد
بنابراین، کد زیر را در محلی که در بلوک جاوا اسکریپت داخلی قرار داده شده در صفحه آماده کرده ایم، قرار می دهیم:
$(document).ready(function() ( // اینجا کد jQuery است که انیمیشن $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-normal"); ), function() ($( this ).removeClass("bird-normal"); $(this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird- خواب "); ))؛ $("#birdImage").mousedown(function() ($(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $ ( this).removeClass("bird-angry"); $(this).addClass("bird-happy"); )).mouseup(function() ($(this).removeClass("bird-sleeping"); $ (this).removeClass("bird-normal"); $(this).removeClass("bird-happy"); $(this).addClass("bird-angry"); )); ));
آماده! تست انیمیشن
باشه الان همه چی تموم شد! پرنده ما آماده است و با انیمیشن خود به صفحه زندگی بخشیده است! :) شما می توانید نسخه ی نمایشی را مشاهده کنید. آرشیو را با یک مثال در پایین مقاله دانلود کنید.
صنعت کامپیوتر در سال های اخیر بسیار بسیار بالا رفته است. اگر بازی‌های رایانه‌ای قبلاً فقط سرگرمی برای حلقه‌های باریکی از طرفداران بود، اکنون چیزی بیشتر شده‌اند. آنها می توانند توسط افراد در هر سنی بازی شوند و پروژه هایی ساخته می شوند که حتی با ظریف ترین سلیقه ها هم مطابقت دارند. و مهمتر از همه، فرصت‌های باورنکردنی ظاهر شده‌اند که قبلا غیرقابل تصور بودند، بنابراین اکنون بازی‌های رایانه‌ای از نظر گرافیک و فیزیک عملاً غیرقابل تشخیص از واقعیت هستند، می‌توانند کاربر را در جهان‌های ناشناخته غوطه‌ور کنند و به او اجازه می‌دهند داستان‌های باورنکردنی زندگی کند و کلید بازی باشد. شخصیت آنها اما در عین حال ، برخی از افراد نمی خواهند به روند "بازی" محدود شوند - آنها مجذوب روند ایجاد بازی هستند. با این حال، بیشتر این رویاپردازان در سطح فانتزی باقی می مانند، زیرا معتقدند این روند بسیار پیچیده است. در واقع، اینطور نیست، همانطور که تعداد زیادی از توسعه دهندگان مستقل که اکنون پروژه های زیادی را بدون بودجه زیاد یا پشتیبانی ناشر تولید می کنند، نشان می دهد. شما فقط باید از کوچک شروع کنید و به تدریج به جلو بروید. در این مقاله یاد خواهید گرفت که بازی sprites چیست و چگونه از آنها استفاده کنید، بنابراین می توانید شروع به ایجاد پروژه های خود کنید.
جن چیست؟اگر یک بازی کامپیوتری روی مانیتور خود دارید، چه چیزی در مقابل خود می بینید؟ پوسته گرافیکی این پروژه، بافت های مختلفی است که از پیکسل های ریز تشکیل شده است. اگر قصد دارید یک بازی کامپیوتری بسازید، پس باید با گرافیک زیاد کار کنید. اما اگر هنوز یک پروژه بزرگ را هدف قرار نداده اید، لازم نیست که با ویرایشگرهای گرافیکی سه بعدی کاملاً کار کنید. Sprites برای بازی هایی که می توانید در اینترنت دانلود کنید در اینجا به شما کمک می کند. اما این چی هست؟ چگونه می توان از آنها استفاده کرد و چگونه کار شما را آسان می کند؟ اسپرایت های بازی، بافت های آماده ای از شخصیت ها، اشیاء و ... هستند که می توانید آنها را در رایانه خود دانلود کرده و سپس در مراحل ساخت بازی از آنها استفاده کنید. این بدان معنی است که شما نیازی به کشیدن هر شی در بازی و همچنین هر مرحله از حرکت آن نخواهید داشت - شما از قبل همه چیز را آماده خواهید داشت. همانطور که می بینید، بازی اسپرایت می تواند زندگی شما را بسیار آسان تر کند.
نمای جن
اکنون شما یک ایده کلی از اینکه بازی sprites چیست دارید، اما این برای استفاده از آنها در عمل کافی نخواهد بود. ما باید بفهمیم که آنها دقیقاً چه هستند و چگونه آنها را در ایجاد بازی به کار ببریم. اگر می خواهید از sprites استفاده کنید، باید آنها را در رایانه خود دانلود کنید. در بیشتر موارد، آنها مانند یک فایل گرافیکی بزرگ یا حتی بزرگ با ده ها یا حتی صدها تصویر کوچک در پس زمینه شفاف به نظر می رسند. بر این اساس، می توانید این فایل بزرگ را به فایل های کوچک برش دهید تا دسترسی مستقیم به اسپرایت های خود داشته باشید. ممکن است به برخی از آنها نیاز نداشته باشید و بتوانید آنها را قطع کنید، بنابراین این روش بسیار راحت تر از دانلود ده ها یا صدها تصویر جداگانه است. شما به سادگی یک فایل بزرگ را انتخاب می کنید، یک منطقه را علامت گذاری می کنید و یک sprite دارید.
استفاده از اسپرایت
همانطور که به خوبی می دانید، در بیشتر موارد می توانید اسپرایت را برای بازی های دو بعدی پیدا کنید، زیرا تصاویر سه بعدی آنقدر استاندارد نیستند، بنابراین برای انتقال تمام حرکات یک شی سه بعدی فضای زیادی لازم است. در عین حال، کار با اسپرایت های دو بعدی بسیار ساده است. شما به سادگی اسپرایت ها را در ویرایشگری که در آن ایجاد می کنید بارگذاری می کنید و آنها را به هم می چسبانید تا جلوه های حرکتی ایجاد کنید. و سپس آن را در سطح بارگذاری کنید و از نتیجه لذت ببرید.
انتقال از اسپرایت به گرافیکشما نمی توانید تمام زندگی خود را با استفاده از اسپرایت ها برای ساخت بازی ها سپری کنید، بنابراین اگر جاه طلب هستید، یا باید نحوه استفاده از آنها را یاد بگیرید یا کسی را پیدا کنید که در این مهارت به شما کمک کند.
روش های زیادی برای بهینه سازی صفحات وب وجود دارد. برخی از آنها کار می کنند، برخی نه. با این حال، روش هایی وجود دارد که برای هر وب سایت و وبلاگی اجباری است. می خواستم در مورد یکی از آنها با شما صحبت کنم.
یکی از روش های اصلی بهینه سازی صفحات وب سایت است. بنابراین، امروز ما در مورد نحوه ترکیب تصاویر اسپرایت در یک وب سایت در CSS صحبت خواهیم کرد و در نتیجه سرعت بارگذاری آنها را افزایش می دهیم.
کمی تاریخچهدر گذشته‌های دور، زمانی که مودم‌ها در آپارتمان‌ها بوق می‌زدند و سرعت اتصال از 5 کیلوبیت بر ثانیه تجاوز نمی‌کرد، مردم درباره نحوه بارگذاری سریعتر سایت‌ها بدون پرداخت مبالغ گزاف برای ترافیک ورودی، به این موضوع فکر می‌کردند. آنها فکر کردند، یعنی فکر کردند و به این فکر افتادند که تصاویر استفاده شده در صفحه را به صورت اسپریت بسازند.
و ما می رویم...
ترکیب تصاویر در یک spriteو بنابراین، همانطور که قبلا متوجه شدیم، یک sprite چندین تصویر است که در یک پس‌زمینه شفاف مرتب شده‌اند و با استفاده از ویژگی‌های CSS قابل دسترسی هستند. موقعیت پس زمینه. اما لطفا آن را با کلاژ اشتباه نگیرید. Sprite ≠ کلاژ.
برای به دست آوردن یک اسپرایت، باید تمام دکمه‌ها، نمادها، گلوله‌ها و سایر موارد مزخرف را تا حد امکان فشرده در یک فایل PNG قرار دهید. فراموش نکنید، پس زمینه باید شفاف باشد. حالا با یک مثال به آن نگاه می کنیم.
فرض کنید یک فایل PSD با چنین دکمه زیبایی در 3 حالت داریم.
یک وبلاگ نویس معمولی خودآموخته چیدمان چیکار می کند؟ این دکمه را در هر حالت قطع می کند و آن را در فایل های جداگانه ذخیره می کند. یعنی یک دکمه از این مرد خوب 3 عکس می گیرد. و اگر استرس دارید، به یاد داشته باشید که هر تصویر در سایت یک درخواست HTTP اضافی است که سرور را بارگذاری می کند و وبلاگ شما کندتر و کندتر و کندتر و کندتر و کندتر و کندتر و کندتر کار می کند.
برای جلوگیری از این اتفاق، بسیار منطقی تر است که دکمه را در یک ذخیره کنید. برای این کار، همان فایل PSD را باز می کنیم، فلش ها، کتیبه ها و پس زمینه های بی فایده را از آن حذف می کنیم و تمام حالت های دکمه را تا حد امکان نزدیک به یکدیگر بدون همپوشانی مرتب می کنیم.
این همان چیزی است که ما به آن رسیدیم. به هیچ عنوان دکمه ها نباید روی هم قرار بگیرند.
عالی است، ما یک فایل گرافیکی آماده کرده ایم، حالا اجازه دهید نحوه چیدمان آن را به شما نشان دهم.
طرح جنچیدمان اسپرایت های CSS هیچ تفاوتی با چیدمان تصاویر معمولی ندارد، به استثنای یک BUT. شما باید نه تنها اندازه دقیق تصویری را که می خواهید نمایش دهید، بلکه مختصات آن را نیز بدانید. برای مثال، کل اسپرایت ما 330 پیکسل عرض و 150 پیکسل ارتفاع دارد.
اما فقط باید دکمه ای را با عرض 227 پیکسل و ارتفاع 41 پیکسل نمایش دهیم و مختصات دقیق آن را مشخص کنیم. اگر یک ویرایشگر html خوب ندارید، من می توانم.
یک فایل ایجاد کنید index.htmlو خطوط لازم کد، doctype و همه چیز را در آن بنویسید.
پس از انجام تمام مراحل استاندارد، بیایید سعی کنیم دکمه خود را نمایش دهیم.
بعد از برچسب بدنیک ظرف ایجاد کنید بخشبا کلاس دکمه- این دکمه ما خواهد بود.
| 1 |
اینجا جایی است که html ما به پایان می رسد و اکنون باید استایل های CSS را برای دکمه اضافه کنیم.
کد زیر نشان می دهد که ابتدا یک کلاس را اعلام می کنیم دکمه. سپس با استفاده از خواص ارتفاع و عرضاندازه دکمه ما را تنظیم کنید ویژگی زمینهبه ما امکان می دهد فایلی را که به عنوان sprite استفاده خواهیم کرد و موقعیت پس زمینهمختصات تصویر مورد نیاز خود را در این sprite تنظیم کنید. ساده است.
| 1 2 3 4 | دکمه (ارتفاع: 41 پیکسل؛ عرض: 227 پیکسل؛ پس‌زمینه: url (img/sprite.png)؛ موقعیت پس‌زمینه: 0 پیکسل -12 پیکسل؛ |
بیایید نگاهی دقیق تر به ملک بیندازیم موقعیت پس زمینه.
همانطور که از کد بالا می بینید، دو معنی دارد. مقدار اول به شما امکان می دهد مختصات تصویر را در امتداد محور X تنظیم کنید، و دومی، بنابراین، در امتداد محور Y. دکمه ما به هیچ وجه در امتداد محور X نمی پرد، زیرا همه حالت ها در زیر یکدیگر قرار دارند. بنابراین، برای اینکه حالت دوم دکمه در شناور ظاهر شود، باید مقدار مسئول محور Y را تغییر دهیم.
| 1 2 | .button :hover (پس زمینه موقعیت: 0px -56px ; ) .button :active (پس زمینه موقعیت: 0px -98px ; |
همانطور که می دانید، و اگر نه، بله، هر دکمه چندین حالت دارد.
ما از این خواص استفاده کردیم.
اگر برای ساختن دستی اسپرایت تنبل هستید و به طور کلی با فتوشاپ زحمت می کشید، یک سرویس رایگان فوق العاده به شما کمک می کند: spritepad.wearekiss.com. فقط تصاویر لازم را در محل کار بیندازید تا یک اسپرایت برای شما ایجاد کند.
در بازداشتCSS sprites یک گام بسیار مهم در افزایش سرعت وب سایت است. با آن با احترام رفتار کنید و سعی کنید از آن در همه جا استفاده کنید.
